@charset "utf-8";
/* ========== すべて共通 ========== */
html, body,
h1, h2, h3, h4, h5, h6,
a, p, span,
em, small, strong,
sub, sup,
mark, del, ins, strike,
abbr, dfn,
blockquote, q, cite,
code, pre,
ol, ul, li, dl, dt, dd,
div, section, article,
main, aside, nav,
header, hgroup, footer,
img, figure, figcaption,
address, time,
audio, video,
canvas, iframe,
details, summary,
fieldset, form, label, legend,
table, caption,
tbody, tfoot, thead,
tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
}
figure {
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}
.m_margin {
  margin: 0 0 30px;
}

/* wrapper */
.os_wrapper {
	width: 740px;
	display: block;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-size: 62.5%;
	line-height: 1.6;
	font-family: "Sawarabi Gothic",sans-serif;
}
/* ヘッダーチェンジトリガー */
.header_scroll {
	display: block;
	visibility: hidden;
}
/* 最初に表示されるカテゴリ */
.header_list {
	display: block;
	width: 740px;
	position: static;
	z-index: 2000;
}
.cate_box {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #35abb6;
}
.cate_box a {
	text-decoration: none;
}
.cate_button {
	display: block;
	margin: 10px 3px;
}

/* スクロール後変化したヘッダー */
.s_cate_box {
	box-sizing: border-box;
  display: flex;
	padding: 5px;
	width: 740px;
	background: #35abb6;
  justify-content: center;
  position: fixed;
  top: -120px;
  transition: .5s;
}
.s_cate_box ul,
.s_cate_box li
 {
	list-style: none;
	display: inline-block;
}
.s_cate_box.show {
    top: 0;
}
.s_cate_box a {
	background: #fff;
	color: #35abb6;
	padding: 5px 10px;
	margin: 5px;
	width: 60px;
	text-align: center;
	display: inline-block;
	font-size: 1rem;
}
/* セクション */
.sec1, .sec2, .sec3, .sec4 ,.sec5 {
	width: 740px;
	margin: 0 auto;
	padding: 0;
	position: relative;
}
.sec3 {
	background: #f6f6e7;
	padding-bottom: 50px;
}
/* フルサイズイメージ */
.main_img {
	width: 740px;
	margin: 0 auto;
	display: block;
}
/* 地図 */
.os_map {
	width: 740px;
	margin: 0 auto;
	display: block;
}
.button_img,
.ab_button_img {
	display: block;
	margin: 0 auto;
}
/* 購入ボタン、KE直リンク画像BOX */
.ab_button_img,
.ke_box {
	position: absolute;
   right:0px;
   bottom:50px;
   left:0px;
}
/* 深谷牛の直リンクイメージ */
.ke_box {
	bottom: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
}
/* その他直リンクイメージ */
.ke_box_2 {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
  text-decoration: underline;
}
.ke_box a {
  text-decoration: underline;
	color: #fff;
}
.ke_img_box {
	width: 170px;
	margin: 0 20px;
	padding: 0;
}
.ke_img_box figcaption {
	font-size: .9rem;
}
.ke_img {
	width: 170px;
	height: 170px;
	margin: 0;
}
.ke_img_box2 {
	margin: 0 6px;
	padding: 0;
}
.ke_img_box2 img {
	width: 170px;
	height:170px;
}
.ke_img_box2:nth-child(4n) {
	margin: 0;
}
.ke_img_box2 figcaption {
	width: 170px;
	font-size: .8rem;
}
.ke_box_2 a {
	color: #000;
}

