/*================================ */
/* 基本CSS*/
/*================================ */

#fresh-vegetables *,
#fresh-vegetables *::before,
#fresh-vegetables *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body,
#fresh-vegetables h1,
#fresh-vegetables h2,
#fresh-vegetables h3,
#fresh-vegetables h4,
#fresh-vegetables h5,
#fresh-vegetables h6,
#fresh-vegetables ul,
#fresh-vegetables ol,
#fresh-vegetables dl,
#fresh-vegetables li,
#fresh-vegetables dt,
#fresh-vegetables dd,
#fresh-vegetables p,
#fresh-vegetables div,
#fresh-vegetables span,
#fresh-vegetables img,
#fresh-vegetables a,
#fresh-vegetables table,
#fresh-vegetables tr,
#fresh-vegetables th,
#fresh-vegetables td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

#fresh-vegetables header,
#fresh-vegetables footer,
#fresh-vegetables nav,
#fresh-vegetables section,
#fresh-vegetables article,
#fresh-vegetables main,
#fresh-vegetables aside,
#fresh-vegetables figure,
#fresh-vegetables figcaption {
  display: block;
}

#fresh-vegetables ol,
#fresh-vegetables ul,
#fresh-vegetables li {
  list-style: none;
  list-style-type: none;
}

#fresh-vegetables img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

#fresh-vegetables a {
  color: inherit;
  text-decoration: none;
  font-size: 1.25rem;
}

#fresh-vegetables a:hover {
  opacity: 0.7;
}



/*================================ */
/* スマホ切り替え*/
/*================================ */

.smp{display: none;}




/*================================ */
/* 看板*/
/*================================ */
.kanban,.item_lineup{position: relative;}


/* ポイントアイコン*/
.point_20{      
  display: flex;
  justify-content: center;
  align-items: center;  position: absolute;
  background-color: #ffe758;
  width: 150px;
  height: 150px;
  border-radius: 80px;
  top: 35px;
  left: 42px;
  overflow: hidden;      z-index: 0;
}

.point_20 ::after{ content: '';
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 145%;
  height: 65%;
  background: #fff2a6;
  transform: skewY(333deg);
  transform-origin: top right;
}

.point_20 p{ 
  text-align: center; 
  font-weight: 600;
}
.point_20 p br{ 
  display: block;
  content: "";
  margin: -10px 0;
}

.red{  
  color: #b80606!important; 
  font-size:2rem!important;
}

/*================================ */
/* メイン*/
/*================================ */

#fresh-vegetables {
  margin: 0 auto;
  font-size: 22px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: #222222;
  width: 900px;
  overflow: hidden;
}

#fresh-vegetables img {width: 100%;}

#fresh-vegetables section{
  display: flex;
  flex-direction: column;
  align-items: center;margin-bottom:5% ;
  width: 100%;
}

/*見出し*/
#fresh-vegetables h2{text-align: center;font-size: 2.3rem; color: #147f68; }
#fresh-vegetables h3{text-align: center;font-size: 1.5rem; color: #2c2c2c;}
#fresh-vegetables h4{text-align: center;font-size: 1.2rem; color: #2c2c2c; margin-bottom: 1%;}
#fresh-vegetables .lineup{    
  text-align: center;
  font-size: 2rem;
  color: #fff;
  margin: 5% auto 0%;
  background-color: #147f68;
  width: 95%;
}


/*================================ */
/*舞台ファーム*/
/*================================ */
#kodawari{    
  z-index: 0;
  position: relative;
}
#kodawari::before{ 
  content: '';
  background-image: url(../../IMAGE/fresh-vegetables/background_image.webp);
  opacity: 0.5;
  background-size: cover; 
  background-repeat: no-repeat;  
  filter: blur(10px);
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  z-index: -1;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 0%, #000 60%, transparent 100%);
}

#kodawari ul,#lettuce ul,#cut_vegetables ul{ 
  display: flex;
  margin: 2% auto;
  width: 95%;
  justify-content: center;
  align-items: center;
}

