@charset "utf-8";


/*----------------------------------全体の設定----------------------------------*/
body {
	margin: 0px;
	padding: 0px;
	font-family:"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 15px;
	line-height: 2;
	color: #666;
	background: #fff;
	text-decoration: none;
	-webkit-text-size-adjust: none;
}
a {color: #666; , transition: 0.4s;}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form,select,textarea,input {margin: 0px;padding: 0px;font-size: 100%;}
ul {list-style-type: none;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
video {max-width: 100%;}
iframe {width: 100%;}


@media screen and (max-width:600px){
body {font-size: 14px;}
}




/*----------------------------------ヘッダー----------------------------------*/
header {
	position: fixed;
	z-index: 100;
	left: 0px;
	top: 0px;
	width: 100%;
	background: #846243;
	font-size: 15px;
	height: 50px;
}

header #logo img {
	height: 50px;
	width: 200px;
	margin: 0 20px;
	float: left;
}


.global_menu {
  width: 70%;
  position: absolute;
  right: 2%;
  color: #fff;
  text-align: center;
  top: 0;
}
 
.global_menu li {
  display: inline-block;
}
 
.global_menu a {
  display: block;
  padding: 10px;
  color: #fff;
  text-decoration: none;
}
 
.child_menu { /* 下層メニューのスタイル */
  width: 100%;
  position: absolute;
  top: 50px; /* 親項目の直下に配置 */
  left: 0;
  padding: 0;
  color: #fff;
  background: #846922;
  visibility: hidden; /* 下層メニューを非表示 */
}
 
.menu:hover .child_menu { /* 下層メニューのスタイル（親項目ホバー時） */
  visibility: visible; /* 下層メニューを表示 */
}
 
.child_menu a:hover {
  color: #fff;
}


#hanburger {
	display: none;
}

#splink {
	display: none;
}



@media screen and (max-width:900px){
 .menu_button {
  width: 40px;
  height: 40px;
  position: fixed;
  top: 5px;
  right: 5px;
  z-index: 10;
}
 
.menu_button::before {
  font-family: "Font Awesome 5 Free";
  content: "\f0c9"; /* アイコン「３本線」 */
  font-weight: 900;
  position: absolute;
  color: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
 
#hanburger:checked + .menu_button::before { /* アイコンのスタイル（チェック済み） */
  content: "\f00d"; /* アイコン「×印」 */
}
 
 
 
 
.global_menu {
  visibility: hidden;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 50px;
  left: 0;
  padding: 30px;
  color: #fff;
  background: #846243;
  opacity: 0.85;
  text-align: right;
}
 
#hanburger:checked ~ .global_menu { /* メニュー全体のスタイル（チェック済） */
  visibility: visible; /* メニューを表示 */
}

.global_menu li {
	display: block;
	position: relative;
	top: 20px;
	right: 75px;
}
 
.global_menu a {
  width: 100%;
}
 
.menu:not(:last-child) {
  margin-bottom: 20px;
}
 
.menu > a { /* 親項目のスタイル */
  font-weight: bold;
  padding: 10px 20px;
}


.child_menu { /* 下層メニューのスタイル */
  top: -20px; /* 親項目の直下に配置 */
  left: -140px;
  background: transparent;
  z-index: 101;
}
 
.child_menu > li > a {
  padding: 10px 30px;
  font-size: 1em;
  font-weight: bold;
  border-bottom: solid 1px #fff;
}

#nolink {pointer-events:none}
#splink {display: block;}
}






/*-------------------------------------------

#menubar {float: left;}

#menubar li {
	float: left;
	letter-spacing: 0.1em;
}

#menubar li a {
	display: block;
	color: #fff;
	padding: 0px 10px;
	line-height: 50px;
	text-decoration: none;
}

#menubar-s {display: none;}
#menubar_hdr {display: none;}


@media screen and (max-width:600px){
header #logo img { width: 160px; }
}
*/



/*--------------------------------スライドショー--------------------------------*/
/*.slide {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 500px;
  margin: 50px 0 50px 0;
}

.slide img {
  position   : absolute;
  width      : 100%;
  height: auto;
  opacity    : 0;
  animation  : slideAnime 8s ease infinite;
}

.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 4s }

@keyframes slideAnime{
   0% { opacity: 0 }
   25% { opacity: 1 }
  50% { opacity: 1 }
  75% { opacity: 0 }
 100% { opacity: 0 }
}*/




