@charset "UTF-8";
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections ========================================================================== */
/*** Remove the margin in all browsers. */
body { margin: 0; }

/*** Render the `main` element consistently in IE. */
main { display: block; }

/*** Correct the font size and margin on `h1` elements within `section` and`article` contexts in Chrome, Firefox, and Safari. */
h1 { font-size: 2em; margin: 0.67em 0; }

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics ========================================================================== */
/*** Remove the gray background on active links in IE 10. */
a { background-color: transparent; }

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/*** Add the correct font weight in Chrome, Edge, and Safari. */
b,
strong { font-weight: bolder; }

/** * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers. */
code,
kbd,
samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }

/*** Add the correct font size in all browsers. */
small { font-size: 80%; }

/*** Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
sub,
sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }

/* Embedded content ========================================================================== */
/*** Remove the border on images inside links in IE 10. */
img { border-style: none; }

/* Forms ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari. */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/*** Show the overflow in IE.
 * 1. Show the overflow in Edge. */
button,
input { /* 1 */ overflow: visible; }

/*** Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox. */
button,
select { /* 1 */ text-transform: none; }

/*** Correct the inability to style clickable types in iOS and Safari. */
button,
[type="button"],
[type="reset"],
[type="submit"] { -webkit-appearance: button; }

/*** Remove the inner border and padding in Firefox. */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }

/*** Restore the focus styles unset by the previous rule. */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }

/*** Correct the padding in Firefox. */
fieldset { padding: 0.35em 0.75em 0.625em; }

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers. */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/*** Add the correct vertical alignment in Chrome, Firefox, and Opera. */
progress { vertical-align: baseline; }

/*** Remove the default vertical scrollbar in IE 10+. */
textarea { overflow: auto; }

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10. */
[type="checkbox"],
[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

/*** Correct the cursor style of increment and decrement buttons in Chrome. */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button { height: auto; }

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari. */
[type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ }

/*** Remove the inner padding in Chrome and Safari on macOS. */
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari. */
::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ }

/* Interactive
   ========================================================================== */

/** Add the correct display in Edge, IE 10+, and Firefox. */
details { display: block; }

/** Add the correct display in all browsers. */
summary { display: list-item; }

/* Misc ========================================================================== */
/*** Add the correct display in IE 10+.*/
template { display: none; }

/*** Add the correct display in IE 10.*/
[hidden] { display: none; }



* { box-sizing: border-box; padding: 0; margin: 0; }
html, 
body { 
  scroll-behavior: smooth;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 62.5%; 
  font-weight: 400;
  --white: #fff;
  --black: #231815;
  --navy: #26287d; 
  --yellow: #ffe900;
  --red-dark: #831b22;
  --gray-light: #f5f5f5;
  --cyan: #009fe8;
  --fw-r: 400;
  --fw-b: 700;
}
body.is-clip {
  overflow: hidden;
}
@media screen and (min-width: 481px), print {
  html, 
  body { 
    min-width: 1200px;
  }
}
header, footer, main, aside, article, section, nav { display: block; }
iframe { width: 100%; height: 100%; }
.sp-only { display: none; }
.pc-only { display: inline; }
@media (max-width: 480px) {
  .sp-only { display: inline; }
  .pc-only { display: none; }
 img { width: 100%; height: auto; vertical-align: top; object-fit: cover; } 
}

/* Text */
p {
  font-size: 1.6rem;
  line-height: 2;
}
span {}

/* 注意書き */
.notes {
	font-size: 1.5rem;
  line-height: 1.5;
	text-indent: -1rem;
	padding-left: 2rem;
}
.notes::before {
	content: '※';
	display: inline-block;
	margin-right: 6px;
}

/* Link */
a {}
a:has(img) { transition: opacity ease-in-out .3s; }
a:has(img):hover { opacity: 0.5; }

/* Table */
table { width: 100%; }
table thead {}
table tbody {}
table tr {}
table tr th, 
table tr td {}
table caption {}

/* List */
ul, 
dl { list-style-type: none; }
ul {}
ul li {}

dl {}
dl dt {}
dl dd {}

ol {}
ol li {}

/* Title */
h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}

