@charset "utf-8";
/* --------------------------------------------------
	reset
-------------------------------------------------- */
* { margin: 0; padding: 0;}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
form, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0; padding: 0;
	border: 0;
	font-size: 100%;
	/*font: inherit;*/
	vertical-align: baseline;
}
div { box-sizing: border-box;}

img{ vertical-align: bottom;}
ul { list-style: none;}
ul li{ list-style-type: none;}
em { font-style: normal;}

table{ border-collapse:collapse; border-spacing:0; }


/*		font-style
-------------------------------------------------- */
@font-face {
  font-family: "Agbt";
  src: url("../fonts/American_Garamond_BT.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
body {
	font-family: "游ゴシック","Yu Gothic","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3", "メイリオ","Meiryo",sans-serif;
/*	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;*/
	font-size: 16px;
	*font-size:small;
	*font:x-small;
	line-height: 1.6;
}

::selection{ background: #feffaf; color: #000;}
::-moz-selection{ background: #feffaf; color: #000;}

	a { color:#1d3994; text-decoration:none;}
a:link   { color: #121212;}
a:visited{ color: #232323;}
a:hover  { color: #454545;}
a:active { color: #454545;}


/*		utility
-------------------------------------------------- */
.fL{float:left;}
.fR{float:right;}
.cf{ /zoom: 1; clear: both;}
.cf:after{ content: ''; display: block; clear: both;}


.eng{ font-family: 'Agbt'}

#hd { position: absolute; left: 0; width: 100%;}
#hd .inner{ width: 94%; margin: 0 auto; padding: 15px 0 0;}
#hd .logo h1{ width: 320px; color: #fff; font-weight: 100; line-height: 1.2; text-align: center;}
#hd .logo h1 a { display: block; color: #fff;}
#hd .logo h1 img{ width: 80px; vertical-align: bottom;}
#hd .logo h1 span { display: inline-block; text-align: center; padding-left: 10px;}
#hd .logo h1 em.eng{ font-size: 30px; letter-spacing: 0.125rem;}
#hd .logo h1 em.txt{ display: block; font-size: 10px;}
#hd .tel { float: right; text-align: right;}
#hd .tel p{ color: #fff; font-size: 24px; font-weight: 700; line-height: 1.2; text-align: right;}
#hd .tel img { height: 24px; margin-right: 10px; vertical-align: middle;}
#hd .tel span{ display: block; padding-right: 40px; font-weight: 300; font-size: 14px;}

#kv{ height: 850px; background: url(../img/bg-kv.jpg) no-repeat 50% 0%; background-size: auto 100%;}
#kv .inner-kv{ with: 90%; padding: 200px 0 80px; text-align: center;}
#kv h2 { margin-bottom: 100px; color: #fff; font-size: 50px; font-weight: 100; line-height: 1.4;}
#kv .kv-btn{ width: 80%; max-width: 600px; margin: 0 auto 80px;}
#kv .kv-btn p a{ position:relative; display: block; padding: 15px 0; border:solid 1px #fff;
 color: #fff; font-size: 24px; font-weight: 700;
}
#kv .kv-btn p a span{ position: relative; z-index: 2;}
#kv .kv-btn p a:before,
#kv .kv-btn p a:after { content: ''; display:block; position:absolute;}
#kv .kv-btn p a:before{ width: 15px; height: 15px; right: 50px; top: 27px;
 border-top: solid 2px #fff; border-right: solid 2px #fff;
 -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);
 color: #fff; font-size: 20px; font-weight: 700; z-index:2;
}
#kv .kv-btn p a:after{ top: 0; left: 0; width: 0%; height: 100%; background: rgba(0,0,0,0.5);
 transition: 0.2s linear;
 z-index: 1;}
#kv .kv-btn p a:hover:after{ width: 100%;}
#kv .read{ width: 90%; max-width: 800px; margin: 0 auto; padding: 30px; background: rgba(255,255,255,0.7);}
#kv .read h3{ margin-bottom: 20px; font-size: 24px; font-weight: 400;}
#kv .read p { text-align: left;}
@media (max-width: 769px) {
	#kv{ height: auto;}
	#kv .inner-kv{ padding: 140px 0 60px;}
	#kv h2 { margin-bottom: 60px; font-size: 36px;}
	#kv .kv-btn p a{ padding: 10px 0; font-size: 20px;}
	#kv .kv-btn p a:before{ top: 18px;}
}
@media (max-width: 641px) {
	#kv { background-position: 60% 0%;}
	#kv h2 { margin-bottom: 40px; font-size: 30px;}
	#kv .kv-btn{ margin: 0 auto 40px;}
	#kv .read { padding: 20px;}
	#kv .read h3{ margin-bottom: 10px; font-size: 20px;}
	#kv .read p { font-size: 14px;}
}
@media (max-width: 481px) {
	#hd .logo{ clear: both; margin-bottom: 20px; padding-top: 10px;}
	#hd .logo h1 img{ width: 50px; vertical-align: top;}
	#hd .logo h1 a{ text-shadow: 0px 0px 3px #000;}

	#kv { background-position: 70% 0%;}
	#kv h2 { margin-bottom: 40px; font-size: 24px; text-shadow: 0px 0px 3px #000;}
	#kv .kv-btn p a{ padding: 6px 0; font-size: 18px;}
	#kv .kv-btn p a:before{ top: 10px;}
	#kv .read { padding: 15px;}
	#kv .read h3{ margin-bottom: 10px; font-size: 18px;}
	#kv .read p { font-size: 13px;}
}
@media (max-width: 341px) {
	
	#kv h2 { margin-bottom: 30px; font-size: 20px;}
	#kv .kv-btn p a:before{ content: none;}
}
.normal-ttl { text-align: center;}
.normal-ttl:after{ content: ''; display: block; width: 200px; height: 1px; background: #ccc; margin: 20px auto;}
.normal-ttl h2{ font-size: 20px; line-height: 1.4;}
.normal-ttl h2 span{ display: block; font-size: 30px;}
.ttl{ position:relative; margin-bottom: 10px; padding: 15px 0; text-align: center;
 background-image: linear-gradient(
  -45deg,
  #72ad43 40%,
  #95c272 40%, #95c272 50%,
  #72ad43 50%, #72ad43 90%,
  #95c272 90%, #95c272); background-size: 6px 6px;
}
.ttl:after{ content: ''; display: block; width: 0px; height: 0px;
 position: absolute; left: 50%; margin-left: -30px; bottom: -60px;
 border: solid 30px transparent; border-top: solid 30px #72ad43;
}
.ttl h2{ color: #fff; font-size: 40px; font-weight: 500; line-height: 1.2;}
.ttl h2 span.sub{ display: block; font-size: 30px;}
.ttl p{ padding-top: 5px; color: #fff; line-height: 1.2;}

.btn { width: 80%; max-width: 620px; margin: 0 auto;}
.btn a{ display: block; padding: 10px 0; background: #043;
 color: #fff; font-size: 34px; font-weight: 700; text-align: center;
}
.btn a:after{ content: ''; display: inline-block; width: 30px; height: 30px; margin-left: 20px;
 background: url(../img/icn-arw.png) no-repeat 90% 50%; background-size: 100% 100%;
 vertical-align: middle;
}
.btn a:hover{ opacity: 0.85;}
.btn-img{ width: 80%; max-width:540px; margin: 0 auto 40px; text-align: center;}
.btn-img img{ width: 100%;}
.btn-img a:hover{ opacity: 0.8;}
@media (max-width: 769px) {
	.ttl h2{ font-size: 30px;}
	.ttl h2 span.sub{ font-size: 20px;}
}
@media (max-width: 641px) {
	.btn a{ font-size: 30px;}
	.btn a:after{ width: 30px; height: 30px; margin-left: 15px;}
}
@media (max-width: 481px) {
	.ttl:after{ margin-left: -20px; bottom: -40px;
	 border: solid 20px transparent; border-top: solid 20px #72ad43;
	}
	.ttl span.br{ display: block;}

	.normal-ttl h2{ font-size: 18px;}
	.normal-ttl h2 span{ font-size: 24px;}

	.btn a{ font-size: 21px;}
	.btn a:after{ width: 25px; height: 25px; margin-left: 15px;}
}
@media (max-width: 361px) {
	.ttl h2{ font-size: 26px;}
	.ttl h2 span.sub{ font-size: 18px;}
	.btn a{ font-size: 17px;}
	.btn a:after{ width: 20px; height: 20px; margin-left: 5px;}
}

.otameshi-mini{ width: 94%; max-width: 920px; margin: 0 auto 40px; padding: 20px; border: double 5px #eee;}
.otameshi-mini h2 { font-size: 30px; text-align: center;}
.otameshi-mini h2 br{ display: none;}
.otameshi-mini ul { width: 100%; margin: 0 auto; padding: 30px 0; font-size: 0; text-align: center;}
.otameshi-mini ul li { display: inline-block; width: 45%; margin: 0 10px 20px;}
.otameshi-mini ul dl { display: table; width: 100%; margin: 0 auto;}
.otameshi-mini ul dl dt { display: table-cell; width: 15%; font-size: 18px; vertical-align: middle;}
.otameshi-mini ul dl dd { display: table-cell; width: 85%; font-size: 16px; text-align:left; vertical-align: middle;}

.otameshi-mini ul dl dt span{ display: block; width: 40px; height: 40px; line-height: 40px; margin: 0 auto;
 background: #C03; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
 color: #fff; font-size: 20px; font-weight: 700;
}
.otameshi-mini ul dl dd span{ display: block; font-size: 22px; font-weight: 700; line-height: 1.4;}
@media (max-width: 641px) {
	.otameshi-mini ul li { display: block; width: 92%; margin: 0 auto 20px;}
	.otameshi-mini ul li:last-child{ margin-bottom: 0;}
}
@media (max-width: 481px) {
	.otameshi-mini h2 { font-size: 24px;}
	.otameshi-mini ul dl dd span{ font-size: 18px;}
	.otameshi-mini ul dl dd span br{ display: none;}
}

#voice { padding: 80px 0;
 background-image: url(../img/bg-L.png), url(../img/bg-R.png);
 background-repeat: no-repeat, no-repeat;
 background-position: left top, 100% 100%}
#voice .normal-ttl h2{ width: 80%; max-width: 380px; margin: 0 auto;
 background: url(../img/icn-voice.png) no-repeat 0 50%; background-size: auto 100%;
}
#voice .inner { position: relative; width: 92%; max-width: 1000px; margin: 0 auto; padding: 50px 30px;}
#voice .inner:before,
#voice .inner:after { content: ''; display: block; position: absolute; background: rgba(232,239,234,0.6);}
#voice .inner:before{ width: 600px; height: 620px; top: 20px; right: 0}
#voice .inner:after { width: 600px; height: 300px; bottom: 0; left: 0;}
#voice .voice1 { position: relative; z-index: 3; margin-bottom: 50px;}
#voice .voice2 { position: relative; z-index: 2;}

#voice .voice1 dl { width: 24%; max-width: 280px; float: right;}
#voice .voice1 .txt{ width: 74%; }
#voice .voice2 dl{ width: 24%; max-width: 280px; float: left;}
#voice .voice2 .txt{ width: 74%; float: right;}

#voice .voice1 dl dt,
#voice .voice2 dl dt{ margin-bottom: 20px;}
#voice .voice1 dl dt img,
#voice .voice2 dl dt img{ width: 100%;}
#voice .voice1 dl dd,
#voice .voice2 dl dd{ font-size: 13px; line-height: 1.4;}
#voice .voice1 dl dd span,
#voice .voice2 dl dd span{ display: block; font-size: 16px;}
#voice .voice2 {}
#voice ul{ width: 98%; margin: 0 auto; padding-top: 100px; font-size: 0; text-align: center;}
#voice ul li{ position:relative;
 display: inline-block; width: 46%; margin: 0 1% 50px; vertical-align: middle;}
#voice ul li:nth-child(1){ vertical-align: bottom;}
#voice ul li:after{ content: ''; display: block; width: 100%; height: 100%; background: #e8efea;
 position: absolute; left: 0; top: 0;
}
#voice ul li dl { position: relative; z-index: 2; width: 95%; margin: 0 auto; padding: 10px 0; text-align: left;}
#voice ul li dl dt{ border-bottom: solid 1px #ccc; padding: 10px; font-size: 20px; font-weight: 700; line-height: 1.2;}
#voice ul li dl dt span{ position:relative; display: inline-block; padding-left: 35px;}
#voice ul li dl dt span:before{ content:''; display: block; position: absolute;
 width: 20px; height: 30px; left: 0; top: 0;
 background: url(../img/icn-voice.png) no-repeat 50% 0; background-size: auto 100%;
}
#voice ul li dl dd{ padding: 10px; font-size: 16px; }
	.moreCtn .trigger{ display: none;}
@media (max-width: 769px) {
	#voice { background-image: none;}
	#voice .inner:before{ width: 80%; height: 400px;}
	#voice .inner:after { content: none;}
	.moreCtn { position:relative;}
	.moreCtn .trigger{ display: block; position: absolute; bottom: 0px; z-index: 2; font-weight: 700; letter-spacing: 0.125rem; text-align: center;}
	.moreCtn.voice1 .trigger{ width: 74%;}
	.moreCtn.voice2 .trigger{ width: 100%;}
	.moreCtn .txt{ position:relative; overflow: hidden;}
	.moreCtn .txt { height: auto;}
	.moreCtn .txt.hide{ height: 260px;}
	.moreCtn .txt::before {	content: ""; display: block; width: 100%; height: 60px;
	 position: absolute; bottom: 0; left: 0;
		background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
		background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
	}
	.trigger.is-show + .txt::before {
		display: none;
	}
	#voice ul { padding-top: 50px;}
	#voice ul li{ display: block; box-sizing: border-box; width: 95%; margin: 0 auto 40px;}
	#voice ul li dl.moreCtn .trigger{ width: 100%;}
	#voice ul li dl.moreCtn .txt.hide{ height: 240px;}
	#voice ul li dl.moreCtn .txt::before {
		background: -webkit-linear-gradient(top, rgba(232,239,234,0) 0%, rgba(232,239,234,0.9) 60%, rgba(232,239,234,0.8) 60%, rgba(232,239,234,1) 100%);
		background: linear-gradient(top, rgba(232,239,234,0) 0%, rgba(232,239,234,0.9) 60%, rgba(232,239,234,0.5) 60%, rgba(232,239,234,1) 100%);
	}
}
@media (max-width: 641px) {
	#voice .voice1 .txt p,
	#voice .voice2 .txt p { font-size: 14px;}
	#voice ul li dl dd{ font-size: 14px;}
}
@media (max-width: 481px) {
	#voice { padding: 40px 0;}
	#voice .inner { padding: 30px 0px;}
	#voice .voice1 { margin-bottom: 60px;}
	#voice .voice1 dl { width: 100%; max-width: 240px; float: none; margin: 0 auto 20px;}
	#voice .voice1 .txt{ width: 100%;}
	.moreCtn.voice1 .trigger{ width: 100%;}
	#voice .voice2 dl{ width: 100%; max-width: 240px; float: none; margin: 0 auto 20px;}
	#voice .voice2 .txt{ width: 100%; float: none;}
}
@media (max-width: 361px) {
	.moreCtn .txt.hide{ height: 200px;}
}


#media { padding: 0 0 40px;}
#media ul { margin-bottom: 20px; padding-top: 80px;}
#media ul li { margin: 0 20px; vertical-align: middle;}
#media ul li span{ }
#media ul li img{ width: 100%;}
@media (max-width: 481px) {
	#media ul { margin-bottom: 30px; padding-top: 40px;}
	#media ul li { margin: 0 5px;}
}


#product { height: 800px; background: url(../img/bg-product.jpg) no-repeat 50% 100%;}
#product .inner{ position:relative; width: 90%; max-width: 800px; height: 100%; margin: 0 auto; padding: 20px 0 0;}
#product h2{ font-size: 40px; line-height: 1.2; text-align: center;}
#product h2 span{ display: block; font-size: 30px;}
#product h2:after{ content: ''; display: block; width: 200px; height: 1px; background: #ccc; margin: 20px auto;}
#product .read{ position: absolute; bottom: 50px; padding: 20px 40px; background: rgba(255,255,255,.8);}
#product .read p{ margin-bottom: 20px; font-size: 18px;}
#product .read p.name{ margin: 0; text-align:right;}
.productBox { width: 92%; max-width: 920px; margin: 0 auto; padding: 80px 0;}
.productBox figure{ width: 24%; max-width: 250px; float: right;}
.productBox figure img{ width: 100%;}
.productBox .txt{ width: 72%;}
.productBox .txt h3 { font-size: 20px; margin-bottom: 10px;}
@media (max-width: 641px) {
	.productBox{ padding: 60px 0;}
	.productBox figure{ width: 100%; max-width: 250px; float: none; margin: 0 auto 20px;}
	.productBox .txt { width: 100%;}
	.productBox .txt p { font-size: 14px;}
}
@media (max-width: 481px) {
	#product{ height: auto; background-position: 50% 80px; background-size: 100% auto;}
	#product h2{ margin-bottom: 120px; font-size: 30px;}
	#product h2 span{ font-size: 20px;}
	#product .read{ position: relative; bottom: auto; padding: 15px;}
	#product .read p{ margin-bottom: 10px; font-size: 13px;}
	.productBox { padding: 40px 0;}
	.productBox .txt h3 { font-size: 18px;}
	.productBox .txt h3 span{ display: block;}
	.productBox .txt p { font-size: 13px;}
}


#item { padding-bottom: 60px;
 background-image: url(../img/bg-L.png), url(../img/bg-R.png);
 background-repeat: no-repeat, no-repeat;
 background-position: left top, 100% 100%;
}
#item .inner{ width: 92%; max-width: 920px; margin: 0 auto; padding: 80px 0;}
#item p.txt { text-align: center;}
#item ul.items { padding-top: 50px;}
#item ul.items li:last-child{ padding-top: 50px;}
#item ul.items li dl{ display: flex; display:-webkit-flex; width: 100%; align-items:center;}
#item ul.items li dl dt,
#item ul.items li dl dd{ vertical-align: middle;}
#item ul.items li:nth-child(even) dl{ flex-direction: row-reverse; -webkit-flex-direction: row-reverse;}
#item ul.items li dl dt{ width: 30%; text-align: center;}
#item ul.items li dl dd{ width: 70%; box-sizing: border-box; padding-left: 20px;}
#item ul.items li:nth-child(even) dl dd{ padding-left: 0; padding-right: 20px;}

#item ul.items dl dt img{ width: 95%; border:solid 1px #ccc;}
#item ul.items li dl dd span{ display: block; width: 250px; margin-bottom: 10px; border-bottom: solid 1px #043;
 color: #043; font-size: 18px; font-weight: 700;
}
#item .otameshi-mini{ border: solid 1px #043;}

@media (max-width: 769px) {
 #item { background-size: 40% auto, 40% auto;}
 #item .inner{ padding: 60px 0;}

}
@media (max-width: 641px) {
	#item ul.items li dl { padding: 20px 0;}
	#item ul.items li dl dd{ font-size: 14px;}
}
@media (max-width: 481px) {
	#item .inner{ padding: 30px 0;}
	#item p.txt span{ display: block;}
	#item ul.items { padding-top: 30px;}
	#item ul.items li dl{ display: block;}
	#item ul.items li dl dt{ width: 100%; margin: 0 auto 20px;}
	#item ul.items li dl dd{ width: 95%; margin: 0 auto; padding: 0 !important; font-size: 13px;}
}




#fish{ height: 900px; padding-top: 100px;
 background: url(../img/bg-fish.jpg) no-repeat 50% 100%; background-size: auto 100%;
}
#fish .inner{ width: 95%; margin: 0 auto;}
#fish .box { width: 60%; padding: 30px; background: rgba(255,255,255,0.8);}
#fish .box h3{ font-size: 20px; margin-bottom: 10px;}
@media (max-width: 769px) {
	#fish{ height: 500px; padding-top: 60px;}
	#fish .box { width: 90%; margin: 0 auto; padding: 20px;}
}
@media (max-width: 641px) {
	#fish .box p{ font-size: 14px;}
}
@media (max-width: 481px) {
	#fish .box { padding: 15px;}
	#fish .box p{ font-size: 13px;}
}


#top-campaign .inner{ width: 94%; max-width: 1000px; margin: 0 auto; padding: 0;}

#top-campaign .topic{ padding: 150px 0 100px; background: url(../img/bg.jpg) no-repeat 50% 0;}
#top-campaign .bloc { position: relative; width: 92%; max-width: 960px; margin: 0 auto 80px; padding: 30px; background: rgba(255,255,255,0.95);}
#top-campaign .bloc .badge{ position: absolute; right: -50px; top: -100px;
 width: 180px; height: 180px; padding-top: 60px; background: #a6d8dc;
 color: #fff; font-size: 18px; text-align: center;
}
#top-campaign .bloc .badge span{ display: block; font-size: 24px; font-weight: 700;}
#top-campaign .bloc ul li { position:relative; padding: 20px 0 20px 140px;}
#top-campaign .bloc ul li span.no { display: block; width: 120px;
 position: absolute; top: 40px; left: 0;
 font-size: 40px; font-weight: 700; line-height: 1.2; text-align:center;
 background: #a6d8dc;
}
#top-campaign .bloc ul li span.no em{ display: block; font-size: 60px;}
#top-campaign .bloc ul li dl dt{ font-size: 16px; font-weight: 700; line-height: 1.2;}
#top-campaign .bloc ul li dl dt:after{ content: '';
 display: block; width: 300px; height: 1px; margin: 10px 0; background: #ccc;
}
#top-campaign .bloc ul li dl dt span{ font-size: 30px;}

