@charset "utf-8";

.inner__1000 {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

a {
  display: block;
}

.sp {
  display: none;
}

/* fv */
.fv {
  position: relative;
}

.fv img {
  width: 100%;
}

.tab__menu {
  position: absolute;
  bottom: 15vw;
  left: 50%;
  transform: translateX(-50%);
  max-width: 700px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}

.tab__menu li {
  width: 20vw;
  max-width: 335px;
  height: 8vw;
  max-height: 125px;
}

.tab__menu li:hover {
  opacity: 0.75;
}

/* tab__panel */
.tab__panel {
  margin-top: -17vw;
}

/* タブの切り替え設定 */
.tab__panel-box {
  display: none;
}

.tab__panel-box.is-show {
  display: block;
}

/* recipe_con */
.recipe_con {
  background: url(../images/recipe_bg.jpg)repeat-y;
  background-size: contain;
  background-position: center;
}

.recipe_intro {
  margin-bottom: 60px;
  text-align: center;
}

.recipe_link {
  margin-bottom: 60px;
}

.recipe_link_box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  justify-content: center;
  margin-bottom: 60px;
}

.recipe_link_box div {
  width: calc((100% - 60px) / 4);
}

/* handMadeKit */
.handMadeKit {
  margin-bottom: 60px;

}

.handMadeKit_ttl {
  text-align: center;
  margin-bottom: 40px;
}

.handMadeKit_con {
  background: url(../images/recipe_handMadeKit_cont.png)no-repeat;
  background-size: 100%;
  background-position: top;
  height: 1970px;
  position: relative;
}

.handMadeKit_btn_box {
  position: absolute;
  top: 570px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 20px;
  width: 70%;
}

.handMadeKit_youtubeLink {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 475px;
  height: 267px;
}

.handMadeKit_youtubeLink iframe {
  width: 100%;
  height: 100%;
}

.handMadeKit_btn_box_recipe,
.handMadeKit_btn_box_product {
  width: 50%;
}

.handMadeKit_arrange_btn {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
}

/* melonpan */
.melonpan {
  margin-bottom: 60px;
}

.melonpan_ttl {
  text-align: center;
  margin-bottom: 40px;
}

.melonpan_con {
  background: url(../images/recipe_melonpan_cont.png)no-repeat;
  background-position: center;
  height: 1000px;
  position: relative;
}

.melonpan_btn_box {
  position: absolute;
  bottom: 130px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 70%;
}

/* recipe_itemList */
.snackHouse,
.mainCake,
.present,
.party,
.partyMenu {
  margin-bottom: 60px;
}

.snackHouse_ttl,
.mainCake_ttl,
.present_ttl,
.party_ttl,
.partyMenu_ttl {
  text-align: center;
  margin-bottom: 40px;
}

.snackHouse_con_box,
.mainCake_con_box,
.present_con_box,
.party_con_box,
.partyMenu_con_box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.snackHouse_con_box_item,
.mainCake_con_box_item,
.present_con_box_item,
.party_con_box_item,
.partyMenu_con_box_item {
  position: relative;
}

.recipe_btn {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 66%;
}

/* contest */
.recipe_con .contest,
.product_con .contest {
  background: #004a86;
  padding-top: 100px;
  padding-bottom: 350px;
  width: 100%;
  position: relative;
}

