@charset "UTF-8";




*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
img{
    vertical-align: bottom;
    width: 100%;
}
body{
    background-color:#e6e6dc;
}
header{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;

    background-image: url(../img/index_hero.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    background-image: url(../img/index_hero.webp);no-repeat center /cover:
    }
h1{
    font-weight: 700;
    text-shadow : 5px 5px 5px #4f3431;
    color: #e6e6dc ;        
    padding: 150px 60px 20px 60px;
    margin: 20px;
    font-family: "Kaisei Decol", serif;
    font-size:100px;
    /* background-color: rgb(211,154,99,0.35); */
}
h2{
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 60px;
    text-decoration: underline #4f3431;
}
h3{
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 24px;
    color:  #4f3431;
    background-color: #fffffb;
    border-radius: 25px 25px 0 0 ;
    padding: 15px;
    border: 2px solid #a38c7f;
}
.font85{
    font-size: 150px;
}

.message {
    font-size: 32px;
    line-height: 1.6;
    font-weight: 400;
    text-align: center;
    margin: 40px auto;
}
.flex_cintainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap:30px;
    width: 1080px;
    margin: 0 auto 60px;
}
.flex_cintainer p{
    font-size: 18px;
    line-height: 1.8;
    font-weight: 400;
    margin-bottom: 24px;
    background-color: #fffffb;
    border-radius: 0 0 25px 25px;
    padding: 20px;
    border: 2px solid #a38c7f;

}

.flex_cintainer > img,
.flex_cintainer > div{
    width: 520px;
}

.flex_item03{
    order: 4;
}
.img_box01{
    background: url(../img/index_main.webp) no-repeat center/cover;
    border-radius: 50% 50% 0 0;
}
.img_box02{
    background: url(../img/index_main03.webp) no-repeat center/cover;
    border-radius: 50% 50% 0 0;
}
.img_box03{
    background: url(../img/castle.jpg) no-repeat center/cover;
    border-radius: 50% 50% 0 0;
}
.img_box03:hover{
    background: url(../img/castle2.jpg) no-repeat center/cover;
}
.img_box04{
    background: url(../img/cake_showwindow.jpg) no-repeat center/cover;
    border-radius: 50% 50% 0 0;
}
.img_box04:hover{
    background-size: 80%;
}
.img_box05{
    background: url(../img/wain_coffe_tea.jpg) no-repeat center/cover;
    border-radius: 50% 50% 0 0;
}
.img_box05:hover{
    animation: shake 2s infinite; 
  /* 揺れの始点となる初期の傾き */
    transform: rotate(10deg);
}

.img_box06{
    background: url(../img/creamcake.jpg) no-repeat center/cover;
    border-radius: 50% 50% 0 0;
}
.img_box06:hover{
    animation: full-rotation 1s infinite linear;
}
@keyframes full-rotation {
  0% {
    transform: rotate(0deg);  
  }
  100% {
    transform: rotate(360deg); 
  }
}
footer{
    background-color: #4f3431;
    color:#e6e6dc;
    text-align:center ;
    padding: 14px 10px 20px;
    margin-top: 44px;
}
.hover120:hover {
    background-size: 120%;
}
.hover110:hover{
    border-radius: 0 0 50% 50%;
}