@charset "UTF-8";

/* RESET */
html {font-size: 10px;}
* {box-sizing: border-box; padding: 0; margin: 0; border: 0; vertical-align: baseline; font-family: "pretendard-r", sans-serif; font-weight: normal; font-size: inherit; line-height: 140%;}
ol, ul {list-style: none;}
a {text-decoration: none;}
h1, p {font-family: "pretendard-b", sans-serif;}

/* FONT */
@font-face {
  font-family: "pretendard-r";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Pretendard-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "pretendard-b";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Pretendard-Bold.woff2") format("woff2");
}

/* html, body */
html, body {display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 100vh; color: #fff; text-align: center; background: linear-gradient(180deg, #674994 0%, #8B5FBF 50%, #A875D8 100%);}

/* skip-navi */
.skip-navi {height: 0;}
.skip-navi a {position: fixed; z-index: 1; top: -3rem; width: 100%; height: 3rem; line-height: 3rem; font-size: clamp(1.3rem, 1.72vw, 1.4rem); color: #fff; text-align: center; background-color: #222; opacity: 0.8;}
.skip-navi a:focus {top: 0; left: 0;}

/* ico-box */
.ico-box {display: flex; justify-content: center; align-items: center; width: clamp(6rem, 4.2vw, 8rem); height: clamp(6rem, 4.2vw, 8rem); padding: 1rem; margin-inline: auto; border-radius: 5rem;
background: rgba(255, 255, 255, 0.2);}
.ico-box .ico {width: clamp(3rem, 2.1vw, 4rem); height: clamp(3rem, 2.1vw, 4rem);}
.ico-box i {display: inline-block; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='53' height='53' viewBox='0 0 53 53' fill='none'%3E%3Cpath d='M21.877 34.1244C21.6805 33.3625 21.2833 32.6672 20.727 32.1108C20.1706 31.5544 19.4753 31.1573 18.7134 30.9607L5.20671 27.4778C4.97627 27.4124 4.77346 27.2736 4.62905 27.0825C4.48463 26.8914 4.40649 26.6584 4.40649 26.4189C4.40649 26.1793 4.48463 25.9463 4.62905 25.7552C4.77346 25.5641 4.97627 25.4253 5.20671 25.3599L18.7134 21.8748C19.475 21.6785 20.1701 21.2817 20.7265 20.7257C21.2828 20.1697 21.6801 19.4749 21.877 18.7134L25.3599 5.20671C25.4247 4.97537 25.5633 4.77155 25.7547 4.62636C25.9461 4.48118 26.1797 4.40259 26.42 4.40259C26.6602 4.40259 26.8938 4.48118 27.0852 4.62636C27.2766 4.77155 27.4153 4.97537 27.48 5.20671L30.9607 18.7134C31.1573 19.4753 31.5544 20.1706 32.1108 20.727C32.6672 21.2833 33.3625 21.6805 34.1244 21.877L47.631 25.3577C47.8633 25.4218 48.0681 25.5603 48.2141 25.752C48.3601 25.9437 48.4391 26.1779 48.4391 26.4189C48.4391 26.6598 48.3601 26.8941 48.2141 27.0858C48.0681 27.2775 47.8633 27.416 47.631 27.48L34.1244 30.9607C33.3625 31.1573 32.6672 31.5544 32.1108 32.1108C31.5544 32.6672 31.1573 33.3625 30.9607 34.1244L27.4778 47.631C27.4131 47.8624 27.2744 48.0662 27.083 48.2114C26.8916 48.3566 26.658 48.4352 26.4178 48.4352C26.1775 48.4352 25.9439 48.3566 25.7525 48.2114C25.5611 48.0662 25.4225 47.8624 25.3577 47.631L21.877 34.1244Z' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M46.67 4.67627L46.67 13.4826' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M51.0783 9.07788L42.272 9.07788' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.62433 40.8972L7.62433 45.3004' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.82411 43.0989L5.42096 43.0989' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; background-position: center;}

/* main */
main {flex: 1; display: flex; width: calc(100% - 40px); flex-direction: column; justify-content: center; gap: 20px; margin-block: clamp(4rem, 2.6vw, 5rem); margin-inline: 20px;}
main > h1 {font-size: clamp(4rem, 4.2vw, 8rem);}
main > h2 {color: rgba(255, 255, 255, 0.95); font-size: clamp(1.6rem, 1.1vw, 2rem);}
main > p:first-of-type {color: rgba(255, 255, 255, 0.95); font-size: clamp(2rem, 1.6vw, 3rem); line-height: 140%; margin-top: clamp(1rem, 1.1vw, 2rem);}
main > p:last-of-type {width: fit-content; font-size: clamp(1.5rem, 1vw, 1.8rem); padding-block: clamp(1.5rem, 1.1vw, 2rem); padding-inline: clamp(2.5rem, 1.6vw, 3rem); margin-top: clamp(1rem, 1.1vw, 2rem); margin-inline: auto; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 5rem; background: rgba(255, 255, 255, 0.2);}

/* main animate */
main > * {opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease;}
main > *.animate {opacity: 1; transform: translateY(0);}

/* footer */
footer {display: flex; flex-direction: column; gap: 8px; font-size: clamp(1.3rem, 1.72vw, 1.4rem); padding-bottom: clamp(3rem, 3vw, 4rem);}
footer a, footer > address {color: rgba(255, 255, 255, 0.8);}
footer > small {color: rgba(255, 255, 255, 0.6);}