.contest::before {
  content: "";
  width: 100%;
  height: 280px;
  background: url(../images/recipe_contest_bg.png)no-repeat;
  background-size: cover;
  background-position: bottom center;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.contest_wrap {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

.contest_ttl {
  text-align: center;
  margin-bottom: 60px;
}

.contest_btn {
  margin-bottom: 40px;
}

/* product_con */
.product_con {
  background: url(../images/product_bg.jpg)repeat-y;
  background-size: contain;
  background-position: center;
}

.product_intro {
  margin-bottom: 60px;
  text-align: center;
}

/* handMadeKit.pd */

.handMadeKit_con.pd {
  background: url(../images/product_handMadeKit_cont.png)no-repeat;
  background-size: contain;
  height: 2400px;
}

.handMadeKit_btn_box.pd {
  top: 650px;
  row-gap: 10px;
}

.handMadeKit_youtubeLink_01 {
  position: absolute;
  top: 1500px;
  left: 130px;
  width: 325px;
  height: 180px;
  background: #efefef;
}

.handMadeKit_youtubeLink_01 iframe {
  width: 100%;
  height: 180px;
}

.handMadeKit_btn_box_product.chocolate {
  position: absolute;
  top: 1720px;
  left: 50%;
  transform: translateX(-50%);
  width: 350px;
}

.handMadeKit_youtubeLink_02 {
  position: absolute;
  top: 1970px;
  left: 130px;
  width: 325px;
  height: 180px;
  background: #efefef;
}

.handMadeKit_youtubeLink_02 iframe {
  width: 100%;
  height: 180px;
}

.handMadeKit_btn_box_product.muffin {
  position: absolute;
  top: 2190px;
  left: 50%;
  transform: translateX(-50%);
  width: 350px;
}

/* sumikko */

.sumikko {
  background: url(../images/product_sumikko_bg.jpg)no-repeat;
  background-size: cover;
  background-position: center;
  padding: 100px 0;
}

.sumikko_ttl {
  text-align: center;
  margin-bottom: 40px;
}

.sumikko_con {
  background: url(../images/product_sumikko_cont.png)no-repeat;
  background-size: cover;
  background-position: center;
  height: 2600px;
  position: relative;
}

.sumikko_con_btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.sumikko_con_btn.item01 {
  top: 660px;
}

.sumikko_con_btn.item02 {
  top: 1230px;
}

.sumikko_con_btn.item03 {
  bottom: 710px;
}

.sumikko_con_btn.item04 {
  bottom: 130px;
}

/* itemList */
.itemList {
  padding-top: 150px;
  margin-bottom: 60px;
}

.itemList_con {
  background: url(../images/product_itemList_bg.png)no-repeat;
  background-size: contain;
  background-position: center;
  height: 5820px;
  position: relative;
}

.itemList_con_box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 50px;
  width: 100%;
  max-width: 780px;
}

.itemList_item {
  width: 46%;
  position: relative;
}

.itemList_btn {
  position: absolute;
  bottom: -5px;
  right: -5px;
  width: 65%;
}

.itemList_con_box.mel {
  top: 330px;
}

.itemList_con_box.pick {
  top: 920px;
}

.itemList_con_box.ornament {
  top: 1510px;
}

.itemList_con_box.ornament .itemList_btn {
  width: 60%;
}

.itemList_con_box.talt {
  top: 2100px;
}

.itemList_con_box.topping {
  bottom: 1650px;
  row-gap: 35px;
  justify-content: left;
}

.itemList_con_box.decoPen {
  bottom: 100px;
  row-gap: 20px;
}

/* タブレット */
@media screen and (min-width: 768px) and (max-width: 1000px) {

  /* 共通 */
  .tab__menu {
    bottom: 17vw;
  }

  .tab__menu li {
    width: 23vw;
  }

  .tab__panel {
    margin-top: -22vw;
  }

  /* レシピ */
  .handMadeKit_con {
    height: 197vw;
  }

  .handMadeKit_btn_box {
    top: 58vw;
    width: 60%;
  }

  .handMadeKit_arrange_btn {
    bottom: 11vw;
  }

  .melonpan_con {
    height: 95vw;
    background-size: 100%;
  }

  .melonpan_btn_box {
    bottom: 13vw;
    gap: 10px;
    width: 100%;
  }

  .melonpan_recipe_btn,
  .melonpan_feature_btn {
    width: 40%;
    text-align: center;
  }

  .party_ttl,
  .partyMenu_ttl {
    width: 80%;
    margin: 0 auto 20px;
  }

  /* 商品 */
  .handMadeKit_con.pd {
    height: 240vw;
  }

  .handMadeKit_btn_box.pd {
    top: 66vw;
    row-gap: 10px;
    width: 60%;
  }

  .handMadeKit_btn_box_recipe,
  .handMadeKit_btn_box_product {
    width: 50%;
  }

  .handMadeKit_btn_box_product.pd {
    width: 60%;
  }

  .handMadeKit_btn_box_movie.pd {
    width: 95%;
  }

  .handMadeKit_youtubeLink {
    width: 76%;
    height: 25vw;
    top: 67%;
  }

  .handMadeKit_youtubeLink_01 {
    top: 150vw;
    left: 13vw;
    width: 33vw;
    height: 18vw;
  }

  .handMadeKit_youtubeLink_01 iframe,
  .handMadeKit_youtubeLink_02 iframe {
    height: 18vw;
  }

  .handMadeKit_btn_box_product.chocolate {
    top: 172vw;
    width: 300px;
  }

  .handMadeKit_youtubeLink_02 {
    top: 197vw;
    left: 13vw;
    width: 33vw;
    height: 18vw;
  }

  .handMadeKit_btn_box_product.muffin {
    top: 220vw;
    width: 300px;
  }

  .sumikko_con {
    height: 255vw;
  }

  .sumikko_con_btn {
    width: 40%;
    margin: 0 auto;
  }

  .sumikko_con_btn.item01 {
    top: 64vw;
  }

  .sumikko_con_btn.item02 {
    top: 120vw;
  }

  .sumikko_con_btn.item03 {
    bottom: 69vw;
  }

  .sumikko_con_btn.item04 {
    bottom: 13vw;
  }

  .itemList {
    padding-top: 40px;
  }

  .itemList_con {
    height: 575vw;
  }

  .itemList_con_box {
    width: 85%;
    gap: 40px;
  }

  .itemList_con_box.mel {
    top: 32vw;
  }

  .itemList_con_box.pick {
    top: 90vw;
  }

  .itemList_con_box.ornament {
    top: 149vw;
  }

  .itemList_con_box.talt {
    top: 206vw;
  }

  .itemList_con_box.topping {
    bottom: 162vw;
    row-gap: 20px;
    width: 83%;
  }

  .itemList_con_box.decoPen {
    bottom: 6vw;
    width: 83%;
  }

  .itemList_decoPenList {
    width: 83%;
  }

  .decoPen_btn {
    width: 60%;
    margin-bottom: 30px;
  }

}

/* スマホ */
@media(max-width: 767px) {

  /* 共通タブ */
  .sp {
    display: block;
  }

  .fv {
    height: auto;
  }

  .tab__panel {
    margin-top: -1px;
  }


  .tab__menu {
    background: url(../images/fv_sp_cvArea.jpg)no-repeat;
    background-size: 100%;
    flex-wrap: nowrap;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    padding: 0 15px;
    position: relative;
    bottom: 0;
  }

  .tab__menu li {
    width: auto;
    height: auto;
  }

  .recipe_link_box,
  .handMadeKit,
  .melonpan,
  .snackHouse,
  .mainCake,
  .present,
  .party,
  .partyMenu {
    margin-bottom: 40px;
  }

  .handMadeKit_ttl,
  .melonpan_ttl,
  .snackHouse_ttl,
  .mainCake_ttl,
  .present_ttl,
  .party_ttl,
  .partyMenu_ttl {
    width: 80%;
    margin: 0 auto 20px;
  }

  .recipe_con .contest,
  .product_con .contest {
    padding: 40px 15px 150px;
  }

  .contest_ttl {
    width: 80%;
    margin: 0 auto 40px;
  }

  .contest::before {
    height: 120px;
  }

  .contest_btn {
    margin-bottom: 20px;
  }

  /* レシピ */
  .recipe_link_box div {
    width: calc((100% - 60px) / 2);
    text-align: center;
  }

  .recipe_btn {
    bottom: 50px;
    left: 52%;
  }

  .handMadeKit_con,
  .handMadeKit_con.pd,
  .melonpan_con {
    background: none;
    height: auto;
  }

  .handMadeKit_btn_box {
    top: 130vw;
    row-gap: 10px;
    width: 80%;
  }

  .handMadeKit_btn_box_recipe,
  .handMadeKit_btn_box_product {
    width: 100%;
    text-align: center;
  }

  .handMadeKit_youtubeLink {
    width: 260px;
    height: 160px;
    top: 75%;
  }

  .handMadeKit_arrange_btn {
    width: 80%;
    bottom: 90px;
    text-align: center;
  }

  .melonpan_btn_box {
    bottom: 80px;
  }

  /* 商品 */
  .handMadeKit_btn_box.pd {
    top: 234vw;
  }

  .handMadeKit_btn_box.pd .handMadeKit_youtubeLink {
    top: 70%;
  }

  .handMadeKit_youtubeLink_01 {
    top: 433vw;
    left: 50%;
    transform: translateX(-50%);
    width: 321px;
    height: 170px;
  }

  .handMadeKit_youtubeLink_02 {
    top: 614vw;
    left: 50%;
    transform: translateX(-50%);
    width: 321px;
    height: 170px;
  }

  .handMadeKit_youtubeLink_01 iframe,
  .handMadeKit_youtubeLink_02 iframe {
    height: 170px;
  }

  .handMadeKit_btn_box_product.chocolate {
    top: 543vw;
    width: 330px;
  }

  .handMadeKit_btn_box_product.muffin {
    top: 724vw;
    width: 330px;
  }

  .sumikko {
    padding: 40px 0;
  }

  .sumikko_ttl {
    width: 80%;
    margin: 0 auto 20px;
  }

  .sumikko_con {
    background: none;
    height: auto;
  }

  .sumikko_con_btn {
    width: 80%;
    text-align: center;
  }

  .sumikko_con_btn.item01 {
    top: 206vw;
  }

  .sumikko_con_btn.item02 {
    top: 405vw;
  }

  .sumikko_con_btn.item03 {
    bottom: 223vw;
  }

  .sumikko_con_btn.item04 {
    bottom: 28vw;
  }

  .itemList {
    padding-top: 40px;
  }

  .itemList_con {
    background: none;
    height: auto;
  }

  .itemList_con_box {
    width: 80%;
    gap: 20px;
  }

  .itemList_item {
    width: 100%;
  }

  .itemList_con_box.mel {
    top: 57vw;
  }

  .itemList_con_box.pick {
    top: 274vw;
  }

  .itemList_con_box.ornament {
    top: 482vw;
  }

  .itemList_con_box.talt {
    top: 690vw;
  }

  .itemList_con_box.topping {
    width: 79%;
    bottom: 594vw;
    row-gap: 30px;
    justify-content: center;
  }

  .itemList_con_box.decoPen {
    width: 82%;
    bottom: 17vw;
    row-gap: 30px;
  }

  .itemList_decoPenList {
    padding-top: 30px;
  }

  .decoPen_btn {
    padding-top: 30px;
  }

  .itemList_con_img {
    width: 100%;
    position: relative;
  }
}

/* 追加：スマホとタブレットの間のレスポンシブ */
@media screen and (min-width: 415px) and (max-width: 767px) {
  .handMadeKit_btn_box {
    top: 130vw;
    row-gap: 40px;
  }

  .handMadeKit_btn_box_recipe img,
  .handMadeKit_btn_box_product img {
    width: 100%;
  }

  .handMadeKit_youtubeLink {
    width: 67vw;
    height: 37vw;
  }

  .handMadeKit_arrange_btn {
    bottom: 23vw;
  }

  .melonpan_btn_box {
    bottom: 25vw;
    gap: 40px;
  }

  .melonpan_recipe_btn,
  .melonpan_feature_btn {
    width: 100%;
    text-align: center;
  }

  .melonpan_recipe_btn img {
    width: 100%;
  }

  .melonpan_feature_btn img {
    width: 100%;
  }

  .handMadeKit_youtubeLink_01 {
    width: 80vw;
    height: 45vw;
  }

  .handMadeKit_youtubeLink_01 iframe {
    height: 45vw;
  }

  .handMadeKit_youtubeLink_02 {
    width: 80vw;
    height: 45vw;
  }

  .handMadeKit_youtubeLink_02 iframe {
    height: 45vw;
  }

  .itemList_item img {
    width: 100%;
  }

  .itemList_con_box.topping {
    width: 80%;
    bottom: 604vw;
    row-gap: 30px;
  }

  .itemList_btn {
    position: absolute;
    bottom: -15px;
    right: -2px;
    width: 60%;
  }

  .itemList_con_box.decoPen {
    width: 83%;
    bottom: 17vw;
    row-gap: 30px;
  }

  .handMadeKit_btn_box_product.chocolate,
  .handMadeKit_btn_box_product.muffin {
    width: 70vw;
  }

  .sumikko_con_btn img {
    width: 100%;
  }

  .snackHouse_con_box_item,
  .mainCake_con_box_item,
  .present_con_box_item,
  .party_con_box_item,
  .partyMenu_con_box_item {
    width: 95%;
    text-align: center;
  }

  .snackHouse_con_box_item img,
  .mainCake_con_box_item img,
  .present_con_box_item img,
  .party_con_box_item img,
  .partyMenu_con_box_item img {
    width: 100%;
  }

  .recipe_btn {
    bottom: 11vw;
    left: 52%;
  }
}