html{
    scroll-behavior: smooth;
}
html, body {
    overscroll-behavior-x: none; /* 横方向のバウンスを禁止 */
    overscroll-behavior-y: none; /* 縦方向も禁止したい場合 */
    }
body
{
    font-family: "Noto Sans JP", serif;
    font-size: 16px;
    font-weight: bold;
    width: 100vw;
    margin: 0;
    background-color: #ff639b;
    overflow-x: hidden;
}
.bg
{
    background-image: url(../img/_bg.jpg);
    background-size: 100%;
    background-position: center;
    background-attachment: fixed;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}
.bg-il
{
    width: 100%;
    height: 100%;
    background-position: center top;
    padding: 0 0  50px 0;
    background-image: url(../img/_bg-li.png);
    background-size: contain;
    background-position: top;
    max-width: 1920px;
    margin: 0 auto;
}
header
{
    background-color: #ff639b;
    width: 100vw;
    height: 79px;
}
main
{
    width: 60%;
    max-width: 940px;
    margin: 0 auto;
}
img
{
    max-width: 100%;
}
.title
{
    width: 96%;
    margin-top: 30px;
}
.btn-con
{
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    margin: 125px auto 85px;
}
.btn-con>p
{
    font-size: 1.5em;
    font-weight: 500;
    letter-spacing: 3px;;
    margin: 0;
    color: #243b77;
}
.btn
{
    margin: 25px auto;
}
.btn>a
{
    display: inline-block;
    width: 100%;
    height: 100%;
}
.btn-app
{
    width: 40%;
    aspect-ratio: 417/125;
    background-image: url(../img/_btn-app.png);
    background-size: cover;
    background-position: center;
    border-radius: 70px;
    margin-bottom: 0;
}

.btn-part
{
    width: 40%;
    aspect-ratio: 417/125;
    background-image: url(../img/_btn-part.png);
    background-size: cover;
    background-position: center;
    border-radius: 70px;
    margin-bottom: 0;
}
.btn-form
{
    width: 40%;
    aspect-ratio: 469/151;
    background: url(../img/_btn-form.png);
    background-size: cover;
    background-position: center;
    border-radius: 70px;
    margin-bottom: 0;

}
/*準備中期間*/
/* .btn-form
{
    background-image: url(../img/pre-btn.png) !important;
} */
.rank
{
    margin-right: -4.2%;
    width: 100%;
}
.step
{
    margin-left: -8.5%;
    width: 108%;
}

.note
{
    margin-top: 100px;
    display: flex;
    width: 98%;
}
.note>img
{
    width: 100%;
    margin: 0 auto;
}
.banner
{
    margin: 100px auto;
    display: flex;
    width: 80%;
}
.banner>img
{
    
    margin: 0 auto;
}
.sponsore
{
    color: #fff;
    font-size: clamp(18px,2vw,1.8em);
    text-align: center;
    background-color: #60a045;
    padding: 50px 25px;
    box-sizing: border-box;
    border-radius: 40px;
}
.sponsore>p
{
    line-height: 1.8;
}
.app-2
{
    width: 50%;
}



@media screen and (min-width:769px) {
    .sp
    {
        display: none;
    }
    .pc
    {
        display: block;
    }
    .banner>a:hover
    {
        filter: brightness(0.8);
    }
    .btn-app:hover,
    .btn-form:hover
    {
        filter: brightness(0.8);
    }
    .menu
    {
        height: 100%;
        width: 100%;
        padding: 0 5%;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    header>.menu ul
    {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        font-size: 1.2em;
        width: 40%;
        min-width: 600px;
        justify-content: space-around;
    }
    header>.menu ul a
    {
        text-decoration: none;
        color: #fff;
    }
    header>.menu ul a:hover
    {
        filter: brightness(0.8);
    }
    .btn-app:hover
    {
        filter: brightness(0.9);
    }
}
@media screen and (max-width:768px) {
    .sp
    {
        display: block;
    }
    .pc
    {
        display: none;
    }
    .bg-il
    {
        background-image: none;
        background-size: cover;
        background-position: center;
        max-width: 768px;
        margin: 0 auto;
    }
    main
    {
        width: 90%;
        max-width: 940px;
        margin: 0 auto;
    }
    .title
    {
        width: 100%;
    }
    .btn-con
    {
        margin-top: 40px;
    }
    .btn
    {
        width: 70%;
        border-radius: 100px;
        margin:  10px auto;
    }
    .note>img
    {
        width: 100%;
    }

    header {
      position: relative;
      display: flex;
      justify-content: flex-end;
      z-index: 1000;
      height: 60px;
    }

    /* ハンバーガーボタン */
    .menu-btn {
      position: relative;
      width: 50px;
      height: calc(100% - 20px);
      cursor: pointer;
      margin: 10px;
      z-index: 1100;
      display: flex;
      flex-flow: column;
      justify-content: space-around;
    }

    .menu-btn span {
      display: block;
      height: 4px;
      width: 100%;
      background: #2a3088;
      border-radius: 2px;
      margin: 0;
      transition: 0.4s ease;
    }

    .menu-btn.active span:nth-child(1) {
      transform: translateY(13px) rotate(45deg);
    }

    .menu-btn.active span:nth-child(2) {
      opacity: 0;
    }

    .menu-btn.active span:nth-child(3) {
      transform: translateY(-14px) rotate(-45deg);
    }

    /* メニュー全体 */
    .menu {
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      width: 100%;
      background: #ff639b;
      transform: translateY(-100%);
      transition: transform 0.5s ease;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      z-index: 1000;
    }

    .menu.open {
      transform: translateY(0);
    }

    .menu ul {
      list-style: none;
      padding: 0;
      text-align: center;
    }

    .menu li {
      opacity: 0;
      margin: 20px 0;
      font-size: 1.1em;
      transition: opacity 0.5s ease;
    }

    .menu.open li {
      animation: fadeIn 0.6s ease forwards;
    }

    .menu.open li:nth-child(1) { animation-delay: 0.2s; }
    .menu.open li:nth-child(2) { animation-delay: 0.4s; }
    .menu.open li:nth-child(3) { animation-delay: 0.6s; }
    .menu.open li:nth-child(4) { animation-delay: 0.8s; }

    @keyframes fadeIn {
      to { opacity: 1; }
    }

    .menu.open li a {
      color: #fff;
      font-size: 1.3em;
      text-decoration: none;
    }
    .banner
    {
        margin: 40px auto;
    }
    .note
    {
        margin-top: 50px;
    }
    .step
    {
        margin-left: -8.5%;
    }
}