/* --------------------
index(bp以外)
-------------------- */

/* --------------------
header
-------------------- */
.header {
  position: fixed;
  width:100%;
  background:#fff;
  display:block;
  box-shadow:rgba(128, 128, 128, 0.5) 0px 0px 5px 1px;
  -webkit-box-shadow:rgba(128, 128, 128, 0.5) 0px 0px 5px 1px;
  -moz-box-shadow:rgba(128, 128, 128, 0.5) 0px 0px 5px 1px;
  overflow:hidden;
  height:70px;
  z-index: 60;
}

.header ul {
  position: fixed;
  top: 0;
  right: 0;
  padding:15px 10px 0 0;
  display: flex;
}
.header ul li {
  padding:10px;
}
.header ul li a {
  display:block;
}
@media screen and not ( min-width:1024px )
{
  .header ul {
    flex-direction: column;
    margin-top: 70px;
    background: #fff;
    width: 100%;
    box-shadow: rgba(128, 128, 128, 0.5) 0px 6px 5px -2px;
    -webkit-box-shadow: rgba(128, 128, 128, 0.5) 0px 6px 5px -2px;
    -moz-box-shadow: rgba(128, 128, 128, 0.5) 0px 6px 5px -2px;
  }
  .header ul li {
    border-bottom: 1px solid #e7e7e7;
  }
}
@media screen and ( max-width:1024px )
{
  .header .globalRecipeSearchWrap {
    width: 100%;
    padding-top: 3px;
    margin-right: 0;
    text-align: center;
  }
  .header .search_submit_btn {
    padding:7px;
    margin-left: 5px;
  }
  .header .search_keyword {
    width: 80%;
    box-sizing: border-box;
    height: 2.8em;
  }
}
.footer {
  margin-bottom: 5rem;
}

/* --------------------
main
-------------------- */
.main {
  overflow:hidden;
  padding-top: 70px;
}

/* --------------------
topページ
-------------------- */

.balloon-message {
  position: relative;
  display: inline-block;
  margin: 5px 0 0 44px;
  padding: 15px;
  background: #fff;
  border-radius: 30px;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.balloon-message:before {  
  content: "";
  position: absolute;
  left: -38px;
  width: 13px;
  height: 12px;
  bottom: 0;
  background: #fff;
  border-radius: 50%;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.balloon-message:after {
  content: "";
  position: absolute;
  left: -24px;
  width: 20px;
  height: 18px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.balloon-message p {
  margin: 0; 
  padding: 0;
}

.gradient-bg {
  background: linear-gradient(to right, #10B981, #059669);
}