.slide-show {
    position: relative;
	width: 100%;
    max-width: 100%;
	margin-bottom: 50px;
}
 
.slide-show img { 
    animation: show 8s infinite;
    max-width: 100%;
    height: auto;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 50px;
}
 
@keyframes show {
   0% { opacity: 0 }
   25% { opacity: 1 }
  50% { opacity: 1 }
  75% { opacity: 0 }
 100% { opacity: 0 }
}
 
.slide-show img:nth-of-type(1) {
    position: relative;
	animation-delay: 0s;
}
 
.slide-show img:nth-of-type(2) {
    animation-delay: 4s;
}
 
.slide-show-sp { display: none;}


/*@media screen and (max-width:600px){
.slide-show-sp {
    position: relative;
	width: 100%;
    max-width: 100%;
	margin-bottom: 50px;
}
 
.slide-show-sp img { 
    animation: show 8s infinite;
    max-width: 100%;
    height: auto;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 50px;
}

.slide-show { display: none;}
}*/









/*----------------------------------コンテンツ----------------------------------*/
#contents {
	margin-top: 50px;
	padding: 5%;
}

.home #contents {
	margin-top: 520px;
}

.category_img {
	position: relative;
	width: 100%;
	margin-bottom: 50px;
}

.category_maguro {
	position: relative;
	width: 100%;
	margin-top:50px;
	margin-bottom: 50px;
}

@media screen and (max-width:600px){
.home #contents { margin-top: 550px; }
.category_img { margin-bottom: 20px; }
.category_maguro { margin-top:50px; margin-bottom: -20px; }
}




/*------------------------------------見出し-------------------------------------*/
h2 {
  position: relative;
  padding: 10px;
  margin-bottom: 50px;
  text-align: center;
  color: #a18c78;
  font-size: 25px;
  font-family: 'Sawarabi Mincho', sans-serif;
  letter-spacing: 5px;
}

h2:after {
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 50%;
  height: 6px;
  content: '';
  border-radius: 3px;
  background-image: -webkit-gradient(linear, right top, left top, from(#fff1e5), to(#a18c78));
  background-image: -webkit-linear-gradient(right, #fff1e5 0%, #a18c78 100%);
  background-image: linear-gradient(to left, #fff1e5 0%, #a18c78 100%);
}

h2 span{
	display: block;
	font-size: 15px;
	margin: 10px 0;
}


h3 {
  font-size: 18px;
  color: #555;
  line-height: 1.3em;
  margin-bottom: 5px;
  margin-top: 12px;
}


h4 {
  position: relative;
  padding: 10px;
  margin-bottom: 25px;
  text-align: center;
  font-size: 19px;
  font-family: 'Sawarabi Mincho', sans-serif;
}

h5 {
	font-size: 25px;
	font-weight: bold;
	font-family: 'Sawarabi Mincho', sans-serif;
	line-height: 45px;
}

h6 {
	font-size: 25px;
	font-weight: bold;
	font-family: 'Sawarabi Mincho', sans-serif;
	line-height: 45px;
	text-align: center;
}



@media screen and (max-width:600px){
h2{ font-size: 20px;}
h2 span{ font-size: 12px;}
h3{ font-size: 12px;}
h4{ font-size: 15px;
    line-height: 1.7em;
	margin-bottom: 10px}
h5{ font-size: 20px;
    line-height: 30px;
	margin: 10px 0;
}
h6{ font-size: 20px;
    line-height: 30px;
	margin: 10px 0;
}
}




/*------------------------------------お知らせ-------------------------------------*/
#new {
	margin: 0 auto;
	width: 75%;
}

#new dl {
	padding: 0px 20px;
	margin-bottom: 20px;
	height: 170px;
	/*overflow: auto;*/
}

#new dt {
	float: left;
	width: 10em;
	letter-spacing: 0.1em;
}

#new dd {
	padding-left: 9em;
	border-bottom: 1px solid #ccc;
}


@media screen and (max-width:600px){
#new {width: 95%;}
}


/*------------------------------------トップ用リンク-------------------------------------*/
.toplink {
	width: 75%;
	margin: 0 auto 50px auto;
}

.toplink p {
	font-size: 17px;
	font-family: 'Sawarabi Mincho', sans-serif;
	line-height: 1.8em;
	margin: 10px 0;
}



@media screen and (max-width:600px){
.toplink {width: 95%;}
.toplink p {
	font-size: 15px;
	line-height: 1.8em;
}
}




