body{
    width: 100vw; /* スマホの画面幅に合わせる */
    overflow-x: hidden;
    margin: 0; /* 中央揃え */
    padding: 0; /* 左右に少し余白を持たせる */
    font-family: "noto-sans-cjk-jp", sans-serif;
    font-weight: 700; 
    font-style: normal;
    font-size: 0;
}


.toppic{
    position: relative;
    width: 60vw;
    opacity: 30%;
    padding-top: 5vw;
    margin-bottom: -6.2vw;
    margin-left: 40vw;
    z-index: -1;
}

.toptitle{
    font-size: 4.5vw;
    color: #106a8f;
    margin-left: 10.4vw;
    margin-top: -4.0vw;
}

.topborder{
    width: 10vw;
    border-top:solid 0.7vw #106a8f;
    margin-top: 3.6vw;
    margin-left: 0vw;
}

.gaiyoup{
    text-align: justify;
    color: #0f4250;
    padding:10vw 15vw 15vw 15vw;
    font-size: 1.8vw;
}

.title{
    color: #106a8f;
    padding-left: 6.4vw;
    margin-top: -3.0vw;
    font-size: 3.5vw;
    border-bottom: 0.7vw solid #106a8f;
}

.titleborder{
    width: 6vw;
    border-top:solid 0.55vw #106a8f;
    margin-top: 1vw;
    margin-left: 0vw;
}

.question{
    color: #f8fdff;
    font-size: 1.6vw !important;
    background-color: #106a8f;
    padding: 2vw;
    margin: 0;
    margin-right: 35vw;
}

.answer{
    display: flex;
    background-color: #def5ff;
    color: #0f4250;
    font-size: 1.6vw !important;
    height: auto;
    margin-bottom: 15vw;
    margin-left: 35vw;
    padding-right: 3vw;
    text-align: justify;
}

.answera{
    padding-left: 2.5vw;
    padding-right: 2vw;
}

.answercontents{
    text-align: justify;
}


.highlight {
    text-decoration: underline;
    /* 下線 */
    text-decoration-thickness: 0.5em;
    /* 線の太さ */
    text-decoration-color: rgba(255, 183, 191, 1);
    /* 線の色 */
    text-underline-offset: -0.2em;
    /* 線の位置。テキストに重なるようにやや上部にする */
    text-decoration-skip-ink: none;
    /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */
  }
  
  .highlight2 {
    text-decoration: underline;
    /* 下線 */
    text-decoration-thickness: 0.5em;
    /* 線の太さ */
    text-decoration-color: rgba(254, 227, 86, 1);
    /* 線の色 */
    text-underline-offset: -0.2em;
    /* 線の位置。テキストに重なるようにやや上部にする */
    text-decoration-skip-ink: none;
    /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */
  }

.sakura {
    position: relative;
    padding: 0;
    margin: 0;
    width: 1.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    pointer-events: none;
}

