@charset "utf-8";

/* 基本リセット */
body {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP", sans-serif;
  overflow-x: hidden;
  color: #024188;
}

/* MVセクション全体 */
.header-mv {
  position: relative;
  width: 100%;
  line-height: 0;
  overflow: hidden;
}

/* MV画像コンテナ */
/* .mv-content {
  width: 100%;
  position: relative;
  z-index: 1;
} */

/* MV画像（ブラウザ幅に合わせて伸縮） */
/* .mv-img {
  width: 100%;
  height: auto;
  display: block;
} */

/* 【調整】波のCanvas：前々回と前回のちょうど中間の高さ */
#waveCanvasOverlapping {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  /* 画面幅の約6.2%で伸縮。スマホ時(最小40px)〜大画面PC時(最大88px) */
  height: clamp(40px, 6.2vw, 88px);
  z-index: 14;
  display: block;
  pointer-events: none;
}

img{
    width: 100%;
    height: auto;
}

.wrapper{
    position: relative;
}

#seika,#sakana,#hana,#ichiba{
    margin-top: -70px;
    padding-top: 70px;
}


/* header */

.head_sp{
    display: none;
}

.header{
    width: 100%;
    height: 60px;
    background-color: #024188;
    position: fixed;
    z-index: 16;
}

.header_wrap{
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
}

.header_l{
    max-width: 500px;
    width: 26.4%;
    height: 60px;
    background-color: #d8eaf6;
    border-right: 4px solid;
    border-color: #ffd325;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
}
.header_l_img{
    max-width: 203px;
    width: 100%;
}

.header_r{
    padding-right: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /* flex-grow: 1; */
}

.nav_link{
    display: block;
    /* width: 100px; */
    height: 40px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 700;
    color: #024188;
    display: flex;
    justify-content: center;
    padding: 0 15px;
    align-items: center;
    margin-right: 10px;
    transition-duration: 0.3s;
    flex-grow: 1;
    /* gap: 0; */
}
.nav_link:last-of-type{
    /* width: 175px; */
    margin-right: 0
}

.nav_link:hover{
    color: #fff;
}

.link01{
    background-color: #fdf3dc;
}
.link01:hover{
    background-color: #ffd325;
    color: #fff;
}
.link02{
    background-color: #c7e9ff;
}
.link02:hover{
    background-color: #0099ff;
    color: #fff;
}
.link03{
    background-color: #fdeae7;
}
.link03:hover{
    background-color: #fc5f74;
    color: #fff;
}
.link04{
    background-color: #e4f4f2;
}
.link04:hover{
    background-color: #3aa6a6;
    color: #fff;
}

.header_h{
    height: 60px;
}

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

.header_wrap.head_pc{
    display: none;
}

.header_h{
    display: none;
}

.header{
    width: 100%;
    height: 46px;
    background-color: #024188;
    position: fixed;
    bottom: 0;
}

.head_sp{
    width: 100%;
    height: 46px;
    display: flex;
    justify-content: space-between;
}


.nav_link_sp{
    width: calc( 100% / 4 );
    display: flex;
    font-size: 18px;
    font-weight: 700;
    color: #024188;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-duration: 0.3s;
}

.link01{
    border-top: solid 3px #ffd325;
}
.link02{
    border-top: solid 3px #0080d6;
}
.link03{
    border-top: solid 3px #fc5f74;
}
.link04{
    border-top: solid 3px #3aa6a6;
}

.head_sp .arrow{

}

.arrow {
  width: 20px;
  height: 20px;
  /* background-color: #fecb18; */
  border-radius: 50%;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 5px;
  /* box-shadow: 0 3px 8px rgba(254, 203, 24, 0.4); */
}

.arrow::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(45deg);
  margin-top: 4px;
  box-sizing: border-box;
  border-radius: 1px 0 0 0;
}

.link01 .arrow{
    background: #ffd325;
}
.link01:hover .arrow{
    background: #fff;
}
.link01:hover .arrow::after{
    border-top: 2px solid #ffd325;
    border-left: 2px solid #ffd325;
}

.link02 .arrow{
    background: #0080d6;
}
.link02:hover .arrow{
    background: #fff;
}
.link02:hover .arrow::after{
    border-top: 2px solid #0080d6;
    border-left: 2px solid #0080d6;
}


.link03 .arrow{
    background: #fc5f74;
}
.link03:hover .arrow{
    background: #fff;
}
.link03:hover .arrow::after{
    border-top: 2px solid #fc5f74;
    border-left: 2px solid #fc5f74;
}

.link04 .arrow{
    background: #3aa6a6;
}
.link04:hover .arrow{
    background: #fff;
}
.link04:hover .arrow::after{
    border-top: 2px solid #3aa6a6;
    border-left: 2px solid #3aa6a6;
}



}

