@charset "UTF-8";
/*
Version: 1.0.1
Creation Date: 2025.3.30
Last Updated: 2025.5.23
*/


/* import
------------------------------------------------------------ */
@import "https://w-shiya.com/release/css/ampersand-2025.css";


/* Overwrite
------------------------------------------------------------ */
.share__icon {
margin: 0;
}


/* set
------------------------------------------------------------ */
body {
background: #FFF;
font-family: corporate-logo-ver2, sans-serif;
text-align: center;
min-width: auto;
}


/* common
------------------------------------------------------------ */
/* font */
.CLM {  /* Corporate Logo Ver2 Medium */
font-family: corporate-logo-ver2, sans-serif;
font-weight: 500;
}
.CLB {  /* Corporate Logo Ver2 Bold */
font-family: corporate-logo-ver2, sans-serif;
font-weight: 700;
}
.NR6 {  /* ニタラゴルイカ ０６ */
font-family: nitalago-ruika, sans-serif;
font-weight: 100;
}
.RGB {  /* りょうゴシック PlusN B */
font-family: ryo-gothic-plusn, sans-serif;
font-weight: 700;
}
.f48 {
font-size: 4.8rem;
}

/* layout */
section {
width: 960px;
}

/* style */
.frame > * {
padding: .8rem 4rem;
border: 2px solid #004098;
}
.marker span {
position: relative;
}
.marker span::before {
content: "";
background: #d2ff10;
width: 100%;
height: 50%;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
z-index: -1;
}
.more a {
background: #FFF;
min-width: 300px;
padding: .3em 2em;
display: inline-block;
border: 2px solid #999;
border-radius: .5rem;
}
.more a:hover {
background: #004098;
color: #FFF;
border: 2px solid #004098;
}

/* color */
.blu {
color: #004098;
}
.red {
color: #ed1c24;
}

/* background */
.bg_blu {
background: #004098;
color: #FFF;
}
.bg_ttl::before {
content: "";
width: 80%;
height: 100%;
position: absolute;
top: 3em;
}
.bg_ttl.lt::before {
background: url("img/ttl_left.svg") no-repeat left top/contain;
left: 0;
}
.bg_ttl.rt::before {
background: url("img/ttl_right.svg") no-repeat right top/contain;
right: 0;
}
.bg_fix {
clip-path: inset(0);
}
.bg_fix::after {
content: "";
background: url("img/bg_fix.png") no-repeat center/100% auto;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -2;
}


/* Loading
------------------------------------------------------------ */
#splash {
width: 100%;
height: 100%;
position: fixed;
z-index: 9999999;
}
#splash-logo {
background: url("img/loading.svg") no-repeat center/contain;
width: 80%;
height: 100%;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.splashbg {
display: none;
}
body.appear .splashbg {
display: block;
background: #004098;
width: 100%;
height: 100vh;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
transform: scaleX(0);
animation: Splash .8s ease-in-out forwards;
}
@keyframes Splash {
0% {
transform-origin: right;
transform: scaleX(0);
}
50% {
transform-origin: right;
transform: scaleX(1);
}
50.001% {
transform-origin: left;
background: #d2ff10;
}
100% {
transform-origin: left;
transform: scaleX(0);
}
}
#container {
opacity: 0;
}
body.appear #container {
animation: fadeIn 1s .8s forwards;
opacity: 0;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}


/* header
------------------------------------------------------------ */
header {
position: relative;
z-index: 1;
}
header p.frame {
position: absolute;
right: 3vw;
bottom: 10vw;
}


/* main
------------------------------------------------------------ */
main {
margin-top: -6em;
}

