﻿@charset "utf-8";
/* CSS Document */

/*レイアウト*/
html,body{
     height:100%;
}
body {
	margin-bottom: 0;
}
#wrap{
     width: 100%;
     position: relative;
     /*height:auto !important; /*IE6対策*/
     /*height: 100%; /*IE6対策*/
     min-height: 100%;
}

#contents{
     padding-bottom:0; /*フッターの高さと同じ*/
}

body{
	font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	-webkit-text-size-adjust: 100%;
	margin: 0;
	padding: 0;
	}

section {
  display: block;
  padding: 0;
  margin: 0;
}
p,span,spam,ol,ul,li,h1,h2,h3,h5,h6 {
  margin: 0;
  padding: 0;
}
nav ul {
  list-style:none;
  margin: 0;
  padding: 0;
}
a,hover {
	text-decoration: none;
}

/* clearfix
============================== */
.clearfix:before,
.clearfix:after {
  display: block;
  overflow: hidden;
  content: "";
}
.clearfix:after {
  clear: both;
}


/*フロート
============================== */
.fl {
	float: left;
}
.fr {
	float: right;
}

/*タイトルデザイン
============================== */

.title-d01,
.title-d02 {
  overflow: hidden;
  position: relative;
  padding: 0 0 5px 15px;
  margin-bottom: 36px;
  font-size: 150%;
  font-weight: bold;
  color: #4f442a;
}
.title-d01:before,
.title-d02:before {
  content: "";
  bottom: 0;
  position: absolute;
  width: 100%;
  z-index: 0;
}
.title-d01:before {
	border-bottom: 2px solid #ffb400;
}
.title-d02:before {
	border-bottom: 2px solid #947732;
}
.title-d01:after,
.title-d02:after {
  border-bottom: 2px solid #fe6c00;
  bottom: 0;
  left: 0;
  content: "";
  position: absolute;
  width: 340px;
  z-index: 1;
}



/*フッター*/
.footer-area p {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 14px;
	padding: 30px 0;
	background: #ffffff;
}
 


/*link*/
a {
	color: #00578e;
	text-decoration: underline;
}
a:hover {
	color: #D02C02;
	text-decoration: none;
}
a.link_bt {
	display: block;
	width: 400px;
	background: #fe6c00 url(/contents/shop/chojyu/campaign/bontan/images/arrow.png) no-repeat;
	background-position: 90% 50%;
	margin: 0 auto;
	padding: 18px 0;
	font-size: 1.5em;
	font-weight: bold;
	color: #FFF;
	text-align:center;
	border-radius: 5px;/* CSS3草案 */
	-webkit-border-radius: 5px;    /* Safari,Google Chrome用 */ 
	-moz-border-radius: 5px;   /* Firefox用 */
	border: solid 1px #ffffff;
	box-sizing: border-box;
}

a:hover.link_bt {
	background: #d63a04 url(/contents/shop/chojyu/campaign/bontan/images/arrow.png) no-repeat;
	background-position: 98% 50%;
	transition: 0.8s;
}



/* responsive PC side
---------------------------------*/
@media screen and (min-width:1025px) {
#haeder-action {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  transition: .3s;
}
.haeder-area {
	width: 100%;
	height: 150px;
	background: url(/contents/shop/chojyu/campaign/bontan/images/head-bg.png);
	box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.2);
}
.chojyu-wrap {
	position: absolute;
	width: 100%;
	display: block;
}
.header-inner,
.chojyu-inner {
	display: block;
	width: 1024px;
	margin: 0 auto;
}
.header-inner div {
	display: inline-block;
}
.header-inner {
	padding: 0 15px;
	box-sizing: border-box;
	/*border: solid 1px #CCCCCC;*/
}
.chojyu-logo {
	position: relative;
	top: 15px;
	left: 15px;
	display: block;
	width: 100px;
	z-index: 10;
}
.header-left {
	display: block;
	width: 80%;
	float: left;
}
.header-right {
	width: 20%;
}

.return_bt {
	width:100%;
}
.return_bt a {
	height: 104px;
	display: block;
	background: url(/contents/shop/chojyu/campaign/bontan/images/return_btbg.png) no-repeat top right;
	text-indent: -9999px;
	margin: 20px 0 0;
}
.return_bt a:hover {
	margin: 20px 0 0;
	background: url(/contents/shop/chojyu/campaign/bontan/images/return_btbg_on.png) no-repeat top right;
	transition: 0.8s;
}
.return_bt2 img {
	display: none;
}
.return_bt3 {
	display: none;
}
.haeder-title img {
	display: block;
	width: 721px;
	height: 137px;
}
.haeder-title2 {
	display: none;
}