/* MV下のコンテンツ */
.content-area01 {
    position: relative;
    background-image: url('../img/texture.png'); 
    background-repeat: repeat;
    /* padding: 80px 20px 60px; */
    padding: 60px 20px 60px;
    text-align: center;
    margin-top: -1px;
    border-bottom: solid 4px;
    border-image: linear-gradient(90deg, #0080d6 50%, #ffd325 50%) 1;
    z-index: 14;
}

.content-area02 {
    background-image: url('../img/texture02.jpg');
    background-repeat: repeat;
    padding: 60px 20px 100px;
}

/* 開催にあたって */
.top_lead{
    position: relative;
    max-width: 760px;
    width: 100%;
    border-radius: 38px;
    background-color: #fff;
    font-size: 16px;
    font-weight: 500;
    margin: 0 auto;
    box-shadow: 0px 9px 0px 0px rgba(0, 128, 214, 1);
}

.top_lead p{
    padding: 85px 0 50px;
    /* line-height: 1.75;
    letter-spacing: 0.08em; */
    line-height: 2;
    letter-spacing: 0.04em;
}

.top_img01{
    position: absolute;
    max-width: 316px;
    width: 72%;
    top: -19%;
    left: 53%;
    transform: translateX(-50%);
}
.top_img02{
    position: absolute;
    max-width: 100px;
    width: 21%;
    top: -6%;
    left: 8%;
}
.top_img03{
    position: absolute;
    max-width: 116px;
    width: 21%;
    top: 4%;
    right: -2.7%;
}
.top_img04{
    position: absolute;
    max-width: 87px;
    width: 20%;
    bottom: -1.3%;
    right: 5%;
}

/*  */
.btn_box{
    max-width: 1000px;
    width: 100%;
    margin: 60px auto 0;
    display: flex;
    justify-content: space-between;
}

.btn{
    display: block;
    /* max-width: 230px; */
    width: 23%;
    height: 64px;
    font-size: 18px;
    letter-spacing: 0.03em;
    font-weight: 700;
    border-radius: 200px;
    text-align: center;
    box-shadow: 0px 3px 0px 4px rgba(0, 128, 214, 1);
    transition: .3s ease;
}

.btn:hover{
    box-shadow: 0px 0px 0px 5px rgb(0, 128, 214);
    transform: translateY(6px);
}

.btn:hover > p{
    color: #fff;
}

.arrow_s_b {
    position: relative;
    padding-top: 10px;
}

.arrow_s_b::before {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    top: 40%;
    left: 50%;
    bottom: 0;
    margin: auto;
    transform: translateX(-50%);
    transition: .3s ease;
}

.arrow_s_b.link01::before{
    background: #f6c343;
}
.arrow_s_b.link01:hover::before{
    background: #fdf3dc;
}
.arrow_s_b.link02::before{
    background: #0080d6;
}
.arrow_s_b.link02:hover::before{
    background: #c7e9ff;
}
.arrow_s_b.link03::before{
    background: #fc5f74;
}
.arrow_s_b.link03:hover::before{
    background: #fdeae7;
}
.arrow_s_b.link04::before{
    background: #3aa6a6;
}
.arrow_s_b.link04:hover::before{
    background: #e4f4f2;
}

.arrow_s_b::after {
    content: '';
    position: absolute;
    top: 40%;
    bottom: 0;
    right: 50%;
    width: 0;
    height: 0;
    margin: auto;
    border-top: 7px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-bottom: 0 solid transparent;
    transform: translateX(50%);
    box-sizing: border-box;
    transition: .3s ease;
}

.arrow_s_b::after{
    border-top: 7px solid #ffffff;
}
.arrow_s_b.link01:hover::after{
    border-top: 7px solid #f6c343;
}
.arrow_s_b.link02:hover::after{
    border-top: 7px solid #0080d6;
}
.arrow_s_b.link03:hover::after{
    border-top: 7px solid #fc5f74;
}
.arrow_s_b.link04:hover::after{
    border-top: 7px solid #3aa6a6;
}

/* 部門 */
.mt50{
    margin-top: 50px !important;
}

.rank_cont{
    max-width: 1150px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.rank_cont_img01{
    max-width: 164px;
    width: 21%;
    position: absolute;
    top: 2%;
    right: -3%;
    z-index: 1;
}
.rank_cont_img02{
    max-width: 189px;
    width: 25%;
    position: absolute;
    top: 5%;
    right: -3%;
    z-index: 1;
}
.rank_cont_img03{
    max-width: 171px;
    width: 20%;
    position: absolute;
    top: 8%;
    right: -3%;
    z-index: 1;
}
.rank_cont_img04{
    max-width: 170px;
    width: 22%;
    position: absolute;
    top: 16%;
    right: -3%;
    z-index: 1;
}

.rank_cont_mt{
    margin-top: 60px !important;
}

.rank_bumon{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.bumon_img{
    max-width: 98px;
    width: 18%;
}

.bumon_name{
    padding-left: 20px;
    letter-spacing: 0.08em;
    position: relative;
}
.bumon_ja{
    font-size: 32px;
    font-weight: 700;
}
.bumon_en{
    font-size: 14px;
    color: #acacac;
    margin-top: 6px;
}

.rank_kira{
    max-width: 58px;
    width: 35%;
    position: absolute;
    top: -28%;
    right: -7%;
}
.rank_kira02{
    max-width: 58px;
    width: 48%;
    position: absolute;
    top: -28%;
    right: -22%;
}

.rank_box{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.rank_item{
    max-width: 365px;
    width: 31.8%;
    background-color: #fff;
    border-radius: 20px;
    padding: 0 15px 15px;
    font-weight: 500;
    box-shadow: 6px 8px 0px 0px rgba(155, 201, 232, 1);
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.rank_num_box{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-top: -26px;
}

.rank_num_box::before{
    content: "";
    display: inline-block;
    background-image: url(../img/rank_img03.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 17px;
    height: 48px;
    bottom: -6px;
    position: relative;
}
.rank_num_box::after{
    content: "";
    display: inline-block;
    background-image: url(../img/rank_img04.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 17px;
    height: 47px;
    bottom: -6px;
    position: relative;
}

.rank_num_box02{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-top: -26px;
}

.rank_01_img{
    max-width: 98px;
    width: 100%;
    margin: 0 auto;
}
.rank_03_img{
    /* max-width: 58px;
    width: 100%;
    margin: 0 auto; */
}

.rank_num_item01{
    margin: 0 4px;
    /* max-width: 98px; */
    min-width: 73px;
    width: 30.2%;
}

.rank_num{
    max-width: 78px;
    width: 100%;
    height: 30px;
    letter-spacing: 0.05em;
    border-radius: 8px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.rank_num_item01 .rank_num{
    background-color: #ffd325;
}
.num_sakana .rank_num{
    background-color: #0099ff;
    color: #fff;
}
.num_hana .rank_num{
    background-color: #fc5f74;
    color: #fff;
}
.num_ichiba .rank_num{
    background-color: #00aaab;
    color: #fff;
}

.rank_num p{
    font-size: 16px;
    text-align: center;
    white-space: nowrap;
}
.rank_num p span{
    font-size: 1.875em;
}

.photo_img{
    max-width: 335px;
    width: 100%;
    margin: 10px auto 0;
}
.photo_img img{
    border-radius: 10px;
}

.rank_box_txt{
    flex: 1;
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */

}

.rank_box_name{
    font-size: 18px;
    margin-top: 20px;
}
.rank_box_title{
    font-size: 20px;
    margin-top: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
}
.rank_box_comm{
    font-size: 14px;
    line-height: 1.5;
    margin-top: 0.8em;
    margin-bottom: 0.8em;
    min-width: 0;
    /* white-space: nowrap; */
    overflow: hidden;
    /* text-overflow: ellipsis; */
}

.rabel{
    width: 70px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    border-radius: 10px;
    /* margin-top: 20px; */
    margin-top: auto;
}

.ra_seika{
    background-color: #fdf3dc;
    color: #8a6a11;
}
.ra_sakana{
    background-color: #e2f0f9;
    color: #0080d6;
}
.ra_hana{
    background-color: #fdeae7;
    color: #fc5f74;
}
.rabel.ra_ichiba{
    background-color: #e4f4f2;
    color: #3aa6a6;
    width: 120px;
}



/* footer */
.footer{
    width: 100%;
    background-color: #d0e9fb;
    padding: 50px 10px;
}

.footer_txt{
    margin: 0 auto;
    text-align: center;
    letter-spacing: 0.04em;
}

.footer_txt p:first-of-type{
    font-size: 14px;
    font-weight: 500;
    line-height: 2em;
    color: #426a97;
}
.footer_txt p:last-of-type{
    font-size: 10px;
    color: #87b5d6;
    margin-top: 20px;
    line-height: 1.8;
}



/* inview */
.fade{
	opacity: 0;
	transition-duration: 1s;
	transform: translateY(20px);
}
.fade.is-show{
	opacity: 1;
	transition-duration: 1s;
	transform: translateY(0px);
}


/* モーダル */

.dept-modal {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
  
.dept-modal.is_open {
    opacity: 1;
}
  
.dept-modal.is_closing {
    opacity: 0;
}

  /* モーダル暗幕 */
.dept-modal-backdrop {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(15, 23, 42, 0.75); backdrop-filter: blur(4px);
    z-index: 99999; display: none; align-items: center; justify-content: center;
    padding: 16px; box-sizing: border-box;
  }
.dept-modal-wrapper {
    position: relative;
    max-width: 520px;
    /* width: 100%; */
    /* width: 85%; */
    width: 65%;
    max-width: 900px;
    /* height: 800px; */
    }

.dept-card-inner {
    background: #ffffff;
    border-radius: 20px;
    padding: 30px 20px 70px 20px;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.35);
    /* height: 800px; */
    /* max-height: 900px; */
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    max-height: 90vh;
  }

  /* 閉じるボタン */
  .dept-close-btn {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	top: -20px;
	right: -20px;
	width: 60px;
	height: 60px;
	font-size: 40px;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	background-color: #0080d6;
	z-index: 1;
  }

.dept-close-btn::before,
.dept-close-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 3px;
  background-color: #fff;
  border-radius: 2px;
  transform-origin: center;
}

.dept-close-btn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.dept-close-btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
  
  /* 左右スライドボタン（‹ / ›） */
  .dept-arrow-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #cbd5e1;
    cursor: pointer;
    z-index: 30;
  }
  
  /* 矢印本体 */
  .dept-arrow-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-top: 2px solid #034f9a;
    border-right: 2px solid #034f9a;
  }
  
  /* 前へ */
  .dept-arrow-btn.prev {
    left: -22px;
  }
  .dept-arrow-btn.prev::before {
    transform: translate(-35%, -50%) rotate(-135deg);
  }
  
  /* 次へ */
  .dept-arrow-btn.next {
    right: -22px;
  }
  .dept-arrow-btn.next::before {
    transform: translate(-65%, -50%) rotate(45deg);
  }

  /* 装飾用画像スタイル */
  .award-header-area { min-height: 80px; display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 14px; }
  .modal-badge-img {max-width: 98px;width: 20%;/* height: 72px; */object-fit: contain;}
  .modal-crown-img {/* max-height: 38px; */max-width: 125px;object-fit: contain;margin-bottom: 4px;}
  .modal-leaf-img {max-width: 25px;width: 100%;/* height: 54px; */object-fit: contain;}
  .modal-leaf-img.left { transform: scaleX(-1); } /* 左側の草は自動反転 */


.modal_in_bumon01{
    display: flex;
    align-items: flex-end;
}
.modal_in_bumon02{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 8px;
}
.modal-crown-img{
    max-width: 125px;
    width: 100%;
}
.modal_in_num{
    font-weight: 800;
    font-size: 32px;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

.modal_photo{
    max-width: 700px;
    width: 100%;
    margin: 30px auto 15px;
}

 .modal_info {
    font-size: 32px;
    font-weight: 600;
    text-align: center;
    margin: 0 auto;
    line-height: 1.5;
 }
.modal_name{
    font-size: 0.688em;
    margin-top: 5px;
}
.modal_comm{
    font-size: 0.563em;
    margin: 15px auto 0;
    font-weight: 500;
    max-width: 700px;
    text-align: justify;
    line-height: 1.8;
}



@media (max-width: 1200px) {

    .rank_num p{
        font-size: 15px;
    }

}

@media (max-width: 1000px) {

    .nav_link{
        padding: 0 10px;
    }

    .dept-modal-wrapper{
        max-width: 470px;
        width: 85%;
    }


    .dept-close-btn{
        width: 50px;
        height: 50px;
    }


    .bumon_ja {
        font-size: 28px;
    }
    .modal_in_num{
        font-size: 28px;
    }
    .modal_info{
        font-size: 28px;
    }
    .dept-close-btn::before, .dept-close-btn::after{
        width: 24px;
    }
    .btn{
        font-size: 16px;
    }

    .rank_box_title{
        font-size: 18px;
    }


    .footer_txt p:first-of-type{
        font-size: 13px;
    }


}

@media (max-width: 750px) {

    .btn{
        font-size: 16px;
    }


    .rank_box{
        flex-wrap: wrap;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
    }

    .rank_item{
        width: 100%;
        padding: 0 10px 15px;
        border-radius: 10px;
    }

    .rank_box .rank_item:nth-of-type(n + 2) {
        margin-top: 40px;
    }


}

@media (max-width: 650px) {

    
    #seika,#sakana,#hana,#ichiba{
        margin-top: -50px;
        padding-top: 50px;
    }

    .content-area01{
        padding: 50px 20px 60px;
    }

    .content-area02{
        padding: 40px 20px 80px;
    }

    .top_img01{
        top: -12%;
    }

    .top_img02{
        width: 18%;
        top: -2%;
        left: -1%;
    }

    .bumon_ja {
        font-size: 24px;
    }
    .bumon_en{
        font-size: 13px;
    }

    /* .rank_cont{
        margin: 0 auto;
    } */

    .rank_kira{
        top: -40%;
        right: -10%;
    }

    .rank_kira02{
        max-width: 52px;
        top: -45%;
        right: -22%;
    }
    
    .top_lead{
        font-size: 14px;
        border-radius: 28px;
    }

    .top_lead p{
        padding: 60px 0 50px;
    }


    .rank_num{
        height: 27px;
    }

    .rank_num_box,.rank_num_box02{
        margin-top: -16px;
    }
    .rank_num p{
        font-size: 13px;
    }

    .rank_cont_img04{
        top: 8%;
    }

    /* .rank_box .rank_item:nth-of-type(1){
        margin-left: 26%;
        margin-right: 26%;
    } */

    /* .rank_box .rank_item:nth-of-type(n + 3){
        margin-top: 40px;
    }
    .rank_box .rank_item:nth-of-type(3){
        margin-left: auto;
        margin-right: auto;
    } */
    .rank_box_name{
        font-size: 16px;
        margin-top: 15px;
    }
    .rank_box_title{
        font-size: 16px;
        margin-top: 10px;
    }
    .rabel{
        margin-top: 15px;
        font-size: 10px;
    }

    .rabel.ra_hana{
        width: 50px;
    }

    .rabel .ra_seika{
        width: 60px;
    }

    .rabel .ra_sakana,.rabel.ra_ichiba{
        width: 100px;
    }

    .rank_num_box::before,.rank_num_box::after{
        width: 12px;
        height: 38px;
    }

    .rank_num_item01{
        min-width: 60px;
        margin: 0 5px;
    }
    

    .btn_box{
        flex-wrap: wrap;
    }
    .btn{
        font-size: 15px;
        height: 58px;
        box-shadow: 0px 2px 0px 3px rgba(0, 128, 214, 1);
        width: 48%;
        border-top: none !important;
    }

    .btn_box .btn:nth-of-type(n + 3){
        margin-top: 5%;
    }

    .arrow_s_b::before{
        width: 18px;
        height: 18px;
        top: 48%;
    }
    .arrow_s_b::after{
        top: 49%;
    }


    .dept-card-inner{
        padding: 30px 20px 30px 20px;
    }


    .modal-badge-img{
        /* width: 20%; */
    }
    .modal-leaf-img {
        max-width: 19px;
    }
    .modal-crown-img {
        max-width: 80px;
    }

    .modal_in_num{
        font-size: 20px;    
    }

    .modal_photo{
        margin: 20px auto 15px;
    }

    .modal_info{
        font-size: 20px;
    }
    .modal_comm{
        margin-top: 15px;
    }


    .dept-arrow-btn{
        width: 36px;
        height: 36px;
        border: 1px solid #cbd5e1;
    }
    .dept-close-btn{
        width: 40px;
        height: 40px;
        right: -10px;
    }
    .dept-close-btn::before, .dept-close-btn::after{
        width: 20px;
        height: 2px;
    }
    .dept-arrow-btn.prev {
        left: -12px;
    }
    .dept-arrow-btn.next {
        right: -12px;
    }


    .footer_txt p:first-of-type{
        font-size: 12px;
    }

    .footer{
        padding-bottom: 80px;
    }

}


/* MV動き */
/* * { box-sizing: border-box; }
    body {
      margin: 0;
      background: #fff;
      font-family: sans-serif;
    } */
.mv_content {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
.mv_img {
    width: 100%;
    height: auto;
    display: block;
}
.camera_group {
    position: absolute;
    top: 17%;
    left: 3%;
    width: 11.5%;
    z-index: 5;
    pointer-events: none;
    transform-origin: center center;
    animation: cameraIdleRotate 3.6s steps(1, end) 3.7s infinite;
}
.camera_img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    display: block;
    opacity: 0;
    transform-origin: center center;
    animation: cameraMotionSmooth 1.35s cubic-bezier(0.22, 1, 0.36, 1) 1.28s forwards;
}
.flash_depth {
    position: absolute;
    top: -28%;
    left: 82%;
    width: 35%;
    z-index: 3;
    transform-origin: 20% 70%;
    pointer-events: none;
    animation: flashIdleDepth 4.0s ease-in-out 3.7s infinite;
}
.flash_img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;
    pointer-events: none;
    /* mix-blend-mode: screen; */
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.32));
    animation:
        flashLightStay 1.35s linear 1.28s forwards,
        flashOpacityBlink 3.4s linear 3.9s infinite;
}
/* =====================
       受賞者発表 左右ライン
       （位置は添付HTMLベースを維持）
    ===================== */
.title_lines {
    position: absolute;
    top: 3.9%;
    left: 18.5%;
    width: 31.4%;
    height: 10.6%;
    z-index: 6;
    pointer-events: none;
}
.title_lines_left,
.title_lines_right {
    position: absolute;
    top: 0;
    width: 14.8%;
    pointer-events: none;
}
.title_lines_left {
    left: 0.6%;
}
.title_lines_right {
    right: 0.6%;
    transform: scaleX(-1);
    transform-origin: center center;
}
.title_lines_left svg,
.title_lines_right svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}
.line_draw {
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
    filter: blur(1.2px);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: stroke-dashoffset, stroke-dasharray, opacity, filter;
    animation: drawLineElegant 0.58s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.line_pair_1 {
    animation:
        drawLineElegant 0.54s cubic-bezier(0.16, 1, 0.3, 1) 0.78s forwards,
        lineBreathA 4.8s ease-in-out 2.9s infinite;
}
.line_pair_2 {
    animation:
        drawLineElegant 0.62s cubic-bezier(0.16, 1, 0.3, 1) 0.95s forwards,
        lineBreathB 5.2s ease-in-out 3.02s infinite;
}
.line_pair_3 {
    animation:
        drawLineElegant 0.58s cubic-bezier(0.16, 1, 0.3, 1) 1.12s forwards,
        lineBreathC 5.0s ease-in-out 3.14s infinite;
}
/* =====================
       文字画像のオーバーレイ
       （位置は添付HTMLベースを維持）
    ===================== */
.text_motion_group {
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
}
.text_reveal {
    position: absolute;
    overflow: hidden;
    opacity: 0;
}
.text_reveal img {
    display: block;
    width: 100%;
    height: auto;
}
.award_head_wrap {
    top: 4.5%;
    left: 24.3%;
    width: 20%;
    animation: showWrap 0.01s linear 0.10s forwards;
}
.award_head_wrap img {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    animation: awardTextFloatIn 0.60s ease-out 0.10s forwards;
}
.copy_top_wrap {
    top: 15%;
    left: 18%;
    width: 34.0%;
    animation: showWrap 0.01s linear 1.25s forwards;
}
.copy_top_wrap img {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(5px);
    animation: copyElegantIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) 1.25s forwards;
}
.dot_line_wrap {
    top: 20.8%;
    left: 17.0%;
    width: 36.4%;
    clip-path: inset(0 50% 0 50%);
    animation: lineElegantReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.42s forwards;
}
.dot_line_wrap img {
    opacity: 1;
    transform: none;
    filter: blur(0.5px);
    animation: none;
}
.title_01_wrap {
    top: 23.9%;
    left: 14.6%;
    width: 39.5%;
    animation: showWrap 0.01s linear 1.72s forwards;
}
.title_01_wrap img {
    opacity: 0;
    transform: translateY(20px) scale(0.985);
    filter: blur(6px);
    animation: titleElegantIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.72s forwards;
}
.title_02_wrap {
    top: 37.2%;
    left: 9%;
    width: 48.2%;
    animation: showWrap 0.01s linear 1.98s forwards;
}
.title_02_wrap img {
    opacity: 0;
    transform: translateY(20px) scale(0.985);
    filter: blur(6px);
    animation: titleElegantIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) 1.98s forwards;
}
.sub_01_wrap {
    top: 49.8%;
    left: 14.8%;
    width: 34.5%;
    animation: showWrap 0.01s linear 2.28s forwards;
}
.sub_01_wrap img {
    transform: translateY(30px);
    animation: fadeUpSoft 0.72s ease-out 2.28s forwards;
}
.sub_02_wrap {
    top: 53.8%;
    left: 14.5%;
    width: 34.8%;
    animation: showWrap 0.01s linear 2.42s forwards;
}
.sub_02_wrap img {
    transform: translateY(30px);
    animation: fadeUpSoft 0.72s ease-out 2.42s forwards;
}
/* =====================
       装飾（丸 / 鳥）
       表示が終わった後に動き始める
    ===================== */
