@charset "UTF-8";
/* ------------------------------------------
common
------------------------------------------ */
/* .sp {
  display: none;
}

.pc {
  display: block;
}

@media screen and (max-width: 767px) {
  .sp {
    display: block;
  }
  .pc {
    display: none;
  }
} */
.txt_center{
  text-align: center;
}
.strong {
  font-weight: bold;
}

.block {
  display: block;
}
/* .board_container{
  font-size: 14px;
} */
/* memu-book.css 参考 end ------------------ */

/* ------------------------------------------
color
------------------------------------------ */

:root {
  --bs-red: #dd2c00;
  --bs-wt: #fff;
  --bs-brown: #3b1410;
  --bk-beige: #f8f4f4;

  /* 修正時に色追加 */
  --bs-red_2: #e44d3c;
  --bs-orange: #f88102;
  --bs-gray: #777;
  --bs-pink: #ffc2b5;
  --bs-beige_2: #fce9d3;
  --bk-pink_2: #fff7f7;  
}



/* 20250701 ------------------ */
/* mv */
.mv_boad{
  object-fit: contain;
  max-width: 100%;
}

div.menu-board_cont{
  max-width: 100%;
}
/* h2 タイトル部分 */
/* h2.menu-board_ttl{
  background-color: var(--bs-red);
  color: var(--bs-wt);
  padding: 10px 0;
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 2px;
} */
/* h2 参考ここから--------------- */
.board-guide-header {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dd2c00;
  padding: 1rem 2rem;
  color: #fff;
  font-weight: bold;
  font-size: 2rem;
}
.board-guide-header__badge {
  background: #fff;
  color: #dd2c00;
  border-radius: 2rem;
  padding: 0.5em 1.5em;
  font-size: 1.5rem;
  margin-right: 1.5rem;
  font-weight: bold;
  display: inline-block;
}
.board-guide-header__title {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.2;
}
@media (max-width: 600px) {
  .board-guide-header {
    display: block;
    /* justify-content: center;
    align-items: center; */
    padding: 1rem;
    text-align: center;
  }
  .board-guide-header__title {
    font-size: 2rem;
    text-align: center;
  }
  .board-guide-header__badge{
    margin: 0 0 10px 0;
  }
}
/* h2 参考ここまで--------------- */
/* catch */
.board-text-catch {
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
}
@media screen and (max-width: 767px) {
  /* .board-text-catch {
    text-align: left;
    background: url("000.png?version=20241001") no-repeat left center;
  } */
}
/* catch end */

div.menu-board_cont ul{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding-inline-start: 0;
}

div.menu-board_cont ul li{
  border: 2px solid var(--bs-red_2);
  border-radius: 10px;
  width: calc(50% - 10px);
  background-color: var(--bk-pink_2);
  position: relative;
}
@media screen and (max-width: 767px) {
  h2.menu-board_ttl{
  letter-spacing: 0px;
  padding: 20px 0;
  margin: 20px 0;
  }
  div.menu-board_cont ul{
  list-style: none;
  display: block;
  /* flex-wrap: wrap;
  justify-content: center; */
  gap: 10px;
  padding-inline-start: 0;
  }

  div.menu-board_cont ul li{
  border: 2px solid var(--bs-red_2);
  border-radius: 10px;
  width: 100%;
  background-color: var(--bk-pink_2);
  position: relative;
  margin-bottom: 10px;
  }
}
/* メニューボードの種類 画像部分 */
li div.board-ttl_wt{
  font-size: 18px;
  font-weight: bold;
  color: var(--bs-wt);
  background: var(--bs-red_2);
  border-radius: 8px 8px 0 0;
  padding: 19px 0;
  margin-bottom: 1rem;
  text-align: center;
}
li div.board-txt{
  height: 350px;
  padding: 10px 15px 30px;
  display: flex;
  justify-content: space-around;
}
li div.board-txt img{
  max-height: 260px;
  max-width: calc(40% - 10px); 
  object-fit: contain;
}
li div.board-txt p{
  width: calc(55% - 10px); 
  line-height: 2.5rem; 
  font-size: 14px;
}
span.font_b{
  display: block;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin: 5px 0 30px;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  li div.board-ttl_wt{
  font-size: 16px;
  font-weight: bold;
  color: var(--bs-wt);
  background: var(--bs-red_2);
  border-radius: 8px 8px 0 0;
  padding: 15px 0;
  margin-bottom: 1rem;
  text-align: center;
  }
  li div.board-txt{
  height: 300px;
  padding: 10px 15px 30px;
  display: flex;
  justify-content: space-around;
  }
  li div.board-txt img{
  max-height: 210px;
  max-width: calc(50% - 20px); 
  object-fit: contain;
  object-position: center top;
  }
  li div.img_small img{
  max-height: 210px;
  max-width: calc(50% - 20px); 
  object-fit: contain;
  object-position: center center;
  }

  li div.board-txt p{
  width: calc(50% - 10px); 
  line-height: 2.3rem; 
  font-size: 14px;
  margin: 0;
  }
  span.font_b{
  display: block;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  margin: 0px 0 20px;
  line-height: 1.3;
  }
  div.img_small span.font_b{
  display: block;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  margin: 20px 0 10px;
  line-height: 1.3;
  }
}

