@charset "UTF-8";
@import url("grid.css");

:root { /* 色変更される場合は、#以降のカラーコードを変更してください IE非対応 */
    --base-color: #000;
    --link-color: #666;
    --linkhover-color: #999;
    --border-color: #ccc;
    --white-color: #fff;
}

img {
	max-width:100%;
	height: auto;/*高さ自動*/
}
a {
    display:block;
    color: var(--link-color);
    text-decoration-line: none;
}
a:hover { 
    color: var(--linkhover-color);
}
a img:hover {
	opacity: 0.8;
}
.underline {
	border-bottom: 3px solid var(--base-color);
	padding-bottom: 0.5rem;
}
.center {
	text-align: center;
}


/*メイン画像
-------------------------------------*/
.productmainimg img {
	width: 100vw;
	margin: auto;
  	display: block;
	}

.shopbutton a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 225px;
    padding: 10px 0px 10px 25px;
    color: #e00068;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}

.shopbutton a:before, .shopbutton a:after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
}
.shopbutton a:before {
  width: 0.5rem;
  height: 0.5rem;
  left: 1.1rem;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  z-index: 2;
  transform: translateY(-50%) rotate(45deg);
  transition: all 0.3s;
}
.shopbutton a:after {
  left: 0;
  background: #e00068;
  z-index: 1;
  width: 3rem;
  height: 3rem;
  border-radius: 4rem;
  transform: translateY(-50%);
  transition: all 0.5s;
}
.shopbutton a span {
  position: relative;
  transition: all 0.3s;
  z-index: 3;
}

.shopbutton a:hover span {
  color: #fff;
}
.shopbutton a:hover:before {
  left: 2rem;
}
.shopbutton a:hover:after {
  right: 0;
  width: 100%;
}