.decor_motion_group {
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
}
.decor_motion_group img {
    display: block;
    width: 100%;
    height: auto;
}
.dots_left_wrap,
.dots_right_wrap,
.bird_wrap {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    will-change: opacity, transform;
}
.dots_left_wrap {
    top: 37.2%;
    left: 3.7%;
    width: 4.2%;
    aspect-ratio: 1 / 1.28;
    animation: decorPopIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 2.85s forwards;
}
.dots_right_wrap {
    top: 33.1%;
    left: 56%;
    width: 3.5%;
    aspect-ratio: 1 / 1.25;
    animation: decorPopIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 2.95s forwards;
}
.mv_dot {
    position: absolute;
    display: block;
    border-radius: 50%;
    transform-origin: center center;
    will-change: transform;
}
.dots_left_wrap .dot_yellow {
    width: 46%;
    aspect-ratio: 1;
    top: 0;
    left: 0;
    background: #f8c817;
    animation: dotPulseA 2.9s ease-in-out 7.72s infinite both;
}
.dots_left_wrap .dot_red {
    width: 29%;
    aspect-ratio: 1;
    top: 3%;
    right: 0;
    background: #f07b83;
    animation: dotPulseA 2.8s ease-in-out 7.8s infinite both;
}
.dots_left_wrap .dot_blue {
    width: 41%;
    aspect-ratio: 1;
    left: 32%;
    bottom: 0;
    background: #5bc8ef;
    animation: dotPulseB 3.1s ease-in-out 7.92s infinite both;
}
.dots_right_wrap .dot_yellow {
    width: 29%;
    aspect-ratio: 1;
    top: 0;
    left: 2%;
    background: #f8c817;
    animation: dotPulseA 2.9s ease-in-out 7.88s infinite both;
}
.dots_right_wrap .dot_blue {
    width: 41%;
    aspect-ratio: 1;
    top: 28%;
    right: 5%;
    background: #59c8ee;
    animation: dotPulseB 3.2s ease-in-out 8.0s infinite both;
}
.dots_right_wrap .dot_red {
    width: 27%;
    aspect-ratio: 1;
    right: 0;
    bottom: 0;
    background: #ef7f88;
    animation: dotPulseA 2.7s ease-in-out 8.1s infinite both;
}
.bird_wrap {
    top: 26.2%;
    left: 55.5%;
    width: 4.9%;
    animation: decorFadeIn 0.45s ease-out 2.96s forwards;
}
.bird_wrap img {
    transform-origin: center center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
    animation: birdFloat 3.2s ease-in-out 8.0s infinite both;
}
/* =====================
       右上ポラロイド写真 / 循環カルーセル
       PC：3枚表示
       SP（650px以下）：3枚表示
       ※ PNG画像そのものは回転させない
    ===================== */