/* 商品を見るボタン */
div.menu-board_cont ul li div.board-btn{
  position: absolute;
  bottom: 20px;
  left: 20px;
  text-align: center;
  width: 100%;
}
div.menu-board_cont ul li div.board-btn a{
  text-decoration: none;
  color: inherit;
  width: 50%;
  min-width: 180px;
  background-color: var(--bs-wt);
  padding: 10px;
  border-radius: 20px;
  display: inline-block;
  filter: drop-shadow(2px 2px 1px #999);
  transform: translateX(-25px);
}
div.menu-board_cont ul li div.board-btn a span.btn_txt{
  display: block;
  transform: translateX(25px);
}
div.menu-board_cont ul li div.board-btn a:hover{
  text-decoration: underline;
  color: var(--bs-red);
}
@media screen and (max-width: 767px) {
  div.menu-board_cont ul li div.board-btn a{
  text-decoration: none;
  color: inherit;
  width: 65%;
  min-width: 150px;
  background-color: var(--bs-wt);
  padding: 10px;
  border-radius: 20px;
  display: inline-block;
  filter: drop-shadow(2px 2px 1px #999);
  transform: translateX(-25px);
  }

  div.menu-board_cont ul li div.board-btn a:hover{
  text-decoration: none;
  color: inherit;
}
}

/* btn 矢印部分 */
 .arrow{
	position: relative;
	display: inline-block;
	padding: 0 0 0 16px;
	color: #000;
	vertical-align: middle;
	text-decoration: none;
	font-size: 15px;
  margin-left:30px;
}
.arrow::before,
.arrow::after{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}
/* 三角の矢印アイコン（正円背景） */
.btn_red::before{
	width: 15px;
	height: 15px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: var(--bs-red);
}
.btn_red::after{
	right: -3px;
	box-sizing: border-box;
	width: 6px;
	height: 6px;
	border: 6px solid transparent;
	border-left: 6px solid var(--bs-wt);
}

/* 商品を見るボタン end */
@media screen and (max-width: 767px) {
  
}


/* ------------------------------------------
 活用例
------------------------------------------ */
#example{
  margin-top: 60px;
}
/* #example h3{
  border-top: 2px solid var(--bs-brown);
  border-bottom: 2px solid var(--bs-brown);
  background: var(--bs-red_2);
  padding: 10px;
  color: var(--bs-wt);
  text-align: center;
  font-size: 25px;
  font-weight: bold;
} */
@media screen and (max-width: 767px) {
  /* #example h3{
  border-top: 2px solid var(--bs-brown);
  border-bottom: 2px solid var(--bs-brown);
  padding: 10px 0;
  color: var(--bs-brown);
  text-align: center;
  font-size: 18px;
  margin: 25px 0;
  } */
}

/* フレーム */
div.menu-ex_cont ul{
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 5px;
  padding-inline-start: 0;
}

div.menu-ex_cont ul li{
  border: 2px solid var(--bs-red_2);
  border-radius: 10px;
  width: calc(100% / 3);
  background-color: var(--bk-pink_2);
  position: relative;
}
@media screen and (max-width: 767px) {
  div.menu-ex_cont ul{
  list-style: none;
  display: block;
  /* flex-wrap: nowrap;
  justify-content: center;
  gap: 5px; */
  padding-inline-start: 0;
  }

  div.menu-ex_cont ul li{
  border: 2px solid var(--bs-red_2);
  border-radius: 10px;
  width: 100%;
  background-color: var(--bk-beige);
  position: relative;
  margin-bottom: 10px;
  }
}

li div.ex-ttl_wt{
  font-size: 18px;
  font-weight: bold;
  color: var(--bs-wt);
  background: var(--bs-red_2);
  border-radius: 8px 8px 0 0;
  padding: 20px 0 0 30px;
  text-align: center;
  height: 68px;
  letter-spacing: 1px;
  /* for ico */
  position: relative;
}
li div.ex-ttl_wt_02{
  font-size: 18px;
  font-weight: bold;
  color: var(--bs-wt);
  background: var(--bs-red_2);
  border-radius: 8px 8px 0 0;
  padding: 10px 0 0 30px;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 1px;
  height: 68px;
  /* for ico */
  position: relative;
}
@media screen and (max-width: 767px) {
  li div.ex-ttl_wt{
  font-size: 18px;
  font-weight: bold;
  color: var(--bs-wt);
  background: var(--bs-red_2);
  border-radius: 8px 8px 0 0;
  padding: 15px 0 0 30px;
  text-align: center;
  height: 60px;
  letter-spacing: 1px;
  /* for ico */
  position: relative;
  }
  li div.ex-ttl_wt_02{
  font-size: 18px;
  font-weight: bold;
  color: var(--bs-wt);
  background: var(--bs-red_2);
  border-radius: 8px 8px 0 0;
  padding: 10px 0 0 30px;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 1px;
  height: 60px;
  /* for ico */
  position: relative;
  }
}

li div.ex-txt{
  height: 160px;
  padding: 10px 25px 25px;
  line-height: 1.8rem;
}
li div.ex-txt p{
  margin: 1rem 0;
  font-size: 14px;
  line-height: 1.6;
}
@media screen and (max-width: 1050px) {
  li div.ex-txt p{
  margin: 1rem 0;
  font-size: 15px;
  line-height: 1.3;
  }
}

@media screen and (max-width: 1000px) {
  li div.ex-txt{
    height: 140px;
    padding: 5px 10px 25px;
    line-height: 1.5rem;
  }
  li div.ex-txt p{
  margin: 0;
  font-size: 14px;
  line-height: 1.2;
  }
}
/* 0710 add */
@media screen and (max-width: 767px) {
  li div.ex-txt{
    height: 110px;
    padding: 5px 20px 25px;
    line-height: 1.5rem;
  }
  li div.ex-txt p{
  margin: 1rem 0;
  font-size: 14px;
  line-height: 1.6;
  }
}
/* 0710 add end */
@media screen and (max-width: 430px) {
  li div.ex-txt{
    height: 140px;
    padding: 5px 20px 25px;
    line-height: 1.5rem;
  }
  /* li div.ex-txt p{
  margin: 1rem 0;
  font-size: 14px;
  line-height: 1.6;
  } */
}

/* ico-1 */
span.boad_ico_01::before{
  content: url(https://tools.itembox.design/item/category/menu-board/img/img_menu-board-ico_01.png);
  position: absolute;
  top:15px;
  left: 30px;
}
/* ico-2 */
span.boad_ico_02::before{
  content: url(https://tools.itembox.design/item/category/menu-board/img/img_menu-board-ico_02.png?ver=20250710);
  position: absolute;
  top:5px;
  left: 30px;
}
/* ico-3 */
span.boad_ico_03::before{
  content: url(https://tools.itembox.design/item/category/menu-board/img/img_menu-board-ico_03.png);
  position: absolute;
  top:15px;
  left: 30px;
}
@media screen and (max-width: 1050px) {
  /* ico-1 */
  span.boad_ico_01::before{
  top:10px;
  left: 5px;
  transform: scale(0.7);
  }
  /* ico-2 */
  span.boad_ico_02::before{
  top:5px;
  left: 5px;
  transform: scale(0.7);
  }
  /* ico-3 */
  span.boad_ico_03::before{
  top:10px;
  left: 5px;
  transform: scale(0.7);
  }
}

@media screen and (max-width: 767px) {
  /* ico-1 */
  span.boad_ico_01::before{
  top:15px;
  left: 150px;
  }
  /* ico-2 */
  span.boad_ico_02::before{
  top:5px;
  left: 150px;
  }
  /* ico-3 */
  span.boad_ico_03::before{
  top:15px;
  left: 150px;
  }
}
@media screen and (max-width: 600px) {
  /* ico-1 */
  span.boad_ico_01::before{
  top:15px;
  left: 70px;
  }
  /* ico-2 */
  span.boad_ico_02::before{
  top:5px;
  left: 70px;
  }
  /* ico-3 */
  span.boad_ico_03::before{
  top:15px;
  left: 70px;
  }
}
@media screen and (max-width: 550px) {
  /* ico-1 */
  span.boad_ico_01::before{
  top:5px;
  left: 40px;
  transform: scale(0.9);
  }
  /* ico-2 */
  span.boad_ico_02::before{
  top:0px;
  left: 40px;
  transform: scale(0.8);
  }
  /* ico-3 */
  span.boad_ico_03::before{
  top:5px;
  left: 40px;
  transform: scale(0.9);
  }
}



div.arrow_red_big{
  width: 100%;
  text-align: center;
  margin: 20px 0;
}

div.arrow_red_big p{
  margin-top: 20px;
  font-weight: bold;
  font-size: 18px;
}

.sp-850 {
  display: none;
}

@media (max-width: 850px) {
  .sp-850 {
    display: block;
  }
  
}


@media screen and (max-width: 767px) {
  div.arrow_red_big{
  width: 100%;
  text-align: center;
  margin: 10px 0;
  }
  div.arrow_red_big img{
  transform: scaleY(0.9);
  }
  div.arrow_red_big p{
  margin-top: 0px;
  font-weight: bold;
  font-size: 16px;
  }
  
}