@charset "UTF-8";


/* html, body
------------------------------------------------- */
html {
	overflow-x: hidden;
}
body {
	overflow: hidden;
}


/* wrapper
------------------------------------------------- */
#wrapper::before {
    content: '';
    width: 100%;
    height: 58.8125em;
    background: url("../img-new/top/wrapper_bg.webp") center top no-repeat;
    background-size: 100% auto;
    position: absolute;
    left: 0;
    bottom: 2.375em;
    z-index: 2;
}
@media only screen and (max-width:750px){
#wrapper::before {
    width: 160%;
    height: 110vw;
    left: -30vw;
    bottom: 20vw;
}
}


/* mainvisual
------------------------------------------------- */
.mainvisual {
    width: 100%;
    height: 48em;
    background: url("../img-new/top/main_img.webp") center top no-repeat;
    background-size: auto 100%;
    position: relative;
    z-index: 3;
}
.mainvisual h2 {
    font-weight: 400;
    letter-spacing: 0.07em;
    position: absolute;
    right: 50%;
    bottom: 8.5em;
    margin-right: 23.625em;
}
.mainvisual h2 span {
    font-weight: 700;
}
.mainvisual h3 {
    width: 33.5625em;
    position: absolute;
    right: 50%;
    top: 2.5em;
    margin-right: 6.25em;
}
@media only screen and (max-width:750px){
.mainvisual {
    width: 100%;
    height: 170.5vw;
    background-image: url("../img-new/top/main_img_sp.webp");
    background-size: 100% auto;
    margin-bottom: 30vw;
}
.mainvisual h2 {
    width: 100%;
    text-align: center;
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0;
}
.mainvisual h3 {
    width: 74.1vw;
    position: static;
    margin: 0 auto;
    padding-top: 102vw;
}
}


/* scroll
------------------------------------------------- */
.scroll {
    width: 0.5em;
    height: 14em;
    position: absolute;
    right: 50%;
    top: 43.9375em;
    margin-right: 29.875em;
    overflow: hidden;
}
.scroll::before {
    content: '';
    width: 1px;
    height: 14em;
    background-color: #00ADF4;
    position: absolute;
    left: 50%;
    top: 0;
}
.scroll::after {
    content: '';
    width: 0.5em;
    height: 0.5em;
    background-color: #2A51C3;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    animation: main-scroll 2s infinite;
}
@media only screen and (max-width:750px){
.scroll {
    width: 0.5em;
    height: 10em;
    top: 188vw;
    margin-right: 0;
}
.scroll::before {
    height: 10em;
}
}


/* cont1
------------------------------------------------- */
.cont1 {
    padding: 1em 0;
    position: relative;
    z-index: 3;
}
.cont1 .box {
    width: 45.25em;
    height: 2.75em;
    background-color: #fff;
    border-radius: 0.3125em;
    margin: 0 auto 0.75em;
    padding: 0 0.875em 0 1.1875em;
    box-sizing: border-box;
}
.cont1 .box dl {
    height: 2.75rem;
}
.cont1 .box dl dt {
    width: 17.65%;
    color: #707070;
    letter-spacing: 0.08em;
}
.cont1 .box dl dd {
    width: 82.35%;
    letter-spacing: 0.05em;
}
.cont1 .box dl dd a {
    display: block;
    width: 100%;
    padding-right: 2em;
    box-sizing: border-box;
    position: relative;
}
.cont1 .box dl dd a::before {
    content: '';
    width: 1.142em;
    height: 0.858em;
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216.96%22%20height%3D%2210.898%22%20viewBox%3D%220%200%2016.96%2010.898%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_44%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2044%22%20transform%3D%22translate(-436.106%20-1297.089)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_110%22%20data-name%3D%22%E3%83%91%E3%82%B9%20110%22%20d%3D%22M446.91%2C1297.8l4.742%2C4.742-4.742%2C4.742%22%20fill%3D%22none%22%20stroke%3D%22%23006ac5%22%20stroke-width%3D%222%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_111%22%20data-name%3D%22%E3%83%91%E3%82%B9%20111%22%20d%3D%22M451.652%2C1302.538H436.106%22%20fill%3D%22none%22%20stroke%3D%22%23006ac5%22%20stroke-width%3D%222%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E') center center no-repeat;
    background-size: 100% auto;
    position: absolute;
    right: 0.5em;
    top: 50%;
    margin-top: -0.429em;
    transition: 0.4s;
}
@media only screen and (min-width:751px){
.cont1 .box dl dd a:hover {
    color: #006AC5;
}
.cont1 .box dl dd a:hover::before {
    right: 0;
}
}
@media only screen and (max-width:750px){
.cont1 {
    padding: 1em 0 25vw;
}
.cont1 .box {
    width: 100%;
    height: auto;
    background-color: #2A51C3;
    margin: 0 auto 0.75em;
    padding: 1em;
}
.cont1 .box dl {
    height: auto;
}
.cont1 .box dl dt {
    font-size: 2.933vw;
    width: 100%;
    color: #fff;
    padding-bottom: 0.3em;
}
.cont1 .box dl dd {
    width: 100%;
    color: #fff;
    line-height: 1.5;
}
.cont1 .box dl dd a {
    color: #fff;
    padding-right: 1.5em;
}
.cont1 .box dl dd a::before {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216.96%22%20height%3D%2210.898%22%20viewBox%3D%220%200%2016.96%2010.898%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_44%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2044%22%20transform%3D%22translate(-436.106%20-1297.089)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_110%22%20data-name%3D%22%E3%83%91%E3%82%B9%20110%22%20d%3D%22M446.91%2C1297.8l4.742%2C4.742-4.742%2C4.742%22%20fill%3D%22none%22%20stroke%3D%22%23fff800%22%20stroke-width%3D%222%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_111%22%20data-name%3D%22%E3%83%91%E3%82%B9%20111%22%20d%3D%22M451.652%2C1302.538H436.106%22%20fill%3D%22none%22%20stroke%3D%22%23fff800%22%20stroke-width%3D%222%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
    right: 0;
}
}