.photo_stack {
    position: absolute;
    top: -2%;
    right: -6.4%;
    width: 29.2%;
    height: 83.5%;
    z-index: 13;
    pointer-events: none;
}
.photo_slide {
    position: absolute;
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: center center;
    will-change: top, right, width, opacity, transform;
    transition:
        top 1.15s cubic-bezier(0.22, 1, 0.36, 1),
        right 1.15s cubic-bezier(0.22, 1, 0.36, 1),
        width 1.15s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.82s ease,
        transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
    filter: drop-shadow(0 -2px 3px rgba(0, 0, 0, 0.1));
}
.photo_slide img {
    display: block;
    width: 100%;
    height: auto;
}
/* PC：現在表示される3ポジション */
.photo_slide.slot_top {
    top: 0%;
    right: 1%;
    width: 72%;
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    z-index: 1;
}
.photo_slide.slot_middle {
    top: 17.8%;
    right: 9.2%;
    width: 75%;
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    z-index: 2;
}
.photo_slide.slot_bottom {
    top: 55.4%;
    right: -0.4%;
    width: 70%;
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    z-index: 3;
}
/* 次の写真：右下の画面外で待機 */
.photo_slide.slot_hidden,
.photo_slide.slot_incoming {
    top: 82%;
    right: -25%;
    width: 66%;
    opacity: 0;
    transform: translate3d(20%, 14%, 0) scale(0.90);
    z-index: 0;
}
.photo_slide.slot_hidden,
.photo_slide.slot_incoming {
    transition: none;
}
/* 表示中の一番上の写真：右上の画面外へ抜ける */
.photo_slide.slot_exit {
    top: -18%;
    right: -27%;
    width: 66%;
    opacity: 0;
    transform: translate3d(20%, -14%, 0) scale(0.92);
    z-index: 0;
}
/* 初回表示。画像自体の回転は行わない */
.photo_slide.initial_01 img {
    opacity: 0;
    animation: photoFirstIn01 0.95s cubic-bezier(0.22, 1, 0.36, 1) 2.70s forwards;
}
.photo_slide.initial_02 img {
    opacity: 0;
    animation: photoFirstIn02 1s cubic-bezier(0.22, 1, 0.36, 1) 2.40s forwards;
}
.photo_slide.initial_03 img {
    opacity: 0;
    animation: photoFirstIn03 1s cubic-bezier(0.22, 1, 0.36, 1) 2.10s forwards;
}
/* =====================
       前景のぼかし葉っぱ
       （1枚PNGを重ねる想定）
       写真の動きを邪魔しないよう少し控えめに
    ===================== */
