@charset "UTF-8";

/* top.css */

img {
	height: auto;
	max-width: 100%;
	vertical-align: middle;
}

.main-copy-wrap {
    position: relative;
}
.dot-left,
.dot-right {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("/file/img/1028597.svg");
    width: min(15vw, 167px);
    aspect-ratio: 1 / 1;
}
.dot-left {
    top: 29vh;
    left: 7vw;
}

.dot-right {
    top: 4vh;
    right: 16vw;
}
.main-copy {
    max-width: 700px;
    margin: auto;
    text-align: center;
    position: relative;
}
.star,
.clouds,
.cloud,
.star-bm {
    position: absolute;
}
.star {
    top: 43%;
}
.clouds {
    top: 45%;
    right: 4%;
}
.cloud {
    left: 0;
    bottom: 0;
}
.star-bm {
    right: 10%;
    bottom: 0;
}
.main-copy h2,
.second-copy h2 {
    font-size: 2.45rem;
    font-weight: 800;
    color: #fff;
    text-shadow:1px 1px 0 #333, -1px -1px 0 #333,
              -1px 1px 0 #333, 1px -1px 0 #333,
              0px 1px 0 #333,  0-1px 0 #333,
              -1px 0 0 #333, 1px 0 0 #333;
    line-height: 1.8;
}
.main-copy h2 span.sp-breaks {
    color: #fff;
}
.main-copy h2 span.pink,
.second-copy h2 span {
    color: var(--btn-color);
}

.main-copy h1 {
    flex-direction: column;
    font-family: var(--font-en);
    letter-spacing: 0;
    gap: 0.3em;
    font-size: 4.9rem;
    margin-bottom: 0.8em;
}
.main-copy h1 span.upper {
    font-weight: 300;
    font-size: 2.5rem;
    letter-spacing: 0.08em;
}
.main-copy h1 span.lower {
    font-size: 2.9rem;
    letter-spacing: 0.3em;
}
.sim-wrap,
.hint-wrap,
.knowledge-wrap {
    background-repeat: repeat;
    background-size: auto;
    border-top: 2px dashed #000;
    padding: 2em 1em 4em;
    position: relative;
}
.sim-wrap {
    background-image: url("/file/img/1027480.jpg");
}
.hint-wrap {
    background-image: url("/file/img/1028608.jpg");
}
.knowledge-wrap {
    background-image: url("/file/img/1028610.jpg");
}
.boy,
.txt-svg,
.girl {
    position: absolute;
}
.boy,
.girl {
    background-size: contain;
    pointer-events: none; 
    background-repeat: no-repeat;
}
.boy {
    background-image: url("/file/img/1028598.svg");
    width: min(18vw, 245px);
    aspect-ratio: 245 / 335;
    left: 15vw;
    top: -17vh;
}
.txt-svg {
    left: 51%;
    transform: translateX(-50%);
}
.girl {
    background-image: url("/file/img/1028596.svg");
    width: min(18vw, 252px);
    aspect-ratio: 252 / 319;
    right: 17vw;
    top: -21vh;
}
.second-copy {
    max-width: 830px;
    margin: auto;
    text-align: center;
    position: relative;
}
.second-copy h2 {
   font-size: 3rem;
}
.second-copy p {
    font-size: 1.15rem;
    font-weight: bold;
    line-height: 1.9;
}
.top-btn {
    width: 35%;
    margin: 2em auto;
}
.top-btn a span:before {
    content: url("/file/img/1028603.svg");
    width: 45px;
    height: 45px;
    display: block;
}



.second-copy h2 span.hint {
    color: #9270da;
}
.second-copy h2 span.knowledge {
    color: #ff8965;
}
.top-btn,
.hint-menu,
.knowledge-btn {
    margin-top: 3em;
}
.knowledge-btn {
    width: 70%;
    margin: 2em auto;
}
.hint-wrap .second-copy h2 {
    margin-top: 0.5em;
}
.hint-menu  ul {
    justify-content: center;
    gap: 3.5em;
    display: flex;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}
