@font-face{
	font-family: "line-font";
	src: url("../font/LINESeedJP_OTF_Rg.woff");
	font-weight: 400;
}

@font-face{
	font-family: "line-font";
	src:url("../font/LINESeedJP_OTF_Bd.woff");
	font-weight: 700;
}

@font-face{
	font-family: "line-font";
	src:url("../font/LINESeedJP_OTF_Eb.woff");
	font-weight: 900;
}

@font-face{
    font-family: "ff-good-headline-web-pro-ext", sans-serif;
    font-weight: 700;
    font-style: normal;
}


html, body {
  overscroll-behavior-y: none;
}

html{
	  scroll-behavior: smooth;
    font-size: 10px;
}

body{
    background-color: #000;
    background-attachment: fixed;
    
    scroll-behavior: smooth;
    /*background-repeat: no-repeat;*/
    
    font-family: "line-font";
    font-size:1.6rem;

    opacity: 1;

}
a:hover{
    opacity: 0.7;
}
    

#root{
    width: 100%;
    /*background-color: #000;*/

}

#page{
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    background-color: #00c4ff8f;
}

#navi_container{
    position: fixed;
    display: flex;
    flex-direction: column;
    top: 0rem;
    z-index: 300;
    left: max(0px, calc((100vw - 1440px) / 2));

    width: clamp(
    380px,
    calc(380px + (100vw - 1100px) * (100 / 340)),
    480px
    );
    height: min(calc(100vw / 1440 * 1055), 1055px);
    gap:1rem;
}

#sns_box{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 2rem 1rem 1rem;
    gap: 0.5rem;
    padding: 1rem;
}

.logo {
  filter:
    drop-shadow(-2px 0 0 #fff)
    drop-shadow(2px 0 0 #fff)
    drop-shadow(0 -2px 0 #fff)
    drop-shadow(0 2px 0 #fff)
    drop-shadow(-1px -1px 0 #fff)
    drop-shadow(1px -1px 0 #fff)
    drop-shadow(-1px 1px 0 #fff)
    drop-shadow(1px 1px 0 #fff);
}

.box{
    position: relative;
    border: 1px solid #ffffff;
    border-left: 0;
    /* box-shadow: 0 0 20px rgba(255,255,255,0.6); */
    padding: 0px 20px 10px 0px;
    overflow: hidden;
}

.box::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background: linear-gradient(
    180deg,
    rgba(0,184,204,0.6),
    rgba(91,239,255,0.6),
    rgba(0,184,204,0.6)
  );
}

#navi_header{
    font-size: 2rem;
    font-weight: 900;
    width: 100%;
    text-align: center;
    padding: 1rem;
    color: #fff;
}

#navi_body{
    display: flex;
    flex-direction: column;
    gap: 0rem;
}

#contents_navi{
        display: flex;
    flex-direction: column;
    /* justify-content: left; */
    align-items: flex-start;
    gap: 1rem;
}

.navi_btn{
      height: 48px;
    width: 100%;
    padding: 0 24px 0 20px;
    background-color: #ffffff;
    color: #2e6c95;
    border: none;
    cursor: pointer;
    border-radius: 0 24px 24px 0;
    box-shadow: 0 6px 0 #148fae;
    font-weight: 600;
    align-items: center;
    display: flex;
    font-size: 2rem;
}

.navi_btn.no_link{
    cursor: default;
    opacity: 0.5;
}

.balloon {
  position: relative;
  display: inline-block;
  padding: 16px 20px;
  background: #ffffff;
  border-radius: 12px;
  border: 3px solid #000;
  font-size: 2rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 1rem;
  
}

/* しっぽ部分 */
.balloon::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 40px;
  border-width: 15px 10px 0 10px;
  border-style: solid;
  border-color: #ffffff transparent transparent transparent;
}

#banner_navi{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 2rem 0rem 0rem;
}


#header{
    
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 1rem;
    display: flex;
    justify-content:left;
    position: fixed;
    z-index: 300;
}

#main_container{
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#main_visual{
    width: 100%;
    height: min(calc(100vw / 1440 * 1055), 1055px);
    position: relative;
    overflow: hidden;
}