#kodawari ul li,#lettuce .photo li,#recipe .photo li{
  margin: 1.5%; 
  border-radius: 15px; 
  overflow: hidden;
}

.kodawari_text{  
  width: 100%; 
  margin: 0 auto;
}
.kodawari_text ul{    
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  width: 100%;
  margin: 0 auto!important;
}
.ex{border-radius: 0px!important; text-align: center; position: relative;}

.rice-toge:before {
  position: absolute;
  left: 50px;
  top: 7px;
  content: "";
  width: 1px;
  height: 76%;
  background: #000;
  border-radius: 3px;
  transform: rotate(-25deg);
}
.rice-toge:after {
position: absolute;
content: "";
right: 50px;
top: 7px;
width: 1px;
height: 76%;
background: #000;
border-radius: 3px;
transform: rotate(25deg);
}
.kodawari_text li{width: 50%;}
.kodawari_text .image{width: 45%!important;}


.kodawari_text .ex,.kodawari_text_hunter .ex p{     
  text-align: left !important;
  font-size: 0.9rem !important;
  font-weight:800;
  letter-spacing: 2.5px;
  line-height: 2;
  color: #181f0dc5;
}
.kodawari_text_hunter .ex .lettuce_hunter{     
  text-align: left !important;
  font-size: 0.9rem !important;
  font-weight:800;
  letter-spacing: 2.5px;
  line-height: 1.5;
  color: #1b1b1bc5;    
  margin-bottom: 2%!important;
}

.kodawari_text_hunter .ex .lettuce_hunter_ceo{     
  text-align: left !important;
  font-size: 1.2rem !important;
  font-weight:800;
  letter-spacing: 2.5px;
  line-height: 2;
  color: #1b1b1bc5;
}


.kodawari_text_hunter{
  background-color: #ffffffc9; 
  width: 94%; 
  border-radius: 15px; 
  box-shadow:6px 6px 17px 0px rgb(0 0 0 / 7%);
}
.kodawari_text_hunter ul{margin: 2% 3% 3% 7% !important;}
.kodawari_text_hunter .butai_logo{ width: 50%!important;}

/*商品まわり*/
#fresh-vegetables .item_wrap {    
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin:1% auto;
  width: 100%;
}

#fresh-vegetables .item_wrap2 {    
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item_lineup_inner{ 
  background-color: #fff;  
  box-shadow: 2px 3px 10px -1px #44444475;
  border-radius: 10px;  
  width: 96%;  
  margin: 0 auto!important;
  padding-bottom: 1% !important;
}

#fresh-vegetables dd{    
  padding: 9%;
}

#fresh-vegetables .item_wrap > li{  
  width: calc(95% / 4);
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  box-sizing: border-box;
  background-color: #fff;
  margin: 1% 0.5%;
  border-radius: 10px;
}

#fresh-vegetables .item_wrap2 > li{  
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1%;    
  width: 34%;
}
#fresh-vegetables .item_wrap2 > li.all div{  width: 100%;}
#fresh-vegetables .item_wrap2 > li.all p{ 
  font-size: 1.2rem; 
  border: 1px solid #2e2e2e; 
  border-radius: 20px;
}

#fresh-vegetables .item_wrap > li dt h3{margin: 0.5rem 0;}

.item_lineup{ 
  background-color: #147f68;
  padding: 2% 0 !important;
  margin: -5% auto 6% !important;
}

#fresh-vegetables .item_wrap2 > li dt{  
  display: flex;
  justify-content: center;
  margin-bottom: -1%;
  flex-wrap: nowrap;
  width: 100%;
}
#fresh-vegetables .item_wrap > li dd p,#fresh-vegetables .item_wrap2 > li dd p{
  font-size: 0.9rem;    
  line-height: 1rem;
  margin: 0.5rem 0;
}