.leaf_overlay {
    position: absolute;
    inset: 0;
    z-index: 12;
    opacity: 0;
    pointer-events: none;
    animation:
        leafFadeIn 0.8s ease-out 0.2s forwards,
        leafDepthMotion 9s ease-in-out 1.4s infinite alternate;
}
.leaf_overlay img {
    /* display: block; */
    width: 100%;
    height: auto;
}
/* =====================
       keyframes
    ===================== */
@keyframes cameraMotionSmooth {
    0% {
        transform: translate(-22%, 16%) scale(0.72) rotate(-13deg);
        opacity: 0;
        filter: blur(3px);
    }
    58% {
        transform: translate(2%, -1%) scale(1.035) rotate(-6deg);
        opacity: 1;
        filter: blur(0);
    }
    100% {
        transform: translate(0, 0) scale(1) rotate(-8deg);
        opacity: 1;
        filter: blur(0);
    }
}
@keyframes cameraIdleRotate {
    0%, 20% {
        transform: rotate(0deg);
    }
    21%, 38% {
        transform: rotate(1.5deg);
    }
    39%, 55% {
        transform: rotate(0deg);
    }
    56%, 73% {
        transform: rotate(-1.4deg);
    }
    74%, 88% {
        transform: rotate(0.7deg);
    }
    89%, 100% {
        transform: rotate(0deg);
    }
}
@keyframes flashLightStay {
    0%, 38% {
        opacity: 0;
        transform: scale(1.22);
    }
    40%, 44% {
        opacity: 1;
        transform: scale(1.22);
    }
    47% {
        opacity: 0.10;
        transform: scale(1.22);
    }
    50%, 54% {
        opacity: 1;
        transform: scale(1.22);
    }
    58% {
        opacity: 0.72;
        transform: scale(1.22);
    }
    62%, 100% {
        opacity: 1;
        transform: scale(1.22);
    }
}
@keyframes flashIdleDepth {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    30% {
        transform: translateY(-2px) rotate(-0.25deg);
    }
    65% {
        transform: translateY(1px) rotate(0.15deg);
    }
}
@keyframes flashOpacityBlink {
    0%, 10% {
        opacity: 0.12;
        transform: scale(1.22);
    }
    12%, 15% {
        opacity: 1;
        transform: scale(1.22);
    }
    18% {
        opacity: 0.10;
        transform: scale(1.22);
    }
    21%, 24% {
        opacity: 0.88;
        transform: scale(1.22);
    }
    28%, 40% {
        opacity: 1;
        transform: scale(1.22);
    }
    44% {
        opacity: 0.14;
        transform: scale(1.22);
    }
    47%, 50% {
        opacity: 0.96;
        transform: scale(1.22);
    }
    53% {
        opacity: 0.12;
        transform: scale(1.22);
    }
    56%, 60% {
        opacity: 0.84;
        transform: scale(1.22);
    }
    64%, 76% {
        opacity: 1;
        transform: scale(1.22);
    }
    80% {
        opacity: 0.18;
        transform: scale(1.22);
    }
    84%, 87% {
        opacity: 0.92;
        transform: scale(1.22);
    }
    90% {
        opacity: 0.16;
        transform: scale(1.22);
    }
    94%, 100% {
        opacity: 0.80;
        transform: scale(1.22);
    }
}
@keyframes lineBreathA {
    0%, 100% {
        stroke-dasharray: 1 1;
        filter: blur(0);
    }
    46% {
        stroke-dasharray: 0.62 1;
        filter: blur(0.08px);
    }
    72% {
        stroke-dasharray: 0.90 1;
        filter: blur(0);
    }
}
@keyframes lineBreathB {
    0%, 100% {
        stroke-dasharray: 1 1;
        filter: blur(0);
    }
    44% {
        stroke-dasharray: 0.55 1;
        filter: blur(0.10px);
    }
    73% {
        stroke-dasharray: 0.88 1;
        filter: blur(0);
    }
}
@keyframes lineBreathC {
    0%, 100% {
        stroke-dasharray: 1 1;
        filter: blur(0);
    }
    48% {
        stroke-dasharray: 0.58 1;
        filter: blur(0.08px);
    }
    74% {
        stroke-dasharray: 0.89 1;
        filter: blur(0);
    }
}
@keyframes drawLineElegant {
    0% {
        stroke-dashoffset: 1;
        opacity: 0;
        filter: blur(1.2px);
    }
    18% {
        opacity: 0.65;
        filter: blur(0.8px);
    }
    72% {
        opacity: 1;
        filter: blur(0.15px);
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 1;
        filter: blur(0);
    }
}
@keyframes showWrap {
    to {
        opacity: 1;
    }
}
@keyframes copyElegantIn {
    0% {
        opacity: 0;
        transform: translateY(12px);
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}
@keyframes lineElegantReveal {
    0% {
        opacity: 0;
        clip-path: inset(0 50% 0 50%);
        filter: blur(2px);
    }
    25% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        filter: blur(0);
    }
}
@keyframes titleElegantIn {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.985);
        filter: blur(6px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}