.hint-menu ul li {

}
.hint-menu ul a {
    padding: 0;
    text-decoration: none;
    background: #ef8080;
    position: relative;
    border-radius: 10px;
    transition: all 0.3s;
    font-weight: bold;
    border: none;
    margin: 0 auto;
    letter-spacing: 0.05em;
    display: block;
    color: #333;
}
.hint-menu ul a:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    transition: all 0.3s;
    transform: translate3d(0.5rem, 0.5rem, -1rem);
    border: 1px solid #000;
    border-radius: inherit;
    background: #DC9FDC;
    box-shadow: 0 0.6rem 0 0 rgba(0, 0, 0, 0.2);
}
.hint-menu ul a.marriage-btn:before {
    background: var(--marriage-color);
}
.hint-menu ul a.childrearing-btn:before {
    background: var(--children-color);
}
.hint-menu ul a.life-btn:before {
    background: var(--life-color);
}
.hint-menu ul a:hover {
    -webkit-transform: translate(0, 0.1rem);
    transform: translate(0, 0.1rem);
}
.hint-menu ul a:hover:before {
    -webkit-transform: translate3d(0, 0.1rem, -1rem);
    transform: translate3d(0, 0.1rem, -1rem);
    -webkit-box-shadow: 0 0.35rem 0 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 0.35rem 0 0 rgba(0, 0, 0, 0.2);
}
.hint-menu ul a div {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1em;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    border: 1px solid #000;
    border-radius: inherit;
    background: #fff;
}
.hint-menu ul a div h3 {
    color: #4d4d4d;
    font-size: 1.7rem;
    margin: 0 0 0.5em;
}
.hint-menu ul a div p {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    gap: 0.5em;
    margin: 1em 0 0.5em;
}
.hint-menu ul a div p:before,
.hint-menu ul a div p:after {
    content: "";
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
}
.hint-menu ul a div p:before {
    background-image: url("/file/img/1027477.svg");
    width: 46px;
    height: 29px;
}
.hint-menu ul a div p:after {
    background-image: url("/file/img/1028609.svg");
    width: 26px;
    height: 26px;
}
.knowledge-btn a span {
    background: var(--btn-nk-color);
}
.knowledge-btn a span:before {
    content: url("/file/img/1027473.svg");
    width: 35px;
    height: 48px;
    display: block;
}
.glass {
    position: absolute;
    top: 20vh;
    right: -8vw;
}




@media screen and (max-width:1280px) {
.boy {
    left: 2vw;
}
.girl {
    right: 4vw;
}

}


@media screen and (max-width:1200px) {
.hint-menu ul li {

}
}
@media screen and (max-width:1194px) {
.top-btn {
    width: 58%;
}
}

@media screen and (max-width:844px) {
.dot-left {
    top: 9vh;
    left: 2vw;
}
.dot-right {
    right: 2vw;
    top: 16vh;
}
.boy {
    left: 1vw;
    top: -35vh;
}
.girl {
    right: 2vw;
    top: -30vh;
}
.cloud {
    bottom: 24vh;
}
.star-bm {
    right: 1vw;
    bottom: 17vh;
}
.glass {
    right: 0;
}
}

@media screen and (max-width:768px) {
.second-copy h2 {
    font-size: 2.8rem;
}
.glass {
    right: 0;
    bottom: 0;
    top: unset;
}
.top-btn {
    width: 100%;
}
}


/* SP */
@media screen and (max-width:600px) {
.second-copy {
    text-align: left;
}
.boy {
    width: min(21vw, 245px);
    top: -5vh;
}
.girl {
    width: min(21vw, 252px);
    top: -3vh;
}
.main-copy h2 {
    font-size: 2rem;
    padding: 0 0.5em;
}

.star {
    top: 34vh;
    width: 60px;
    left: 2vw;
}
body.dev-sp .main-copy h1 {
    font-size: 2.8rem;
}
.cloud {
    width: 40px;
    bottom: -23px;
    left: 2vw;
    z-index: -1;
}
.star-bm {
    right: 3vw;
    bottom: -3vh;
}
.second-copy h2 {
    margin-top: 1em;
    font-size: 2rem;
    line-height: 1.6;
}
}

body.dev-sp .hint-wrap, 
body.dev-sp .knowledge-wrap {
    padding: 2.5em 1em 2em;
}

body.dev-sp .sim-wrap {
    padding: 3em 1em 2em;
}

body.dev-sp .main-copy h1 span.upper {
    font-size: 2rem;
}
body.dev-sp .main-copy h1 span.lower {
    font-size: 2rem;
}
body.dev-sp .main-copy h2 span.sp-breaks {
    display: block;
}
body.dev-sp .main-copy h2 br {
    display: none;
}
body.dev-sp .clouds {
    width: 58px;
    top: 61%;
}

body.dev-sp .dot-left, 
body.dev-sp .dot-right {
    width: min(21vw, 167px);
}

body.dev-sp .second-copy p {
    font-size: 1rem;
    line-height: 1.6;
}
body.dev-sp .second-copy p br {
    display: none;
}
body.dev-sp .hint-wrap .second-copy h2,
body.dev-sp .knowledge-wrap .second-copy h2 {
    margin-top: 0;
}
body.dev-sp .glass {
    display: none;
}
body.dev-sp .top-btn,
body.dev-sp .knowledge-btn {
    width: 100%;
}
body.dev-sp .next-btn button, 
body.dev-sp .next-btn a {
    font-size: 1.1rem;
}
body.dev-sp .next-btn button span, 
body.dev-sp .next-btn a span {
    padding: 1rem;
}
body.dev-sp footer .star {
    top: 4vh;
}
body.dev-sp .footer-wrap h1 {
    margin-bottom: 0.5em;
}
body.dev-sp .footer-wrap p {
    font-size: 0.9rem;
}
body.dev-sp footer .star-bm {
    bottom: 19vh;
}
body.dev-sp .main-copy h1 {
    margin-bottom: 1.5em;
}