body {
    margin-right: auto;
	margin-left: auto;
}

/*========================
　smartphone　bottom menu
　========================*/

.mini-text{font-size:10px;}/*文字大きさ*/

ul.bottom-menu {
    position: fixed;
    left:0;
    bottom:0;
    width: 100%;
    height:66px;/*高さ*/
    margin:0 0 0.6em 0;
    padding:0;
    background-color:#f5f5f5;/*背景色*/
    border-top:2px solid #808080;/*バーの上の線*/
    border-bottom:2px solid #808080;/*バーの下の線*/
    z-index:30;
	}

ul.bottom-menu li {
    float:left;
    width:25%;
    background-color:#f5f5f5;/*背景色*/
    list-style-type:none;
    text-align:center;
    font-size:25px;/*アイコンのサイズ*/}

.bottom-menu li a {
    display: block;
    color:#808080;/*アイコン＆文字の色*/
    padding-top:10px;
    padding-bottom:5px;
    line-height:10px;
    text-decoration:none;}
	
.bottom-menu li img {
    width: auto;
    height:30px;/*高さ*/
    padding-bottom:5px;}

.bottom-menu li a:hover {
    color:#a9a9a9;/*マウスオーバー時の色*/}

.btm{
  background-color: #391a0b;
  padding-top: 20px;
  margin-bottom: 100px;
  margin-top: 40px;
}

body {
  background-color: #fefbf5;
  font-family: 'Helvetica Neue', sans-serif;
  margin-top: 6px;
  padding: 0;
}

a {
  color: #f5f5f5;
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  width: calc(100% / 2);
  max-width: 364px;
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 8px 10px;
  transition: 0.3s;
  font-size: 0.9rem;
  border-radius: 10px 10px 0 0;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #500;
  color: #FFF;
}

.tablinks.active {
  color: #FFF;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 4px 4px;
  border: none;
  border-top: none;
  margin-right: auto;
  margin-left: auto;
  max-width: 1200px;
}
.tabcontent img {
    margin: auto;
}
.tablinks img {
    display: block;
    margin: auto;
}

.long_bn img {
	width: 100vw;
	max-width: 1200px;
}

.short_bn img {
	display: none;
}

.flexbox {
	width: 100%;
	min-width: 320px;
}
.flexbox img {
    width: 70%;
    padding: 0.2% 2%;
	min-width: 300px;
}

/* Style the active tab content */
.tabcontent.active {
  display: block;
}

#sauce0_desc img {
	display: block;
	max-width: 720px;
	width: 100%;
}

div {
  vertical-align: top;
}


p {
  margin-block-start: 0.4em;
  margin-block-end: 0.4em;
  margin-bottom: 0.4em;
}

.tops {
  display: inline-block;
  background-color: #391a0b;
  font-size: 0.9rem;
  color: #f5f5f5;
  max-width: 480px;
}

.prb {
  vertical-align: text-bottom;
  width: 95%;
}

.back {
	display: inline-flex;
}

.ret {
	max-width: 300px;
}

.ret img {
	width: 140px;
	padding-right: 2px;
}

.retf {
    display: none;
}

.print_ti {
  display: none;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 1em;
}

.recipe {
  margin-bottom: 0.6em;
}

.recipe h2 {
  font-size: 2em;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}

.recipe h3 {
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}

.recipe ul {
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-top: 0em;
  margin-bottom: 0.4em;
}

.recipe p {
  font-size: 0.9em;
  line-height: 1em;
  margin-bottom: 0.4em;
}

.recipe-image {
  width: 100%;
  height: auto;
  margin-bottom: 0.4em;
}

.recipe-image img {
  max-width: 100%;
  height: auto;
}

.outer{
  display: table;
}

.inner{
  display: table-cell;
}

.inner_w{
  display: table-cell;
  max-width: 50%;
}

.inner_r{
  display: table-row;
  padding-left: 1em;
}

.inner_rx{
  padding-left: 1em;
  padding-bottom: 1em;
  max-width: 89%;
}

.sandf{
  max-width: 100%;
}

.sandf_i{
  text-align: center;
  max-width: 340px;
}

.steps {
  display: flex;
  flex-wrap: wrap;
}