#main_visual_img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right;
    position: absolute;
    z-index: 0;
    top: -110px;
    right: 0;
}

#main_race_copy{
    position: absolute;
    top: min(calc(100vw / 1440 * 264), 264px);
    left: min(calc(100vw / 1440 * 54), 54px);
    width: min(calc(100vw / 1440 * 674), 674px);
}

#main_race_copy img{
    width: 100%;
    object-fit: cover;
    object-position: center;
}

#main_race_logo{
    position: absolute;
    top: min(calc(100vw / 1440 * 600), 600px);
    left: min(calc(100vw / 1440 * 58), 58px);
    width: min(calc(100vw / 1440 * 700), 700px);
}

#main_race_logo img{
    width: 100%;
    object-fit: cover;
    object-position: center;
}


.hero {
    position: absolute;
    width: calc(100vw / 1440 * 665);
    height: 100%;
    /* max-height: 100vh; */
    overflow: hidden;
    right: 0;
  
}

/* 画像スライド */
.hero__slide {
    width: calc(100vw / 1440 * 665);
    position: absolute;
    inset: 0;
    background-size: contain;
    background-position: center right;
    background-repeat: no-repeat;
    will-change: opacity, transform;
    opacity: 0;
    transform: scale(1.08);
    filter: saturate(1.02);
    animation: heroFade 18s infinite;
}


.content_container{
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    padding: 4rem;
}

.content_inner{
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 4rem;
}

.content_title {
  font-size: 4rem;
  font-weight: 600;
  color: #000;
  text-shadow: -4px -4px 0 #fffdee,
    -4px  0px 0 #fffdee,
    -4px  4px 0 #fffdee,
     0px -4px 0 #fffdee,
     0px  4px 0 #fffdee,
     4px -4px 0 #fffdee,
     4px  0px 0 #fffdee,
     4px  4px 0 #fffdee,
    -3px -3px 0 #fffdee,
     3px -3px 0 #fffdee,
    -3px  3px 0 #fffdee,
     3px  3px 0 #fffdee;

}

.fukutome_sp{
        display: none;
}

.youtube_thumbnail_container{
        display: flex;
    flex-direction: row;
    gap: 1rem;
    width: 90%;
    margin: auto;
    padding: 3rem 0rem 8rem;
    justify-content: center;
}

.youtube_thumbnail_container span{
    font-size: 2.5rem;
    text-align: center;
    font-weight: 600;
    color: #eaff00;
    line-height: 1.2em;
    /*
    text-shadow: -4px -4px 0 #000000,
    -4px  0px 0 #000000,
    -4px  4px 0 #000000,
     0px -4px 0 #000000,
     0px  4px 0 #000000,
     4px -4px 0 #000000,
     4px  0px 0 #000000,
     4px  4px 0 #000000,
    -3px -3px 0 #000000,
     3px -3px 0 #000000,
    -3px  3px 0 #000000,
     3px  3px 0 #000000;
     */
}

.youtube_thumbnail_container iframe{
    width: 80vw;
    height: calc(80vw/16*9);
}

.youtubelive_thumbnail_container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    width: 100%;
    margin: auto;
    padding: 0rem;
}

.special_thumbnail_container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    width: 100%;
    margin: auto;
    padding: 0rem;
}


#main_visual_tate{
    display: none;
}

#main_logo_box{
    position: absolute;
    top: min(100vw / 1440 * 818, 818px);
    left: 50%;
    width: calc(100vw / 1440 * 818);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    opacity: 0;
    transform: translate(-50%, -50%);
    filter: blur(30px);
    animation: showBlur 1.4s ease-out forwards;
}

#main_inner{
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#banner_list{
    width: 85%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.banner_box{
    width: 100%;
    
    padding: 2rem;
    
}

#main_navi{
    display: flex;
    flex-direction: row;
    gap: 0rem;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1315px;
}

#main_navi span,
.banner_box span{
 filter: grayscale(100%);
}

.main_navi_btn{
    width: calc(100vw / 1440 * 263);
    height: calc(100vw / 1440 * 263);
    max-width: 263px;
    max-height: 263px;
    background-image: url("../images/common/navi/btn_bg.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;

}

#open_info p{
    text-align: center;
    font-size: 2ch;
    font-weight: bold;   
}

