@charset "UTF-8";
/************************************************************************
* reset
************************************************************************/
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
-webkit-print-color-adjust: exact;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-underline-offset: .2em;
background: #f2f3f3;
min-height: 100vh;
min-height: 100dvh;
min-height: -webkit-fill-available;
min-height: -moz-available;
min-height: stretch;
color: #231815;
font-family: 'Noto Sans JP', sans-serif;
font-size: 16px;
font-size: 1rem;
font-weight: 500;
letter-spacing: .06em;
line-break: strict;
line-height: 1.5;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
word-break: normal;
overflow-wrap: anywhere;
}
article,
aside,
footer,
header,
nav,
section,
main {
display: block;
}
h1,
h2,
h3,
h4,
h5,
h6,
a,
p,
span,
em,
small,
strong,
sub,
sup,
mark,
del,
ins,
strike,
abbr,
dfn,
blockquote,
q,
cite,
code,
pre,
ol,
ul,
li,
dl,
dt,
dd,
div,
section,
article,
main,
aside,
nav,
header,
hgroup,
footer,
img,
figure,
figcaption,
address,
time,
audio,
video,
canvas,
iframe,
details,
summary,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
vertical-align: baseline;
margin: 0;
border: 0;
padding: 0;
font: inherit;
font-size: 100%;
}
a {
display: inline-block;
-webkit-transition: opacity .3s ease 0s;
transition: opacity .3s ease 0s;
cursor: pointer;
color: inherit;
text-decoration: none;
}
a:hover, a:focus-visible {
opacity: .7;
}
img,
svg {
display: inline-block;
vertical-align: top;
border: none;
width: 100%;
max-width: 100%;
height: auto;
}
video {
width: 100%;
height: auto;
}
code,
kbd,
pre,
samp {
font-size: inherit;
}
ul,
ol {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote::after,
blockquote::before,
q::after,
q::before {
content: '';
content: none;
}
address {
font-style: italic;
}
button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
margin: 0;
border: none;
background: transparent;
padding: 0;
font: inherit;
}
abbr,
acronym {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
cite {
font-style: italic;
}
code,
kbd {
background-color: #F8F8F8;
padding: .25em .5em;
}
em {
font-style: italic;
font-weight: 700;
}
pre {
display: block;
background-color: #F8F8F8;
padding: 1em 2em;
}
sub {
vertical-align: sub;
font-size: smaller;
}
sup {
vertical-align: super;
font-size: smaller;
}
var {
background-color: #F8F8F8;
padding: .25em .5em;
font-style: italic;
}
/************************************************************************
* end reset
************************************************************************/
html {
font-size: 16px;
}
button {
color: #231815;
}
/************************************************************************
* layout
************************************************************************/
body {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
opacity: 0;
-webkit-animation-name: fadein;
animation-name: fadeIn;
-webkit-animation-duration: 1.2s;
animation-duration: 1.2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-delay: 0s;
animation-delay: 0s;
min-height: 100vh;
min-height: 100dvh;
}
main {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
footer {
margin-top: auto;
}
/************************************************************************
* base
************************************************************************/
:root {
/* ウィンドウサイズ */
--vw: 100vw;
--vh: 100vh;
/* 三角形 */
--clip-triangle-top: polygon(50% 0, 100% 100%, 0 100%);
--clip-triangle-bottom: polygon(0 0, 100% 0, 50% 100%);
--clip-triangle-right: polygon(0 0, 100% 50%, 0 100%);
--clip-triangle-left: polygon(0 50%, 100% 0, 100% 100%);
--clip-triangle-lower-left: polygon(0 0, 100% 100%, 0 100%);
--clip-triangle-upper-left: polygon(0 0, 100% 0, 0 100%);
--clip-triangle-lower-right: polygon(100% 0, 100% 100%, 0 100%);
--clip-triangle-upper-right: polygon(0 0, 100% 0, 100% 100%);
--main-color: #00aaec;
--grad-start: #0059ff;
--grad-end: #15b9ff;
--cta-before: rgba(0, 54, 221, .13);
--cta-after: rgba(0, 54, 221, .13);
--cta-before-pc: var(--cta-before);
--cta-after-pc: var(--cta-after);
--graduate: linear-gradient(to right, var(--grad-start) 0, var(--grad-end) 60%);
--graduate-bottom: linear-gradient(to bottom, var(--grad-start) 0, var(--grad-end) 60%);
--graduate-top: linear-gradient(to top, var(--grad-start) 0, var(--grad-end) 60%);
/**
* svgをbackgroundで使う
* 色：#ffffff -> %23ffffff
*/
--icon-btn-arrow: url('data:image/svg+xml;utf8,');
--header-submenu-chevron: url('data:image/svg+xml;utf8,