#top-campaign .bloc ul li dl.pack { position: relative; margin-bottom: 15px; padding-top: 20px; line-height: 1.4;}
#top-campaign .bloc ul li dl.pack dt{ position: absolute; left: 0;}
#top-campaign .bloc ul li dl.pack dt:after{ content: none;}
#top-campaign .bloc ul li dl.pack dt img{ width: 120px;}
#top-campaign .bloc ul li dl.pack dd.txt{ margin-bottom: 10px; padding-left: 140px; font-size: 14px;}
#top-campaign .bloc ul li dl.pack dd.txt span{ display: block; font-size: 20px;}
#top-campaign .bloc ul li dl.pack dd.price{ line-height: 1.2;}
#top-campaign .bloc ul li dl.pack dd.price em{ color: #d00; font-size: 40px; font-weight: 700;}
#top-campaign .bloc ul li span.note{ display: block; margin-bottom: 5px; padding-left: 15px;
 font-size: 13px; line-height: 1.4; text-indent: -20px;
}
@media (max-width: 769px) {
	#top-campaign .bloc .badge{ position: relative; right: 0px; top: 0px;
	 width: 100%; height: auto; padding: 10px 0;}
	#top-campaign .bloc .badge span{ display: inline; margin-right: 10px;}
	#top-campaign .bloc ul li { padding: 20px 0 20px 100px;}

	#top-campaign .bloc ul li span.no { width: 85px; height: 77px; padding-top: 8px; font-size: 24px;}
	#top-campaign .bloc ul li span.no em{ display: block; font-size: 40px;}

	#top-campaign .bloc ul li dl.pack dt{ display: none;}
	#top-campaign .bloc ul li dl.pack dd.txt{ padding-left: 0px;}
	#top-campaign .bloc ul li dl.pack dd.txt span{ display: block; font-size: 20px;}
	#top-campaign .bloc ul li dl.pack dd.price{ line-height: 1.2;}
	#top-campaign .bloc ul li dl.pack dd.price em{ color: #d00; font-size: 40px; font-weight: 700;}
	#top-campaign .bloc ul li span.note{ display: block; margin-bottom: 5px; padding-left: 15px;
	 font-size: 13px; line-height: 1.4; text-indent: -22px;
	}
	#top-campaign .bloc ul li:nth-child(3) dt span{ display: block;}
}
@media (max-width: 641px) {
	#top-campaign .bloc ul li { padding: 20px 0 0;}
	#top-campaign .bloc ul li:nth-child(2){
		background-position: 100% 5%, 100% 46%;
		background-size: 150px auto, auto auto;
	}
	#top-campaign .bloc ul li span.no { position: relative; width: 120px; height: auto; top: 0;}
	#top-campaign .bloc ul li span.no em{ display: inline; font-size: 36px; vertical-align: middle;}
	#top-campaign .bloc ul li dl{ padding: 20px 0;}
	#top-campaign .bloc ul li dl dt span{ font-size: 24px;}
	#top-campaign .bloc ul li:nth-child(3) dt span{ display: inline;}
	#top-campaign .bloc ul li dl dd{ font-size: 14px;}
	#top-campaign .bloc ul li dl.pack{ padding: 10px 0}
	#top-campaign .bloc ul li span.note{ font-size: 12px;}
}
@media (max-width: 481px) {
	#top-campaign .bloc { padding: 15px;}
	#top-campaign .topic{ padding: 80px 0 50px;}
	#top-campaign .bloc ul li span.no { line-height: 1;}
	#top-campaign .bloc ul li dl{ padding: 10px 0;}
	#top-campaign .bloc ul li dl dt span{ font-size: 18px;}
	#top-campaign .bloc ul li br.pc{ display: none;}
}
@media (max-width: 361px) {
	#top-campaign .bloc ul li:nth-child(2){ background-position: 100% 0, 100% 40%;}
	#top-campaign .bloc ul li dl.pack dd.price em{ font-size: 30px;}
}