#dream_body{
    border-radius: 0rem;
    box-shadow: 0px 0px 15px #000000bf;
    /* 内側ボーダー */
  border: 14px solid #746d00;

  /* 外側ボーダー */
  box-shadow: 0 0 0 6px #e4ff00,
  /* くっきり影 */
    0 4px 0 0 rgba(0, 0, 0, 0.35);
}

#dream_container{
    width: 100%;
    max-width: 1000px;
    margin: 6rem auto;
    padding: 0rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

#dream_form{
    border-radius: 1rem;
    box-shadow: 0px 0px 10px #00000091;
}

#form_body{
    width: 80%;
    margin: 0 auto;
    padding: 2rem;
}

.dream_title{
    text-align: center;
    font-size: 4rem;
    font-weight: 900;
    font-style: italic;
    padding: 0.5rem;
}

.dream_container2{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap:1.5rem;
  padding: 1.5rem;
}

.dream_box2{
    display: flex;
    flex-direction: column;
    
    border: 1px solid #fff;
    border-radius: 0.3rem;
    box-shadow: 0px 0px 10px #00000091;
    background-color: #fff;
}

.dream_boat2{
    text-align: center;
    font-size: 3.5rem;
    font-weight: 900;
    font-style: italic;
    padding: 0.5rem;
    border-radius: 0.3rem;
}

.dream_racer{
  display: flex;
  flex-direction: row;  
}

.dream_detail{
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.dream_photo2{
    width:200px;
    padding: 0.5rem;
}

.dream_name2{
    font-size: 2.5rem;
    font-weight: 700;
    font-style: italic;
}

.dream_class2{
    font-size: 1.6rem;
    font-weight: 400;
    font-style: italic;
    padding: 0 0 0 0.4rem;
}

.dream_comment2{
    font-size: 1.4rem;
    font-weight: 700;
}


#racer_select{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.2rem;
  padding: 1rem;
  margin: 1rem;
  width: 100%;
}

.btn_racer_select{
    cursor: pointer;
}

.btn_racer_select:hover{
    opacity: 0.7;
} 

#footer{
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

#btn_vote{
    width: 144px;
    display: none;
}



.image-frame {
  display: inline-block;
  border: 6px solid #fff;

  box-shadow:
    0 6px 0 rgba(0, 0, 0, 0.28),
    0 12px 18px rgba(0, 0, 0, 0.28);

  transition: transform 180ms ease, box-shadow 180ms ease;
  will-change: transform;
}

.image-frame:hover {
  transform: translateY(-4px);
  box-shadow:
    0 10px 0 rgba(0, 0, 0, 0.28),
    0 18px 26px rgba(0, 0, 0, 0.28);
}

/* キーボード操作でも同じ挙動にしたい場合 */
.image-frame:focus-visible {
  outline: none;
  transform: translateY(-4px);
  box-shadow:
    0 10px 0 rgba(0, 0, 0, 0.28),
    0 18px 26px rgba(0, 0, 0, 0.28);
}

image-frame img{
    object-fit: cover;
}

.image-card {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.image-card img {
  display: block;
  width: 100%;
  height: auto;
}

.coming{
    filter: grayscale(100%);
}

/* リボン本体 */
.ribbon {
      position: absolute;
    bottom: 17px;
    left: -69px;
    width: 220px;
    text-align: center;
    background: #FFFF00;
    color: #000000;
    font-weight: bold;
    font-size: 10px;
    padding: 1px 0;
    transform: rotate(33deg);
    border: 1px solid #000;
    box-shadow: 3px 0px 0 #000;
    letter-spacing: 0px;
}

/* 折り返し（左側） */
.ribbon::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  border-width: 0 10px 10px 0;
  border-style: solid;
  border-color: transparent #bfbf00 transparent transparent;
}

/* 折り返し（右側） */
.ribbon::after {
  content: "";
  position: absolute;
  top: -10px;
  right: 0;
  border-width: 0 0 10px 10px;
  border-style: solid;
  border-color: transparent transparent transparent #bfbf00;
}