/*価格*/
#fresh-vegetables .price{  
  font-size: 2rem;
  color: #cd2b1f;
}
#fresh-vegetables .price .spesicalprice,#fresh-vegetables .price .intax{display: none;}


#fresh-vegetables li.all > div .auto-cart-in,.auto-cart{ 
  position: relative;
  width: 100%;
  height: 2.5rem;
  margin: 1% 0%;
  background-color: #cd2b1f;
  text-align: center;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff !important;
}

#fresh-vegetables li.all > div .auto-cart-in:after,.auto-cart:after{    
  position: absolute;
  display: inline-block;
  vertical-align: middle;
  content: "";
  width: 6px;
  height: 6px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  top: 0;
  bottom: 0;
  right: 8%;
  margin: auto;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transition: all .3s ease 0s;
}

#fresh-vegetables li.all > div .shosai{ 
  position: relative;
  width: 100%;
  height: 2.5rem;
  margin: 1% 0%;
  background-color: #2c2c2c;
  text-align: center;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff !important;
}

#fresh-vegetables li.all > div .shosai:after{    
  position: absolute;
  display: inline-block;
  vertical-align: middle;
  content: "";
  width: 6px;
  height: 6px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  top: 0;
  bottom: 0;
  right: 8%;
  margin: auto;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transition: all .3s ease 0s;
}

#fresh-vegetables .right_img{ border-radius: 115px 0 0 115px;}
#fresh-vegetables .left_img{ border-radius:0 115px   115px 0;}


.point_attention{ 
  text-align: center; 
  font-weight: 500; 
  font-size: 0.5rem!important; 
  color: #8f8f8f; 
  letter-spacing: 1.2px;}
.point_20.item{      display: flex;
  justify-content: center;
  align-items: center;  position: absolute;
  background-color: #ffe758;
  width: 100px;
  height: 100px;
  border-radius: 80px;
  top: 35px;
  left: 100px;
  overflow: hidden;     
  z-index: 0
}
.point_20.item p{  
  text-align: center; 
  font-weight: 600; 
  font-size: 0.9rem!important;
}
.point_20.item p span{  
  text-align: center; 
  font-weight: 600; 
  font-size: 1.5rem!important;
}
.point_20.item p br{   
  display: block;
  content: "";
  margin: -8px 0;
}



/*================================ */
/*つみたてサラダ、カット野菜*/
/*================================ */

#lettuce .title,#cut_vegetables .title,#recipe .title{
  width: 100%;    
  padding: 0.5% 0 0;
} 

#lettuce .title h2,#cut_vegetables .title h2,#recipe .title h2{
  color: #ffffff;
  background-color: #147f68; 
  border-radius: 15px 15px 0px 0px ;
}

#lettuce,#cut_vegetables{
  text-align: center;
  width: 95%; 
  margin: 0 auto;
}

#lettuce .title,#cut_vegetables .title  ,#recipe .title{border-bottom: 3.5px solid #147f68;}
#lettuce .title_img,#cut_vegetables .title_img  {
  width: 95%;
  margin:1% auto;  
}
#lettuce .lettuce_img,#cut_vegetables .cut_vegetables_img   {
  width: 78%
  ;margin: 0 auto -3%; 
}
.item_inner{  background-color:#0000000a ;}

.lettuce_text{  width: 100%; margin: 0 auto;}
.lettuce_text ul{    
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  width: 100%;
}

.lettuce_text li{width: 50%;}
.lettuce_text .image {
    width: 45%!important;
    margin-bottom: 1% !important;
}
  .lettuce_text .ex { 
    text-align: left !important;
    font-size: 0.9rem !important;
    font-weight: 300;
    letter-spacing: 1.5px;
    line-height: 2;
    margin: 0% 2% !important;
  }





/*================================ */
/*レシピ一覧*/
/*================================ */
#recipe {text-align: left;width: 95%; margin: 0 auto;}
#recipe ul{
  display: flex;
  width: 100%;
  justify-content: center;
}