#campaign { }
#campaign .inner{ width: 94%; max-width: 1000px; margin: 0 auto; padding: 0;}

#campaign .topic{ padding: 150px 0 100px; background: url(../img/bg.jpg) no-repeat 50% 0;}
#campaign .bloc { position: relative; width: 92%; max-width: 960px; margin: 0 auto 80px; padding: 30px; background: rgba(255,255,255,0.95);}
#campaign .bloc .badge{ position: absolute; right: -50px; top: -100px;
 width: 180px; height: 180px; padding-top: 60px; background: #a6d8dc;
 color: #fff; font-size: 18px; text-align: center;
}
#campaign .bloc .badge span{ display: block; font-size: 24px; font-weight: 700;}
#campaign .bloc ul li { position:relative; padding: 20px 0 20px 140px;}
#campaign .bloc ul li:nth-child(1){ background: url(../img/bg-item1.jpg) no-repeat 78% 50%;}
#campaign .bloc ul li:nth-child(2){
	background: url(../img/bg-item2.jpg) no-repeat 95% 10%,
	 url(../img/bg-item2-2.jpg) no-repeat 95% 70%;
}
#campaign .bloc ul li:nth-child(3){ background: url(../img/bg-item3.jpg) no-repeat 95% 50%;}
#campaign .bloc ul li span.no { display: block; width: 120px;
 position: absolute; top: 40px; left: 0;
 font-size: 40px; font-weight: 700; line-height: 1.2; text-align:center;
 background: #a6d8dc;
}
#campaign .bloc ul li span.no em{ display: block; font-size: 60px;}
#campaign .bloc ul li dl dt{ font-size: 16px; font-weight: 700; line-height: 1.2;}
#campaign .bloc ul li dl dt:after{ content: '';
 display: block; width: 300px; height: 1px; margin: 10px 0; background: #ccc;
}
#campaign .bloc ul li dl dt span{ font-size: 30px;}

