body {
  height: 100%;
  width: 100vw;
  margin: 0;
/*   background: -webkit-radial-gradient(ellipse farthest-corner at center top, #f39264 0%, #f2606f 100%); */
  background: radial-gradient(ellipse farthest-corner at center top, #f39264 0%, #f2606f 100%);
  background: radial-gradient(ellipse farthest-corner at center top, #ffffff 0%, #ffffff 100%);
  color: #fff;
  font-family: 'Open Sans', sans-serif;
}








.account-containerdown {
  display: flex;
  align-items: center;
  margin-right: 40px;
  cursor: pointer;
}

.cart-desc {
  margin-left: 10px;
  font-size: 13px;
}







/*--------------------
Products Container
--------------------*/

.products-containerdown {
  width: 100%;
  min-height: 400px;
  margin-left: 80px;
  display: flex;
  flex-wrap: wrap;
}

.shop-card {
  margin: 10px;
  width: 250px;
  height: 370px;
  background: #f5f5f5;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .3);
  border-radius: 5px;
  padding: 37px;
  text-align: center;
  font-family: 'Open Sans Condensed', sans-serif;
}

.shop-card .title {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 25px;
  color: #23211f;
  margin-bottom: 5px;
}

.shop-card .desc {
  font-size: 15px;
  opacity: .8;
  margin-bottom: 3px;
  color: #23211f;
}

.product {
  margin: 10px 0;
}

.product img {
  width: 70%;
}

.cta {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.price {
  color: #28406b;
  font-size: 22px;
  font-weight: 900;
  transition: color .3s ease-in-out;
}

.button {
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  color: #28406b;
  padding: 12px 18px;
  cursor: pointer;
  transition: all 300ms;
  line-height: .95;
  border: none;
  background: none;
  outline: none;
  border: 1px solid #28406b;
  border-radius: 20px;
}

.button:hover {
  background: linear-gradient(135deg, #3d61a1, #28406b);
  color: #fff;
  border: none;
}

.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 400px;
  height: auto;
  margin-left: -200px;
  margin-top: -150px;
  background-color: #fff;
  padding: 25px;
  border-radius: 5px;
  z-index: 10;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
}

.active {
  display: block;
}


/* ここからタイトル */

p {
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #1d1d1d;
}

.containertitle {
  margin: 3% auto;
  background: white;
  border-radius: 15px;
}

.boxtitle {
  height: 100px;
  margin-bottom: 20px;
  border-radius: 15px;
}

.boxtitle p {
  line-height: 100px;
  font-size: 2em;
  color: white;
}

/* Gradient 1 */
#g1 {
  background: linear-gradient(90deg, #69b7eb, #b3dbd3, #f4d6db);
}

/* Gradient 2 */
#g2 {
  background: linear-gradient(90deg, #cfecd0, #ffc5ca);
}

/* Gradient 3 */
#g3 {
  background: linear-gradient(90deg, #f598a8, #f6edb2);
}

/* Gradient 4 */
#g4 {
  background: linear-gradient(90deg, #ee5c87, #f1a4b5, #d587b3);
}

/* Gradient 5 */
#g5 {
  background: linear-gradient(90deg, #b9deed, #efefef);
}

/* Gradient 6 */
#g6 {
  background: linear-gradient(90deg, #aea4e3, #d3ffe8);
}

/* Gradient 7 */
#g7 {
  background: linear-gradient(90deg, #faf0cd, #fab397);
}

/* Gradient 8 */
#g8 {
  background: linear-gradient(90deg, #cfecd0, #a0cea7, #9ec0db);
}


/* ここからmenu bar */

@import url(https://fonts.googleapis.com/css?family=Raleway);
 #bar {
	 position: absolute;
	 left: 200px;
	 top: 10px;
}
 .menuItem {
	 position: relative;
	 width: 150px;
	 height: 30px;
	 text-transform: uppercase;
	 font-size: 16px;
	 padding-top: 12px;
	 padding-bottom: 2px;
	 background-color: #ffffff;
	 float: left;
	 text-align: center;
	 font-family: 'Raleway', sans-serif;
	 cursor: pointer;
}
 #slider {
	 background-color: red;
	 height: 5px;
	 width: 150px;
	 opacity: .8;
	 margin-left: 0px;
	 border-radius: 1px;
}