.bg li {
    z-index: -1;
    width: 100vw;
    position: fixed;
    list-style: none;
    top: -50px;
    animation: fall 4s linear infinite, rotate1 2s ease-in-out infinite alternate;
}
@keyframes fall {
    to {
        top: 120%;
    }
}
@keyframes rotate1 {
    from {
        transform: translateX(0px) rotate(0deg);
    }
    to {
        transform: translateX(200px) rotate(-80deg) rotateX(180deg);
    }
}
@keyframes rotate2 {
    from {
        transform: translateX(200px) rotate(-45deg);
    }
    to {
        transform: translateX(0px) rotate(0deg);
    }
}
.bg li:nth-child(1) {
    left: 0;
    animation: fall 10s linear infinite, rotate1 3s ease-in-out infinite alternate;
}
.bg li:nth-child(2) {
    left: 5vw;
    animation: fall 15s linear infinite, rotate1 2s ease-in-out infinite alternate;
}
.bg li:nth-child(3) {
    left: 15vw;
    animation: fall 9s linear infinite, rotate1 3.5s ease-in-out infinite alternate;
}
.bg li:nth-child(4) {
    left: 30vw;
    animation: fall 8s linear infinite, rotate2 4s ease-in-out infinite alternate;
}
.bg li:nth-child(5) {
    left: 40vw;
    animation: fall 10s linear infinite, rotate1 4s ease-in-out infinite alternate;
}
.bg li:nth-child(6) {
    left: 55vw;
    animation: fall 11s linear infinite, rotate2 3s ease-in-out infinite alternate;
}
.bg li:nth-child(7) {
    left: 65vw;
    animation: fall 7s linear infinite, rotate2 3.5s ease-in-out infinite alternate;
}
.bg li:nth-child(8) {
    left: 50vw;
    animation: fall 7s linear infinite, rotate1 3s ease-in-out infinite alternate;
}
.bg li:nth-child(9) {
    left: 5vw;
    animation: fall 5s linear infinite, rotate1 4s ease-in-out infinite alternate;
}
.bg li:nth-child(10) {
    left: 20vw;
    animation: fall 5s linear infinite, rotate2 3s ease-in-out infinite alternate;
}
.bg li:nth-child(11) {
    left: 35vw;
    animation: fall 3s linear infinite, rotate2 3.5s ease-in-out infinite alternate;
}
.bg li:nth-child(12) {
    left: 70vw;
    animation: fall 3s linear infinite, rotate1 3s ease-in-out infinite alternate;
}
.bg li:nth-child(13) {
    left: 10vw;
    animation: fall 7s linear infinite, rotate1 4s ease-in-out infinite alternate;
}
.bg li:nth-child(14) {
    left: 80vw;
    animation: fall 6s linear infinite, rotate2 3s ease-in-out infinite alternate;
}
.bg li:nth-child(15) {
    left: 45vw;
    animation: fall 12s linear infinite, rotate2 3.5s ease-in-out infinite alternate;
}
.bg li:nth-child(16) {
    left: 50vw;
    animation: fall 4s linear infinite, rotate1 3s ease-in-out infinite alternate;
}

#fixed-header {
    position: fixed;
    top: 0px;  
    width: 100vw;
    height: 7vw;
    line-height: 7vw;
    box-sizing: border-box;
    transition: .5s; /* アニメーションタイミング */
    z-index: 5;
    background-color: #fff;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); /*これを付け足し*/
    display: flex;
}

.header-logo{
    padding-top: 1vw;
    padding-left: 2vw;
    line-height: 7vw;
}

.header-logo img{
    height: 3vw;
}

.header-menu{
    display: flex;
    height: 7vw;
    line-height: 7vw;
    margin-top: 0;
    margin-left: auto;
    margin-right: 2vw;
}

.header-menu li{
    width: auto;
    list-style: none;
    line-height: 7vw;
    margin-right: 1.5vw;
}

.header-menu a{
    color: #106a8f;
    font-size: 1vw;
    text-decoration: none;
    line-height: 7vw;
    height: 7vw;
    text-align: center;
}

.header-menu img{
    height: 2vw;
    margin-top: 2.5vw;
}

.sponsor{
    height: auto;
    margin: 5vw 0;
}

.sponsortitle{
    text-align: center;
    color: #106a8f;
    font-size: 3vw;
    margin: 20vw 0 5vw 0;
}

.sponsorcontents{
    padding: 0 32vw;
    display: flex;
    justify-content: space-between;
    margin:0 auto;
}

.sponsorcontents img{
    height: 10vw;
}

.sponsorcontents2{
    padding: 0 32.5vw;
    display: flex;
    justify-content: space-between;
    margin:0 auto;
}

.sponsorcontents2 img{
    width: 35vw;
    padding-top: 5vw;
}

.footer{
    position: relative;
    background-color: #106a8f;
    height: auto;
    padding-top:0vw;
    border-top:solid 0vw #6CBADA;
}

.footercontents{
    display: flex;
    justify-content: center;
}

.footermenu{
    position: relative;
    margin-left: 2vw;
}

.footermenu ul{
    position: relative;
}

.footermenu li{
    margin-top: 1vw;
    width: auto;
    list-style: none;
}

.footermenu a{
    color: #fff;
    font-size: 1.2vw;
    text-decoration: none;
    height: auto;
}

.footersns{
    display: flex;
}

.footersns li{
    list-style: none;
    width: 6vw;
    text-align: center;
    padding-top: 1vw;
}

.listx{
    margin-left: auto;
}

.listinsta{
    margin-right: 7vw;
}

.footersns img{
    width: 4vw;
}

.footerlogo{
    padding: 7vw 0;
    text-align: center;
    background-color: #106a8f;
}

.footerlogo img{
    width: 50vw;
}