/* FlexBox */
.flexbox { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flexbox .flexbox__item {}
.flexbox.col2 .flexbox__item { width: 50%; }
.flexBox.col3 .flexItem { width: 33%; }

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

.mgbA { margin-bottom: 8px; }
.mgbB { margin-bottom: 16px; }
.mgbC { margin-bottom: 24px; }
.mgbD { margin-bottom: 32px; }
.mgbE { margin-bottom: 40px; }
.mgbF { margin-bottom: 48px; }
.mgbG { margin-bottom: 56px; }
.mgbH { margin-bottom: 64px; }
.mgbI { margin-bottom: 72px; }
.mgbJ { margin-bottom: 80px; }
.mgbK { margin-bottom: 88px; }
.mgbM { margin-bottom: 96px; }
.mgbN { margin-bottom: 104px; }
.mgbL { margin-bottom: 112px; }
@media (max-width: 480px) {
  .mgbA { margin-bottom: calc((8 / 480) * 100vw); }
  .mgbB { margin-bottom: calc((16 / 480) * 100vw); }
  .mgbC { margin-bottom: calc((24 / 480) * 100vw); }
  .mgbD { margin-bottom: calc((32 / 480) * 100vw); }
  .mgbE { margin-bottom: calc((40 / 480) * 100vw); }
  .mgbF { margin-bottom: calc((48 / 480) * 100vw); }
  .mgbG { margin-bottom: calc((56 / 480) * 100vw); }
  .mgbH { margin-bottom: calc((64 / 480) * 100vw); }
  .mgbI { margin-bottom: calc((72 / 480) * 100vw); }
  .mgbJ { margin-bottom: calc((80 / 480) * 100vw); }
  .mgbK { margin-bottom: calc((88 / 480) * 100vw); }
  .mgbM { margin-bottom: calc((96 / 480) * 100vw); }
  .mgbN { margin-bottom: calc((104 / 480) * 100vw); }
  .mgbL { margin-bottom: calc((112 / 480) * 100vw); }
}

/* ---------- HEADER ---------- */
#header {
  width: 100%;
  display: flex; 
  flex-direction: row;
  column-gap: 10px;
  background-color: var(--white);
  padding: 20px;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 10;
  transition: all ease-in-out .3s;
}
@media (max-width: 480px) {
  #header {
    padding: 0 4.16%;
  }
}
@page {
  size: A4 portrait; /* A4 縦向き */
  margin: 10mm;      /* 余白の設定 */
}
@media print {
  body {
    zoom: 0.8;
  }
  #header {
    position: initial;
  }
}