#campaign .bloc ul li dl.pack { position: relative; margin-bottom: 15px; padding-top: 20px; line-height: 1.4;}
#campaign .bloc ul li dl.pack dt{ position: absolute; left: 0;}
#campaign .bloc ul li dl.pack dt:after{ content: none;}
#campaign .bloc ul li dl.pack dt img{ width: 120px;}
#campaign .bloc ul li dl.pack dd.txt{ margin-bottom: 10px; padding-left: 140px; font-size: 14px;}
#campaign .bloc ul li dl.pack dd.txt span{ display: block; font-size: 20px;}
#campaign .bloc ul li dl.pack dd.price{ line-height: 1.2;}
#campaign .bloc ul li dl.pack dd.price em{ color: #d00; font-size: 40px; font-weight: 700;}
#campaign .bloc ul li span.note{ display: block; margin-bottom: 5px; padding-left: 15px;
 font-size: 13px; line-height: 1.4; text-indent: -20px;
}
@media (max-width: 769px) {
	#campaign .bloc .badge{ position: relative; right: 0px; top: 0px;
	 width: 100%; height: auto; padding: 10px 0;}
	#campaign .bloc .badge span{ display: inline; margin-right: 10px;}
	#campaign .bloc ul li { padding: 20px 0 20px 100px;}
	#campaign .bloc ul li:nth-child(1){ background-position: 100% 50%;}
	#campaign .bloc ul li:nth-child(2){
		background-position: 100% 5%, 100% 46%;
		background-size: 100px auto, auto auto;
	}
	#campaign .bloc ul li:nth-child(3){ background-position: 100% 10%;}

	#campaign .bloc ul li span.no { width: 85px; height: 77px; padding-top: 8px; font-size: 24px;}
	#campaign .bloc ul li span.no em{ display: block; font-size: 40px;}

	#campaign .bloc ul li dl.pack dt{ display: none;}
	#campaign .bloc ul li dl.pack dd.txt{ padding-left: 0px;}
	#campaign .bloc ul li dl.pack dd.txt span{ display: block; font-size: 20px;}
	#campaign .bloc ul li dl.pack dd.price{ line-height: 1.2;}
	#campaign .bloc ul li dl.pack dd.price em{ color: #d00; font-size: 40px; font-weight: 700;}
	#campaign .bloc ul li span.note{ display: block; margin-bottom: 5px; padding-left: 15px;
	 font-size: 13px; line-height: 1.4; text-indent: -22px;
	}
	#campaign .bloc ul li:nth-child(3) dt span{ display: block;}
}
@media (max-width: 641px) {
	#campaign .bloc ul li { padding: 20px 0 0;}
	#campaign .bloc ul li:nth-child(2){
		background-position: 100% 5%, 100% 46%;
		background-size: 150px auto, auto auto;
	}
	#campaign .bloc ul li span.no { position: relative; width: 120px; height: auto; top: 0;}
	#campaign .bloc ul li span.no em{ display: inline; font-size: 36px; vertical-align: middle;}
	#campaign .bloc ul li dl{ padding: 20px 0;}
	#campaign .bloc ul li dl dt span{ font-size: 24px;}
	#campaign .bloc ul li:nth-child(3) dt span{ display: inline;}
	#campaign .bloc ul li dl dd{ font-size: 14px;}
	#campaign .bloc ul li dl.pack{ padding: 10px 0}
	#campaign .bloc ul li span.note{ font-size: 12px;}
}
@media (max-width: 481px) {
	#campaign .bloc { padding: 15px;}
	#campaign .topic{ padding: 80px 0 50px;}
	#campaign .bloc ul li:nth-child(1){ background-size: 100px auto; background-position: 100% 0;}
	#campaign .bloc ul li:nth-child(2){
	 background-size: 100px auto, 80px auto;
	 background-position: 100% 0, 100% 50%;
	}
	#campaign .bloc ul li:nth-child(3){ background-size: 80px auto;}
	#campaign .bloc ul li span.no { line-height: 1;}
	#campaign .bloc ul li dl{ padding: 10px 0;}
	#campaign .bloc ul li dl dt span{ font-size: 18px;}
	#campaign .bloc ul li br.pc{ display: none;}
}
@media (max-width: 361px) {
	#campaign .bloc ul li:nth-child(2){ background-position: 100% 0, 100% 40%;}
	#campaign .bloc ul li dl.pack dd.price em{ font-size: 30px;}
}

