@charset "UTF-8";

/* =====================================================================
 * header
 * =================================================================== */
header {
	margin-bottom: 45px;
	height: 550px;
}
#headerInner {
	position: relative;
	top: -550px;
	height: 550px;
	padding-top: 0;
}
p.tag {
	width: 174px;
}
@media screen and (max-width: 980px) {
	header {
		margin-bottom: 40px;
		height: 470px;
	}
	#headerInner {
		top: -470px;
		height: 470px;
	}
	p.tag {
		margin-left: 15px;
	}
}
@media screen and (max-width: 767px) {
	header {
		margin-bottom: 30px;
		height: 320px;
	}
	#headerInner {
		top: -320px;
		height: 320px;
	}
	p.tag {
		margin-left: 0;
		width: 140px;
	}
}
@media screen and (max-width: 413px) {
	header {
		margin-bottom: 25px;
		height: 275px;
	}
	#headerInner {
		top: -275px;
		height: 275px;
	}
	p.tag {
		width: 130px;
	}
}
@media screen and (max-width: 320px) {
	header {
		margin-bottom: 25px;
		height: 220px;
	}
	#headerInner {
		top: -220px;
		height: 220px;
	}
	p.tag {
		width: 115px;
	}
}

/* =====================================================================
 * main
 * =================================================================== */
