@charset "utf-8";
/* サブページ用 */


#contentarea,#contentarea100{
    margin: 0 auto;
    padding-top: 40px;
    text-align: center;
}
#contentarea{width: 950px;}
#contentarea100{width: 100%;}



/*---------- 各ページ丸見出し-------------- */
.circle{
    width: 130px;
    height: 130px;
    margin: 0 auto 40px auto;
    border-radius:65px;
    color:#fff;
    line-height: 130px;
    text-align: center;
}

.circle2{
    width: 130px;
    height: 85px;/*--２行用--*/
    margin: 0 auto 30px auto;
    border-radius:65px;
    padding-top: 45px;
    color: #fff;
}
.sp30{
    padding-top: 30px;/*--余白調整用--*/
}

.about{
    background-color: #99ced4;
}
.item{
    background-color: #e99e3f;
}

.company{
    background-color: #a7b148;
}
.contact{
    background-color: #bc8f8f;
}
.shop{
    background-color: #ecd570;
}

.recruit{
    background-color: #e99e3f;
}


/*----------スズキファームとは--------------*/

.abt-area{
    width: 100%;
    height: 450px;
    display: block;
    text-align: center;
    padding: auto 10%;
}

.inform,.inform-s,.inform-w{
    margin: 40px auto;
    display: block;
}

.inform{
    width: 800px;
    padding: 0;
}

.inform-s{
    width: 600px;
    margin: 0 auto;
    padding: 0;
}

.inform-w{
    width: 1000px;
    padding: 40px;
}

.imagebox{
    width: 500px;
    display: inline-block;
    height: auto;
}

.imagebox img{
    width: 100%;
}
    .size1{
        width: 100%;
    }

    .size3{width: 330px;
        display: inline-block;
        margin: 0;
    }

.textbox{
    width: 460px;
    display: inline-block;
    text-align: left;
    vertical-align: top;
    margin-left: 30px;
}

.border{
    padding-bottom: 20px;
    border-bottom: 2px dotted #ef857d;
}



/*----------商品一覧--------------*/

.border-item{
    display: inline-block;
    padding: 40px 0 15px 0;
    border-bottom: 2px dotted #ff6600;
}

.item-box{
    width: 850px;
    height:240px;
    margin: 0 auto;
    padding: 30px;
}

    .item-img{
        width: 360px;
        float: left;
        height: auto;
        margin-right: 40px;
    }

    .item-img img{
        width: 100%;
    }

    .detail{
        text-align: left;
        margin: auto 0;
    }

    .detail2{
        text-align: center;
        margin: auto 0;
    }

.kentama_var{
    width: 850px;
    margin: 0 auto; 
    padding-bottom: 30px;
}

.kentama_var figure{
    display: inline-block;
    margin: auto 10px;
}
.kentama_var img{
    width: 250px;
}
.kentama_var figcaption{
    line-height: 1.5;
    font-weight: bold;
    font-size: 15px;
}

/*----------直売所--------------*/

.shop-img img{
    width: 400px;
    margin-bottom: 40px;
}

.shop-ta{
    width: 500px;
    margin:40px auto;
    line-height: 1.5;
    letter-spacing: 1.2px;
}

    .shop-ta tr{
        padding: 15px 20px;
        border-bottom: 2px dotted #d9e367;
    }

    .shop-ta th{
        width: 80px;
     }

    .shop-ta td{
        padding: 15px;
        text-align: left;
    }

.shop-item-img{
    width: auto;
    margin: 0 auto;
}

    .shop-item-img img{
        width: 200px;
    }

#contentarea a{
    text-decoration: none;
    color: #fff;
}


/*----------会社概要--------------*/

#message,#profile{
    width:950px;
    height:auto;
    margin:0 auto;
    padding: 40px;
    text-align: left;
}

.presidentimg{
    float: left;
    width:200px;
    height:auto;
    margin-right: 50px;
}


    .presidentimg img{
        width: 100%;
    }


#policy{
    width: 100%;
    margin:0 auto;
    height: auto;
    text-align: center;
    padding:50px 0;
    background-image: url(../img/bg04.jpg);
    background-repeat: repeat;
}

#policy ul{
    list-style-type: decimal;
    width: 630px;
    margin: 20px auto;
    text-align: left;
}

    #policy ul li{   
        height:30px;
        font-size:15px;
        line-height: 1.8;
        letter-spacing: 1.8px;
        color:#ff6600;
        font-family: "Sawarabi Gothic";
        font-size:18px;
        font-weight: bold;
    }


