@charset "utf-8";
/*topイメージ*/
.top_pc{
	margin-top: -65px;
}
.mainimage{
	background: url(../images/top/pctop_b.png) no-repeat;
	background-size: cover;
}
.top_maintxtarea{
	display: flex;
	justify-content: center;
	max-width: 1200px;
	margin: auto;
	align-items: flex-end;
	    padding: 150px 20px 0px;
}
.top_headtxt{
	font-family: Hiragino Kaku Gothic ProN, "メイリオ", sans-serif;
	font-weight: bold;
	text-align: center;
	font-size: 1.2em;
	line-height: 1.4;
	margin-bottom: 10px;
}
.top_txt{
	font-size: 3em;
	font-weight: bold;
	line-height: 1.4;
	font-family: Hiragino Kaku Gothic ProN, "メイリオ", sans-serif;
	text-align: center;
	margin-right:20px;
}
	
.top_free{
	width: 8%;
}
.top_txt_small{
	font-size: 2em;
	font-weight: bold;
	line-height: 1.4;
	font-family: Hiragino Kaku Gothic ProN, "メイリオ", sans-serif;
	text-align: center;
}
.top_main_telarea{
	display: flex;
	justify-content: space-around;
	align-items: flex-start;
	max-width: 1200px;
	margin: auto;
	padding-top: 55px;
}
.topimg_member{
	width: 65%;
}
.topimg_tel{
	width: 35%;
	margin-right: 60px;
}

@media only screen and (max-width: 1400px){
.mainimage{
	background-position: center;
}	
}

@media only screen and (max-width: 1150px){
.top_txt{
	font-size: 2.5em;
}
.top_txt_small {
	font-size: 2em;
}
}
@media only screen and (max-width: 950px){
.top_maintxtarea {
	padding: 100px 20px 0px;
}
.top_txt {
	font-size: 2.2em;
}
.top_txt_small {
	font-size: 1.6em;
}
.top_main_telarea{
	padding-top: 30px;
}
.topimg_tel {
	margin-right: 50px;
}
}
@media only screen and (max-width: 850px){
.top_txt{
	margin-right: 10px;

}
.topimg_tel {
	margin-right: 20px;
}
}
@media only screen and (max-width: 800px){
.top_txt {
    font-size: 2em;
}
.top_headtxt{
    font-size: 1.1em;
}

}
@media only screen and (max-width: 700px){
.top_txt {
    font-size: 1.8em;
}
}

@media only screen and (max-width: 599px){
.mainimage_sp{
	background: url(../images/top/sptop_b.png) no-repeat;
	background-size: cover;
	padding-top: 40px;
}
.top_headtxt_sp{
	font-family: Hiragino Kaku Gothic ProN, "メイリオ", sans-serif;
	font-weight: bold;
	text-align: center;
	font-size: 1em;
	line-height: 1.4;
	margin-bottom: 10px;
}

.top_txt_sp{
	font-size: 2em;
	font-weight: bold;
	line-height: 1.6;
	font-family: Hiragino Kaku Gothic ProN, "メイリオ", sans-serif;
	text-align: center;	
}
.top_txt_sp:after{
	content: '';/*何も入れない*/
	display: inline-block;
	width: 40px;/*画像の幅*/
	height: 40px;/*画像の高さ*/
	background-image: url(../images/top/top_free.png);
	background-size: contain;
	vertical-align: middle;
}
.top_txt_small_sp{
	text-align: center;
	font-weight: bold;
	padding: 30px 0;
    font-size: 1.2em;
    line-height: 1.4;
	font-family: Hiragino Kaku Gothic ProN, "メイリオ", sans-serif;

}
.topimg_tel_sp{
	width: 60%;
	margin: auto;
}
.topimg_member_sp{
	padding-top: 40px;
    margin-left: -20px;
}
}


/* topニュース*/
.contents_news{
	margin-top: 70px;
}
#topnews{
	max-width: 850px;
	margin: 30px auto;
	display: block;
}
.box_type1.vari1 {
	max-height: 300px;
	border-bottom: solid 1px #707070;
}
.box_type1 {
	display: flex;
	padding: 14px 18px;
}
.dlist_type1 {
	border-bottom: #e0e0e0 1px solid;
	padding-top: 10px;
	padding-bottom: 10px;
	line-height: 1.75;
}
.inline-block1{
	display: inline-block;      /* インラインブロック要素にする */
	padding:  10px 0;             /* 余白指定 */
	 font-weight: bold;
	font-size: 16px;
	    width: 150px;
}
.inline-block2{
	display: inline-block;      /* インラインブロック要素にする */
	padding: 10px 10px 10px 0px;           /* 余白指定 */
	font-weight: bold;
	font-size: 16px;
}
.inline-block3{
	display: inline-block;      /* インラインブロック要素にする */
	padding:  10px 20px;             /* 余白指定 */
	 font-weight: bold;
	font-size: 16px;
	float: right;
	letter-spacing: 0.1em;
}
.inline-block3 a{
	text-decoration: none;
	color: #3b3c3c;
	font-weight: bold;
}