#consult { padding-bottom: 80px;
 background-image: url(../img/bg-L.png), url(../img/bg-R.png);
 background-repeat: no-repeat, no-repeat;
 background-position: left top, 100% 0%;
}
#consult h3.read{ margin: 60px 0; font-size: 30px; text-align: center;}
#consult .message { height: 550px; background: url(../img/staff.jpg) no-repeat 50% 0; background-size: 100% auto;}
#consult .message .inner-msg{ width: 95%; margin: 0 auto; padding-top: 130px; padding-left: 45%;}
#consult .message .txt { width: 100%; max-width: 600px; padding: 30px 30px 10px; background: rgba(255,255,255,0.8);}
#consult .message .txt p{ margin-bottom: 30px; letter-spacing: 0.125rem;}
#consult .inner { width: 92%; max-width: 960px; margin: 0 auto 80px; padding-top: 80px;}

#consult h2.stl{ margin-bottom: 20px; padding: 5px 10px; font-size: 20px; background: #FC9;}
#consult .support{ margin-bottom: 40px; padding: 30px; background: #f3f3f3;
 border-radius: 10px;
}
#consult .support div { background: url(../img/bg-life.png) no-repeat 100% 0;}
#consult .support dl dt{ margin-bottom: 10px; padding-left: 10px; border-left: solid 4px #043;
 font-size: 18px; font-weight: 700; line-height: 1;
}
#consult .support dl dd{ margin-bottom: 20px; padding: 0 5px;}
#consult .point{ margin-bottom: 60px;}
#consult .point ul li{ margin-bottom: 20px;}
#consult .point ul dl dt { font-size: 20px;}
#consult .point ul dl dt span{ font-weight: 700;}
#consult .point ul dl dd { padding-left: 50px;}
#consult .point ul dl dd span{ font-weight: 700;}
#consult p.select{ margin-bottom: 20px; font-size: 20px; border-bottom: solid 1px #000;}
#consult ul.plan li{ margin-bottom: 20px;}
#consult ul.plan li dl{ padding: 20px; background: #f2f4ca;}
#consult ul.plan li dt{ margin-bottom: 10px; padding-left: 10px; border-left: solid 4px #d00; font-size: 20px; font-weight: 700;}
#consult ul.plan li dt em{ margin-left: 40px; color: #333; font-weight: 400;}
#consult ul.plan li dd {}
#consult .note{ margin-bottom: 40px; padding: 20px; background: rgba(255,255,255,0.8);}

