@charset "utf-8";

*,
::before,::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img{
    border: none;
    display: block;
    width: 100%;
}

.headerlogo {
    width: 100%;
    margin: auto;
    margin-bottom: 1%;
}

.headerlogo img{
    display: block;
    max-width: 30vw;
    height: auto;
    margin-left: 7%;
}

body{
    font-family: "Tsukushi B Maru Gothic","筑紫B丸ゴシック","fot-tsukubrdgothic-std",sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #000;
    background-color: #f9dbde;
    font-size: clamp(10px, 2.5vw, 30px);
    color: #000;
    overflow-x: hidden
}
h2{
    font-weight: 700;
    font-style: normal;
    font-size: clamp(14px,4.5vw,52px);
}
li{
    list-style: none;
}
table{
    border-collapse: collapse;
    border-spacing: 0;
}

#slideshow {
    position: relative;
    width: 100%;
    max-width: 1057px;
    aspect-ratio: 1057 / 650; /* 自動で高さを保つ */
    text-align: center;
    margin: auto;
 }

 #slideshow img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;       /* 画像がスライドショーエリアにぴったりフィット */
    height: 100%;      /* 親要素のアスペクト比を維持しながらサイズ調整 */
    object-fit: cover; /* トリミングしながら全体を覆う */
    z-index: 8;
    opacity: 0.0;
 }
 
 #slideshow img.active {
    z-index: 10;
    opacity: 1.0;
 }
 #slideshow img.last-active {
    z-index: 9;
 }

 .fuwatAnime {
    visibility: visible !important;
  }

 #top{
    position: relative;
 }
#top h1{
    position: absolute;
    font-size: clamp(25px, 6vw, 65px); /* 画面幅に応じて文字サイズ可変 */
    top: clamp(150px, 40vw, 390px);    /* 上からの距離も可変に */
    right: clamp(20px, 10vw, 80px);    /* 右からの距離も可変に */
    color: #f90e66;
    font-weight: 700;
    font-style: normal;
    line-height: 1.2;
    z-index: 11;
}

#mainPhoto{
        margin-top: 5%;
        background-image: url(images/strawberry1.png);
        background-repeat: no-repeat;
        height: 50vw; /* 高さを画面の幅に応じて調整 */
        width: 100%;
        background-position: center;  
        background-size: cover; /* 背景画像をカバーする */
        position: relative;
}

#kikan,
#mainText,
#amazu {
    text-shadow: 2px 4px #7f4664;
    text-align: center;
    position: absolute; /* 絶対位置で配置 */
    left: 50%; /* 横方向の中央 */
    transform: translateX(-50%); /* 左に50%動かして中央に */
    display: block;
    width: 100%;
}

#kikan{
    font-weight: 700;
    font-style: normal;
    color: #fff;
    font-size: 5vw;
    top: 20%; /* 上からの位置を調整 */
}

#mainText{
    font-family: "Phosphate","Impact", sans-serif;
    color: #fff;
    font-size: 8vw;
    top: 40%; /* 上からの位置を調整 */
}

#amazu{
    font-weight: 700;
    font-style: normal;
    color: #fff;
    font-size: 3vw;
    top: 60%; /* 上からの位置を調整 */
}

#strawberry{
    width:100vw;
    margin-top: 100px;
}

#flexbox-day{
    display: flex;
    flex: 1; /* 左右のカラムに均等にスペースを割り当て */
    justify-content: space-between;
    align-items: center; /* ← これが縦方向の中央揃え */

}

#hiduke{
    max-width: 30%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

#folk{
    width: 50%;
}

#taruto{
    width: 50%;
    height: 100%;
}

#itigo_flex{
    display: flex;
    position: relative;
}

#itigomaru{
    width: 30vw;
    height: 30vw;            /* 正円になるように幅と高さを揃える */
    border-radius: 50%;
    background-color: #f2899d;
    position: relative;
    margin-top: 10vw;
    margin-left: 11vw;
}

#itigoflower{
    max-width: 18vw;          /* 画面幅の25%以内 */
    width: 100%;
    height: auto;
    position: absolute;
    left: 54%;               /* 固定ではなく vw で位置調整 */
    top: 64%;
    z-index: 1;
}

#itigo{
    position: absolute;
    display: block;
    margin-left: 73%;
    margin-top: 15%;
}

#itigomein{
    writing-mode: vertical-rl;
    white-space: nowrap;
}

/*04/10
 #itigomaru{
    height: 340px;
  width: 340px;
  border-radius:50%;
  background-color: #f2899d;
  margin-top: 65%;
  margin-left: 68%;
  position: relative;
  left: 73%;
  top: 394%;
  z-index: 100;
} */