/*ボンタン生産者*/
.producer-area,
.producer-area2,
.producer-area3,
.producer-area4 {
	width: 100%;
	display: block;
}
.producer-area {
	/*padding-top: 215px;*/
	padding-top: 50px;
	background: #f3e097;
}
.producer-area2 {
	padding-top: 215px;
	background: #f3e097;
}
.producer-area4 {
	background: #ffb400;
}
.producer-inner,
.producer-inner2,
.producer-inner3 {
	width: 1024px;
	display: block;
	margin: 0 auto;
}
.producer-inner2 {
	padding: 42px 0;
}
.producer-inner3 {
	padding: 42px 0 100px;
}

.producer-photo-main {
	width: 100%;
	display: block;
	margin-bottom: 10px;
}
.producer-content,
.producer-content2 {
	width: 100%;
	padding: 0 15px;
	box-sizing: border-box;
}
.producer-content {
	color: #202020;
	font-size: 100%;
}
.producer-content2 {
	color: #202020;
	font-size: 120%;
	line-height: 1.3em;
	font-weight: bold;
	letter-spacing: 0.1em;
}
.producer-content .producer_photo01 {
	display: block;
	margin-right: 20px;
}
.producer-content .producer_photo02 {
	display: block;
	margin-left: 20px;
}
.producer-txt-b {
	font-weight: bold;
}
.producer-course {
	width: 100%;
	display: block;
	text-align: center;
	margin: 60px 0;
}
.producer-banner-area {
	width: 100%;
	display: block;
	text-align: center;
	background: #ffffff;
}

.producer-banner-area a {
	width: 1024px;
	height: 512px;
	margin-bottom: 100px;
	background: url(/contents/shop/chojyu/campaign/bontan/images/producer_banner01.png) no-repeat;
	display: block;
	text-indent: -9999px;
}

.producer-banner-area a:hover {
	opacity: 0.6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha(opacity=60)";
	transition: 0.5s;
}
.producer-banner img {
	display: none;
}

/*後で入るコンテンツ現在準備中*/
.producer-container__maintenance {
	width: 100%;
	height: 400px;
	display: -webkit-flex; /* Safari用 */
	display: flex;
	-webkit-justify-content: center; /* Safari用 */
	justify-content: center;
	-webkit-align-items: center; /* Safari用 */
	align-items: center;
	box-sizing: border-box;
	/*border: solid 1px #CCCCCC;
	margin-bottom: 50px;*/
}



}
/* responsive pad side
---------------------------------*/
@media screen and (min-width:741px) and (max-width:1026px) {
.haeder-area {
	width: 100%;
	background: url(/contents/shop/chojyu/campaign/bontan/images/head-bg.png);
}
.chojyu-wrap {
	position: absolute;
	width: 100%;
	display: block;
}
.header-inner,
.chojyu-inner {
	display: block;
	width: 100%;
}
.header-inner div {
	display: inline-block;
}
.header-inner {
	padding: 0 30px;
	box-sizing: border-box;
	/*border: solid 1px #CCCCCC;*/
}
.chojyu-logo {
	width: calc(100% - 30px);
	position: relative;
	top: 5px;
	left: 30px;
	display: block;
	z-index: 10;
}
.chojyu-logo img {
	width: 10%;
}
.header-left {
	display: block;
	width: 80%;
	float: left;
	/*box-sizing: border-box;
	border: solid 1px #CCCCCC;*/
}
.haeder-title {
	margin: 0;
}
.haeder-title2 {
	display: none;
}
.header-left img {
	width: 80%;
}
.header-right {
	width: 20%;
	/*box-sizing: border-box;
	border: solid 1px #CCCCCC;*/
}

.return_bt a {
	display: none;
}
.return_bt2 {
	width: 100%;
	display: block;
	box-sizing: border-box;
	padding: 5px 0 5px 15px;
	text-align: right;
}
.return_bt2 img {
	width: 70%;
}
.return_bt3 {
	display: none;
}

/*タイトルデザイン
============================== */

.title-d01,
.title-d02 {
  font-size: calc(80vw / 30);
}


/*ボンタン生産者*/
.producer-area {
	background: #f3e097;
}
.producer-area2 {
	background: #f3e097;
}
.producer-area4 {
	background: #ffb400;
}
.producer-inner,
.producer-inner2,
.producer-inner3 {
	width: 100%
	display: block;
}
.producer-inner {
	box-sizing: border-box;
	padding: 42px 20px;
}
.producer-inner2 {
	box-sizing: border-box;
	padding: 42px 20px;
}
.producer-inner3 {
	padding: 42px 20px 100px;
}

.producer-photo-main {
	width: 100%;
	display: block;
	margin-bottom: 10px;
}
.producer-photo-main img {
	width: 100%;
}
.producer-content,
.producer-content2 {
	width: 100%;
	padding: 0 15px;
	box-sizing: border-box;
}
.producer-content {
	color: #202020;
	font-size: calc(80vw / 50);
	/*font-size: 100%;*/
}
.producer-content2 {
	color: #202020;
	font-size: calc(80vw / 45);
	line-height: 1.3em;
	font-weight: bold;
	letter-spacing: 0.1em;
}
.producer-content .producer_photo01 {
	width: 50%;
	display: block;
	margin-right: 20px;
}
.producer-content .producer_photo02 {
	width: 50%;
	display: block;
	margin-left: 20px;
}
.producer-txt-b {
	font-weight: bold;
}
.producer-course {
	width: 100%;
	display: block;
	text-align: center;
	margin: 60px 0;
}
.producer-course img {
	width: 80%;
}
.producer-banner-area {
	width: 100%;
	display: block;
	text-align: center;
	background: #ffffff;
}

.producer-banner-area a {
	display: none;
}
.producer-banner img {
	width: 100%;
	margin-bottom: 50px;
}



/*後で入るコンテンツ現在準備中*/
.producer-container__maintenance {
	width: 100%;
	padding: 30px 0;
	display: -webkit-flex; /* Safari用 */
	display: flex;
	-webkit-justify-content: center; /* Safari用 */
	justify-content: center;
	-webkit-align-items: center; /* Safari用 */
	align-items: center;
	box-sizing: border-box;
}


}