.profile-ta{
    width: 600px;
    margin: auto;
}

    .profile-ta tr{
        border-bottom: 2px dotted #a7b148;
    }


    .profile-ta th,td{
        padding: 15px;
        text-align: left;
    }


/*----------お問合せ--------------*/
#contactarea{
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    padding:40px 0;
    background-color:#f5f5f5;
}

.ptitle{
    width: 500px;
    padding: 10px;
    border-radius: 15px;
    border:2px solid #fcd575;
    background-color: #fcd575;
    color:#fff;
    margin: auto;
}

#contactmain{
    display: block;
    width: 700px;
    height:auto;
    margin: 0 auto;
    padding:30px;
    background-color: #fff;
    border-radius: 30px;
    text-align: center;
}

.attention{
    color:red;
    font-weight: bold;
    letter-spacing: 2px;
}

.areabox{
    width: 500px;
    margin:20px auto;
    text-align: left;
}
.areabox a{
    text-decoration: none;
    color:#333;
}

.telormail{
    width: 350px;
    font-size: 20px;
    padding: 5px 20px;
    color: #ff6600;
    border-radius: 10px;
    border:3px solid #ff6600;
    letter-spacing: 3px;
    margin:30px auto;
    text-align: center;
}
.num{
    text-align: center;
    line-height: 2.0;
    font-size: 11pt;
    letter-spacing: 2px;
}

/*-- 入力エリア --*/
input:not([type="submit"]):not([type="button"]),
textarea{
    outline:none;
    display:block;
    width:450px;
    padding:4px 8px;
    border:1px dashed #DBDBDB;
    color:#3F3F3F;
    border-radius:2px;
}

textarea{
    min-height: 150px;
}

input:not([type="submit"],[type="button"]):active,
textarea:active,
input:not([type="submit"],[type="button"]):focus,
textarea:focus{
    background:#F7F7F7;
}

input:not([type="submit"],[type="button"]){
    height: 20px;
}

/*-- 送信ボタン --*/
input[type=submit],
input[type=button]{
cursor:pointer;
background:none;
border:none;
color:#767676;
font-weight: bold;
box-shadow: 0.6s linear;
background:#F7F7F7;
padding:10px 4px;
border:1px solid #E0E0E0;
border-radius:5px;
}
 
input[type=submit]:hover,
input[type=button]:hover{
color:#686868;
border-color: #CECECE;
box-shadow:2px 2px 7px #E8E8E8 inset;
}



/*----------お問合せ/確認画面-------------*/

.confi{
    padding: 0;
    font-size:20px;
    display: inline-block;
    color:#ff6600;
    border-bottom: 2px dotted #ff6600;
    font-weight: bold;
}

.contact-ta{
    width: 85%;
    margin: 10% auto;
    text-align: left;
    line-height: 120%;
}

    .contact-ta th,td{
        padding: 5%;
    }

    .contact-ta th{
        width: 30%;
}
    .contact-ta td{
        width: auto;
    }

p.error_messe{
	margin:5px 0;
	color:red;
}

/*----------お問合せ/thanks--------------*/

#gotocontact a{
    text-decoration: none;
    display: block;
    color: #618e34;
}



/*----------スタッフ募集--------------*/

.recruit-ta{
    width: 800px;
    margin:40px auto;
    border-collapse: separate;
    border-spacing: 5px;
    line-height: 1.5;
    letter-spacing: 1.2px;
}

    .recruit-ta tr{
        padding: 15px 20px;
    }
    
    .recruit-ta th{
        width: 120px;
        background-color:#d9e367;
     }

    .recruit-ta td{
        padding: 15px;
        text-align: left;
        background-color:#fff;
        border:1px solid #d9e367;
    }


.rec{
    width: 950px;
    margin: 0 auto;
    height: auto;
    padding-bottom:30px;
    display: block;
    text-align: center;
}

.rec-t{
    width: 100%;
    height: auto;
    margin-bottom: 30px;
}

.rec-img{
    width: 100%;
    height: auto;
}

    .rec-img img{
        width: 200px;
    }

