@charset "utf-8";
/* CSS Document */

#header{ margin:0 auto; border-bottom:3px solid rgb(66,33,11);}
.container{ margin:0 auto; max-width:95%;}
@media only screen and ( min-width : 768px ) {
.for_sp {display: none!important;}
}
.menu_01 {
  color: rgb(104,179,46);/*文字色*/
  border: solid 1px rgb(104,179,46);/*線色*/
  padding: 0.5em;/*文字周りの余白*/
  border-radius: 1.2em;/*角丸*/
  font-size:16px;
}
.menu_02 {
  color: #FFFFFF;/*文字色*/
  border: solid 2px rgb(104,179,46);/*線色*/
  background-color:rgb(104,179,46);
  padding: 0.5em 2.8em;/*文字周りの余白*/
  border-radius: 1.2em;/*角丸*/
  font-size:16px;
}
.menu_02 a{color: #FFFFFF;}
.menu_02 a:hover{color: #FFFFFF;}

#header {
  /*box-shadow: 0px 3px 15px rgba(0,0,0,0.2);*/
  z-index: 99;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
}
#gNav a:hover {
  color: #999;
}
nav ul{
  list-style: none; }
nav li a {
  font-size: 16px;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: rgb(66,33,11);
}
nav .sub-menu,.mean-container .mean-nav ul ul {
  color: #fff;
  background-color:rgb(104,179,46);
}

.top-image {
  position: relative;
  width: 100%;
  margin-top:73px;
}

.top-image img {
  width: 100%;
}

@media only screen and ( max-width : 480px ) {
	.top-image {
  position: relative;
  width: 100%;
  margin-top:60px;
}
	
.top-image img {
  width: 100%;
}
  #header {
    padding: 10px 0;
    height: 40px;
  }
  .h_logo {
    width: 80%;
    position: absolute;
    top: 10px;
    left: 10px;
	text-align:left;
    z-index: 100;
  }
  .h_logo img{ width:90%;}
  #gNav .nav {
    overflow-y: auto;
    height: 100vh;
  }
  .mean-nav .container {
    padding: 0;
  }
  nav li a {font-size: 18px;}
  nav li .fa {
    display: none;
  }
  .swiper-container{ margin-top:60px;}
}

@media print, screen and ( min-width : 480px ) {
  #header {
    height: 80px;
  }
  .h_logo img {
    width: 300px;
  }
  #h_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #gNav ul {
    position: relative;
    display: flex;
  }
  #gNav li {
    position: relative;
    margin-right: 2em;
  }
  #gNav li:last-child {
    margin-right: 0;
  }
  #gNav li i {
    font-size: 16px;
    margin-left: 5px;
  }
  #gNav li a {
    position: relative;
    display: block;
    text-align: center;
    line-height: 80px;
  }
  #gNav .sub-menu {
    visibility: hidden;
    opacity: 0;
    z-index: 1;
    display: block;
    position: absolute;
    top: 50px;
    left: 50%;
    margin-left: -100px;
    width: 200px;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
  }
  #gNav .sub-menu a {
    padding: 10px;
    display: block;
    border-bottom: none;
    padding: 20px;
    line-height: 1.2em;
  }
  #gNav .sub-menu a:hover:after {
    content: none;
  }
  #gNav .sub-menu li {
    display: block;
    font-size: 16px;
    padding: 0;
    margin: 0;
  }
  #gNav .sub-menu li:last-child {
    border-bottom: none;
  }
  #gNav ul > li:hover {
    -webkit-transition: all .5s;
    transition: all .5s;
  }
  #gNav ul > li:hover a,#gNav .current-menu-item a,#gNav .current-menu-parent a {
    color: #bfd0ff;
  }
  #gNav li:hover ul.sub-menu {
    top: 80px;
    visibility: visible;
    opacity: 1;
    z-index: 9999;
  }
  #gNav li ul li:after {
    content: none;
  }
 #gNav li:hover ul.sub-menu a {
    color: #111;
  }
  #gNav .sub-menu li a:hover {
    background: #fff;
  }
  #gNav .contact_btn a:hover {
    color: #fff;
  }
  .swiper-container{ margin-top:80px;}
}