/* responsive pad side
---------------------------------*/
@media screen and (min-width: 591px) and (max-width:740px) {
.haeder-area {
	width: 100%;
	background: url(/contents/shop/chojyu/campaign/bontan/images/head-bg.png);
}
.chojyu-wrap {
	position: absolute;
	width: 100%;
	display: block;
}
.header-inner,
.chojyu-inner {
	display: block;
	width: 100%;
}
.header-inner div {
	display: inline-block;
}
.header-inner {
	padding: 0 30px;
	box-sizing: border-box;
	/*border: solid 1px #CCCCCC;*/
}
.chojyu-logo {
	width: calc(100% - 30px);
	position: relative;
	top: 5px;
	left: 30px;
	display: block;
	z-index: 10;
}
.chojyu-logo img {
	width: 10%;
}
.header-left {
	display: block;
	width: 80%;
	float: left;
	/*box-sizing: border-box;
	border: solid 1px #CCCCCC;*/
}
.haeder-title {
	margin: 0;
}
.haeder-title2 {
	display: none;
}
.header-left img {
	width: 80%;
}
.header-right {
	width: 20%;
	/*box-sizing: border-box;
	border: solid 1px #CCCCCC;*/
}

.return_bt a {
	display: none;
}
.return_bt2 {
	width: 100%;
	display: block;
	box-sizing: border-box;
	padding: 5px 0 5px 15px;
	text-align: right;
}
.return_bt2 img {
	width: 70%;
}
.return_bt3 {
	display: none;
}

/*タイトルデザイン
============================== */

.title-d01,
.title-d02 {
  font-size: calc(80vw / 30);
  margin-bottom: 20px;
}


/*ボンタン生産者*/
.producer-area {
	background: #f3e097;
}
.producer-area2 {
	background: #f3e097;
}
.producer-area4 {
	background: #ffb400;
}
.producer-inner,
.producer-inner2,
.producer-inner3 {
	width: 100%
	display: block;
}
.producer-inner {
	box-sizing: border-box;
	padding: 42px 20px;
}
.producer-inner2 {
	box-sizing: border-box;
	padding: 42px 20px;
}
.producer-inner3 {
	padding: 42px 20px 100px;
}

.producer-photo-main {
	width: 100%;
	display: block;
	margin-bottom: 10px;
}
.producer-photo-main img {
	width: 100%;
}
.producer-content,
.producer-content2 {
	width: 100%;
	padding: 0 15px;
	box-sizing: border-box;
}
.producer-content {
	color: #202020;
	font-size: calc(80vw / 50);
	/*font-size: 100%;*/
}
.producer-content2 {
	color: #202020;
	font-size: calc(80vw / 45);
	line-height: 1.3em;
	font-weight: bold;
	letter-spacing: 0.1em;
}
.producer-content .producer_photo01 {
	width: 50%;
	display: block;
	margin-right: 20px;
}
.producer-content .producer_photo02 {
	width: 50%;
	display: block;
	margin-left: 20px;
}
.producer-txt-b {
	font-weight: bold;
}
.producer-course {
	width: 100%;
	display: block;
	text-align: center;
	margin: 60px 0;
}
.producer-course img {
	width: 80%;
}
.producer-banner-area {
	width: 100%;
	display: block;
	text-align: center;
	background: #ffffff;
}

.producer-banner-area a {
	display: none;
}
.producer-banner img {
	width: 100%;
	margin-bottom: 50px;
}


/*後で入るコンテンツ現在準備中*/
.producer-container__maintenance {
	width: 100%;
	padding: 30px 0;
	display: -webkit-flex; /* Safari用 */
	display: flex;
	-webkit-justify-content: center; /* Safari用 */
	justify-content: center;
	-webkit-align-items: center; /* Safari用 */
	align-items: center;
	box-sizing: border-box;
}


/*フッター*/
.footer-area p {
	position: absolute;
	bottom: 0;
	display: block;
	width: 100%;
	text-align: center;
	font-size: calc(80vw / 45);
	padding: 30px 0;
	background: #ffffff;
}

}