/*------------------------------------会社概要-------------------------------------*/
.company{
	width: 100%;
	table-layout: fixed;
	margin: 0 0 20px;
}

.company, .company td, .company th {
	border-bottom: 1px dotted rgba(132,98,67,.5);
	padding: 10px;
	word-break: break-all;
}

.company th {
	width: 150px;
	text-align: center;
}

.map{
	width: 95%;
	height: 300px;
	border: none;
}




@media screen and (max-width:600px){
.company, ..company td, ..company th {padding: 5px;}

.company th {width: 80px;}

.map{height: 200px;}
}




/*------------------------------------商品案内-------------------------------------*/
.product{
	width: 30%;
	border-bottom: 1px dotted rgba(132,98,67,.5);
	float: left;
	margin-left: 3%;
	margin-bottom: 70px;
	overflow:hidden;
}

.product ul{
	font-size: 13px;
	line-height: 18px;
}

.product p{
	font-size: 13px;
	line-height: 20px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.product a{
	background: #5ac4ef;
	color: #fff;
	padding: 5px;
	text-decoration: none;
}


.b_pc{
	display: block;
	margin-bottom: 75px;
}

.b_sp{ display: none;}


@media screen and (max-width:900px){
.product{
	width: 45%;
	margin-left: 5%;
}
}

@media screen and (max-width:600px){
.product{ height: 320px;}
.b_pc{ display: none;}
.b_sp{
	display: block;
	margin-bottom: 75px;
}
}




.pro {
	width: 70%;
	margin: 0 auto;
}




/*#pro img {
	margin-bottom: 50px;
	border-radius: 0 0 10px 10px;
}*/

.pro p {
	font-size: 18px;
	line-height: 40px;
	margin-bottom: 50px;
}

.pro h8 {
  padding: 5px;
  color: #fff;
  background: #846243;
  -webkit-box-shadow: 3px 3px 0 #c2af9d;
  box-shadow: 3px 3px 0 #c2af9d;
  float: left;
}

.pro ul {
	margin-left: 100px;
	margin-bottom: 80px;
}

.pro a {
	display: block;
	margin: 0 auto;
	text-align: center;
	color: #c2af9d;
	border: 1px solid #c2af9d;
	padding: 5px;
	width: 25%;
	text-decoration: none;
}



#subnav {
  list-style: none;
  overflow: hidden;
  text-align: center;
  margin: 0 auto;
  width:510px;
}
 
#subnav li {
  width: 150px;
  text-align: center;
  background-color: #846243;
  float: left;
  margin: 50px 10px;
  border-radius: 20px;
}
 
#subnav li a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  padding: 20px;
}

@media screen and (max-width:600px){
.pro {
	width: 100%;
	margin-top: 25px;
}

.pro img {
	margin-bottom: 30px;
}


.pro p {
	font-size: 15px;
	line-height: 30px;
	margin-bottom: 30px;
}

.pro ul {
	margin-left: 90px;
}

.pro a {
	width: 30%;
	margin-bottom: 30px;
}


#subnav {
  width:350px;
}
 
#subnav li {
  width: 110px;
  margin: 20px 1px;
}
 
#subnav li a {
	font-size:12px;
	padding: 0;
}

}




/*---------------------------------個別商品紹介----------------------------------*/


.pro h1 {
  width: 100%;
  background: #846243;
  background-image:
   repeating-linear-gradient(-45deg, #946d47, #946d47 7px, transparent 0, transparent 14px);
  margin: 0 auto;
  padding: 14px 0 10px 0;
  text-align: center;
  font-size: 25px;
  color: #fff;
}



div#imageList ul {
    margin: 10px;
    padding: 0;
}
div#imageList li {
    float: left;
    list-style-type: none;
    margin-left: 2%;
	margin-bottom: 50px;
	width: 30%;
}



.treats{
	width: 30%;
	float: left;
	margin-left: 3%;
	margin-bottom: 70px;
	overflow:hidden;
}

.treats ul{
	font-size: 13px;
	line-height: 18px;
}

.treats p{
	font-size: 13px;
	line-height: 20px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.trelink{
	background: #d6a070;
	color: #fff;
	padding: 5px;
	text-decoration: none;
}




#treatsbox p{
	font-size: 15px;
	line-height: 30px;
	margin-top: 10px;
}


h7{
	font-size: 30px;
	font-weight: bold;
	color: #846243;
}