@media only screen and (max-width: 599px){
.mainimage {
	margin-top: -56px;
}
.contents_news {
    margin-top: 50px;
}
.box_type1{
	padding: 14px 5px;
	flex-wrap: wrap;
	flex-direction: column;
}
.inline-block2{
	padding: 10px 10px 10px 0px;
}
}
/*今が旬！おすすめ食材*/
.contents_recommendation{
	margin-top: 70px;
}
#toprecommend{
	border-bottom: dashed;
	padding-bottom: 15px;
}
.syokuzai_area{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	border-bottom: dashed;
	padding-bottom: 40px;
	margin-top: 30px;
}
.syokuzai_area li{
	width: 23%;
}
.syokuzai_area li img{
	height: auto;
	aspect-ratio: 1/1;
	object-fit: cover;
}

@media only screen and (max-width: 599px){
.syokuzai_area{
	padding-bottom: 20px;
	justify-content: space-around;
}
.syokuzai_area li{
	width: 45%;
	margin-bottom: 15px;
}
}
/*HACとは*/
.contents_what{
	margin-top: 40px;
	background: url(../images/top/what_back.png) center center no-repeat;
	background-size: cover;
}
.contents_what::before {
	content: '';
	background-image: url(../images/top/what_back_m.png) ;
}
.contents_what:hover {
	background-image: url(../images/top/what_back_m.png);
}

.whatarea{
	max-width: 1200px;
	margin: auto;
	padding: 100px 0 40px;
}
.what_hac{
	text-align: center;
	font-size: 35px;
	font-weight: bold;
	color: #F39800;
}
.what_txt{
	font-size: 20px;
	line-height: 1.7em;
	padding: 20px 0 0;
	text-align: center;
	color: #fff;
}
.top_pagelink{
	text-align: center;
	width: 12%;
	margin: auto;
}
@media only screen and (max-width: 768px){
.whatarea{
	padding: 100px 10px 40px;
}
.what_hac{
	font-size: 2em;
}
.what_txt{
	font-size: 1.2em;
}
.top_pagelink{
	width: 22%;
}
}
@media only screen and (max-width: 599px){
.what_hac {
	font-size: 1.6em;
}
.top_pagelink {
	width: 40%;
}
}
/*私たちにできること*/
.contentes_transaction{
	margin-top: 70px;
}
	
.transactionarea{
	max-width: 1000px;
    	margin: auto;
}
.fuaturenarea_text{
	font-size: 1.4em;
	font-weight: bold;
	padding-top: 50px;
}
.transactin_cont{
	padding: 30px 0 50px;
}
.fuature {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 35px;
}
.fuature01, .fuature02, .fuature03, .fuature04 {
	margin-bottom: 25px;
	width: 48%;
	padding: 170px 5px;
}
.fuature01 {
	background: url(../images/transaction/future01.png) center center no-repeat;
	background-size: cover;
}
.fuature01::before {
	content: '';
	background-image: url(../images/transaction/future01_m.png) ;
}
.fuature01:hover {
	background-image: url(../images/transaction/future01_m.png);
}
.fuature02 {
	background: url(../images/transaction/future02.png) center center no-repeat;
	background-size: cover;
}
.fuature02::before {
	content: '';
	background-image: url(../images/transaction/future02_m.png) ;
}
.fuature02:hover {
	background-image: url(../images/transaction/future02_m.png);
}
.fuature03 {
	background: url(../images/transaction/future03.png) center center no-repeat;
	background-size: cover;
}
.fuature03::before {
	content: '';
	background-image: url(../images/transaction/future03_m.png) ;
}
.fuature03:hover {
	background-image: url(../images/transaction/future03_m.png);
}
.fuature04 {
	background: url(../images/transaction/future04.png) center center no-repeat;
	background-size: cover;
}
.fuature04::before {
	content: '';
	background-image: url(../images/transaction/future04_m.png) ;
}
.fuature04:hover {
	background-image: url(../images/transaction/future04_m.png);
}
.futuretxt01,.futuretxt02,.futuretxt03,.futuretxt04 {
	color: #fff;
	text-align: center;
}
.future_midasi {
	font-size: 1.2em;
}
.future_yajirusi {
	padding-top: 10px;
	font-size: 1.2em;
}
.future_title {
	font-weight: bold;
	line-height: 2em;
	color: #F39800;
	font-size: 2em;
}
.future_txt {
	font-size: 1.2em;
	line-height: 1.7em;
	padding-top: 30px;
}
@media only screen and (max-width: 768px){
.fuature01, .fuature02, .fuature03, .fuature04{
	width: 47%;
	padding: 120px 5px;
}
.future_midasi {
	font-size: 1em;
}
}
@media only screen and (max-width: 599px){
.fuature01, .fuature02, .fuature03, .fuature04{
	width: 90%;
	margin: 0 auto 30px;
}
}
/*お取り引きの流れ*/
.contentes_flow{
	margin-top: 70px;
}
.flow{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 35px;
}