@media screen and (max-width: 1000px) {


    #page{
        width: 100%;
        max-width: 750px;
        margin: 0 auto;
        background-color: #00c4ff8f;
    }

    #navi_container{
        position: fixed;
        display: flex;
        flex-direction: column;
        /*top: min(calc(100vw / 750 * 988), 988px);
        z-index: 300;
        left: max(0px, calc((100vw - 750px) / 2));*/
        height:unset;
        width: 100%;
        max-width: 750px;
        margin: 0 auto;
        gap:1rem;
        
    }

    #sns_box{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 2rem 1rem 1rem;
        gap: 0.5rem;
        padding: 1rem;
    }

    .logo {
    filter:
        drop-shadow(-2px 0 0 #fff)
        drop-shadow(2px 0 0 #fff)
        drop-shadow(0 -2px 0 #fff)
        drop-shadow(0 2px 0 #fff)
        drop-shadow(-1px -1px 0 #fff)
        drop-shadow(1px -1px 0 #fff)
        drop-shadow(-1px 1px 0 #fff)
        drop-shadow(1px 1px 0 #fff);
    }

    .box{
        position: relative;
        border: 1px solid #ffffff;
        border-left: 0;
        /* box-shadow: 0 0 20px rgba(255,255,255,0.6); */
        padding: 0px 0px 10px 0px;
        overflow: hidden;
    }

    .box::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background: linear-gradient(
        180deg,
        rgba(0,184,204,0.6),
        rgba(91,239,255,0.6),
        rgba(0,184,204,0.6)
    );
    }

    #navi_header{
        font-size: 2rem;
        font-weight: 900;
        width: 100%;
        text-align: center;
        padding: 1rem;
        color: #fff;
    }

    #navi_body{
        display: flex;
        flex-direction: column;
        gap: 0rem;
    }

    #contents_navi{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* justify-content: left; */
        align-items: flex-start;
        gap: 1rem;
    }

    .navi_btn{
        height: 48px;
        width: 100%;
        padding: 0 24px 0 20px;
        background-color: #ffffff;
        color: #2e6c95;
        border: none;
        cursor: pointer;
        border-radius: 0 24px 24px 0;
        box-shadow: 0 6px 0 #148fae;
        font-weight: 600;
        align-items: center;
        display: flex;
        font-size: 1.6rem;

    }

    .navi_btn:nth-child(even) {
        border-radius: 24px 0 0 24px;
    }


    .balloon {
        position: relative;
        display: inline-block;
        padding: 16px 20px;
        background: #ffffff;
        border-radius: 12px;
        border: 3px solid #000;
        font-size: 1.4rem;
        font-weight: 600;
        text-align: center;
        margin-bottom: 1rem;
        
        }
        

    #banner_navi{
        display: flex;
        flex-direction: row;
        gap: 1rem;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 2rem 0rem 0rem;
    }


    #header{
        
        width: 100%;
        max-width: 1440px;
        margin: 0 auto;
        padding: 1rem;
        display: flex;
        justify-content:left;
        position: fixed;
        z-index: 300;
    }

    #main_container{
        width: 100%;
        max-width: 1440px;
        margin: 0 auto;
        padding: 0rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #main_visual{
        width: 100%;
        height: min(calc(100vw / 750 * 988), 988px);
        position: relative;
        overflow: hidden;
    }

    #main_visual_img{
        width: min(calc(100vw / 750 * 1209), 1209px);
        /* height: 988px; */
        object-fit: cover;
        object-position: right;
        position: absolute;
        z-index: 0;
        top: 0px;
        right: 0;
    }

    #main_race_copy{
            position: absolute;
            top: min(calc(100vw / 750 * 30), 30px);
            left: min(calc(100vw / 750 * 30), 30px);
            width: min(calc(100vw / 750 * 676), 676px);
    }

    #main_race_copy img{
        width: 100%;
        object-fit: cover;
        object-position: center;
    }

    #main_race_logo{
        position: absolute;
        top: min(calc(100vw / 750 * 810), 810px);
        left: min(calc(100vw / 750 * 28), 28px);
        width: min(calc(100vw / 750 * 695), 695px);
    }

    #main_race_logo img{
        width: 100%;
        object-fit: cover;
        object-position: center;
    }


    .hero {
        position: absolute;
        width: 100%;
        height: 100%;
        /* max-height: 100vh; */
        overflow: hidden;
        right: 0;
    
    }

    /* 画像スライド */
    .hero__slide {
    width: 100%;
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center right;
    will-change: opacity, transform;
    opacity: 0;
    transform: scale(1.08);
    filter: saturate(1.02);
    animation: heroFade 18s infinite;
    }



    .content_container{
        width: 100%;
        max-width: 750px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
        padding: 0rem;
    }

    .content_inner{
        width: 100%;
        max-width: 750px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 2rem;
    }

    .content_title {
        font-size: 2.5rem;
        font-weight: 600;
        color: #000;
        text-shadow: -4px -4px 0 #fffdee,
            -4px  0px 0 #fffdee,
            -4px  4px 0 #fffdee,
            0px -4px 0 #fffdee,
            0px  4px 0 #fffdee,
            4px -4px 0 #fffdee,
            4px  0px 0 #fffdee,
            4px  4px 0 #fffdee,
            -3px -3px 0 #fffdee,
            3px -3px 0 #fffdee,
            -3px  3px 0 #fffdee,
            3px  3px 0 #fffdee;

    }


    .youtube_thumbnail_container{
            display: flex;
        flex-direction: row;
        gap: 1rem;
        width: 100%;
        margin: auto;
        padding: 3rem 1rem  4rem;
    }

    .youtube_thumbnail_container iframe {
        width: 90vw;
        height: calc(90vw / 16 * 9);
    }


    .youtubelive_thumbnail_container{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        width: 100%;
        margin: auto;
        padding: 0rem;
    }

    .special_thumbnail_container{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        width: 100%;
        margin: auto;
        padding: 0rem;
    }

    #open_info p{
      font-size: 1.2rem;
    }

    #dream_container {
        width: 100%;
        max-width: 1000px;
        margin: 1rem auto;
        padding: 0rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
    }

    #dream_form{
      padding: 0.3rem;
    }

    #racer_select{
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0rem;
      padding: 0.3rem;
      margin: 0rem;
      width: 100%;
    }


    .dream_container2{
      display: flex;
      flex-direction: column;
      padding: 0.5rem;
      gap: 0.5rem;
    }

    .dream_title {
        text-align: center;
        font-size: 2rem;
        font-weight: 900;
        font-style: italic;
        padding: 0.5rem;
    }

    .dream_boat2 {
        text-align: center;
        font-size: 2.5rem;
        font-weight: 900;
        font-style: italic;
        padding: 0.1rem;
        border-radius: 0.3rem;
    }

    .dream_detail {
        display: flex;
        flex-direction: column;
        padding: 0.2rem;
    }

    .dream_class2 {
        font-size: 1.2rem;
        font-weight: 400;
        font-style: italic;
        padding: 0 0 0 0.4rem;
    }

    .dream_name2 {
        font-size: 2rem;
        font-weight: 700;
        font-style: italic;
    }

    .dream_comment2 {
        font-size: 1.2rem;
        font-weight: 400;
    }

    .btn_racer_select span{
        font-size: 1.2rem;
    }


    #form_body{
        width: 100%;
        margin: 0 auto;
        padding: 1rem;
    }

    #form_body p{
        font-size: 1.4rem;
    }

    #form_body input{
        font-size: 1.4rem;
    }

    #dentou_attention{
      font-size: 1.2rem;
      font-weight: bold;
    }

}