#treatsbox .setsumei {
	font-size: 12px;
	line-height: 25px;
}

@media screen and (max-width:900px){
#pro h1 {
  font-size: 17px;
}

.treats{
	width: 48%;
	margin: 2% 1%;
}
}

@media screen and (max-width:600px){
h7{
	font-size: 26px;
	line-height: 1.5em;
}

#treatsbox ul{
	font-size: 13px;
	line-height: 25px;
}

}


.mainImage{
	width: 100%;
	margin-bottom: 1%;
}
 
.thumb{
	float: left;
	width: 45%;
	margin: 0 1% 50px 3%;
}




.container {
  margin: 0 auto;
  width: 70%;
}

.main-img img {
  height: auto;
  width: 100%;
}
.sub-img {
  display: flex;
  margin-top: 2%;
  margin-bottom: 50px;
}
.sub-img li {
  margin-right: 2%;
  width: calc(96% / 3);
}
.sub-img li:nth-child(3n) {
  margin-right: 0;
}
.sub-img {
	width: 100%;
}
.sub-img img {
  width: 100%;
}



.magurobanner {
	width: 70%;
	margin: 0 auto 50px auto;
	text-align: center;
}


@media (max-width: 500px) {
.container {
  width: 100%;
}

.magurobanner {
  width: 100%;
}
}






/*------------------------------------店舗案内-------------------------------------*/
.shop{
	width: 30%;
	border-bottom: 1px dotted rgba(90,169,239,.5);
	float: left;
	margin-left: 3%;
	margin-bottom: 70px;
	overflow:hidden;
}

.shop ul{
	font-size: 13px;
	line-height: 18px;
}

.shop p{
	font-size: 13px;
	line-height: 20px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.shop a{
	background: #5ac4ef;
	color: #fff;
	padding: 5px;
	text-decoration: none;
}


@media screen and (max-width:900px){
.shop{
	width: 45%;
	margin-left: 5%;
}
}



/*--------------------------------まぐろ説明--------------------------------*/

.maguro_ex {
	margin: 0 auto 30px auto;
	width: 80%;
}

.maguro_img {
	float: left;
	width: 33.3%;
}

@media (max-width: 500px) {
.maguro_ex {
	width: 100%;
}

.textup {
	margin-top: -25px;
}
}



/*----------------------------------フッター設定----------------------------------*/
footer {
	clear: both;
	text-align: center;
	font-size: 90%;
	color: #fff;
	position: fixed;
	bottom: 0px;
	width: 100%;
}
footer a {color: #fff;}

#copyright {
	clear: both;
	text-align: center;
	background: #846243;
}

#copyright a {text-decoration: none;}

.f_img {
	position: fixed;
	left: 0;
	bottom: 18px;
	width: 100px;
}

@media screen and (max-width:900px){
.f_img{ width: 60px; }
}





/*---------------------------------トップへモドル---------------------------------*/
.pagetop {
	display: none;
    position: fixed;
    bottom: 35px;
    right: 15px;
}
.pagetop a {
    display: block;
    background: rgba(132,98,67,.5);
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding: 5px 10px;
}




/*---------------------------------その他---------------------------------*/
.blank{ clear: both;}


























/*コンテンツ（contents）
---------------------------------------------------------------------------*/
/*コンテンツブロック全体*/


/*他。微調整。*/
#contents p + p {
	margin-top: -5px;
}

/*list（トップページやServiceページで使っている横長ブロック）
---------------------------------------------------------------------------*/
/*ボックスの設定*/
#contents .list {
	position: relative;overflow: hidden;
	display: flex;
	align-items: center;
	background: #000;	/*背景色*/
	color: #fff;		/*文字色*/
	margin-bottom: 1px;	/*ボックス同士に空けるスペース*/
}
/*リンクテキストの文字色*/
#contents .list a {
	color: #fff;
}
/*ボックス内のh4（見出し）タグ*/
#contents .list h4 {
	margin-bottom: 10px;	/*下のテキストとの間に空けるスペース*/
	font-size: 120%;		/*文字サイズ*/
}
/*ボックス内のp（段落）タグ*/
#contents .list p {
	padding: 0;		/*余白のリセット*/
}
/*ボックス内のfigure画像*/
#contents .list figure {
	float: left;	/*左に回り込み*/
	width: 30%;		/*画像の幅*/
}
/*「class="text"」を指定したブロック。テキストブロック。*/
#contents .list .text {
	float: right;	/*右に回り込み*/
	width: 64%;		/*幅*/
	margin: 3%;		/*外側に取るスペース。これがないと枠ギチギチに文字が表示されます。*/
}