.flow01 {
	background: url(../images/top/flow01_img.png) center center no-repeat;
	background-size: cover;
}
.flow01::before {
	content: '';
	background-image: url(../images/top/flow01_m_img.png) ;
}
.flow01:hover {
	background-image: url(../images/top/flow01_m_img.png);
}
.flow02 {
	background: url(../images/top/flow02_img.png) center center no-repeat;
	background-size: cover;
}
.flow02::before {
	content: '';
	background-image: url(../images/top/flow02_m_img.png) ;
}
.flow02:hover {
	background-image: url(../images/top/flow02_m_img.png);
}
.flow03 {
	background: url(../images/top/flow03_img.png) center center no-repeat;
	background-size: cover;
}
.flow03::before {
	content: '';
	background-image: url(../images/top/flow03_m_img.png) ;
}
.flow03:hover {
	background-image: url(../images/top/flow03_m_img.png);
}
.flow04 {
	background: url(../images/top/flow04_img.png) center center no-repeat;
	background-size: cover;
}
.flow04::before {
	content: '';
	background-image: url(../images/top/flow04_m_img.png) ;
}
.flow04:hover {
	background-image: url(../images/top/flow04_m_img.png);
}
.flow05 {
	background: url(../images/top/flow05_img.png) center center no-repeat;
	background-size: cover;
}
.flow05::before {
	content: '';
	background-image: url(../images/top/flow05_m_img.png) ;
}
.flow05:hover {
	background-image: url(../images/top/flow05_m_img.png);
}
.flow01,.flow02,.flow03,.flow04,.flow05{
	margin-bottom: 25px;
	width: 18%;
}
.flowtxt{
	color: #fff;
	padding: 80px 10px;
}
.flow_title{
	font-weight: bold;
	line-height: 2em;
	color: #F39800;
	font-size: 1.3em;
}
.flow_txt{
	font-size: 1.2em;
	line-height: 1.3em;
	padding-top: 10px;
}	
.top_contact{
	text-align: center;
	font-size: 1.4em;
	line-height: 1.5;
	margin: 30px auto 70px;
}
@media only screen and (max-width: 768px){
.flow{
	justify-content: space-evenly;
}
.flow01, .flow02, .flow03, .flow04, .flow05{
	width: 30%;
}
.flowtxt{
	    padding: 110px 10px;
}
.flow_title{
	text-align: center;
}
}

@media only screen and (max-width: 599px){
.flow01, .flow02, .flow03, .flow04, .flow05{
	width: 46%;
}
}
/*メンバー*/
.member_img {
	background: url(../images/top/member_back.png) center center no-repeat;
	background-size: cover;
	padding: 160px 0;
	margin-top: 20px;
	position: relative;

}
.member_img::before {
	content: '';
	background-image: url(../images/top/member_back_m.png) ;
}
.member_img:hover {
	background-image: url(../images/top/member_back_m.png);
}
.member_title{
	text-align: center;
	font-size: 2em;
	font-weight: bold;
	color: #F39800;
}
.member_txt{
	color: #fff;
	text-align: center;
	font-size: 1.5em;
	padding-top: 10px;
}
.memberlink{
	text-align: center;
	width: 15%;
	position: absolute;
	bottom: 8%;
	right: 5%;
}
.memberlink .moreLinkText a{
	color: #fff;
}
		
.memberlink .lineArrow{
	border-bottom:1px solid #fff;
	border-right:1px solid #fff;
}


@media only screen and (max-width: 768px){
.member_img{
	padding: 100px 0;
}	
.memberlink{
	width: 22%;
	right: 8%;
}
.member_title {
	font-size: 1.8em;
}
.member_txt {
	font-size: 1.2em;
}
}
@media only screen and (max-width: 599px){
.member_img {
    padding: 50px 0;
}
.member_title {
	font-size: 1.2em;
}
.member_txt {
	font-size: 1em;
}
.memberlink{
	position: relative;
	 width: 40%;
	margin: auto;
	right: 0;
}
.memberlink .moreLinkText a {
	color: #231815;
}
.memberlink .lineArrow {
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
}
}
@media only screen and (max-width: 390px){
.member_img {
	padding: 40px 0;
}
}
@media only screen and (max-width: 360px){
.member_img {
	padding: 35px 0;
}
}

/*EC SITE*/
.ecarea2{
	margin-top: 65px;
}










	







@media only screen and (max-width: 599px){
}