#inner {
	position: relative;
	overflow: hidden;
	margin-bottom: 40px;
	padding-bottom: 45px;
	width: 100%;
	background: url(images/dotline.gif) repeat-x bottom;
	text-align: center;
	letter-spacing: -0.5em;
}
#headBox, #naviBox {
	display: inline-block;
	vertical-align: top;
	float: none;
}
#headBox {
	padding-left: 73px;
}
#naviBox {
	width: 290px;
}
h1 {
	padding: 0;
	width: 193px;
	height: 142px;
}
h1 a {
	display: block;
	width: 194px;
	height: 142px;
	background: url(images/indexlogo.svg) no-repeat;
	background-size: 100%;
	text-indent: 200%;
	white-space: nowrap;
	overflow: hidden;
}
h1, .indexMidashi {
	float: right;
}
.indexMidashi {
	margin-right: 52px;
}
#information a {
	display: block;
	margin-bottom: 40px;
	padding: 15px;
	width: 100%;
	background-color: #82292d;
	border-radius: 5px; 
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	text-align: center;
	font-size: 131%;
	font-weight: bold;
	color: #ffffff;
}
#information a span {
	font-weight: bold;
}
@media screen and (max-width: 980px) {
	#inner {
		margin-bottom: 33px;
		padding: 0 0 30px 0;
	}
	#headBox {
		padding-left: 35px;
	}
	#information a {
		margin-bottom: 30px;
	}
	.indexMidashi {
		margin-right: 35px;
	}
}
@media screen and (max-width: 767px) {
	#headBox {
		margin-bottom: 20px;
		padding-left: 0;
	}
	.indexMidashi {
		margin-right: 30px;
	}
	.indexMidashi img {
		width: 140px;
		height: auto;
	}
}
@media screen and (max-width: 480px) {
	#information a {
		font-size: 116%;
		line-height: 1.6;
	}
	#information a .newline {
		padding-bottom: 0;
	}
}
@media screen and (max-width: 413px) {
	#inner {
		width: 100%;
	}
	h1 {
		width: 52%;
	}
	h1 a {
		max-width: 100%;
	}
	.indexMidashi {
		margin-right: 0;
		width: 48%;
		padding-right: 20px;
	}
	#information a {
		margin-bottom: 25px;
	}
}
@media screen and (max-width: 320px) {
	#headBox {
		margin-bottom: 0;
	}
	#information a {
		font-size: 108%;
	}
}
/* slider */
.loopslider {
	width: 100%;
	height: 550px;
	position: relative;
	overflow: hidden;
}
.loopslider ul {
	float: left;
	overflow: hidden;
}
.loopslider ul li {
	width: 1000px;
	height: 550px;
	float: left;
}
.loopslider ul li img {
	display: block;
	max-width: 100%;
	height: 550px;
}
@media screen and (max-width: 980px) {
	.loopslider, .loopslider ul li, .loopslider ul li img {
		height: 240px;
	}
	.loopslider ul li {
		width: 320px;
	}
}
@media screen and (max-width: 500px) {
	.loopslider, .loopslider ul li, .loopslider ul li img {
		height: 150px;
	}
	.loopslider ul li {
		width: 200px;
	}
}
/* SNS */
ul#social {
	position: absolute;
	bottom: 39px;
	right: 16px;
	letter-spacing: normal;
}
ul#social li {
	display: inline-block;
	margin-left: 10px;
	line-height: 20px;
	vertical-align: top;
	*display: inline;
	*zoom: 1;
}
@media screen and (max-width: 980px) {
	.loopslider, .loopslider ul li, .loopslider ul li img {
		height: 470px;
	}
	.loopslider ul li {
		width: 855px;
	}
	ul#social {
		bottom: 29px;
		right: 0;
	}
}
@media screen and (max-width: 767px) {
	.loopslider, .loopslider ul li, .loopslider ul li img {
		height: 320px;
	}
	.loopslider ul li {
		width: 582px;
	}
	ul#social {
		position: static;
	}
}
@media screen and (max-width: 413px) {
	.loopslider, .loopslider ul li, .loopslider ul li img {
		height: 275px;
	}
	.loopslider ul li {
		width: 500px;
	}
}
@media screen and (max-width: 320px) {
	.loopslider, .loopslider ul li, .loopslider ul li img {
		height: 220px;
	}
	.loopslider ul li {
		width: 400px;
	}
}
/* ご注文 */
section {
	margin-bottom: 40px;
	padding-bottom: 45px;
	background: url(images/dotline.gif) repeat-x bottom;
}
h3 {
	margin-bottom: 30px;
}
h3#trialTtl, h3#orderTtl, h3#telfaxTtl {
	display: block;
	margin: 0 auto 30px;
	width: 464px;
	min-height: 28px;
	background: url(images/weborder.svg) no-repeat;
	text-indent: 200%;
	white-space: nowrap;
	overflow: hidden;
}
h3#telfaxTtl {
	width: 616px;
	background: url(images/telfax_order.svg) no-repeat;
}
h3#trialTtl {
	margin-bottom: 25px;
	width: 404px;
	min-height: 32px;
	background: url(order/images/otegaruset_ttl.svg) no-repeat;
}
.regularService {
	text-align: center;
}
.regularService a {
	display: block;
	margin-top: 25px;
	padding: 15px 15px 14px;
	width: 100%;
	min-height: 55px;
	border: solid 1px #81292d;
}
.regularService span {
	display: inline;
}
.regularService a span {
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.txt1, .txt2, .txt3 {
	margin: 0 4px;
}
.txt3 {
	margin: 0;
}
.more {
	margin: 0 25px;
}
@media screen and (max-width: 980px) {
	section {
		margin-bottom: 33px;
		padding-bottom: 40px;
	}
	.regularService a {
		padding: 18px 15px 13px;
	}
	.regularService span.more {
		display: block;
		margin: 7px 25px 0;
	}
}
@media screen and (max-width: 767px) {
	h3#telfaxTtl {
		width: 308px;
		min-height: 64px;
		background: url(images/telfax_order_sp.svg) no-repeat;
	}
	.regularService span.txt3 {
		display: block;
		margin: 7px 0 0;
	}
}
@media screen and (max-width: 480px) {
	h3 {
		margin-bottom: 25px;
	}
	h3#trialTtl, h3#orderTtl, h3#telfaxTtl {
		margin: 0 auto 25px;
		padding-top: 13.9%;
		width: 66.9%;	
		min-height: 0;
		height: 0!important;
		background-size: 100%!important;	
	}	
	h3#trialTtl {
		padding-top: 7.1%;
		width: 87.8%;
	}
	h3#orderTtl {
		background: url(images/weborder_sp.svg) no-repeat;
	}
}
@media screen and (max-width: 479px) {
	.regularService span.txt2 {
		display: block;
		margin: 7px 0 0;
	}
}
@media screen and (max-width: 413px) {
	h3 {
		margin-bottom: 20px;
	}
	h3#trialTtl, h3#orderTtl, h3#telfaxTtl {
		margin: 0 auto 20px;
		padding-top: 15.2%;
		width: 73.3%;
	}
	h3#trialTtl {
		margin-bottom: 20px;
		padding-top: 6.8%;
		width: 90%;
	}
}

/* =====================================================================
 * globalnavi
 * =================================================================== */
ul#g-navi{
	float: right;
	width: 290px;
	height: 250px;
}
ul#g-navi li a {
	display: block;
	margin-left: 10px;
	width: 90px;
	height: 250px;
	background: url(images/indexnavi2020.svg) no-repeat;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
/*韃靼蕎麦とは*/
ul#g-navi #gn-about a {
	background-position: -180px 0;
}
#about ul#g-navi #gn-about a,
ul#g-navi #gn-about a:hover {
	background-position: -180px -250px;
}
/*商品*/
ul#g-navi #gn-products a {
	background-position: -90px 0;
}
#products ul#g-navi #gn-products a,
ul#g-navi #gn-products a:hover {
	background-position: -90px -250px;
}
/*ご注文*/
ul#g-navi #gn-order a {
	background-position: 0 0;
	margin-left: 0;
}
#order ul#g-navi #gn-order a,
ul#g-navi #gn-order a:hover {
	background-position: 0 -250px;
}
@media screen and (max-width: 980px) {
	ul#g-navi {
		position: static;
	}
}