/* cont2
------------------------------------------------- */
.cont2 {
    padding: 15.625em 0 18.25em;
    color: #fff;
    position: relative;
    z-index: 3;
}
.cont2 .inner {
    padding: 0 6.25em;
}
.cont2 h3 {
    width: 35em;
    position: relative;
    z-index: 3;
}
.cont2 h3 b {
    display: block;
    font-weight: 700;
    letter-spacing: 0.095em;
    line-height: 1.285;
}
.cont2 h3 span {
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.05em;
    position: absolute;
    left: 15.875em;
    bottom: -0.375em;
}
.cont2 .sec {
    width: 43.125em;
    height: 43.125em;
    position: absolute;
    left: 15em;
    top: -15.625em;
}
.cont2 .sec li {
    width: 11.75em;
    position: absolute;
    transition: 0.05s;
}
.cont2 .sec li:nth-child(1) {
    left: 28.5em;
    top: 12.25em;
}
.cont2 .sec li:nth-child(2) {
    left: 26.25em;
    top: 27.8125em;
}
.cont2 .sec li:nth-child(3) {
    left: 11.25em;
    top: 31.375em;
}
.cont2 .sec li:nth-child(4) {
    left: 2em;
    top: 18.75em;
}
.cont2 .sec li a {
    width: 11.75em;
    height: 11.75em;
    border-radius: 50%;
    font-weight: 700;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.cont2 .sec li a::before {
    content: '';
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -5.875em 0 0 -5.875em;
    z-index: 1;
    transition: 0.4s;
}
.cont2 .sec li:nth-child(1) a::before {
    background-image: url("../img-new/top/cont2_bnr1.png");
}
.cont2 .sec li:nth-child(2) a::before {
    background-image: url("../img-new/top/cont2_bnr2.png");
}
.cont2 .sec li:nth-child(3) a::before {
    background-image: url("../img-new/top/cont2_bnr3.png");
}
.cont2 .sec li:nth-child(4) a::before {
    background-image: url("../img-new/top/cont2_bnr4.png");
}
.cont2 .sec li a::after {
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(51,51,51,0.7);
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    transition: 0.4s;
}
.cont2 .sec li:nth-child(1) a::after {
    display: none;
}
.cont2 .sec li a span {
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #fff;
    position: relative;
    z-index: 4;
}
.cont2 .sec li:nth-child(1) a span {
    font-weight: 500;
    letter-spacing: normal;
    color: #1F1F1F;
}
@media only screen and (min-width:751px){
.cont2 .sec li a:hover::before {
    transform: scale(1.15);
}
.cont2 .sec li a:hover::after {
    background-color: rgba(51,51,51,0.4);
}
}
@media only screen and (max-width:750px){
.cont2 {
    padding: 45vw 0 55vw;
}
.cont2 .inner {
    padding: 0;
}
.cont2 h3 {
    width: 58vw;
}
.cont2 h3 b {
    font-size: 15vw;
}
.cont2 h3 span {
    font-size: 2.933vw;
    display: block;
    line-height: 1.3;
    position: static;
}
.cont2 .sec {
    width: 100%;
    height: 110vw;
    position: absolute;
    left: 0;
    top: -55vw;
}
.cont2 .sec li {
    width: 40vw;
    position: absolute;
}
.cont2 .sec li:nth-child(1) {
    left: 0;
    top: -3vw;
}
.cont2 .sec li:nth-child(2) {
    left: 40vw;
    top: 17vw;
}
.cont2 .sec li:nth-child(3) {
    left: 52vw;
    top: 70vw;
}
.cont2 .sec li:nth-child(4) {
    left: 10vw;
    top: 87vw;
}
.cont2 .sec li a {
    width: 40vw;
    height: 40vw;
}
.cont2 .sec li a::before {
    margin: -20vw 0 0 -20vw;
}
.cont2 .sec li a span {
    font-size: 3.466vw;
}
.cont2 .sec li:nth-child(1) a span {
    font-size: 6.4vw;
}
}