/*------------------------------
 BASE
 ------------------------------*/

:root {
    --spDesign: 375;
    --spViewport: 375;
    --pcDesign: 1432;
    --breakPointSpMin: 374px;
    --breakPointWide: 768px;
    --widthDefault: 103.2rem;
    --vh: 100vh;
    --vw: 100vw;
    --sidePaddingSp1: 2rem;
    --sidePaddingPc1: 2.4rem;
    --fontBase: "Noto Sans JP", sans-serif;
    --fontEn: "Candal", sans-serif;
    --colorBg: #FFFFFF;
    --colorAccent: #E95389;
    --colorText: #777777;
}
*,
:before,
:after {
    box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none;
}
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin-block-end: 0;
}
ul[role="list"],
ol[role="list"] {
    list-style: none;
}
body {
    min-height: 100vh;
    line-height: 1.5;
}
h1,
h2,
h3,
h4,
button,
input,
label {
    line-height: 1.1;
}
h1,
h2,
h3,
h4 {
    text-wrap: balance;
}
a:not([class]) {
    -webkit-text-decoration-skip: ink;
    -webkit-text-decoration-skip-ink: auto;
    text-decoration-skip-ink: auto;
    color: currentColor;
}
img,
picture {
    max-width: 100%;
    display: block;
}
input,
button,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
}
textarea:not([rows]) {
    min-height: 10em;
}
html {
    font-family: var(--fontBase);
    width: 100%;
    font-size: calc(1000vw / var(--spViewport));
}
body {
    letter-spacing: 0;
    width: 100%;
    min-height: 100vh;
    color: var(--colorText);
    background: var(--colorBg);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none;
    overflow-wrap: break-word;
    margin: 0;
    padding: 0;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.6;
    position: relative;
    overflow-y: scroll;
}
a {
    color: var(--colorText);
    outline: none;
    text-decoration: underline;
}
a[data-anchor] {
    cursor: pointer;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
button {
    line-height: inherit;
    text-wrap: wrap;
    margin: 0;
    padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
strong,
th {
    font-weight: inherit;
}
em {
    font-style: inherit;
}
select,
input,
textarea,
button {
    -webkit-appearance: none;
    border: none;
    border-radius: 0;
    display: block;
}
select,
button {
    cursor: pointer;
}
input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}
input::-webkit-input-placeholder {
    color: #2a2a2a59;
    opacity: 1;
    font-size: 1.6rem;
    font-weight: 400;
}
textarea::-webkit-input-placeholder {
    color: #2a2a2a59;
    opacity: 1;
    font-size: 1.6rem;
    font-weight: 400;
}
select::-webkit-input-placeholder {
    color: #2a2a2a59;
    opacity: 1;
    font-size: 1.6rem;
    font-weight: 400;
}
:-moz-any(
  input:-moz-placeholder-shown,
  textarea:-moz-placeholder-shown,
  select:-moz-placeholder-shown
) {
    color: #2a2a2a59;
    opacity: 1;
    font-size: 1.6rem;
    font-weight: 400;
}
:is(
  input:placeholder-shown,
  textarea:placeholder-shown,
  select:placeholder-shown
) {
    color: #2a2a2a59;
    opacity: 1;
    font-size: 1.6rem;
    font-weight: 400;
}
input::-moz-placeholder {
    color: #2a2a2a59;
    opacity: 1;
    font-size: 1.6rem;
    font-weight: 400;
}
textarea::-moz-placeholder {
    color: #2a2a2a59;
    opacity: 1;
    font-size: 1.6rem;
    font-weight: 400;
}
select::-moz-placeholder {
    color: #2a2a2a59;
    opacity: 1;
    font-size: 1.6rem;
    font-weight: 400;
}
:is(
  input:-ms-placeholder-shown,
  textarea:-ms-placeholder-shown,
  select:-ms-placeholder-shown
) {
    color: #2a2a2a59;
    opacity: 1;
    font-size: 1.6rem;
    font-weight: 400;
}
:is(
  input:placeholder-shown,
  textarea:placeholder-shown,
  select:placeholder-shown
) {
    color: #2a2a2a59;
    opacity: 1;
    font-size: 1.6rem;
    font-weight: 400;
}
ul,
ol {
    list-style-type: none;
}
img {
    vertical-align: bottom;
    max-width: 100%;
    height: auto;
}
:focus {
    outline: none;
}
::selection {
    background-color: rgba(233, 83, 137, 0.2);
}
:target {
    scroll-margin-block: 0;
}

@media (width>=768px) {
    html {
        font-size: 10px;
    }
}

/*------------------------------
 CONTENTS
 ------------------------------*/

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-block: 8rem 10rem;
    @media (width<=767px) {
        padding-block: 4rem 5rem;
    }
    img {
        width: 100%;
    }
}
.lead {
    color: var(--colorAccent);
    text-align: center;
    font-family: var(--fontEn);
    font-size: 3.8rem;
    font-weight: 400;
    line-height: 1.5;
    @media (width<=767px) {
        font-size: 3rem;
    }
}
.heading {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.5;
    margin-block: 1.4rem .6rem;
    @media (width<=767px) {
        font-size: 1.8rem;
    }
}
.subheading {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.5;
    @media (width<=767px) {
        font-size: 1.5rem;
    }
}
.image {
    margin: 4rem auto;
    width: 48.4rem;
    @media (width<=767px) {
        width: 27rem;
        margin-block: 3.2rem;
    }
}
.logo {
    @media (width<=767px) {
        width: 22rem;
    }
}
.name {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.5;
    margin-top: 2rem;
    @media (width<=767px) {
        font-size: 1.489rem;
        margin-top: 1.4rem;
    }
}