/* スマホ時（1024px以下）に順番変更 */
@media screen and (max-width: 1024px) {
  .container {
    padding: 0 15px; /* スマホでもpaddingで余白調整 */
    margin: 0 auto;
  }
  a:hover {
    transform: none;
  }
}

@media screen and (max-width: 1500px) {
  .wave-img {
    left: 25%;
    top: 60px;
    width: 650px;
  }
}

/* 1280px以下になったら */
@media screen and (max-width: 1330px) {
  .time-left .text-xxl,
  .time-left2 .text-xxl,
  .time-left3 .text-xxl {
    font-size: var(--font-xl);
  }

  .time-left .text-lg,
  .time-left2 .text-lg,
  .time-left3 .text-lg {
    font-size: var(--font-smd);
  }
}

/* 1280px以下になったら */
@media screen and (max-width: 1280px) {
  .wave-img {
    position: absolute;
    left: 20%;
    top: 60px;
    max-width: 900px;
  }
  .container {
    max-width: 1100px;
  }
  .container-s {
    max-width: 800px;
  }

  .text-lg {
    font-size: var(--font-md);
  }

  .text-inline2 .frederika {
    font-size: var(--font-md);
    margin-top: 5px;
  }

  .day-title .text-lg {
    font-size: var(--font-lg);
  }

  a:hover {
    transform: none;
  }

  .even2-section {
    padding-bottom: 30px !important;
  }

  .day-title p {
    letter-spacing: 0.5rem;
  }

  .spot-info {
    gap: 0.2rem;
    flex-wrap: wrap;
  }

  .couple3 {
    position: absolute;
    top: 80%;
    right: -15%;
    width: 180px;
  }

  .br-sp-1280 {
    display: inherit;
  }

  .days8-14-02 {
    position: absolute;
    left: -110px;
    bottom: -50px;
    width: 150px;
  }
}

