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


/*
############################################
　全ディバイス共通CSS
############################################
*/

/*HTML5用ブロック指定*/
article,aside,canvas,details,figcaption,figure,
header,footer,main,menu,nav,section,summary
{display: block;}




body {
	text-size-adjust: 100%;/*iPhoneサファリの文字制御*/
	font-family: Quicksand, 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	line-height:0;
	margin:0 auto;
	padding:0;
	background:#FBF7F0;
}


/*
############################################
　PC用CSS
############################################
*/

header,
main,
div,
footer
{ 
	width:1000px;
	margin:0 auto;
	padding:0;
}

p{ margin:0; padding:0; line-height:0;}


/*
==============================
ヘッダー固定
==============================
*/

.menu{
    position: fixed;/* ヘッダーの固定 */
    top: 0px;
    left: auto;
    width: 100%;
    height: 72px;
}

/*上部固定ナビの調整*/
#order-link{
	margin-top: -50px; /* 固定ナビの高さ分のネガティブマージン */
	padding-top: 50px; /* 打ち消し用のパディング */
}

main{
	padding-top:72px;}
	

/* 2018.02追加 キャンペーン価格
===============================================
*/

#campaign-box{
	width:85%;
	color:#E03837;
	margin-bottom:20px;
}

#campaign-box div{
	display:inline-block;}
	
.percent{
	width:30%;
	background-color:#E03837;
	color:#FFF;
	font-size:200%;
	padding:30px 0;
	text-align:center;
	font-family: 'Caveat', Vollkorn;
	vertical-align: top;
}

.percent span{font-size:80%;}

.price{
	width:65%;
	padding:30px 0;
	font-size:350%;
	text-align:right;
	color:#E03837;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	vertical-align:bottom;
}

.price span{
	font-size:30%;}




/* 2017 オーダーフォーム設置追加
===============================================
*/
#order{
	background:url(../ranzuimg/img_10_bg.png) repeat;
}

.inner-box:after {
      content: "";
      clear: both;
      display: block;
   }

.inner-box{
	width:95%;
	border:8px solid #F7931E;
	border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
	background:#FFF;
	margin-top:20px;
	margin-bottom:20px;
	padding-bottom:30px;
	display:block;
}


.inner01{
	float:left;
	width:35%;
	padding-top:30px;
}

.inner02{
	float:left;
	width:65%;
}

.inner01 img,
.inner02 img{
	max-width:100%;
	height:auto;
}

.mobile-no{	display:block; }
.pc-no{	display: none;}

/*
メインエリア　セレクト・ボタン
=================================== */

/*
iosのフォーカス時の自動拡大はoff設定
=================================== */

input,select,textarea{
   font-size:16px;
}

.select-main {
	vertical-align:middle;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;	
	width:25%;
	padding: 10px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #999;
	background: #eee;
	background: url(../ranzuimg/arrow01.png) right 50% no-repeat, -webkit-linear-gradient(top, #fff 0%,#efebe1 100%);
	background: url(../ranzuimg/arrow01.png)  right 50% no-repeat, linear-gradient(to bottom, #fff 0%,#efebe1 100%);
	background-size: 20px, 100%;
	border-radius: 4px;
}


.button-main {
	vertical-align:middle;
	width: 70%;
	color: #FFF;
	font-size: 16px;
	font-weight: bold;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	text-decoration: none;
	border: 1px solid #B05800;
	margin:0 auto;
	padding: 9px 0 7px 28px;
	border-radius: 5px;	
	background: url(../ranzuimg/bg_button.png) left no-repeat;
}


/*
下部カート
=================================== */

#cart_navigation {
	z-index: 9999;
	position: fixed;
    bottom: 10px;
	left:10px;
	width:140px;

	border:2px solid #ffffff;
	border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;
	padding:12px 6px;
	background-color: #009245;
	filter:alpha(opacity=85);
	-moz-opacity:0.85;
	-khtml-opacity: 0.85;
	opacity:0.85;
	font-size:12px;
	display:table;
}


#cart_navigation div{
	display: table-cell;
	vertical-align:middle;
}


a{
	color:#630;
	text-decoration: none;
	}

/*
==============================
footer
==============================
*/

footer{ 
	overflow: hidden;
	position: relative;
	zoom:1;
	background:#FFF;}

/*必要事項のリンク*/

nav{
	text-align:center;
}

nav ul{
	list-style-position:outside;
	margin:0;
	padding:0;

}

nav li{
	display:inline-block;
	margin: 0;
	list-style-position:outside;
	padding:25px 20px;
	font-size:80%;
}


/*
############################################
　タブレット　PC980px以下用CSS
############################################
*/
@media screen and (max-width: 999px) {
	
	
header,footer{width:100%;}
div,main{ width:100%;}

main{ padding-top:55px;}
 
img {
max-width : 100% ;
height : auto ;
}

footer{
	margin-bottom:50px;}


/* 2018.02追加 キャンペーン価格
===============================================
*/

#campaign-box{
	margin-bottom:10px;
}
.percent{
	width:30%;
	font-size:18px;
}

.percent span{font-size:14px;}

.price{
	width:65%;
	font-size:30px;
}

.price span{
	font-size:14px;}
	
 }


/*
############################################
　スマホ用CSS
############################################
*/
@media screen and (max-width: 480px) { 
 

/*上部固定ナビの調整*/
#order-link{
	margin-top: -5px; /* 固定ナビの高さ分のネガティブマージン */
	padding-top: 5px; /* 打ち消し用のパディング */
}
main{ padding-top:25px;}
 
img {
max-width:100% ;
height: auto ;
}

nav ul{list-style-position:outside;}

nav li{
	display:block;
	margin: 0;
	list-style-position:outside;
	padding:20px 0;
	border-bottom:1px solid #FDBD53;
	background: #FFFBE6;
}

footer{
	margin-bottom:70px;}
	

/* 2017 オーダーフォーム設置追加
===============================================
*/
#order{
	background:url(../ranzuimg/img_10_bg.png) repeat;
}


.inner-box{
	width:90%;
	border:4px solid #F7931E;
	border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
	background:#FFF;
	margin-top:10px;
	margin-bottom:10px;
	padding-bottom:20px;
}
.inner01{
	float:none;
	width:100% !important;
	/*background:#FCFAF1;*/
	padding-top:0;
}
.inner02{
	float:none;
	width:100% !important;
	text-align:center;
}


.button-main { font-size:13px;}

.mobile-no{display:none;}
.pc-no{	display:block;}


}

/*
==============================
草刈り個別対応
==============================
*/

#mowing {
	width: 100%;
}

#mowing_sp {
	width: 100%;
	text-align: center;
}


#mowing_sp video {
	width: 100%;
}

#mowing_video {
	width: 400px;
	float: left;
}

#mowing_right {
	border: solid;
	width: 580px;
	height:auto;
	float: right;
}

#mowing_right em {
	font-style: normal;
	font-weight: bold;
	color: #FF4733;
}

#mowing p {
	margin:initial; padding:initial; line-height:initial;}
}

#mowing_sp p {
	margin:initial; padding:initial; line-height:initial;}
}