#sdgs span,.lettuce_text span {
  font-weight: 700; 
  color: #147f68;
  letter-spacing: 1.5px;
}

#recipe .lettuce_text{ 
  padding: 0% 3%;
}

#recipe .recipe_name{
  font-size: 1.5rem;
  font-weight: 600;
  color: #147f68;
  border-bottom: 3px solid;    
  border-top: 3px solid;
  line-height: 1.3; 
  margin-bottom:3% ; 
  padding: 1% 0;
  text-align: center;
}

#recipe .recipe_name2{
  color: #2e2e2e; 
  border-bottom: 1px solid; 
  line-height: 1.3; 
}
.lettuce_text.recipe div{margin: 6% auto!important;}
.lettuce_text.recipe .photo{margin: 2% auto -2%!important;}

.rice{display: flex; margin-bottom: 1%!important; width: 100%;}
.rice li{margin:1%!important;border-radius: 15px ; overflow: hidden;}


/*================================ */
/*sdgs*/
/*================================ */
#sdgs{margin:15% 0 ;}
#sdgs .title_img{margin:-7% 0 ;}
#sdgs .ex{ 
  text-align: center!important;    
  font-size: 0.9rem!important; 
  font-weight: 300; 
  letter-spacing: 1.5px; 
  line-height: 1.5;
  margin: 2% 0 5%; 
}

#sdgs ul{
  display: flex;  
  flex-wrap: wrap;
  justify-content: center;    
  width:73%;
}
#sdgs ul li{     width: calc(96% / 3);
  height: 208px;
  overflow: hidden;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  margin: 1% 0.5%;

}

.circle {
  display: inline-grid;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  text-align: center;
  align-content: center;   
  position: relative; z-index: 0;
}

.circle ::after{ 
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 145%;
  height: 65%;
  background: #ffffff8f;
  transform: skewY(333deg);
  transform-origin: top right;
}

.circle.yellow {
  color: #f5a200;
  background-color:#fff9ee; 
  border: 1px solid #f5a200 !important;
}
.circle.blue {
  color: #003067;
  background-color:#edf8ff; 
  border: 1px solid #003067 !important;
}
.circle.red {
  color: #e5001e;
  background-color:#ffeef1; 
  border: 1px solid #e5001e !important;
}

.circle.deepred {
  color: #c60f28;
  background-color:#ffebee; 
  border: 1px solid #c60f28 !important;
}
.circle.skyblue {
  color: #00a6d9;
  background-color:#e8faff; 
  border: 1px solid #00a6d9 !important;
}

.circle.green {
  color: #00973b;
  background-color:#daf1e3; 
  border: 1px solid #00973b !important;
}

.circle p{ font-size: 0.9rem !important;
  font-weight: 100;
  line-height: 1.5;
  letter-spacing: 1px;}


/*================================ */
/*ナビ*/
/*================================ */
#navi{
  z-index: 1;
  position: fixed;
  width: 900px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0.5em 0 0.5em 0;
}
#navi ul{     
  display: flex;
  height: 49px;
  position: relative;
  justify-content: center;
  align-items: center;
  width: 95%;
  margin: 0 auto;
  background-color: #262626e5;
  border:1px solid #fff;
}

#navi ul li{    
  width: 19%;
  margin-left: 4%;
}
#navi h2{ 
  color: #ffffff!important; 
  font-size: 1.25rem;
  padding: 0% 2%; 
  border-radius: 0px 15px 15px 0px ;
}
#navi li:after{    
  position: absolute;
  display: inline-block;
  vertical-align: middle;
  content: "";
  width: 6px;
  height: 6px;
  border-bottom: 2px solid #ffffff ;
  border-right: 2px solid #ffffff ;
  top: 0;
  bottom: 0;
  margin: auto -1%;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transition: all .3s ease 0s;
}

.fixed{position: fixed;top: 0;}
.none{display: none;}