#consult .area{}
#consult .area ul { padding-right: 290px; background: url(http://www.chikyu-jin.com/content/delivery/deliveryArea01.gif) no-repeat 100% 0;}
#consult .area ul li{ margin-bottom: 20px;}
#consult .area ul dl dt { font-size: 20px;}
#consult .area ul dl dt span{ font-weight: 700;}
#consult .area ul dl dd { padding-left: 50px;}
#consult .area ul dl dd span{ font-weight: 700;}


@media (max-width: 769px) {
	#consult .message { height: 550px; background-size: auto 100%;}
	#consult .message .inner-msg{ padding-top: 100px; padding-left: 30%;}
	#consult .inner { margin: 0 auto 40px; padding-top: 50px;}
	#consult .support div { background-size: 200px auto;}
	#consult .support dl:nth-of-type(1){ width: 70%;}
	#consult .point ul dl dd{ padding-left: 0px;}
	#consult .area ul dl dd { padding-left: 0px;}
}
@media (max-width: 641px) {
	#consult h3.read { margin: 40px 0; font-size: 24px;}
	#consult .message { height: auto;}
	#consult .message .inner-msg{ padding: 100px 0 150px;}
	#consult .message .txt { width: 90%; margin: 0 auto;}
	#consult .message .txt p{ margin-bottom: 20px; font-size: 14px;}
	#consult .support dl dd { font-size: 14px;}
	#consult .support dl dd { font-s1ze: 14px;}
	#consult .point{ display: block; margin-left: 0px; font-size: 12px;}
	#consult .area { display: block; margin-left: 0px; font-size: 12px;}
	#consult .area ul { padding-right: 0px; padding-top: 220px; background-position: 50% 0;}

}
@media (max-width: 481px) {
	#consult { padding-bottom: 80px;
	 background-repeat: repeat-y, repeat-y;
	 background-size: 50% auto, 50% auto;
	}
	#consult h3.read { font-size: 16px;}
	#consult .message .inner-msg{ padding: 60px 0 100px;}
	#consult .message .txt { width: 90%; margin: 0 auto; padding: 15px 15px 5px;}
	#consult .message .txt p{ margin-bottom: 10px; font-size: 13px;}
	#consult h2.stl{ padding: 5px 8px; font-size: 18px;}
	#consult .support{ padding: 20px 10px;}
	#consult .support div { background: none;}
	#consult .support dl:nth-of-type(1){ width: 100%; padding-bottom: 100px;
	 background: url(../img/bg-life.png) no-repeat 50% 95%; background-size: auto 100px;}
	#consult .support dl dt { font-size: 15px;}
	#consult .support dl dd { font-s1ze: 13px; letter-spacing: 0.125rem;}
	#consult .support dl dd.btm{ margin-bottom: 0;}
	#consult .point { display: block; margin-left: 0px; font-size: 12px;}
	#consult .point ul dl dt { font-size: 18px;}
	#consult ul.plan li dl{ padding: 20px 15px;}
	#consult ul.plan li dt{ font-size: 20px;}
	#consult ul.plan li dt em{ display: block; margin-left: 0px; font-size: 14px;}
	#consult ul.plan li dd { font-size: 15px; letter-spacing: 0.125rem;}
	#consult .note p{ font-size: 13px;}
}
@media (max-width: 361px) {
	#consult h3.read { font-size: 14px;}
	#consult h2.stl{ font-size: 16px;}
	#consult .support dl dt { font-size: 14px;}
}