/*---------- news&topics/一覧ページ --------------*/
ul#newsList{
	margin:0 0 15px;
	padding:0;
	font-family:"Sawarabi Gothic";
    text-align: left;
}
ul#newsList li{
	color:#666;
	font-size:12px;
	margin:0;
	padding:5px 0;
	margin-bottom:3px;
	border-bottom:2px dotted #618e34;
	line-height:120%;
	list-style-type:none;
}
a{color:#618e34;}
a:hover{color:#59b517;text-decoration:none;}

.catName{
	display:inline-block;
	padding:3px 8px;
	border:1px solid #ccc;
	border-radius:6px;
	font-size:11px;
	line-height:100%;
	margin:0 2px;
}

.comment-li{
	display:block;
	padding:3px 0;
	float:left;
	overflow:hidden;
	width:600px;/* 本文部分の幅。設置ページ合わせて変更 */
}
.thumbNailWrap{
	display:block;
	width:110px;
	float:left;
	height:80px;
	overflow:hidden;
}

/* Pager style（外部化可） */
.pager{
	text-align:right;
	padding:10px;
	clear:both;
}
/*ページャーボタン*/
.pager a{
    border: 1px solid #999;
    border-radius: 5px 5px 5px 5px;
    color: #333;
    font-size: 12px;
    padding: 3px 7px 2px;
    text-decoration: none;
	margin:0 1px;
}

/*現在のページのボタン*/
.pager a.current{
    background: #999;
    border: 1px solid #999;
    border-radius: 5px 5px 5px 5px;
    color: #fff;
    font-size: 12px;
    padding: 3px 7px 2px;
	margin:0 1px;
    text-decoration: none;
}

.pager a:hover{
    background:#999;
    color: #fff;
}

.overPagerPattern{
	padding:0 2px ;	
}

/* /Pager style */

/*---------- news&topics/詳細ページ --------------*/
.newsarea{
    width: 800px;
    margin: 5% auto;
    padding: 40px 50px;
    border-radius: 15px;
    background-color: #fff;
}


h2{
	font-size:18px;
	color:#618e34;
	margin:10px 0px 10px 0;
	font-weight:bold;
	padding:10px;
	border-bottom: 2px dotted #618e34;
    font-family: "Sawarabi Gothic";
    text-align: left;
}
#up_ymd{
	text-align:right;
	font-size:13px;
	margin:5px 10px;
}
.detailUpfile{
	margin:5px 0 35px;
	text-align:center;
}
.backORcloseBtn{
	text-align:center;
	line-height:100%;
	margin-top:15px;
}
.backORcloseBtn a{
	display:inline-block;
	padding:4px 15px;
	border:1px solid #aaa;
	color:#999;
	border-radius:6px;
	text-decoration:none;
	font-size:12px;
}
.detailUpfile img{
	max-width:100%;
	height:auto;
}
.pNav{
	font-size:12px;	
    margin-bottom: 20px;
}
.detailText{
    line-height: 1.8;
    font-size:100%;
    text-align:left;
}
.newstitle{
	text-align:center;
}

/***---------- 以下レスポンシブデザイン用 --------------***/


/* 表示領域が480px以下 */

@media screen and (max-width:480px) { 

#contentarea{width: 100%;}
    
/*---------スズキファームとは@480--------------*/
.abt-area{
    width: 100%;
    height: auto;
    display: block;
    text-align: center;
    padding: 0;
}

.inform,.textbox,.textbox2{
    width: 90%;
    margin: 0 auto;
}
    
    .inform p{font-size:13px}
    .textbox p,.textbox2 p{font-size:12px}
    .textbox h1,.inform h1{
        font-size:15px;
        letter-spacing: 2px;
    }

.inform-s,.inform-w{
    width: 100%;
}
 
.inform-s{
    margin: 0 auto;
    padding: 0;
}

.inform-w{    
    padding: 0px;
}

.imagebox{
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

    .size3{width: 30%;
        display: inline-block;
        margin: 0;
    }


.border{
    padding-bottom: 15px;
    border-bottom: 2px dotted #ef857d;
}

    
/*----------商品一覧@480--------------*/
.border-item{
    display: inline-block;
    padding: 20px 0 15px 0;
    border-bottom: 2px dotted #ff6600;
    font-size:17px;
}
    
.item-box{
    width: 90%;
    height:auto;
    margin: 0 auto;
    padding: 0;
}

    .item-img{
        width: 100%;
        float: none;
        height: auto;
        margin-top: 5%;
    }

    .detail{
        text-align: left;
        margin: auto 0;
        padding-bottom: 10%;
    }


.kentama_var{
    width: 100%;
    margin: 0; 
    padding-bottom: 30px;
}

.kentama_var figure{
    display: inline-block;
    margin: auto 0;
    width: 32%;
}
.kentama_var img{
    width:100%;
}
.kentama_var figcaption{
    line-height: 1.5;
    font-weight: bold;
    font-size: 15px;
    color:#946c45;
}

.infobox{
    width: 90%;
    margin: 0 auto;
    line-height: 1.5;
    font-size:14px;
    letter-spacing: 2px;
    text-align: left;
    border-top:1px solid #666;
    }

/*----------直売所@480--------------*/
.shop-img,.shop-item-img{
    width: auto;
    margin: 0 auto;
}
    
    .shop-img img{
        width: 48%;
        margin-bottom: 20px;
    }
    
    .shop-item-img img{
        width: 48%;
    }

.shop-ta{
    width: 90%;
    margin:30px auto;
    line-height: 1.2;
}

    .shop-ta tr{
        padding: 5% 10%;
        border-bottom: 2px dotted #d9e367;
        border-top: 2px dotted #d9e367;
    }

    .shop-ta td{
        padding: 5%;
    }
    
    
/*----------会社概要@480--------------*/
#message,#profile{
    width:95%;
    padding: 30px 0;
}

.presidentimg{
    float: none;
    width:60%;
    height:auto;
    margin:0 auto;
    padding-bottom: 5%;
}
    .presidentimg img{
        width: 100%;
    }

    .messagebox{
        width: 90%;
        margin: 0 auto;
    }

#policy{
    width: 100%;
    margin:0;
    height: auto;
    text-align: center;
    padding:50px 0;
    background-image: url(../img/bg04.jpg);
    background-repeat: repeat;
}

#policy ul{
    list-style-type: decimal;
    width: 90%;
    margin: 0 auto;
    padding-left: 10%;
}

    #policy ul li{   
        height:auto;
        font-size:15px;
        line-height: 1.8;
        letter-spacing: 1.8px;
    }
    
    #policy p{
        font-size:15px;
    }