/* ------ ～ 480px ------ */
@media screen and (max-width: 480px) {
.container{ margin:0 auto; width:100%;}	
.img_70{ width:70%;}
.for_pc {display: none!important;}
.last{ margin-bottom:100px; padding-bottom:100px;}
#blog_main{ margin:0 auto; width:100%;}	
}


#footer{ width:100%; color: rgb(66,33,11); background-color:rgb(228,215,214);}
#footer_top{ width:100%; color: rgb(66,33,11); padding-bottom:20px;}
.footer_main{ margin:0 auto; width:1200px;}
.footer_main a{color: rgb(66,33,11) ;text-decoration: none;}

.foote_left{ float:left; width:400px; text-align:right; margin-top:50px;}
.foote_left img{ width:80%;}
.foote_right{ float:right; width:760px; text-align:right;margin-top:50px;}

.foote_tel{ font-size:36px;}
.foote_tel a{color: rgb(66,33,11);}
.foote_tel img{ width:10%;}

.flex_f{
  padding: 2.5% 0;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  );
}
.flex_f > *{
  width: 8%;
  font-size: 16px;
  text-align: center;
  border-radius: 1.2em;
  padding-bottom:10px;
}

.flex_f div{ width:30%;}

.footer_c{ text-align:center; color:#FFF; font-size:14px; background-color:rgb(66,33,11); width:100%;}

@media screen and (max-width: 480px) {
	.last{ margin-bottom:40px; padding-bottom:0;}
	.footer_main{ margin:0 auto; width:90%;}
	
	.foote_left{ float:left; width:100%; text-align:center;}
	.foote_left img{ width:80%;}
.foote_right{ float:left; width:100%; text-align:center;}
.foote_tel{ font-size:24px;}
.foote_tel img{ width:5%;}
	.flex_f{
  padding: 2.5% 0;
  display: flex;
  flex-direction: column;
}
.flex_f > *{
  min-width: 8%;
  font-size: 14px;
  text-align: center;
  border-radius: 1.2em;
}

.flex_f div{ width:100%; margin-top:20px; padding-bottom:20px;}
	}

/************************/
/*                      */
/*          TOP         */
/*                      */
/************************/

.top_news{margin:0 auto; width:1200px;}
.news_tit{ font-size:24px; color:rgb(66,33,11); text-align:center; padding:80px 0 50px 0;}

/****** 汎用 囲み文字 ******/
.ctg_1 { margin:0 0 0 20px; padding: 3px 17px; background-color:rgb(147,39,143); color:#FFFFFF; width:150px; text-align:center;font-size:14px;}
.ctg_2 { margin:0 0 0 20px; padding: 3px 10px; background-color:rgb(153,153,0); color:#FFFFFF; width:150px; text-align:center;font-size:14px;}
.ctg_8 { margin:0 0 0 20px; padding: 3px 17px; background-color:rgb(66,33,11); color:#FFFFFF; width:150px; text-align:center;font-size:14px;}
.ctg_9 { margin:0 0 0 20px; padding: 3px 10px; background-color:rgb(121,189,191); color:#FFFFFF; width:150px; text-align:center;font-size:14px;}
.ctg_5  { margin:0 0 0 20px; padding:3px; background-color:rgb(95,120,155); color:#FFFFFF; width:150px; text-align:center;font-size:14px;}
.ctg_6 { margin:0 0 0 20px; padding: 3px; background-color:rgb(199,101,22); color:#FFFFFF; width:150px; text-align:center;font-size:14px;}

.news {margin: 1em auto;padding: 0 1.5em;text-align: left;line-height: 1.3;width: 80%;}
.news dl {padding: 0.5em 0;border-bottom: 1px solid #C1C1C1;}
.news_dl_02{border-top: 1px solid #C1C1C1;}
.news dt {padding-bottom: 0;width: 20em; font-size:16px; }
.news dd {font-size:16px; padding-top:10px;}
@media screen and (min-width: 480px) {
.news dt {clear: left;float: left; font-size:16px;}
.news dd {margin-left: 15em; font-size:16px; padding-top:0px;}
}

/* ------ ～ 480px ------ */
@media screen and (max-width: 480px) {
.top_news{margin:0 auto; width:100%;}
.news_tit{ font-size:20px; color:rgb(66,33,11); text-align:center; padding:50px 0 20px 0;}
}

.inf_01{ margin:0 auto; max-width:1200px; margin-top:80px;}
.top_box_left{  margin:0 auto;float:left; width:704px; background-image:url(../img/home/img_01.jpg); background-repeat:no-repeat; background-position:top; height:400px;}
.top_box_left_l{ float:left; width:38%;-ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;}
.top_box_left_r{ float:right;color:#FFFFFF; text-align:left; width:50%;} 
.top_box_left_r_txt{padding:100px 20px 0 20px; font-size:18px;} 
  .top_box_left_l_txt{ font-size:30px; text-align:right; color:#FFFFFF; padding-top:30px;}
.top_box_right{  margin:0 auto;float:right; width:496px; text-align:left;}

.inf_square{ padding:60px 0 0 90px;}
.inf_square_btn {
	display: block;
	position: relative;
	width: 160px;
	padding: 0.5em;
	text-align: center;
	text-decoration: none;
	color: #FFF;
	background: rgb(66,33,11);
	border:1px solid #FFF;
}
.inf_square_btn:hover {
	 background: #FFF;
         color: rgb(66,33,11);
	 cursor: pointer;
	 text-decoration: none;
}

.inf_02{ margin:0 auto; max-width:1200px;}
.top_box02_left{  margin:0 auto;float:right; width:704px; background-image:url(../img/home/kv_04.jpg); background-repeat:no-repeat; background-position:top; height:400px;}
.top_box02_left_l{
	float:left;
	width:38%;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
.top_box02_left_r{ float:left;color:rgb(66,33,11); text-align:left; width:50%;} 
.top_box02_left_r_txt{padding:100px 20px 0 20px; font-size:18px;} 
.top_box02_left_l_txt{ font-size:34px; text-align:left; color:rgb(66,33,11); padding-top:60px; padding-right:150px;}
.top_box02_right{ margin:0 auto;float:left; width:496px; text-align:left;padding:0px; margin-top:-1px;}

.inf_square02{ padding:60px 0 0 20px;}
.inf_square02_btn {
	display: block;
	position: relative;
	width: 160px;
	padding: 0.5em;
	text-align: center;
	text-decoration: none;
	color: rgb(66,33,11);
	background: #FFF;
	border:1px solid rgb(66,33,11);
}
.inf_square02_btn:hover {
	 background: rgb(66,33,11);
         color: #FFF;
	 cursor: pointer;
	 text-decoration: none;
}

.inf_03{ margin:0 auto; max-width:1200px; background-color:rgb(66,33,11); padding:0; margin-top:-1px;}
.top_box03_left{margin:0 auto;float:left; width:50%; text-align:center;margin-top:-5px;}
.top_box03_right{margin:0 auto;float:right; width:50%; text-align:center;}

.inf_square03{ padding:20px;}
.inf_square03_btn {
	display: block;
	position: relative;
	width: 80%;
	padding: 0.5em;
	text-align: center;
	text-decoration: none;
	color: #FFF;
	background: rgb(66,33,11);
	border:1px solid #FFF;
}
.inf_square03_btn:hover {
	 background: #FFF;
         color: rgb(66,33,11);
	 cursor: pointer;
	 text-decoration: none;
}

@media screen and (max-width: 480px) {
.inf_01{ margin:0 auto; width:100%; margin-top:40px;}	
.top_box_left{ float:left; width:100%; background-image:url(../img/home/img_01.jpg); background-size: 100% 100%; height:40%;}
.top_box_left_l{ float:left; width:30%;-ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;}
.top_box_left_r{ float:right;color:#FFFFFF; text-align:left; width:70%;}
.top_box_left_l_txt{ font-size:20px; text-align:right;padding-top:30px; padding-bottom:30px;}
.top_box_right{ float:left; width:100%;}
.top_box_right img{ width:100%;}
.top_box_left_r_txt{padding:20px 10px 0 10px; font-size:16px;} 

.inf_square{ padding:10px 0 0 20px;}
.inf_square_btn {
	display: block;
	position: relative;
	width: 130px;
	padding: 0.5em;
	text-align: center;
	text-decoration: none;
	color: #FFF;
	background: rgb(66,33,11);
	border:1px solid #FFF;
}

.inf_02{ margin:0 auto; width:100%;}
.top_box02_left{ float:left; width:100%; background-image:url(../img/home/kv_04.jpg); background-size: 100% 100%; height:40%;}
.top_box02_left_l{ float:left; width:30%;-ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;}
.top_box02_left_r{ float:right;color:rgb(66,33,11); text-align:left; width:70%;}
.top_box02_left_l_txt{ font-size:24px; text-align:center;padding-top:30px; padding-bottom:30px;padding-right:0px;}
.top_box02_right{ float:left; width:100%;}
.top_box02_right img{ width:100%;}
.top_box02_left_r_txt{padding:20px 10px 0 10px; font-size:16px;} 

.inf_square02{ padding:10px 0 0 20px;}
.inf_square02_btn {
	display: block;
	position: relative;
	width: 130px;
	padding: 0.5em;
	text-align: center;
	text-decoration: none;
	color: rgb(66,33,11);
	background: #FFF;
	border:1px solid rgb(66,33,11);
}

.inf_03{ margin:0 auto; width:100%;}	
.top_box03_left{ float:left; width:100%;}
.top_box03_right{ float:left; width:100%;}

.inf_square03{ padding:10px 0 10px 20px;}
.inf_square03_btn {
	display: block;
	position: relative;
	width: 90%;
	padding: 0.5em;
	text-align: center;
	text-decoration: none;
	color: #FFF;
	background: rgb(66,33,11);
	border:1px solid #FFF;
}
	}


/************************/
/*                      */
/*        特　長        */
/*                      */
/************************/


/************************/
/*                      */
/*     商品のご案内     */
/*                      */
/************************/

.item_tit{ color:rgb(66,33,11); font-size:40px; text-align:center;}
.item_tit p{ padding-top:80px;}

.inf_square04{ padding:60px 0 0 90px; margin:0 auto; width:100%;}
.inf_square04_btn {
	display: block;
	position: relative;
	width: 160px;
	padding: 0.5em;
	text-align: center;
	text-decoration: none;
	color: rgb(66,33,11);
	border:1px solid rgb(66,33,11);
	margin-left:auto; margin-right:auto;
}

.item_txt{ margin:0 auto; width:90%;}
.tem_txt p{font-size:21px; padding:50px 20px 20px 20px; text-align:center;}

.item_box_left{ float:left; text-align:right; width:50%;}
.item_box_right{ float:right; text-align:left; width:50%;}

.item_box02_left{ float:left; text-align:right; width:50%;}
.item_box02_left p { padding-right:40px;}
.item_box02_right{ float:right; text-align:left; width:50%;}
.item_box02_right p { padding-left:40px;}

#mailfield{ margin:0 auto; width:70%;}

@media screen and (min-width: 480px) {
.tem_txt{ margin:0 auto; max-width:1200px;}
.tem_txt p{font-size:21px; padding:80px 120px;}
}

@media screen and (max-width: 480px) {
.item_tit{ color:rgb(66,33,11); font-size:30px; text-align:center;}
.item_tit p{ padding-top:40px;}	

.item_box_left{ float:left; text-align:center;width:100%;}
.item_box_left img{ width:80%;}
.item_box_right{ float:eft; text-align:center; width:100%;}
.item_box_right img{ width:80%;}

.item_box02_left img{ width:80%;}
.item_box02_right img{ width:80%;}
.item_box02_left p { padding-right:0px; text-align:center;}
.item_box02_right p { padding-left:0px; text-align:center;}

#mailfield{ margin:0 auto; width:100%;}
}
	
/************************/
/*                      */
/*       地域貢献       */
/*                      */
/************************/	
.concept_box{ margin:0 auto; max-width:1000px;}
.concept_box_left{ float:left; width:500px;}
.concept_box_right{ float:right; width:500px; padding-top:80px;}
.concept_box_right img{ text-align:center;}
.concept_box_tit{
	margin-top:80px;
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: rgb(66,33,11);/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px rgb(66,33,11);/*左線*/
  font-size:28px;
  text-align:left;
  line-height:130%;
}

.concept_box_txt{ margin:20px 100px 0 20px; text-align:left; font-size:18px;}

.concept_box_txt02{color: rgb(35,24,21);/*文字色*/
  border: solid 1px rgb(66,33,11);/*線色*/
  padding: 0.5em;/*文字周りの余白*/
  text-align:left;
  margin:40px 0;}
  
.concept_box_txt02_tit{ font-size:24px;}  

@media screen and (max-width: 480px) {
.concept_box{ margin:0 auto; width:100%;}
.concept_box_left{ float:left; width:100%;}
.concept_box_right{ float:left; width:100%;}
.concept_box_right img{ width:90%; text-align:center;}
.concept_box_tit{ font-size:20px; margin-top:40px; margin-left:20px;}
.concept_box_txt{ margin:20px; text-align:left; font-size:16px;}

.concept_box_txt02_tit{ font-size:20px;} 
}


/************************/
/*                      */
/* 丸五醤油醸造について */
/*                      */
/************************/	
.company_txt{ margin:0 auto; width:90%;}
.company_txt p{font-size:21px; padding:50px 20px 20px 20px; text-align:left;}
.company {margin: 1em auto;padding: 0 1.5em;text-align: left;font-size: 1em;line-height: 1.3;width: 90%;font-weight:100;}
.company dl {padding: 0.5em 0;}

.company dt {padding-bottom: 0;width: 10em; font-size:18px; }
.company dd {font-size:18px; }
.company_tit{ font-size:20px; color:rgb(66,33,11); text-align:center; padding:50px 0 20px 0;}

.company_left{ float:left; width:100%;}
.company_right{ float:right; width:100%;}
.company_right img{ width:100%;}

.company02 {margin: 1em auto;padding: 0 1.5em;text-align: left;font-size: 1em;line-height: 1.3;width: 70%;font-weight:100; width: 90%; padding:20px 0 0 0;}
.company02 dl {padding: 0.5em 0;}

.company02 dt {padding-bottom: 0;width: 15em; font-size:18px; }
.company02 dd {font-size:18px; }

@media screen and (min-width: 480px) {
.company_txt{ margin:0 auto; max-width:1200px;}
.company_txt p{font-size:21px; padding:80px 120px;}

.company_tit{ font-size:24px; color:rgb(66,33,11); text-align:center; padding:50px 0 20px 0;}

.company dt {clear: left;float: left; font-size:18px;}
.company dd {margin-left: 0.5em; font-size:18px;}

.company_left{ float:left; width:750px;}
.company_right{ float:right; width:430px;}

.company02 {width: 70%; padding:100px 0 0 200px;}
.company02 dt {clear: left;float: left; font-size:18px;}
.company02 dd {margin-left: 0.5em; font-size:18px;}
}
.cn_txt_04{ font-size:24px; padding:0.5em; width:25%;}
.cn_txt_05{ font-size:24px; padding:0.5em;}