/* #results-presentation */
#results-presentation article {
clip-path: inset(0);
}
#results-presentation article::before,
#results-presentation article::after {
content: "";
background: #004098;
background: #d2ff10;
clip-path: polygon(0 20vw, 100% 0, 100% calc(100% - 20vw), 0 100%);
width: 100%;
height: 50%;
position: fixed;
top: 15%;
left: 0;
z-index: -1;
}
#results-presentation article::after {
background: #d2ff10;
top: 30%;
}
#results-presentation section {
width: 1080px;
}
#results-presentation li {
margin-bottom: 5rem;
}
#results-presentation .f72 {
font-size: 7.2rem;
}

/* #personality-type */
#personality-type article {
clip-path: inset(0);
}
#personality-type article::before,
#personality-type article::after {
content: "";
background: #004098;
background: #d2ff10;
clip-path: polygon(0 20vw, 100% 0, 100% calc(100% - 20vw), 0 100%);
width: 100%;
height: 50%;
position: fixed;
top: 15%;
left: 0;
z-index: -1;
}
#personality-type article::after {
background: #d2ff10;
top: 30%;
}
#personality-type section {
width: 1080px;
}
#personality-type li {
margin-bottom: 5rem;
}

/* #personality-type_v1 */
#personality-type_v1 article::after {
content: "";
background: #d2ff10;
clip-path: polygon(0 20vw, 100% 0, 100% calc(100% - 20vw), 0 100%);
width: 100%;
height: 60%;
position: absolute;
left: 0;
bottom: 10%;
z-index: -1;
}
#personality-type_v1 section {
width: 1160px;
}
#personality-type_v1 ul.col-2 {
max-width: 760px;
margin: 0 auto 3.75em;
}
#personality-type_v1 li {
margin-bottom: 5rem;
}

/* footer
------------------------------------------------------------ */
footer {
background: #000;
font-family: ryo-gothic-plusn, sans-serif;
}
footer section {
padding: 3rem 0;
}
footer h1 {
width: 188px;
margin: 0 auto 3rem;
}
footer p {
color: #FFF;
font-size: 1.2rem;
line-height: 1.3;
}
footer p + p {
font-size: 1.1rem;
margin-top: 1rem;
}

/* #sns */
#sns {
background: #FFF;
}

/* #pagetop */
#pagetop {
right: 1rem;
bottom: 1rem;
z-index: 4;
}
#pagetop a {
background: #004098;
border-radius: 50%;
}





@media screen and (max-width: 1180px) {

/* main
------------------------------------------------------------ */
/* #personality-type_v1 */
#personality-type_v1 ul.col-2 {
max-width: 720px;
}

}


@media screen and (max-width: 1024px) {

/* header
------------------------------------------------------------ */
header p.frame {
bottom: 7vw;
}

/* main
------------------------------------------------------------ */
/* #personality-type_v1 */
#personality-type_v1 ul.col-2 {
max-width: 620px;
}

}

@media screen and (max-width: 834px) {

/* set
------------------------------------------------------------ */
html {
font-size: 50%;
}

/* Loading
------------------------------------------------------------ */
#splash-logo {
width: 100%;
}

/* main
------------------------------------------------------------ */
/* #personality-type */
#personality-type li {
margin-bottom: 3rem;
}

/* #personality-type_v1 */
#personality-type_v1 li {
margin-bottom: 3rem;
}

}


@media screen and (max-width: 430px) {

/* set
------------------------------------------------------------ */
html {
font-size: 43%;
}

/* common
------------------------------------------------------------ */
/* style */
.frame > * {
padding: .8rem 2rem;
border: 1px solid #004098;
}

/* background */
.bg_ttl::before {
width: 100%;
}
.bg_fix::after {
background: url("img/bg_fix.png") no-repeat bottom/100% auto;
height: 90%;
}

/* Loading
------------------------------------------------------------ */
#splash-logo {
width: 150%;
}

/* header
------------------------------------------------------------ */
header p.frame {
position: static;
}

/* main
------------------------------------------------------------ */
main {
margin-top: 0;
}
h2 img {
height: 40px;
}

/* #personality-type_v1 */
#personality-type_v1 ol.col-2 {
display: block;
}

}