/* Grobal Navigation */
nav#gnav {
  display: flex;
  align-items: center;
}
@media (max-width: 480px) {
  nav#gnav {
    padding: 4.16%;
    position: fixed;
    top: 44px;
    left: 0;
    z-index: -1;
    height: calc(100vh - 44px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all ease-in-out .3s;
    width: 100vw;
    background-color: var(--navy);
    flex-shrink: 0;
    overflow-y: auto;
  }
  #header.is-open nav#gnav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

.gnavs {
  display: flex; 
  flex-direction: row;
  column-gap: 16px;
  align-items: center;
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
  line-height: 1.2;
}
.gnav__item {}
.gnav__item > a {
  padding: 0px 4px;
  text-decoration: none;
  color: var(--black);
  transition: background ease-in-out .3s, color ease-in-out .3s;
}
.gnav__item > a:hover,
.gnav__item > a.is-active {
  background-color: var(--navy);
  color: #fff;
}
@media (max-width: 480px) {
  .gnavs {
    flex-direction: column;
    justify-content: start;
    align-items: flex-start;
    width: 100%;
    font-size: 2.4rem;
  }
  .gnavs a {
    display: block;
    color: #fff;
    padding: 8px 56px 8px 0;
    position: relative;
  }
  .gnavs a::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .gnavs a::after {
    content: '';
    display: block;
    width: 44px;
    height: 1px;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: rotate(45deg);
    transform-origin: bottom right;
  }
  .gnav__item {
    width: 100%;
    margin-bottom: 16px;
  }
}

.logo__area {
  margin-right: auto;
  display: flex;
  align-items: center;
}
.logos { 
  display: flex; 
  flex-direction: row;
  column-gap: 16px;
  align-items: center;
}
.logo__item {}
.logo__item > a { display: block; }

/* Button */
.hamburger {
  display: none;
	width: 44px;
  height: 44px;
	background: var(--white);
  border: none;
	cursor: pointer;
}
.hamburger span {
	display: block;
	width: 100%;
	height: 2px;
	margin: auto;
  background: var(--black);
	transition: all 400ms 0s ease;
}
.hamburger span:not(:last-child) { margin-bottom: 8px; }

/* close */
.hamburger.is-close {
  position: relative;
  padding-top: 24px; 
}
.hamburger.is-close span {
  position: absolute;
  top: 50%;
  margin: 0;
}
.hamburger.is-close span:first-child { transform: rotate(45deg); }
.hamburger.is-close span:nth-child(2) { transform: rotate(135deg); }
.hamburger.is-close span:last-child { opacity: 0; }
@media (max-width: 480px) {
  .hamburger { display: block; }
}


/* ---------- CONTENTS ---------- */
#wrapper {}

/* Inner */
.inner {
  max-width: 1160px;
  margin-inline: auto;
}
.inner--min {
  max-width: 750px;
  margin-inline: auto;
}
@media (max-width: 480px) {
  .inner,
  .inner--min {
    padding-inline: 4.16%;
  }
}

.article {}
.section {}


/* ---------- FOOTER ---------- */
#footer {
  padding: 37px 0;
  background-color: var(--navy);
  color: var(--white);
}
.contact__area {}
dl.contacts {
  display: flex;
  column-gap: 24px;
  justify-content: center;
}
.contact__ttl {
  padding: 8px;
  margin-bottom: auto;
  font-size: 1.7rem;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid var(--white);
}
.contact__contents {}
.contact__contents ul {}
.contact__contents ul li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 24px;
  margin-bottom: 23px;
}
.contact__contents ul li:last-child { margin-bottom: 0; }
.contact__contents ul li > div > a {
  display: flex;
  align-items: center;
  width: 182px;
  height: auto;
}
.contact__contents ul li > div > p { line-height: 1.5; }
.contact__contents ul li > div > p > strong { font-size: 1.6rem; }
.copyrights { margin-top: 32px; }
p.copyright {
  font-size: clamp(1.2rem, 1.3rem, 1.4rem);
  line-height: 1.5;
  text-align: center;
}
@media (max-width: 480px) {
  dl.contacts { flex-direction: column; }
  dl.contacts > dt { margin-bottom: 16px; }
  .contact__contents ul li { grid-template-columns: 1fr; }
  .contact__contents ul li > div:first-child { margin-bottom: 8px; }
}


#kv img {
  width: 100%;
  height: auto;
  vertical-align: top;
  object-fit: cover;
}

#objectives-and-collaboration {
  position: relative;
  background: url('../img/bg_cyber.webp') var(--gray-light) bottom left no-repeat;
  background-size: 100% auto;
}
.introduction {
  padding-top: clamp(64px, 64px, 113px);
  background: linear-gradient(to bottom, var(--yellow) 0%, var(--gray-light) 5%, var(--gray-light) 60%, rgba(245, 245, 245, 0.9) 60%, rgba(255, 233, 0, 0.9) 100%);
}
@media (max-width: 480px) {
  #objectives-and-collaboration {
    background: url('../img/bg_cyber_sp@2x.webp') var(--gray-light) bottom left no-repeat;
    background-size: 100% auto;
  }
  .introduction {
    background: linear-gradient(to bottom, var(--yellow) -5%, var(--gray-light) 5%, var(--gray-light) 70%, rgba(245, 245, 245, 0.9) 70%, rgba(255, 233, 0, 0.9) 100%);
  }
}

.eyeblow {
  font-family: Zen Old Mincho, serif;
  font-weight: var(--fw-b);
  font-size: 0;
  line-height: 1.5;
  text-align: center;
  color: var(--navy);
}
.eyeblow > span { display: inline-block; font-size: clamp(2.1rem, 2.8rem, 2.8rem); }
.main-ttl {
  margin: 0 0 clamp(64px, 116px, 116px);
  font-family: Zen Old Mincho, serif;
  font-weight: var(--fw-b);
  font-size: clamp(4rem, 6.3rem, 6.3rem);
  letter-spacing: 0.2rem;
  line-height: 1.2;
  text-align: center;
  color: var(--navy);
}