/*btn1
---------------------------------------------------------------------------*/
.btn1 a {
	display: block;text-decoration: none;
	background: #ed7500 url(../images/arrow4.png) no-repeat 95% center / 15px;	/*背景色、アイコン画像の読み込み。95%は左からの配置場所、最後の15pxは画像幅。*/
	color: #fff;	/*文字色*/
	max-width: 300px;	/*最大幅。画面幅が狭くなった場合、小さく縮小されていきます。*/
	text-align: center;	/*テキストをセンタリング*/
	padding: 5px 30px;	/*上下、左右へのボタン内の余白*/
	margin: 20px auto 0;	/*上、左右、下へのボタンの外側への余白*/
}
/*マウスオン事に少し位置をずらす指定*/
.btn1 a:hover {
	position: relative;
	left: 1px;
	top: 1px;
}








/*inputボタン
---------------------------------------------------------------------------*/
#contents input[type="submit"].btn,
#contents input[type="button"].btn,
#contents input[type="reset"].btn {
	padding: 5px 10px;		/*上下、左右へのボックス内の余白*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	font-size: 20px;		/*文字サイズ*/
	border-radius: 3px;		/*角丸のサイズ*/
	background: #eee;		/*背景色*/
}
/*マウスオン時の設定*/
#contents input[type="submit"].btn:hover,
#contents input[type="button"].btn:hover,
#contents input[type="reset"].btn:hover {
	border: 1px solid #999;	/*枠線の幅、線種、色*/
	background: #fff;		/*背景色*/
}



/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
/*通常時のボタンは非表示*/
body .nav-fix-pos-pagetop a {display: none;}
/*fixmenu_pagetop.jsで設定している設定値になったら出現するボタンスタイル*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
	display: block;text-decoration: none;text-align: center;
	width: 50px;		/*幅*/
	line-height: 50px;	/*高さ*/
	z-index: 1;
	position: fixed;
	bottom: 20px;	/*下から20pxの場所に配置*/
	right: 3%;		/*右から3%の場所に配置*/
	background: #666;	/*背景色（古いブラウザ用）*/
	background: rgba(0,0,0,0.6);	/*背景色。0,0,0は黒の事。0.6は60%色がついた状態。*/
	color: #fff;	/*文字色*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
	animation-name: opa1;	/*keyframes.cssで使う@keyframesの指定*/
	animation-duration: 1S;	/*アニメーションの実行時間*/
	animation-fill-mode: both;	/*アニメーションの待機中は最初のキーフレームを維持、終了後は最後のキーフレームを維持。*/
}
/*マウスオン時*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {
	background: #999;	/*背景色*/
}

/*checkブロック。赤い注意書きブロックです。
---------------------------------------------------------------------------*/
p.check {
	background: #ff0000;
	color:#fff;
	padding: 10px 25px !important;
	margin-bottom: 20px;
}
p.check a {color: #fff;}

/*ul.disc,olタグ
---------------------------------------------------------------------------*/
ul.disc {
	list-style: disc;
	padding: 0 20px 20px 45px;
}
ol {
	padding: 0 20px 20px 45px;
}

/*その他
---------------------------------------------------------------------------*/
.look {background: #222;padding: 5px 10px;border-radius: 4px;border: 1px solid #333;color: #fff;}
.mb15,.mb1em {margin-bottom: 15px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb50 {margin-bottom: 50px !important;}
.clear {clear: both;}
.color1, .color1 a {color: #ed7500 !important;}
.pr {font-size: 10px;}
.wl {width: 96%;}
.ws {width: 50%;}
.c {text-align: center;}
.r {text-align: right;}
.l {text-align: left;}
.fl {float: left;}
.fr {float: right;}
.big1 {font-size: 40px;}
.mini1 {font-size: 11px;display: inline-block;line-height: 1.5;}
.dn {display: none;}
.sh {display: none;}









/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){






/*その他
---------------------------------------------------------------------------*/
body.s-n #sub,body.s-n #footermenu {display: none;}
.big1 {font-size: 20px !important;}
.sh {display:block;}
.pc {display:none;}
.ws,.wl {width: 94%;}
.fl {float: none;}
.fr {float: none;}

}