#entry .inner{ width: 92%; max-width: 900px; margin: 0 auto 40px; padding: 40px 0 80px;}
#entry p.must{ color: #d00; fotn-size: 12px; text-align:right;}
#entry ul { margin-bottom: 30px; width: 100%;}
#entry ul li { padding: 8px; border-bottom: solid 1px #ccc;}
#entry ul li.plus{ display: none;}
#entry ul li.plus.show{ display: block;}
#entry ul li:last-child{ border: none;}

#entry ul li dl { display: table; width: 100%;}
#entry ul li dl dt{ display: table-cell; width: 35%; vertical-align: top; font-size: 18px; font-weight: 700;}
#entry ul li dl dd { display: table-cell; width: 65%; position: relative; vertical-align: top;}
#entry ul li dl dt sup{ color: #d00; font-size: 12px;}

#entry ul li dl dd select{ box-sizing: border-box; width: 100%; padding: 10px; font-size: 16px;}
#entry ul li dl dd input { box-sizing: border-box; width: 100%; padding: 10px; font-size: 16px;}
#entry ul li dl dd.zip em.notice{ display: block; font-size: 12px;}
#entry ul li dl dd.zip input { width: 100px;}
#entry ul li dl dd.zip span{ display: inline-block; position: relative;}
#entry ul li dl dd textarea { box-sizing: border-box; width: 100%; padding: 10px; width: 100%; height: 160px;}