@media screen and (max-width: 600px) {

    #sns_box {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 1rem 0rem 1rem;
        gap: 0.5rem;
        padding: 1rem;
    }

    .navi_btn{
        height: 48px;
        width: 100%;
        padding: 0 24px 0 20px;
        background-color: #ffffff;
        color: #2e6c95;
        border: none;
        cursor: pointer;
        border-radius: 0 24px 24px 0;
        box-shadow: 0 6px 0 #148fae;
        font-weight: 600;
        align-items: center;
        display: flex;
        font-size: 1.2rem;

    }

    #banner_navi {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        justify-content: center;
        align-items: center;
        width: 97%;
        margin: 2rem auto 0rem;
    }

    .fukutome{
        display: none;
    }


    .fukutome_sp{
        display: none;
    }

    .content_container{
        width: 100%;
        max-width: 750px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        padding: 0rem;
    }

    .youtubelive_thumbnail_container{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
        width: 100%;
        margin: auto;
        padding: 0rem;
    }

    .special_thumbnail_container{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
        width: 100%;
        margin: auto;
        padding: 0rem;
    }

    .image-frame {
            display: inline-block;
            border: 3px solid #fff;
            box-shadow: 0 6px 0 rgba(0, 0, 0, 0.28), 0 6px 9px rgba(0, 0, 0, 0.28);
            transition: transform 180ms 
        ease, box-shadow 180ms 
        ease;
            will-change: transform;
        }
}