.profile-ta{
    width: 100%;
    margin: 0 auto;
}

    .profile-ta tr{
        border-bottom: 2px dotted #a7b148;
        border-top: 2px dotted #a7b148;
    }


    .profile-ta th,td{
        padding: 5%px;
        text-align: left;
    }

/*----------お問合せ@480--------------*/
#contactarea{
    padding:30px 0 0 0;
}

#contactmain{
    display: block;
    width: 80%;
    height:auto;
    margin: 0 auto;
    padding:5%;
}

.attention{
    color:red;
    font-weight: bold;
    letter-spacing: 2px;
}

.areabox{
    width: 90%;
    margin:20px auto;
    text-align: left;
}
    .areabox a{
        color:#313131;
    }


.telormail{
    width: auto;
    font-size: 15px;
    padding: 5%;
    color: #ff6600;
    border-radius: 10px;
    border:3px solid #ff6600;
    letter-spacing: 2px;
    margin:7% 0;
    text-align: center;
}

    .left-sp{
        text-align: left;
    }

/*-- 入力エリア@480 --*/
input:not([type="submit"]):not([type="button"]),
textarea{
    width:100%;
    padding:4px 8px;
}

textarea{
    min-height: 90%;
}
    

/*----------お問合せ/確認画面@480-------------*/
.contact-ta{
    width: 100%;
    margin: 15% auto;
    text-align: left;
    line-height: 120%;
}

    .contact-ta th,td{
        padding: 5%;
    }

    .contact-ta th{
        width: 30%;
}
    .contact-ta td{
        width: auto;
    }

/*----------スタッフ募集@480--------------*/


.recruit-ta{
    width: 98%;
    margin:5% auto;
    border-collapse: separate;
    border-spacing: 3px;
    line-height: 1.5;
    letter-spacing: 1.2px;
}

    .recruit-ta tr{
        padding: 3%;
    }
    
    .recruit-ta th{
        width: 60px;
        background-color:#d9e367;
        padding: 3%;
     }

    .recruit-ta td{
        padding: 3%;
    }


.rec{
    width: 95%;
}

.rec-t{
    width: 90%;
    height: auto;
    margin:0 auto;
    color:#946c45;
}

.rec-img{
    width: 100%;
    height: auto;
    padding-top: 5%;
}

    .rec-img img{
        width: 48%;
    }
    
/*---------- news&topics/一覧ページ@480 --------------*/
.up_ymd{
    display: block;
}
.comment-li{
	display:inline-block;
	padding:3px 0;
	float:none;
	overflow:hidden;
	width:63%;/* 本文部分の幅。設置ページ合わせて変更 */
    vertical-align: top;
}
.thumbNailWrap{
	display:inline-block;
	width:30%;
	float:none;
	height:auto;
    margin: 2% 5% 0 0;
	overflow:hidden;
}
    
/*---------- news&topics/詳細ページ@480 --------------*/
.newsarea{
    width: 90%;
    margin: 5% auto;
    padding: 5%;
    border-radius: 5px;
    background-color: #fff;
}

}