@keyframes fadeUpSoft {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes awardTextFloatIn {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
        filter: blur(6px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}
@keyframes decorFadeIn {
    0% {
        opacity: 0;
        visibility: visible;
    }
    100% {
        opacity: 1;
        visibility: visible;
    }
}
@keyframes decorPopIn {
    0% {
        opacity: 1;
        visibility: visible;
        transform: translateZ(0) scale(0);
    }
    68% {
        opacity: 1;
        visibility: visible;
        transform: translateZ(0) scale(1.14);
    }
    100% {
        opacity: 1;
        visibility: visible;
        transform: translateZ(0) scale(1);
    }
}
@keyframes dotPulseA {
    0%, 100% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.36);
    }
    72% {
        transform: scale(0.84);
    }
}
@keyframes dotPulseB {
    0%, 100% {
        transform: scale(1);
    }
    35% {
        transform: scale(0.82);
    }
    68% {
        transform: scale(1.34);
    }
}
@keyframes birdFloat {
    0%, 100% {
        transform: translate(0%, 0%) rotate(0deg);
    }
    25% {
        transform: translate(8%, -9%) rotate(6deg);
    }
    55% {
        transform: translate(1%, -16%) rotate(-5deg);
    }
    80% {
        transform: translate(-8%, -6%) rotate(3.5deg);
    }
}
@keyframes photoFirstIn01 {
    0% {
        opacity: 0;
        transform: translate3d(30%, 26%, 0) scale(0.88);
    }
    72% {
        opacity: 1;
        transform: translate3d(-1.5%, -1%, 0) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}
@keyframes photoFirstIn02 {
    0% {
        opacity: 0;
        transform: translate3d(32%, 20%, 0) scale(0.88);
    }
    72% {
        opacity: 1;
        transform: translate3d(-1.5%, -0.8%, 0) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}
@keyframes photoFirstIn03 {
    0% {
        opacity: 0;
        transform: translate3d(28%, 14%, 0) scale(0.88);
    }
    72% {
        opacity: 1;
        transform: translate3d(-1.2%, -0.6%, 0) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}
@keyframes leafFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes leafDepthMotion {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(-0.25%, -0.35%, 0) scale(1.01);
    }
    100% {
        transform: translate3d(0.2%, 0.15%, 0) scale(1.016);
    }
}
@media (max-width: 1920px) {
    .copy_top_wrap {
        max-width: 652px;
    }
    .dot_line_wrap {
        max-width: 698px;
    }
    .title_01_wrap {
        max-width: 758px;
    }
    .title_02_wrap {
        max-width: 925px;
    }
    .sub_01_wrap {
        max-width: 662px;
    }
    .sub_02_wrap {
        max-width: 668px;
    }
}
/* =====================
       SP MV
       650px以下でスマホレイアウトへ切り替え
       ※ PC側のアニメーション設定は変更しない
    ===================== */


@media (max-width: 650px) {
    .mv_content {
        aspect-ratio: 750 / 700;
    }
    .mv_img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 51% 50%;
    }
    /* カメラ */
    .camera_group {
        top: 15.4%;
        left: 4.9%;
        width: 16.4%;
    }
    /* 受賞者発表 左右3本線 */
    .title_lines {
        top: 4.1%;
        left: 28%;
        width: 44.2%;
        height: 9.8%;
    }
    /* 受賞者発表 */
    .award_head_wrap {
        top: 4.1%;
        left: 36.8%;
        width: 27%;
    }
    /* みんなの写真で市場を盛り上げよう！ */
    .copy_top_wrap {
        top: 13%;
        left: 26.2%;
        width: 49.8%;
        max-width: none;
    }
    /* カラフル点線 */
    .dot_line_wrap {
        top: 17.9%;
        left: 24.7%;
        width: 53.4%;
        max-width: none;
    }
    /* 横浜南部市場 */
    .title_01_wrap {
        top: 20.8%;
        left: 22.3%;
        width: 55.8%;
        max-width: none;
    }
    /* フォトコンテスト2026 */
    .title_02_wrap {
        top: 31.5%;
        left: 16%;
        width: 69.2%;
        max-width: none;
    }
    /* 下部説明文 */
    .sub_01_wrap {
        top: 42.8%;
        left: 23.5%;
        width: 50.8%;
        max-width: none;
    }
    .sub_02_wrap {
        top: 46%;
        left: 25.2%;
        width: 48.5%;
        max-width: none;
    }
    /* 左右の丸 */
    .dots_left_wrap {
        top: 32.2%;
        left: 9%;
        width: 5.9%;
    }
    .dots_right_wrap {
        top: 28.5%;
        left: 83.8%;
        width: 5.1%;
    }
    /* カモメ */
    .bird_wrap {
        top: 21.5%;
        left: 80.7%;
        width: 7.6%;
    }
    /* 右上写真：スマホでも3枚表示（2枚目を大きく） */
    .photo_stack {
        top: 42.6%;
        right: -8.8%;
        width: 35.8%;
        height: 43.5%;
    }
    /* SP 1枚目：上側、小さめ・見切れ */
    .photo_slide.slot_top {
        top: -3%;
        right: 0%;
        width: 50%;
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        z-index: 1;
    }
    /* SP 2枚目：中央を大きく・前面 */
    .photo_slide.slot_middle {
        top: 16%;
        right: 9%;
        width: 79%;
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        z-index: 3;
    }
    /* SP 3枚目：下側、小さめ・見切れ */
    .photo_slide.slot_bottom {
        top: 70%;
        right: -2%;
        width: 50%;
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        z-index: 2;
    }
    .photo_slide.slot_hidden,
    .photo_slide.slot_incoming {
        top: 108%;
        right: -30%;
        width: 48%;
        opacity: 0;
        transform: translate3d(22%, 14%, 0) scale(0.90);
        z-index: 0;
    }
    .photo_slide.slot_exit {
        top: -20%;
        right: -30%;
        width: 48%;
        opacity: 0;
        transform: translate3d(22%, -14%, 0) scale(0.92);
        z-index: 0;
    }
    
}



/* ページトップ */

.pagetop-wrapper {
    position: fixed;
    right: 28px;
    bottom: 28px;
    width: 80px;
    height: 80px;
    z-index: 9999;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.92);
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.35s;
}
.pagetop-wrapper.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.pagetop-wrapper:hover {
    transform: translateY(-4px) scale(1.03);
}
.pagetop-wrapper:active {
    transform: translateY(0) scale(0.97);
}
.pagetop-circle {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #0080d6;
    box-shadow: 0 4px 7px rgba(1, 96, 175, 0.32), 0 2px 6px rgba(0, 0, 0, 0.08);
    isolation: isolate;
}
#pagetopWaveCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    pointer-events: none;
}
.pagetop-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
    color: #ffffff;
    padding-top: 4px;
    text-shadow: 0 2px 5px rgba(1, 96, 175, 0.5);
}
.pagetop-arrow {
    width: 22px;
    height: 13px;
    margin-bottom: 4px;
    stroke: #ffffff;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    transition: transform 0.25s ease;
    filter: drop-shadow(0 2px 4px rgba(1, 96, 175, 0.35));
}
.pagetop-wrapper:hover .pagetop-arrow {
    transform: translateY(-2px);
}
.pagetop-text {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    margin-top: 1px;
}
.pagetop-ship {
    position: absolute;
    top: -33px;
    right: 6px;
    width: 45px;
    height: 52px;
    z-index: 20;
    pointer-events: none;
    transform-origin: 50% 85%;
    animation: shipFloat 4.1s ease-in-out infinite alternate;
    filter: drop-shadow(0 3px 6px rgba(1, 96, 175, 0.35));
}
.pagetop-ship img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