.boat1{
    background-color: #fff;
    color: #000;
}

.boat2{
    background-color: #000;
    color: #fff;
}

.boat3{
    background-color: #e10d0d;
    color: #fff;
}

.boat4{
    background-color: #0628b3;
    color: #fff;
}

.boat5{
    background-color: #dde402;
    color: #000;
}

.boat6{
    background-color: #05a71a;
    color: #fff;
}


/* ラジオボタンの○を消す */
input[type="checkbox"] {
    display: none;
}
/* 画像の周りに隙間をあける */
label img {
    padding: 1px;
}

label{
    border-radius: 0.5rem;
}

/* 未選択の場合、色を薄くする */
input[type="checkbox"] + label {
    border: 2px solid #fff;
    opacity:1;
  }
/* 選択済みの場合、色を濃くする */
input[type="checkbox"]:checked + label {
    border: 2px solid #800101;
    opacity:0.7;
}

.dot-wrapper{
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

/* 背景レイヤー */
.dot-wrapper::before{
  content: "";
  position: absolute;
  inset: -50%; /* 回転しても隙間が出ないように広めに */

  /* 指定カラー */
  background-color: #0f65ce;

  --dot: 16px;
  --gap: 45px;
  --tile: calc(var(--dot) + var(--gap));

  background-image:
    radial-gradient(circle, #0056bf 0 var(--dot), transparent calc(var(--dot) + 1px));
  background-size: var(--tile) var(--tile);

  transform: rotate(25deg);
  transform-origin: center;

  animation: dotMove 20s linear infinite;
  will-change: background-position;
}

@keyframes dotMove{
  from { background-position: 0 0; }
  to   { background-position:  var(--tile) calc(-1 * var(--tile)); }
}




.ZigZag_3D {
    background-color: #ffffff;
opacity: 1;
background-image:  linear-gradient(30deg, #ffeef3 12%, transparent 12.5%, transparent 87%, #ffeef3 87.5%, #ffeef3), linear-gradient(150deg, #ffeef3 12%, transparent 12.5%, transparent 87%, #ffeef3 87.5%, #ffeef3), linear-gradient(30deg, #ffeef3 12%, transparent 12.5%, transparent 87%, #ffeef3 87.5%, #ffeef3), linear-gradient(150deg, #ffeef3 12%, transparent 12.5%, transparent 87%, #ffeef3 87.5%, #ffeef3), linear-gradient(60deg, #ffeef377 25%, transparent 25.5%, transparent 75%, #ffeef377 75%, #ffeef377), linear-gradient(60deg, #ffeef377 25%, transparent 25.5%, transparent 75%, #ffeef377 75%, #ffeef377);
background-size: 32px 56px;
background-position: 0 0, 0 0, 16px 28px, 16px 28px, 0 0, 16px 28px;
  }

  .bg_dia{
    background-image: conic-gradient(from 45deg at 50% 50%, #ffdb25 90deg, transparent 90deg 180deg, #ffcc24 180deg 270deg, transparent 270deg);
background-size: 12px 12px;
background-color: #fffb02;
animation: moveBg2 3s linear infinite;
  }

  .bg_wave{
    background-color: #ffffff;
opacity: 1;
background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, #ffffff 16px ), repeating-linear-gradient( #e8d1ff55, #e8d1ff );
  }


  .bg_circle{
    background-color: #ffffff;
opacity: 1;
background-image: radial-gradient(circle at center center, #fdffd8, #ffffff), repeating-radial-gradient(circle at center center, #fdffd8, #fdffd8, 16px, transparent 32px, transparent 16px);
background-blend-mode: multiply;
  }


  @keyframes moveBg {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -71px 94px;
  }
}

@keyframes moveBg2 {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 12px -12px;
  }
}

@keyframes showBlur {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%);
    filter: blur(30px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
    filter: blur(0);
  }
}
.striped-bg{
  --c1:#00b5ff;
  --c2:#01a2e6;

  background-image: repeating-linear-gradient(
    45deg,
    var(--c1) 0px 1px,
    var(--c2) 1px 4px,
    var(--c1) 4px 9px,
    var(--c2) 9px 17px
  );

  /* なくてもOKだけど、ピクセル感を揃えたいなら残す */
  background-size: 168px 168px;

  animation: stripe-drift 18s linear infinite;

  box-shadow:
    0 -14px 18px rgba(0,0,0,.6),
    0  14px 18px rgba(0,0,0,.6);
}

@keyframes stripe-drift{
  from { background-position: 0 0; }
  to   { background-position: 170px 170px; } /* ← 17の倍数にする */
}


.frame-yellow{
  border-color: #fffc00;
}


/* 画像URL差し替え */
.hero__slide.s1 { background-image: url("../images/main_bg_dream1.jpg"); animation-delay: 5s; }
.hero__slide.s2 { background-image: url("../images/main_bg_dream2.jpg"); animation-delay: 10s; }


/* テキスト（必要なら） */
.hero__content{
  position: relative;
  z-index: 2;
  color: #fff;
  padding: clamp(24px, 5vw, 64px);
  max-width: 900px;
}

/* 読みやすさのための薄いオーバーレイ */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  /*
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.2) 60%,
    rgba(0,0,0,0.0)
  );
  */
}

/* フェード + ズーム（Ken Burns） */
@keyframes heroFade {
  0%   { opacity: 0; transform: scale(1.08); }
  8%   { opacity: 1; }          /* フェードイン */
  45%  { opacity: 1; transform: scale(1.00); } /* ゆっくり寄り戻す */
  55%  { opacity: 0; }          /* フェードアウト */
  100% { opacity: 0; transform: scale(1.08); }
}

/* 動きを減らしたい人への配慮 */
@media (prefers-reduced-motion: reduce){
  .hero__slide{ animation: none; opacity: 0; transform: none; }
  .hero__slide.s1{ opacity: 1; }
}



/* ボタン（ハンバーガー） */
.menuBtn{
    width: 48px;
    height: 48px;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
    position: fixed;
    z-index: 999;
}

.menuBtn__icon{
  width: 26px;
  height: 18px;
  position: relative;
  display: block;
}
.menuBtn__icon span{
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #000;
  border-radius: 999px;
}
.menuBtn__icon span:nth-child(1){ top: 0; }
.menuBtn__icon span:nth-child(2){ top: 8px; }
.menuBtn__icon span:nth-child(3){ top: 16px; }

/* 背景暗幕 */
.backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  transition: opacity 240ms ease;
  z-index: 900;
}
.backdrop.is-open{ opacity: 1; }

/* サイドナビ本体 */
.sideNav{
  position: fixed;
  top: 0;
  left: 0;
  height: 100dvh;
  width: min(86vw, 360px);
  background: #fff;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  transform: translateX(-102%);
  transition: transform 280ms ease;
  z-index: 1000;
  padding: 18px 18px 28px;
  display: flex;
  flex-direction: column;
}
.sideNav.is-open{
  transform: translateX(0);
}

.sideNav__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.sideNav__title{
  font-weight: 700;
  letter-spacing: 0.06em;
}

.closeBtn{
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.sideNav__list{
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 10px;
}
.sideNav__list a{
  display: block;
  padding: 12px 10px;
  color: #111;
  text-decoration: none;
  border-radius: 12px;
}
.sideNav__list a:hover{
  background: rgba(0,0,0,0.06);
}

/* モーション軽減 */
@media (prefers-reduced-motion: reduce){
  .sideNav, .backdrop{ transition: none; }
}