#entry ul li label.error {
	position: absolute; top: -30px; left: -10px;
	padding: 5px 8px;
	background: #d00; border-radius: 5px;
	color: #fff; font-size: 12px;
	opacity: 0;
	animation: .5s showError linear forwards .2s;
}
#entry ul li label.error:before{ content: ''; display: block; width: 8px; height: 8px; background: #d00;
	transform: rotate(45deg);
	position: absolute; bottom: -4px; left: 20px;
}
#entry ul li dl dd.zip label.error{ width: 120px;}
@keyframes showError{
	100%{ opacity: 1;}
}

#entry .submit{ width: 60%; margin: 0 auto;}
#entry .submit input{ width: 100%; padding: 10px 0; text-align: center;
 border: none; -mozborder-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; cursor: pointer;
 background: #d00; color: #fff; font-size: 30px;
 box-shadow: 0 5px 0 #900;
}
#entry .submit input:hover{ opacity: 0.8;}
@media (max-width: 481px) {
	#entry ul li dl { display: block;}
	#entry ul li dl dt,
	#entry ul li dl dd{ display: block; width: 100%; padding: 5px 0;}
}

#ft { position: relative; background: #ccc /*#754e09*/; padding: 50px 0 10px}
#ft .pagetop{ width: 80px; height: 80px; position: absolute; right: 5%; top: 80px; z-index:50}
#ft .pagetop a{ display: block; width:100%; color: #000; font-size: 12px; text-align: center;}
#ft .pagetop a:before { content: ''; display: block; width: 15px; height: 15px; border-top: solid 2px #000; border-left: solid 2px #000; position: relative; margin: 0 auto;
 -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);
}

#ft ul { width: 80%; max-width: 500px; margin: 0 auto 50px; text-align: center;}
#ft ul li { display: inline-block; margin: 0 10px 10px; font-size: 13px;}
#ft ul li a { color: #000;}
#ft address { color: #000; font-size: 11px; font-style: normal; text-align: center;}
@media (max-width: 481px) {
	#ft .pagetop{ position: relative; top: 0; right: auto; margin: 0 auto; height: 50px;}
	#ft .pagetop a{ font-size: 9px;}
	#ft { padding: 30px 0 10px;}
	#ft ul { margin: 0 auto 30px;}
}
@media (min-width: 1400px) {
	#kv,
	#product,
	#fish { background-size: 100% auto;}
}

.sendMsg { width: 90%; max-width: 600px; margin: 0 auto; padding: 20px; background: rgba(255,255,255,0.6);}
.sendMsg p{ margin-bottom: 30px;}
.sendMsg p span{ display: block;}
.sendMsg dl{ margin-bottom: 30px; padding-top: 30px; border-top: solid 1px #043;}
.sendMsg a{ display: block; width: 80%; margin: 0 auto; background: #043; color: #fff;
 box-shadow: 0 4px #030;
 -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}
@media (max-width: 481px) {
	.sendMsg p{ text-align: left;}
	.sendMsg p span{ display: inline;}
}

/* Slider */
.slick-slider { position: relative; display: block; box-sizing: border-box;
-webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;

-webkit-touch-callout: none;
	-khtml-user-select: none;
	-ms-touch-action: pan-y;
  	  touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}

.slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0;}
.slick-list:focus { outline: none;}
.slick-list.dragging{ cursor: pointer; cursor: hand;}
.slick-slider .slick-track,
.slick-slider .slick-list{
-webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
     -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
}
.slick-track { position: relative; top: 0; left: 0; display: block;}
.slick-track:before,
.slick-track:after { display: table; content: '';}
.slick-track:after { clear: both;}
.slick-loading .slick-track { visibility: hidden;}
.slick-slide { display: none; float: left; height: 100%; min-height: 1px;}
[dir='rtl'] .slick-slide { float: right;}
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none;}
.slick-slide.dragging img { pointer-events: none;}
.slick-initialized .slick-slide { display: block;}
.slick-loading .slick-slide { visibility: hidden;}
.slick-vertical .slick-slide{ display: block; height: auto; border: 1px solid transparent;}
.slick-arrow.slick-hidden { display: none;}