/*===モーダル表示のためのcss　*/

.hide-area{/*モーダル表示をする場所をあらかじめ隠す*/
  display: none;
}

.modaal-fullscreen .modaal-content-container{/*full画面の色設定*/
  background: #333;
  color: #fff;
  text-align: center;
}

.modaal-fullscreen .modaal-close{/*ボタンの色、位置*/
  background:none;
  right:20px;
}

/*クローズボタンの×の色変更*/
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
  background:#666;
}

/*キャプション*/
.caption{
    display: block;
    padding: 10px 0;
}


/*========= レイアウトのためのCSS ===============*/


a .gallery-list{
  color: #333;
}

a.gallery-list:hover,
a.gallery-list:active{
  text-decoration: none;
}

/* 単体の商品紹介 */
.wrapper{
    width:100%;
    background-color:#fafafa;
}
.wrapper .container{
    max-width:1000px;
    margin:0px auto;
    padding:30px 0px;
}
/* content */
@media (min-width: 992px) {
    .wrapper .container .content {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
.wrapper .content-item {
    width:100%;
}
@media (min-width: 992px) {
    .wrapper .content-item {
        width:50%;
    }
}
.wrapper .image{
    display:block;
    max-width:100%;
    margin:0px auto;
}
.wrapper .text{
    padding:10px 50px 50px;
}
.wrapper .text .heading{
    margin:0px 0px 20px 0px;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
}

.wrapper .text p{
    font-size: 20px;
	margin-bottom: 15px;
}

.wrapper .text .subtitle{
	font-size: 16px;
	margin-bottom: 0px;
}

.wrapper .text .price{
    font-size: 28px;
}

.wrapper .text .button1{
    font-size: 20px;
}

.wrapper .text .deliv{
    font-size: 14px;
}

.wrapper .container .pic{
    width:100%;
}



/* 単体の商品紹介ここまで */