@media screen and (max-width: 590px) {
.haeder-area {
	width: 100%;
	background: url(/contents/shop/chojyu/campaign/bontan/images/head-bg.png);
}
.chojyu-wrap {
	position: absolute;
	width: 100%;
	display: block;
}
.header-inner,
.chojyu-inner {
	display: block;
	width: 100%;
}
.header-inner {
	padding: 0 30px;
	box-sizing: border-box;
}
.chojyu-logo {
	display: none;
}
.chojyu-logo img {
	width: 10%;
}
.header-left {
	display: block;
	width: 100%;
}
.haeder-title {
	margin-bottom: 0;
}
.haeder-title2 {
	display: none;
}
.header-left img {
	width: 80%;
}
.header-right {
	width: 100%;
}

.return_bt a {
	display: none;
}
.return_bt2 {
	display: none;
}
.return_bt2 img {
	display: none;
}
.return_bt3 a {
	width: 98%;
	display: block;
	font-size: calc(90vw / 25);
	font-weight: bold;
	box-sizing: border-box;
	padding: 15px 0 15px;
	margin: 3px auto;
	background: #fe6c00;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	border-radius: 5px;
	-webkit-border-radius: 5px;
}

/*タイトルデザイン
============================== */

.title-d01,
.title-d02 {
  font-size: calc(80vw / 20);
  margin-bottom: 20px;
}

/*ボンタン生産者*/
.producer-area {
	background: #f3e097;
}
.producer-area2 {
	background: #f3e097;
}
.producer-area4 {
	background: #ffb400;
}
.producer-inner,
.producer-inner2,
.producer-inner3 {
	width: 100%
	display: block;
}
.producer-inner {
	box-sizing: border-box;
	padding: 15px 5px;
}
.producer-inner2 {
	box-sizing: border-box;
	padding: 15px 5px;
}
.producer-inner3 {
	padding: 15px 5px 50px;
}

.producer-photo-main {
	width: 100%;
	display: block;
	margin-bottom: 10px;
}
.producer-photo-main img {
	width: 100%;
}
.producer-content,
.producer-content2 {
	width: 100%;
	padding: 0 15px;
	box-sizing: border-box;
}
.producer-content {
	color: #202020;
	font-size: calc(80vw / 30);
}
.producer-content2 {
	color: #202020;
	font-size: calc(80vw / 30);
	line-height: 1.3em;
	font-weight: bold;
	letter-spacing: 0.1em;
}
.producer-content .producer_photo01 {
	width: 100%;
	display: block;
	margin: 0 20px 20px 0;
}
.producer-content .producer_photo02 {
	width: 100%;
	display: block;
	margin: 0 0 20px 20px;
}
.producer-txt-b {
	font-weight: bold;
}
.producer-course {
	width: 100%;
	display: block;
	text-align: center;
	margin: 20px 0;
}
.producer-course img {
	width: 100%;
}
.producer-banner-area {
	width: 100%;
	display: block;
	text-align: center;
	background: #ffffff;
}

.producer-banner-area a {
	display: none;
}
.producer-banner img {
	width: 100%;
	margin-bottom: 50px;
}

/*フロート
============================== */
.fl {
	display: none;
}
.fr {
	display: none;
}


/*フッター*/
.footer-area p {
	position: absolute;
	bottom: 0;
	display: block;
	width: 100%;
	text-align: center;
	font-size: calc(80vw / 30);
	padding: 30px 0;
	background: #ffffff;
}
	

/*後で入るコンテンツ現在準備中*/
.producer-container__maintenance {
	width: 50%;
	padding: 30px 0;
	margin: 0 auto;
	display: -webkit-flex; /* Safari用 */
	display: flex;
	-webkit-justify-content: center; /* Safari用 */
	justify-content: center;
	-webkit-align-items: center; /* Safari用 */
	align-items: center;
	box-sizing: border-box;
}

.producer-container__maintenance img {
	width: 100%;
	margin: 0 auto;	
}