#menu-flex{
    position: relative;
}

.dummy-height {
    height: 50vw; /* 必要に応じて調整（例：600pxでもOK） */
    visibility: hidden; /* 見えないけど、スペースだけ確保 */
}

#menu{
    writing-mode: vertical-rl;
    top: 20vw;
    left: 16vw;
    white-space: nowrap;
    position: absolute;
    z-index: 10;
}
#itigomenu{
    display: block;
    margin-top: 10%;
}
#itigomouse{
    max-width: 18vw;
    height: auto;
    display: block;
    position: absolute;
    z-index: 7;
    top: 70vw;
    left: 6vw;
}

#itigocake{
    max-width: 28vw;
    display: block;
    height: auto;
    position: absolute;
    z-index: 8;
    top: 49vw;
    left: 33vw;
}

#menumaru{
    height: 25vw;
    width: 25vw;
    border-radius: 50%;
    background-color: #f2899d;
    position: absolute;
    z-index: 6;
    top: 59vw;
    left: 18vw;
}

#menumarumini{
    height: 20vw;
    width: 20vw;
    border-radius: 50%;
    background-color: #f2899d;
    position: absolute;
    top: 12vw;
    left: 23vw;
}


#drinkmenu-flex{
    position: relative;
}

#drinkmenu{
    writing-mode: vertical-rl;
    white-space: nowrap;
    position: absolute;
    left: 77vw;
    transform: translateX(-50%);
    z-index: 10;
}

#drink{
    margin-top: 15%;
}

#drinkmenumaru{
    height: 20vw;
    width: 20vw;
    border-radius: 50%;
    background-color: #f2899d;
    position: absolute;
    z-index: 8;
    left: 75vw;
    top: 10vw;
}

#start-flex{
    position: relative;
    padding-bottom: 120vw; /* 画像の高さに合わせて余白を取る */
}

#start{
    margin-left: 10%;
    white-space: nowrap;
    position: absolute;
    top: 57vw;
    left: 4vw;
    z-index: 10;
}
#startitigo{
    writing-mode: vertical-rl;
}

#startmaru{
    height: 15vw;
    width: 15vw;
    border-radius: 50%;
    background-color: #f2899d;
    position: absolute;
    top: 54vw;
    left: 20vw;
    z-index: 9;

}
#mousecake {
    max-width: 23vw;
    height: auto;
    position: absolute;
    top: 45vw;
    left: 40vw;
}

#shortcake{
    max-width: 28vw;
    height: auto;
    position: absolute;
    top: 57vw;
    left: 62vw;
}

#itigojuce{
    max-width: 18vw;
    height: auto;
    position: absolute;
    top: 70vw;
    left: 42vw;
}

#clossing{
    background-color: #f2899d;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px 20px;
    flex-direction: column;
    text-align: center;
}
#clossing div{
    max-width: 90%;
    width: 600px;
}
.btn1{
    display: block;
    text-decoration: none;
    font-size: 3vw; /* ← 小さい画面に対応 */
    padding: 3vw;
    width: 100%;
    background: #fff;
    border-radius: 15px;
    text-align: center;
    font-weight: bold;
    color: #e5364f;
    border: 4px solid #fff;
    box-sizing: border-box;
    transition: all 0.3s ease;
}
.btn1:hover{
    background-color: #f2899d;
    color: #fff;
    border-style: solid;
    border-color: #fff;
    border-width: 4px;
}
#clossinglogo{
    margin: 50px auto 0;
    width: 100%;
    max-width: 600px;
    height: auto;
}

.fuwatAnime {
    -webkit-animation-fill-mode:both;
    -ms-animation-fill-mode:both;
    animation-fill-mode:both;
    -webkit-animation-duration:1.5s;
    -ms-animation-duration:1.5s;
    animation-duration:1.5s;
    -webkit-animation-name: fuwatAnime;
    -ms-animation-name: fuwatAnime;
    animation-name: fuwatAnime;
    visibility: visible !important;
}

/* 04/10記載 */
#images_test{
    width: 100%;
}

/* 04/10ここまで */

@-webkit-keyframes fuwatAnime {
    0% { opacity: 0; -webkit-transform: translateY(-20px); }
    100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fuwatAnime {
    0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
    100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

@media (max-width: 480px) {
  .btn1 {
    font-size: 6vw;
    padding: 4vw;
  }
  #clossing {
    padding: 80px 15px;
  }
  
}