@keyframes shipFloat {
    0% {
        transform: rotate(23deg) translate(0px, 0px);
    }
    35% {
        transform: rotate(27.5deg) translate(1px, -2px);
    }
    70% {
        transform: rotate(21deg) translate(-1px, 1.5px);
    }
    100% {
        transform: rotate(25.5deg) translate(1px, -1px);
    }
}

@media (max-width: 650px) {
    .pagetop-wrapper {
        right: 16px;
        bottom: 56px;
        width: 66px;
        height: 66px;
    }
    .pagetop-ship {
        top: -26px;
        right: 4px;
        width: 38px;
        height: 44px;
    }
    .pagetop-arrow {
        width: 18px;
        height: 11px;
        margin-bottom: 2px;
    }
    .pagetop-text {
        font-size: 12px;
    }
}






.db1200 {
    display: none;
}
.dn1200 {
    display: block;
}

.db750 {
    display: none;
}
.dn750 {
    display: block;
}

.db650 {
    display: none;
}
.dn650 {
    display: block;
}


@media (max-width: 1200px) {
    .db1200 {
        display: block;
    }
    .dn1200 {
        display: none;
    }

}

@media (max-width: 750px) {
    .db750 {
        display: block;
    }
    .dn750 {
        display: none;
    }
}

@media (max-width: 650px) {
    .db650 {
        display: block;
    }
    .dn650 {
        display: none;
    }

}