.recommend { padding-bottom: 40px; }
.recommend__head {
  position: relative;
  margin-bottom: clamp(40px, 40px, 134px);
  padding: 40px 0 clamp(40px, 40px, 80px);
  background-color: rgba(255, 233, 0, 0.9);
  clip-path: polygon(100% 0%, 100% 10%, 50% 100%, 0% 10%, 0% 0%);
  transform: translateY(-0.5px);
}
.recommend__ttl {
  font-size: clamp(2.8rem, 2.8rem, 4.3rem);
  font-weight: var(--fw-b);
  letter-spacing: 0.3rem;
  line-height: 1.5;
  text-align: center;
  color: #3e3a39;
}
@media (max-width: 480px) {
  .recommend__head { clip-path: polygon(100% 0%, 100% 60%, 50% 100%, 0% 60%, 0% 0%); }
  .recommend__ttl { letter-spacing: 0rem; }
}

.recommend__list {
  display: flex;
  column-gap: 60px;
  justify-content: center;
}
.recommend__list__item {
  min-height: 350px;
  font-size: 2.1rem;
  line-height: 1.5;
  text-align: center;
  color: var(--white);
}
.icon {
  display: block;
  max-width: 244px;
  max-height: 140px;
  margin-bottom: 30px;
}
@media (max-width: 480px) {
  .recommend__list {
    flex-direction: column;
    margin-inline: 4.16%;
  }
  .recommend__list__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: auto;
    margin-bottom: 8px;
    padding: 8px;
    border: 2px solid var(--yellow);
    border-radius: 10px;
    text-align: left;
  }
  .icon { 
    width: 40%;
    margin-bottom: 0; 
  }
}

.ttl {
  margin-bottom: 40px;
  font-weight: var(--fw-r);
  font-size: clamp(2.2rem, 2.4rem, 2.6rem);
  line-height: 1.2;
  letter-spacing: 0.1rem;
  text-align: center;
  color: var(--white);
}
.ttl > span {
  display: inline-block;
  min-width: 400px;
  padding: 4px 24px 6px;
  background-color: var(--navy);
  border-radius: 22px;
}
.ttl::after {
  content: '';
  display: block;
  width: 63px;
  height: 50px;
  margin: 20px auto 0;
  background: url('../img/arrow_3line-btm.webp') center center no-repeat;
}
@media (max-width: 480px) {
  .ttl { margin-inline: 4.16%; }
  .ttl > span { min-width: 100%; }
}

#feature {
  padding-top: clamp(60px, 90px, 180px); 
}
.feature__item {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 10px;
  overflow: hidden;
}
.feature__item:last-child {
  margin-bottom: 0;
}
.feature__contents {
  width: 45%;
  padding: 70px 40px;
  background-color: var(--navy);
  color: var(--white);
}
.feature__ttl {
  margin-bottom: clamp(16px, 32px, 64px);
  font-family: Zen Old Mincho, serif;
  font-weight: var(--fw-r);
  font-size: clamp(3.8rem, 4rem, 4.5rem);
  line-height: 1.5;
}
.feature__ttl > span,
.feature__contents p > span {
  display: block;
}
.feature__contents p {
  font-family: Zen Old Mincho, serif;
  font-weight: var(--fw-r);
  font-size: clamp(2rem, 2.2rem, 2.4rem);
  line-height: 1.5;
}
.feature__imgs {
  width: 55%;
  overflow: hidden;
}
.feature__imgs img {
  width: auto;
  height: 100%;
  vertical-align: top;
  object-fit: cover;
}
.feature__item:nth-child(even) {
  flex-direction: row-reverse;
}
@media (max-width: 480px) {
  .feature__item {
    position: relative;
  }
  .feature__item:nth-child(even) {
    text-align: right;
  }
  .feature__contents {
    width: 100%;
    padding: 72px 0;
    background-color: transparent;
  }
  .feature__imgs {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .feature__ttl > span,
  .sp-label-txt > span {
    display: inline-block!important;
    padding: 8px;
    background-color: var(--navy);
    line-height: 1;
    margin-bottom: 10px;
  }
  .sp-ls-1 { letter-spacing: -0.2rem; }
}


.ttl02 {
  margin-bottom: clamp(20px, 40px, 80px);
  font-family: Zen Old Mincho, serif;
  font-weight: var(--fw-r);
  font-size: 3rem;
  letter-spacing: 0.1rem;
  line-height: 1.5;
  text-align: center;
}

#target-subject {
  padding: clamp(40px, 60px, 80px) 0 clamp(70px, 80px, 160px);
}
.target-subjects__area {
  margin-bottom: clamp(64px, 64px, 138px);
  font-family: Zen Old Mincho, serif;
  font-weight: var(--fw-r);
}
.target-subject {}
@media screen and (min-width: 481px), print {
  .target-subjects__area {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 64px;
  }
  .target-subject.subject01 { grid-area: 1 / 1 / 4 / 1; }
  .target-subject.subject02 { grid-area: 1 / 2; }
  .target-subject.subject03 { grid-area: 2 / 2; }
  .target-subject__footer { grid-area: 3 / 1 / 3 / 4; }
}
@media (max-width: 480px) {
  #target-subject { background-color: var(--gray-light); }
  .target-subject { margin-bottom: 48px; }
  .target-subject:last-child { margin-bottom: 0; }
}