/* うどん説明 */
.men_p {
  width: 740px;
  background: #000;
  display: block;
  margin: 0 auto;
}
.men_p h1 {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  font-size: 2rem;
  padding: 10px 30px 5px;
  color: #fff;
  text-align: center;
}
.men_p span {
  display: block;
  margin: 0 auto;
  width: 600px;
  border: 1px solid #fff;
}
.men_p p {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  font-size: 1rem;
  padding: 20px 50px 30px;
  color: #fff;
  font-weight: 500;
  letter-spacing: .5;
}
.img_ab_box {
  position: relative;
  display: block;
}
.youtube_btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
 @media screen and (max-width: 739px) {

	 .os_wrapper {
	 	width: 100%;
	 }
	 .sec1, .sec2, .sec3, .sec4 ,.sec5 {
	 	width: 100%;
	 }
	 .sec2 {
		 background: #000;
		 padding-bottom: 70px;
	 }
	 .sec3 {
		 padding-bottom: 50px;
	 }

	 .header_list {
	 	width: 100%;
	 }
	 .s_cate_box {
	 	width: 100%;
	 }
	 .main_img {
	 	width: 100%;
	 }
	 .os_map {
	 	width: 100%;
	 }
	 .ab_button_img {
		 width: 50%;
	 }

   .m_margin {
     margin: 0 0 10px;
   }
   /* カテゴリメニュー */
	 .cate_box {
	 	display: flex;
	 	justify-content: center;
	 	align-items: center;
	 	background: #35abb6;
	 }
	 .cate_box a {
		 width: calc(100% / 6 - 6px);
	 	text-decoration: none;
	 }
	 .cate_button {
	 	display: block;
	 	margin: 10px 3px;
		width: 100%;
	 }

   /* スクロール後変化したヘッダー */
   .s_cate_box {
   	box-sizing: border-box;
     display: flex;
     flex-wrap: wrap;
    padding: 5px;
   	background: #35abb6;
     justify-content: center;
     position: fixed;
     -webkit-backface-visibility:hidden;
     backface-visibility:hidden;
     overflow:hidden;
     top: -120px;
     left: 0;
     right:0;
     transition: .5s;
   }
   .s_cate_box li {
     display: inline-block;
    	width: calc(100% / 4 - 4px);
   }
   .s_cate_box ul,
   .s_cate_box li
    {
   	list-style: none;
   	display: inline-block;
   }
   .s_cate_box.show {
       top: 0;
   }
   .s_cate_box a {
   	background: #fff;
   	color: #35abb6;
   	padding: 2px 8px;
   	text-align: center;
   	display: inline-block;
   	text-decoration: none;
   	font-size: .9rem;
   }

	 .button_img,
	 .ab_button_img {
	 	display: block;
	 	margin: 0 auto;
		width: 50%;
	 }
	 .ab_button_img,
	 .ke_box {
	 	position: absolute;
	    right:0px;
	    bottom:10px;
	    left:0px;
	    margin:auto auto;
	 }

   /* 深谷牛の直リンクイメージ */
   .ke_box {
     width: 100%;
   	bottom: 30px;
   }
   /* その他直リンクイメージ */
   .ke_box_2 {
     justify-content: flex-start;
     align-items: baseline;
   }
   .ke_img_box {
   	width: calc(100% / 3);
   	margin: 0 5px;
   	padding: 0;
   }
   .ke_img_box figcaption {
   	font-size: .8rem;
   }
   .ke_img {
   	width: 100%;
   	height: auto;
   	margin: 0;
   }
   .ke_img_box2 {
    width: calc(100% / 2 - 12px);
   	margin: 5px 6px;
   	padding: 0;
   }
   .ke_img_box2 img {
   	width: 100%;
   	height:auto;
   }
   .ke_img_box2:nth-child(4n) {
   	margin: 0;
   }
   .ke_img_box2 figcaption {
   	width: 100%;
   	font-size: .8rem;
   }
   .ke_box_2 a {
   	color: #000;
   }

   /* うどん説明 */
   .men_p {
     width: 100%;
   }
   .men_p h1 {
     font-size: 1.3rem;
   }
   .men_p span {
     width: 60%;
   }
   .men_p p {
     font-size: 1rem;
     padding: 5px 20px 10px;
   }
   .img_ab_box {
     position: relative;
     display: block;
   }
   .youtube_btn {
     position: absolute;
     width: 40%;
     bottom: 10px;
     right: 10px;
   }


	}