@charset "UTF-8";
/* ○○.css - ○○ページ個別スタイル */

body{
    background-color:var(--beige);
}

.first-view{
    position:relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.view-photo{
    width:100%;
    margin-top: -115px;
    z-index: 0;
    filter: brightness(85%);
}

.wave1{
    width: 100%;
    z-index:1;
    margin-top: -70px;
}

.view-title{
    position: relative;
    z-index:2;
    top: 20px;
    padding:10px 20px;
    width: fit-content;
    margin-left: -100px;
    /*text-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 15px #fff,
    0 0 20px rgba(255,255,255,.8);*/
    display: flex;
    flex-direction: column;
}

.vt1{
    font-size: 115%;
    color:var(--navy);
    font-weight:900;
    position: relative;
    width: fit-content;
}

.vt1::before{
   content: "";
  position: absolute;
  background: #fff;
  filter: blur(10px);
  border-radius: 30px;
  z-index: -1; 
  inset: -10px;
}

.vt2{
    font-size:200%;
    color:var(--navy);
    font-weight:900;
    margin-top: -10px;
    margin-bottom: -5px;
    position: relative;
    width: fit-content;
}

.vt2 span{
    font-size:115%;
}

.vt2::before{
   content: "";
  position: absolute;
  background: #fff;
  filter: blur(10px);
  border-radius: 30px;
  z-index: -1; 
  inset: -10px;
}

.vt3{
    font-size:115%;
    color:var(--navy);
    font-weight:900;
    position: relative;
    width: fit-content;
}

.vt3::before{
   content: "";
  position: absolute;
  background: #fff;
  filter: blur(10px);
  border-radius: 30px;
  z-index: -1; 
  inset: -10px;
}

.view-text{
    font-size:12px;
    margin-top: -40px;
    padding:20px 3vw;
    background-color: var(--beige);
    width: 100%;
    position: relative;
    text-align: center;
    z-index: 2;
    line-height: 20px;
}

.view-text span{
     background: linear-gradient(transparent 70%, var(--skyblue) 70%);
}

.view-text::before{
    content: "";
    position: absolute;
    background-image: url(https://ikkyosai.com/juken/57/img/index/emerald-piece.svg);
    width: 30px;
    height: 30px;
    background-position: center;
    background-size: contain;
    top: -2px;
    left: 25px;
    transform: rotate(20deg);
}

.view-text::after{
    content: "";
    position: absolute;
    background-image: url(https://ikkyosai.com/juken/57/img/index/skyblue-piece.svg);
    width: 30px;
    height: 30px;
    background-position: center;
    background-size: contain;
    bottom: -5px;
    right: 20px;
    transform: rotate(27deg);
}

.content-menu{
    display:flex;
    flex-direction: column;
    gap:20px;
    justify-content: center;
    align-items: center;
    margin-top:50px;
    background-color: var(--skyblue);
    position: relative;
    margin-bottom: 40px;
    padding-bottom: 20px;
}

.content-menu::before{
    content: "";
    position: absolute;
    background-image: url(https://ikkyosai.com/juken/57/img/index/wave-skyblue.svg);
    width: 100%;
    aspect-ratio: 300/80;
    background-position: center;
    background-size: contain;
    top:-80px;
}

.content-menu::after{
    content: "";
    position: absolute;
    background-image: url(https://ikkyosai.com/juken/57/img/index/wave-skyblue.svg);
    width: 100%;
    aspect-ratio: 300/80;
    background-position: center;
    background-size: contain;
    top:440px; 
    transform: rotate(180deg);
}

.menu-title{
    font-size:24px;
    border-bottom: solid 5px var(--emeraldgreen);
    font-weight:600;
    display:inline-block;
    z-index: 1;
}

.menu-box{
    display:flex;
    align-items:center;
    width:290px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color:var(--beige);
    outline:1.5px solid var(--emeraldgreen);
    outline-offset: -5px;
    box-shadow: 3px 3px 3px rgba(77,77,77,0.6);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
    text-decoration: none;
    color: var(--black);
}

@media(hover:hover) and (pointer: fine){
    .menu-box:hover{
        opacity:0.9;
        background-color:rgba(147, 208, 188, 0.6);
        transform: translate(1.25px, 1.25px);
    }
}

.menu-box:active{
    opacity:0.9;
    background-color:rgba(147, 208, 188, 0.6);
    transform: translate(1.25px, 1.25px);
}

.menu-box-textbox{
    margin-left:15px;
    width:275px;
}

.menu-box-title{
    font-size:16px;
    color:var(--emeraldgreen);
    font-weight:600;
    border-bottom:solid 1px var(--emeraldgreen); 
    display:inline-block;
}

.menu-box-text{
    font-size:12px;
    margin-top:5px;
}

.blue-shape{
    position:absolute;
    width:300px;
    height:300px;
    background-color: var(--emeraldgreen);
    border-radius:50%;
    left:190px;
    transform: translateY(50px);
}

.juken-picture{
    width: 72px;
    z-index: 1;
    padding-right: 10px;
}

.exam-picture{
     width: 72px;
    z-index: 1;
    padding-right: 10px;
}

.etcetera-picture{
     width: 72px;
    z-index: 1;
    padding-right: 10px;
}

.scroll-text{
    font-size: 12px;
    z-index: 1;
    margin-top: 15px;
}

.scroll{
    font-size: 20px;
    z-index: 1;
    animation: scroll 3.5s infinite;
    border: solid var(--black);
    border-width: 0 0 1px 1px;
    transform: rotate(-45deg);
    width: 15px;
    height: 15px;
    margin-top: -10px;
    margin-bottom: 10px;
}



@keyframes scroll{
    0%{
        transform: rotate(-45deg) translate(0,0);
    }
    80%{
        transform: rotate(-45deg) translate(-20px, 20px);
    }
    0%, 80%, 100%{
        opacity: 0;
    }
    40%{
        opacity: 1;
    }
}

.wave2{
    width: 100%;
    z-index: 0;
    margin-top: -520px;
}

.info-card{
position:relative;
width:135px;
height:90px;
padding-top:5px;
padding-bottom:10px;
background-color: var(--skyblue);
text-align:left;
cursor:pointer;
box-shadow:3px 3px 3px 0 var(--emeraldgreen);
text-decoration: none;
color: var(--black);
display: flex;
justify-content: center;
}

@media(hover:hover) and (pointer:fine){
    .info-card:hover{
    opacity:0.9;
    transform:translate(3px, 3px);
    box-shadow: 0px 0px 0 0 var(--emeraldgreen);
}
}

.number{
    color:var(--emeraldgreen);
}

.info-card-textbox{
    width: fit-content;
}

.info-card-title{
    font-size:12px;
    margin-bottom:5px;
    padding-bottom:3px;
    border-bottom:solid var(--emeraldgreen) 1px;
    display:inline-block;
    font-weight:600;
}

.info-card-text{
    font-size:10px;
    line-height:1.5;
    text-align: left;
    margin: auto;
}


.circle-box{
    width:135px;
    display: flex;
    justify-content: center;
    z-index: 0;
}

.circle{
    width:120px;
    height:120px;
    background-image: radial-gradient(var(--skyblue) 20%, transparent);
    border-radius: 50%;
    display:flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.circle::after{
    content:"";
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-image: radial-gradient(var(--skyblue), transparent);
    position: absolute;
    top: 100px;
    left: 110px;
}

.circle-text{
    font-size:10px;
    text-align: center;
    font-weight: 600;
}

.wave3{
    width: 100%;
    height: 500px;
    margin-top: -400px;
}

.title{
  position: relative;
  background: var(--skyblue);
  z-index: 0;
  width:fit-content;
  padding:3px 12px 4px 28px;
  font-weight:600;
  margin:20px 0px 20px 37.5px;
}

.title:before {
  content: "";
  position: absolute;
  background-image: url(https://ikkyosai.com/juken/57/img/index/emerald-piece.svg);
  width: 45px;
  height: 45px;
  background-position: center;
  background-size: contain;
  left: -18px;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
}

.keiziban{
    width: fit-content;
    height: fit-content;
    padding: 10px;
    background-color: var(--skyblue);
    border:solid 2px var(--emeraldgreen);
    border-radius: 999px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    text-decoration: none;
    color: var(--black);
    margin-bottom: 40px;
}

@media(hover:hover) and (pointer:fine){
.keiziban:hover{
    opacity: 0.9;
    transform: translate(1.25px, 1.25px);
}
}

.k-text1{
    font-size:12px ;
    text-align: center;
    position: relative;
    margin-bottom: 7px;
    color: var(--navy);
}

.k-text2{
    font-size: 14px;
    color: var(--navy);
    font-weight: 600;
}

.yazirushi{
    width:20px;
    margin-left: 7px;
}

.parent{
    display: flex;
    flex-wrap:wrap;
    justify-content:center;
    column-gap:25px;
    row-gap:20px;
}

#juken-info{
  margin-bottom:30px; 
}

#exam-data{
    margin-bottom:30px;
    margin-top: 80px;
}

#etcetera{
    margin-bottom:40px;
    margin-top: -75px;
}

.disabled{
    pointer-events: none;
    box-shadow: none;
    opacity: 0.7;
}

.info-card-text span{
    font-size: 13px;
}

.scroll-margin{
    width: 100%;
    height: 10px;
}