.target-subject__ttl {
  margin-bottom: 8px;
  border-bottom: 1px solid var(--black);
  font-weight: var(--fw-r);
  font-size: 2.3rem;
  line-height: 1.5;  
}
.target-subject__ttl.kmu { border-color: var(--red-dark); }
.target-subject__ttl.oit { border-color: var(--cyan); }

ul.target-subjects {
  font-size: 1.9rem;
  line-height: 1.5;
}
ul.target-subjects.col2 {
  /*column-count: 2; 
  width: 100%; 
  column-gap: 2rem;*/
}
/*@media (max-width: 480px) {
  ul.target-subjects.col2 {
    column-count: 1; 
  }
}*/
ul.target-subjects > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}
/*ul.target-subjects > li::after {
  content: '';
  border-bottom: 5px dotted var(--black);
  order: 2;
  width: 100%;
}*/
ul.target-subjects > li > span {
  display: inline-block;
  white-space: nowrap;
}
ul.target-subjects > li > span.subject { order: 1; }
ul.target-subjects > li > span.unit { order: 3; text-align: right; }


.completion-requirements {
  display: flex;
  column-gap: 32px;
  padding: 32px;
  background-color: #fff;
  border: 3px solid var(--navy);
}
.completion-requirements__item {
  width: 50%;
  border-right: 1px solid var(--navy);
}
.completion-requirements__item:last-child {
  border-right: 0;
}
.completion-requirements__ttl {
  margin-bottom: clamp(24px, 24px, 55px);
  font-size: clamp(2.3rem, 2.4rem, 2.5rem);
  line-height: 1.5;
  text-align: center;
  color: var(--navy);
}
.completion-requirements__item > p:not(.notes) {
  font-size: clamp(2rem, 2.1rem, 2.2rem);
  line-height: 1.5;
}
@media (max-width: 480px) {
  .completion-requirements {
    flex-direction: column;
  }
  .completion-requirements__item { 
    width: 100%; 
    border-right: 0;
    border-bottom: 1px solid var(--navy);
    padding-bottom: 24px;
    margin-bottom: 24px;
  }
  .completion-requirements__item:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

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

.fs--small { font-size: 45%; }
.fs--xsmall { font-size: 25%; }
.fs--middle { font-size: 68%; }
.fs--min { font-size: 1.4rem; }

/* ---------- ANIMATION ---------- */
.fadein.is-active { animation: fadeIN 0.5s forwards; }
@keyframes fadeIN {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fadeup.is-active { animation: fadeUP 0.5s forwards; }
@keyframes fadeUP {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scaleup { transform: scale(0%); }
.scaleup.is-active { animation: scaleUP 0.5s forwards; }
@keyframes scaleUP {
  from {
    opacity: 0;
    transform: scale(0%);
    transform-origin: center center;
  }
  to {
    opacity: 1;
    transform: scale(100%);
    transform-origin: center center;
  }
}

.slideleft.is-active { animation: slideLeft forwards 0.5s; }
@keyframes slideLeft {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

.anm-delay1 { animation-delay: .1s; }
.anm-delay2 { animation-delay: .2s; }
.anm-delay3 { animation-delay: .3s; }
.anm-delay4 { animation-delay: .4s; }
.anm-delay5 { animation-delay: .5s; }