/* 1024px以下になったらスマホレイアウトに切り替え */
/* タブレット用 */
@media screen and (max-width: 1024px) {
  .anchor {
    display: none;
  }
  .sp-right {
    justify-content: end;
  }
  .sp-none {
    display: none;
  }

  .pc-none {
    display: inherit;
  }

  .container {
    max-width: 100%;
    width: 100%;
    padding: 0 15px; /* 画面端とテキストがくっつかないよう少し余白 */
    box-sizing: border-box;
  }

  .container-s {
    max-width: 100%;
    width: 800px;
    padding: 0 15px; /* 画面端とテキストがくっつかないよう少し余白 */
    box-sizing: border-box;
  }

  /* 横並び（flex-row）を縦並びにする */
  .flex-y {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
  }

  .flex-y > * {
    width: 100%;
    flex-shrink: 1;
    flex-wrap: wrap;
  }

  .flex-y {
    gap: 20px !important;
  }

  .sp-width-500 {
    max-width: 500px;
    margin: 0 auto;
  }

  /* アブソリュート要素を通常のフローに流す */
  .absolute-item {
    position: static;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }

  /* 画像も幅100%に */
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  .br-sp {
    display: block;
  }

  .right-alignment {
    padding-left: 30px;
  }

  .time-left {
    top: -180px !important;
    left: 50px !important;
  }

  .time-left2 {
    top: -150px !important;
    left: 50px !important;
  }

  .time-left3 {
    left: 50px !important;
  }

  .time-left .text-xxl,
  .time-left2 .text-xxl,
  .time-left3 .text-xxl {
    font-size: var(--font-xl);
  }

  .time-left .text-lg,
  .time-left2 .text-lg,
  .time-left3 .text-lg {
    font-size: var(--font-smd);
  }

  .wave-img {
    left: 20%;
    top: 55px;
    max-width: 55%;
  }

  .title-container h2 {
    margin-top: 0;
  }

  .box-v-btm {
    flex-direction: column !important;
    gap: 20px; /* 要素間に少しスペース */
    margin: 0 auto;
    flex-wrap: wrap;
  }

  .swiper {
    width: 450px; /* スライダーの幅を調整 */
    height: 350px; /* 必要に応じて高さを設定 */
    border-radius: 50px;
  }

  .grid-layout {
    grid-template-columns: 1fr; /* 1列 */
    grid-template-rows: auto auto auto; /* 3行 */
    width: 500px !important;
  }

  .grid-layout .item-a {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  .grid-layout .item-c {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  .grid-layout .item-b {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    margin-top: 0px;
  }

  .grid-layout2,
  .grid-layout3 {
    grid-template-columns: 1fr; /* 1列 */
    grid-template-rows: auto auto auto; /* 3行 */
    width: 500px !important;
    gap: 0px;
  }

  .grid-layout2 .item-a,
  .grid-layout3 .item-a {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  .grid-layout2 .item-c,
  .grid-layout3 .item-c {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  .grid-layout2 .item-b,
  .grid-layout3 .item-b {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }

  .flex-y,
  .box-2 .item-b,
  .box-3 .item-b,
  .box-4 .item-b,
  .box-5 .item-b,
  .box-6 .item-b,
  .box-8 .item-b,
  .grid-layout3 .item-b,
  .grid-layout3 .item-b {
    margin-top: 0px !important;
  }

  .seagull-1 {
    left: auto; /* ← これが必要！！ */
    right: -300px;
    top: -50px;
  }

  .days8-14-01 {
    position: absolute;
    right: 110px;
    bottom: -200px;
  }

  .days8-14-01 img {
    width: 70%;
  }

  .box-0 {
    display: flex;
    flex-direction: column !important;
    justify-content: center;
    gap: 0px;
    margin-bottom: 50px;
    flex-wrap: wrap;
  }

  .shop-detail {
    margin: 30px auto 0 !important;
    max-width: 500px !important;
  }

  .pc-pd-top-100-0 {
    padding-top: 0;
  }

  .width-500 {
    margin: 0 auto !important;
    max-width: 500px !important;
  }

  .sp-btm-0 {
    margin-top: 10px;
  }

  .days8-14-02 {
    display: none;
  }

  .days8-14-02-s {
    display: inherit;
  }

  .days8-14-03 {
    right: -0px;
    bottom: -250px;
    width: 160px;
  }

  .days8-14-03 img {
    width: 100%;
  }

  .floatring {
    display: none;
  }

  .seagull-2 {
    display: none;
  }

  .seagull-4 {
    display: inherit;
  }

  .seagull-5 {
    display: none;
  }

  .days8-14-04-s {
    display: none;
  }

  .background-pink {
    background-color: var(--color-primary);
    height: 100px;
    display: inherit;
  }

  .days8-14-04 {
    display: none;
  }

  .morning2-section {
    margin-bottom: 0 !important;
  }

  .footer_container {
    justify-content: space-around;
  }

  .section-sp-btm {
    margin-bottom: 0 !important;
  }

  .section-pa-btm {
    padding-bottom: 0px !important;
  }

  .even2-section {
    padding-bottom: 30px !important;
  }

  .anchor2 {
    right: -40%;
    top: -50%;
  }
  .anchor2 img {
    width: 80%;
  }

  /****************************
/*** night
/******************************/
  .time-left3 {
    top: 0;
    left: 2%;
  }

  .couple {
    position: absolute;
    left: 70%;
    top: 700px;
    width: 130px;
  }

  .couple img {
    width: 100%;
  }

  .cloud {
    left: -25%;
    top: 300px;
  }

  .cloud img {
    width: 70%;
  }

  .couple2 {
    position: absolute;
    right: 0%;
    top: -110px;
  }

  .couple2 img {
    width: 70%;
  }

  .men1 {
    display: none;
  }

  .couple3 {
    top: 100%;
    right: -0%;
    width: 130px;
  }

  .couple4 {
    top: -0%;
    right: -30%;
    width: 150px;
  }

  .girl {
    bottom: 30%;
    right: 10%;
    width: 90px;
  }

  .seagull-footer {
    position: absolute;
    top: -5px;
    right: 100px;
    z-index: 5;
    width: 70px;
  }
}

@media screen and (max-width: 900px) {
  .anchor2 {
    right: -30%;
    top: -250%;
  }

  .girl {
    bottom: 30%;
    right: 10%;
    width: 80px;
  }
}

@media screen and (max-width: 810px) {
  .time-left {
    top: -180px !important;
    left: 10px !important;
    font-size: var(--font-ll);
  }

  .time-left2 {
    top: -150px !important;
    left: 10px !important;
    font-size: var(--font-ll);
  }

  .time-left3 {
    left: 10px !important;
  }
}

@media screen and (max-width: 768px) {
  .wave-img {
    left: 15%;
    top: 55px;
    max-width: 70%;
  }

  h1 {
    font-size: var(--font-xl) !important;
  }

  .box-v-btm,
  .flex-y,
  .sp-width-500,
  .shop-detail,
  .shop-img,
  .grid-layout,
  .grid-layout2,
  .grid-layout3,
  .item-a,
  .item-b,
  .item-c {
    min-width: auto; /* ← min-widthを解除する */
    width: 100% !important; /* ← 画面幅にフィットさせる */
    margin-left: auto;
    margin-right: auto;
  }

  .footer-title {
    position: static;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .grid-item ul li {
    font-size: var(--font-xs);
  }

  .container {
    width: 100%;
    padding: 5px 0 !important;
  }
  .container-s {
    width: 100% !important;
  }

  .item-a,
  .item-b,
  .item-c {
    margin: auto auto;
    max-width: 500px !important;
    text-align: left;
  }

  .days8-14-01 {
    position: absolute;
    right: 80px;
    bottom: -320px;
    width: 200px;
  }

  .box-99 {
    margin-bottom: 50px;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .days8-14-02-s {
    top: -120px;
    right: 30px;
    width: 80px;
  }

  .days8-14-02-s img {
    width: 100%;
  }

  .seagull-1 {
    right: -200px;
    top: -50px;
  }

  a:hover {
    transform: none;
  }

  .sp-margin-btm-100 {
    margin-bottom: 100px !important;
  }

  .starfish {
    left: -35%;
    width: 80px;
  }

  .anchor2 {
    position: absolute;
    right: -10%;
    top: -220%;
    width: 50px;
  }
  .anchor2 img {
    width: 100%;
  }

  .couple {
    position: absolute;
    left: 70%;
    top: 750px;
    width: 120px;
  }

  .couple img {
    width: 100%;
  }

  .cloud {
    left: 95%;
    top: 650px;
    z-index: 5;
    width: 100px;
  }

  .cloud img {
    width: 50%;
  }

  .couple2 {
    position: absolute;
    right: 10%;
    top: -110px;
  }

  .couple2 img {
    width: 100%;
  }

  .couple3 {
    top: 95%;
    right: -0%;
    width: 110px;
  }

  .wine {
    top: 650%;
    right: 0%;
    width: 50px;
  }

  .couple4 {
    top: -60%;
    right: 5%;
    width: 150px;
    z-index: 1;
  }
  .flex-xy {
    flex-direction: column-reverse;
    gap: 0px;
  }

  .girl {
    bottom: 33%;
    right: 10%;
    width: 70px;
  }
}

@media screen and (max-width: 670px) {
  .time-left {
    top: -170px !important;
    left: 0px !important;
  }

  .time-left2 {
    top: -130px !important;
    left: 0px !important;
  }

  .time-left3 {
    left: 0px !important;
  }

  .time-left .text-xxl,
  .time-left2 .text-xxl,
  .time-left3 .text-xxl {
    font-size: var(--font-ll);
  }

  .time-left .text-lg,
  .time-left2 .text-lg,
  .time-left3 .text-lg {
    font-size: var(--font-xs);
  }

  .girl {
    bottom: 31%;
    right: 10%;
    width: 60px;
  }

  .starfish {
    left: -25%;
    width: 70px;
  }
}

/* スマホ用 */
@media screen and (max-width: 600px) {
  .day-title .text-lg {
    font-size: var(--font-md);
  }

  .footer-pc-none {
    display: none;
  }

  .footer-sp-none {
    display: inherit;
  }

  section {
    padding: 0 0px;
  }
  /* スマホ用スタイル */
  .width-500 {
    max-width: 100% !important;
  }

  .box-v {
    gap: 0;
  }

  .hr-type2 {
    display: inherit !important;
  }

  .shop-imgs {
    width: 100%;
  }

  .shop-detail {
    min-width: 100% !important; /* スライダーの幅を調整 */
    padding: 0 0px;
    margin: 0 auto;
  }

  .shop-link .text-sm {
    margin-bottom: 0px;
  }

  .flex-y .gap-50 {
    gap: 0;
  }

  .wave-img {
    left: 10%;
    top: 50px;
    max-width: 80%;
  }

  h1 {
    font-size: var(--font-xl) !important;
  }

  .seagull-3 {
    display: inherit;
    position: absolute;
    right: -150px;
    top: -50px;
    width: 30%;
  }

  .seagull-1 {
    display: none;
  }

  .day-title h1 {
    letter-spacing: 0.1rem;
    font-size: var(--font-md);
  }
  .day-title p {
    letter-spacing: 0.1rem;
    font-size: var(--font-smd);
  }

  .width-300 {
    width: 300px;
  }
  .right-alignment {
    padding-left: 50px;
  }

  .clock {
    width: 70px;
    height: auto;
  }

  .clock img {
    width: 100%;
    height: auto;
    max-width: none; /* 念のため解除 */
  }

  .clock-wrapper {
    width: 70px;
    height: auto;
  }

  .clock-wrapper img {
    width: 100%;
    height: auto;
    max-width: none; /* 念のため解除 */
  }

  .clock-12 .clock-wrapper {
    width: 70px;
    height: auto;
  }

  .clock-12 .clock-wrapper img {
    width: 100%;
    height: auto;
    max-width: none; /* 念のため解除 */
  }

  .reco-spot {
    border-radius: 50px;
  }

  .footer-section {
    padding-top: 50px !important;
  }

  .days8-14-02-s {
    top: -80px;
    right: 20px;
    width: 100px;
  }

  .days8-14-02-s img {
    width: 100%;
    width: 80px;
  }

  .access li {
    font-size: var(--font-sm);
  }

  .harbor-logo {
    width: 100px;
    height: auto;
  }

  .harbor-logo img {
    width: 100%;
  }

  .footer_container {
    padding: 20px 10px 10px 10px;
  }

  .link-item {
    font-size: var(--font-sm);
  }

  a:hover {
    transform: none;
  }

  .box-v-btm,
  .flex-y,
  .sp-width-500,
  .shop-detail,
  .shop-img,
  .grid-layout,
  .grid-layout2,
  .grid-layout3,
  .item-a,
  .item-b,
  .item-c {
    min-width: auto; /* ← min-widthを解除する */
    width: 100% !important; /* ← 画面幅にフィットさせる */
    margin-left: auto;
    margin-right: auto;
  }

  .shop-imgs {
    max-width: 300px !important;
    min-width: 100% !important;
    margin: 0 auto;
  }

  .swiper-container {
    max-width: 470px !important;
    height: auto;
    aspect-ratio: 4/3;
    margin: 0 auto;
  }

  .shop-detail {
    max-width: 470px !important;
  }

  .swiper {
    width: 100%;
    height: 100%;
    border-radius: 50px; /* スマホ向けに少し小さく */
    overflow: hidden;
  }

  .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .shop-imgs {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
  }

  .reco-grid .grid-a {
    order: 2; /* スマホ時、Aを2番目に */
  }

  .reco-grid .grid-b {
    order: 1; /* スマホ時、Bを最初に */
  }

  .reco-box-detail {
    display: flex;
    flex-direction: column !important;
    justify-content: start;
    align-items: start;
    gap: 0px !important;
    flex-wrap: wrap;
  }

  .reco-box-left,
  .reco-box-right {
    width: 100% !important;
  }

  .spot-info {
    flex-direction: column;
    align-items: flex-start !important; /* 高さをそろえる */
    gap: 0rem;
    margin-right: auto;
    text-align: left;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }

  .spot-info2 {
    flex-direction: column;
    align-items: flex-start !important; /* 高さをそろえる */
    gap: 0rem;
    margin-right: auto;
    text-align: left;
    margin-bottom: 3px;
    flex-wrap: wrap;
  }

  .spot-info p,
  .spot-info2 p {
    font-size: var(--font-xs) !important;
  }

  .flex-between {
    justify-content: start !important;
  }

  .shop-link {
    display: flex;
    align-items: left !important; /* 高さをそろえる */
    justify-content: flex-start;
    line-height: 1;
    gap: 0.2rem;
    margin-left: 0;
    padding: 0;
    flex-wrap: wrap;
  }

  .icon-img {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .box-v-btm {
    flex-direction: column; /* ✅ 縦並びにする！ */
    gap: 20px; /* ✅ スマホ用にギャップを小さくする */
    flex-wrap: wrap;
  }

  .time-box .container-s {
    width: 100% !important;
  }

  .grid-3x2 {
    display: none;
  }

  .new-style {
    display: inherit;
  }

  .link-title,
  .link-item {
    text-align: center;
  }

  .link-item ul li {
    margin-bottom: 10px;
  }

  .box-6 .item-b {
    margin-top: 0;
  }

  .starfish {
    display: none;
  }

  /***************************
/*** night
/***************************/
  .sp-pd-left-50 {
    padding-left: 40px;
  }

  .couple {
    left: 70%;
    top: 1100px;
    width: 120px;
  }

  .couple img {
    width: 100%;
  }

  .cloud {
    left: 85%;
    top: 650px;
    width: 80px;
  }

  .cloud img {
    width: 50%;
  }

  .couple2 {
    position: absolute;
    right: 20%;
    top: -110px;
    width: 120px;
  }

  .couple2 img {
    width: 100%;
  }

  .wine {
    top: 650%;
    right: 0%;
    width: 50px;
  }

  .couple3 {
    top: 95%;
    right: 0%;
    width: 110px;
  }

  .girl {
    bottom: -13%;
    right: 10%;
    width: 60px;
    z-index: 30;
  }

  .days8-14-01 {
    position: absolute;
    right: -10px;
    bottom: -320px;
    width: 200px;
  }

  .sp-right {
    display: flex;
    justify-content: end;
  }

  .sp-right2 {
    display: flex;
    justify-content: space-between;
  }

  .anchor2 {
    position: absolute;
    right: 0%;
    top: -250%;
    width: 50px;
  }

  .wine {
    top: 550%;
    right: 0%;
    width: 50px;
  }

  .kira {
    display: none;
  }
}

@media screen and (max-width: 468px) {
  .sp-margin-left-10 {
    margin-left: 10px;
  }
  .seagull-3 {
    display: inherit;
    position: absolute;
    right: -15%;
    top: -30px;
    z-index: 100;
    width: 30%;
  }

  .morning-section {
    padding-bottom: 30px;
  }

  .background-pink {
    height: 50px;
  }

  .category-title .z-index-10 p {
    font-size: var(--font-sm) !important;
  }

  .main-title {
    letter-spacing: 0.05rem;
    font-size: var(--font-xs);
  }

  .clock-wrapper {
    width: 60px;
    height: auto;
  }

  .clock-12 .clock-wrapper {
    width: 60px;
    height: auto;
  }

  .shop-title .irohamaru-medium {
    margin-bottom: 0px;
  }

  .wave-img {
    left: 10%;
    top: 30px;
    max-width: 80%;
  }

  .days8-14-02-s {
    top: -100px;
    right: 10px;
    width: 70px;
  }

  .days8-14-03 {
    right: -0px;
    bottom: -200px;
    width: 140px;
  }

  .cloud {
    left: 75%;
    top: 475%;
    width: 80px;
  }

  .cloud img {
    width: 50%;
  }

  .couple {
    left: 70%;
    top: 950px;
    width: 120px;
  }

  .footer_container {
    padding: 20px 5px 10px 5px;
  }

  .footer_container div ul {
    gap: 10px;
  }

  .harbor-logo {
    width: 80px !important;
    height: auto;
  }

  footer_container div img {
    width: 60% !important;
    gap: 0;
  }

  .day-title h2 {
    letter-spacing: 0.1rem;
    font-size: var(--font-sm) !important;
  }
  .day-title h1 {
    margin-left: 0px;
    letter-spacing: 0.05rem;
    margin-bottom: 0 !important;
  }
  /*
    .day-title h1 {
        font-size: var(--font-md);
    }
*/

  .day-title h1 {
    font-size: var(--font-ll) !important;
  }

  .day-title p {
    font-size: var(--font-sm);
  }

  .time-left {
    top: -110px !important;
    left: 0px !important;
    line-height: 0.2 !important; /* 文字が重なる可能性あり、慎重に使う */
  }

  .time-left2 {
    top: -115px !important;
    left: 0px !important;
  }

  .time-left2 .text-lg {
    font-size: 15px;
    margin-top: 5px;
  }

  .time-left .text-xxl,
  .time-left2 .text-xxl,
  .time-left3 .text-xxl {
    font-size: var(--font-ll);
  }

  .time-left .text-lg,
  .time-left2 .text-lg,
  .time-left3 .text-lg {
    font-size: var(--font-xs);
  }

  .shop-title .text-lg {
    font-size: var(--font-smd);
  }

  .dia {
    position: absolute;
    top: -40%;
    right: 0%;
    width: 80px;
  }

  .anchor2 {
    position: absolute;
    right: 0%;
    top: -250%;
    width: 50px;
  }

  .wine {
    top: 580%;
    right: 0%;
    width: 50px;
  }

  .p-box {
    font-size: var(--font-sm) !important;
    margin-top: 3px;
  }
  .p-box2 {
    font-size: var(--font-sm) !important;
    margin-top: 3px;
  }

  .text-inline2 {
    display: flex;
    gap: 0.5em; /* 要素間のスペース */
    align-items: start; /* 高さをそろえる */
    line-height: 1;
  }
}