.step {
  width: calc(100% / 3);
  padding: 0.2em;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.step img {
  width: 100%;
}

.tablinks img {
  max-width: 680px;
  max-width: 100%;
}

.copy {
  font-size: 0.8em;
  padding-left: 0.4em;
}

@media screen and (max-width: 480px) {
.retf {
	display: block;
    position: fixed;
    right: 20px;
	top: 5px;
	max-width: 100px;
}

.tops {
  padding: 3px 0px 3px 0px;
  max-width: 480px;
}

.long_bn img {
	display: none;
}

.short_bn img {
	display: inline;
	width: 100vw;
	max-width: 767px;
}

.back {
  display: none;
}
	
.sandf_i{
  max-width: 100%;
  width: 46vw;
}

.inner_r1{
  max-width: 89%;
}

.inner_r2{
  max-width: 98%;
  width: 96vw;
}

.steps {
  display: flex;
  flex-direction: column;
}
	
.step {
  width: 100%;
}

.recipe-image {
  width: 100vw;
}

.recipe-image img {
  max-width: 98%;
}

.recipe h2 {
  padding-right: 0.8em;
}

.copy {
  font-size: 0.8em;
  padding-left: 0.4em;
}

.tab button {
  width: 100%;
}

}

/* スマートフォン用のスタイル */
@media screen and (min-width: 481px) and (max-width: 767px) {
.retf {
	display: block;
    position: fixed;
    right: 20px;
	top: 5px;
	max-width: 120px;
}

.tops {
  padding: 3px 0px 3px 0px;
  min-width: 440px;
  max-width: 100%;
}

.long_bn img {
	display: none;
}

.short_bn img {
	display: inline;
	width: 100vw;
	max-width: 767px;
}

.back {
  display: none;
}

.sandf_i{
  max-width: 99%;
  width: 48vw;
}
	
.steps {
  display: flex;
  flex-direction: column;
}
.step {
  width: 100%;
}
  
.recipe-image {
  width: 100vw;
}

.recipe-image img {
  width: 95%;
}

}

/* タブレット用のスタイル*/
@media screen and (min-width: 768px) and (max-width: 1023px) {
.retf {
	display: block;
    position: fixed;
    right: 20px;
	top: 5px;
	max-width: 140px;
}

.tops {
  padding: 3px 0px 3px 0px;
  width: 480px;
  max-width: 100%;
}

.steps {
  display: flex;
  flex-wrap: wrap;
}

.step {
  width: calc(50% - 5px);
  justify-content: space-between;
}


.back {
  display: none;
}
  
.recipe-image {
  width: 100vw;
}

.recipe p {
  font-size: 1.1em;
}

.inner_r0{
  display: table-cell;
}
	
.inner_r1{
  display: table-cell; width: 43%;
}
	
.inner_r2{
  display: table-cell; width: 49%;
}

.inner_rx{
  max-width: 82%;
}
}

/* パソコン用のスタイル */
@media screen and (min-width: 1024px) {
.tops {
  padding: 3px 0px 3px 0px;
  font-size: 1.2rem;
  min-width: 680px;
}

.steps {
  display: flex;
  flex-wrap: wrap;
}
.step {
  width: calc(33.3333% - 7.5px);
  justify-content: space-between;
}

.prb {
  max-width: 280px;
}

.inner_r{
  display: table-cell;
}

.inner_rx{
  display: table-cell;
  padding-right: 1em;
}

.recipe p {
  font-size: 1.2em;
}

.btm {
  margin-bottom: 140px;
}

/*========================
　smartphone　bottom menu
　========================*/

.mini-text{font-size:16px;}/*文字大きさ*/

ul.bottom-menu {
    height:108px;/*高さ*/
    border-top:3px solid #808080;/*バーの上の線*/
    border-bottom:3px solid #808080;/*バーの下の線*/
	}

ul.bottom-menu li {
    font-size:48px;/*アイコンのサイズ*/
	}
	
.bottom-menu li img {
    height:60px;/*高さ*/
    }
}

@media print{

@page {
  size: A4;
  margin: 20px;
}

  /* 印刷領域をページ中央に配置 */
  body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

.not_print_area {
  display: none;
}

.print_ti h2 {
  font-size: 1.6em;
}

.print_bi {
  padding: 0 0 0 15px;
  margin: 0;
  font-size: 1.2em;
}

.recipe-image {
  width: 48vw;
}
.recipe-image img {
  width: 100%;
}
.inner_r{
  font-size: 1.2em;
  display: table-cell;
}
.inner_r2{
  display: none;
}
.inner_w{
  width: 24vw;
}
.inner_rx{
  max-width: 98%;
  font-size: 1.1em;
  padding: 0 0 0.2em 0.6em;
  margin: 0;
}
.sandf_i{
  width: 100%;
}
.not_print_ti {
  display: none;
}
.print_ti {
  display: table;
  margin: 0;
  padding: 0;
}
.recipe-instructions {
  padding-top: 0.6em;
  font-size: 1.2em;
}
.recipe-instructions h3 {
  display: none;
}
.tabcontent {
  position: relative;
}
.copy {
  position: absolute;
  top: 97%;
  right: 0.6em;
  font-size: 1em;
  padding-left: 1em;
}

p {
  margin: 0;
  line-height: 1.1;
}

}