@charset "utf-8";

/*========================================================================================================================


  ◇◆◇ 通販商品一覧 ◇◆◇
  
  
========================================================================================================================*/

#l-pgHeadline .hd { background-image:url(../image/pgHeadline.png); }

.tag {
  display:inline-block;
  vertical-align:middle;
  color:#fff;
  line-height:1;
  padding:0.25em 0.5em;
  font-size:87.5%;
}

.tag-hitokoto { background-color:#e4b122; }

.tag-souryou,
.tag-cool { padding:0.5em; }
.tag-souryou { background-color:#79899b; }
.tag-cool { background-color:#4bb4d7; }


/*-----------------------------------------------------------------------------------
  error
-----------------------------------------------------------------------------------*/

.erMess img {
  width:100%;
  max-width:300px;
}

.erMess p {
  color:#ed2b28;
  font-size:118.8%;
  padding-top:1rem;
}

@media print,screen and (min-width:641px) {
  .erMess {
    padding-top:70px;
    padding-bottom:70px;
  }
}
  
@media screen and (max-width:640px) {
  .erMess {
    padding-top:2.5rem;
    padding-bottom:2.5rem;
  }
}


/*----------------------------------------------------------------------------------------------------

  一覧
  
----------------------------------------------------------------------------------------------------*/

.pdList_hd {
  background-image:url(../image/pdList_hd.png);
}

@media print,screen and (min-width:641px) {
  .pdList {
    padding-top:70px;
    padding-bottom:70px;
  }
}
  
@media screen and (max-width:640px) {
  .pdList {
    padding-top:2.5rem;
    padding-bottom:2.5rem;
  }
}

.pdList_item {
  list-style:none;
}

.pdList_item li {
  float:left;
  box-sizing:border-box;
  text-align:left;
  line-height:1.6;
}

.pdList_item li a {
  border:1px solid #ccd2d9;
  display:block;
  padding:1rem;
  box-sizing:border-box;
}

.pdList_item li a,
.pdList_item li a:visited,
.pdList_item li a:hover { color:inherit; text-decoration:none; }

.pdList_item li .photo-warp {
  display:block;
  overflow:hidden;
  position:relative;
  text-align:center;
  background-color:#fff;
}

.pdList_item li .photo {
  height:100%;
  width:100%;
  display:block;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

.pdList_item li .photo img {
  height:100%;
  width:auto;
}
  
.pdList_item li .sname {
  display:inline-block;
  color:#003e86;
  text-decoration:underline;
  font-weight:bold;
  font-size:112.5%;
  margin-right:0.75rem;
  vertical-align:middle;
}

.pdList_item li .sum { padding-top:0.75rem; }
.pdList_item li .come { padding-top:0.25rem; padding-bottom:0.25rem; font-size:93.8%; }
.pdList_item li .price { color:#ca0a14; font-weight:bold; font-size:118.8%; }

@media print,screen and (min-width:641px) {
  .pdList_item { margin-top:-10px; }
  
  .pdList_item li {
    width:380px;
    margin-left:20px;
    margin-top:20px;
  }
  
  .pdList_item li:nth-child(3n+1) { margin-left:0; }
  
  .pdList_item li a {
    -webkit-transition:background ease 0.15s;
    transition:background ease 0.15s;
  }
  .pdList_item li a:hover { background-color:#f2f4f5; }

  .pdList_item li .photo-warp { height:260px; }
  
  .pdList_item li .photo img {
    transition:transform 0.5s ease;
  }
  
  .pdList_item li a:hover .photo img {
    transform:scale(1.1);
  }
  
  .pdList_item li a:hover .sname { color:#1080b9; text-decoration:none; }
  
  .pdList_item li .photo-warp:after {
    width:61px;
    height:68px;
    content:url(../image/ika1.png);
    display:inline-block;
    position:absolute;
    right:1rem;
    bottom:-68px;
    z-index:2;
    transition:bottom 0.35s ease;
  }
  
  .pdList_item li a:hover .photo-warp:after { bottom:0; }
}

@media screen and (max-width:640px) {
  .pdList_item {
    margin-left:-0.375rem;
    margin-right:-0.375rem;
    margin-top:-0.5rem;
  }
  
  .pdList_item li {
    width:50%;
    padding-left:0.375rem;
    padding-right:0.375rem;
    margin-top:1rem;
  }
  
  .pdList_item li .photo-warp { height:0; padding-top:66%; }
  
  .pdList_item li .sum { padding-top:0.5rem; }
}


/*----------------------------------------------------------------------------------------------------

  詳細
  
----------------------------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------

  商品名　写真1　コメント1
  
-----------------------------------------------------------------------------------*/

.pdDetail1 .photo {
  background-color:#f2f4f5;
  overflow:hidden;
  position:relative;
}

.pdDetail1 .photo img {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  height:100%;
  width:auto;
}

.pdDetail1 .sum {
  text-align:left;
}

.pdDetail1 .sum h3 {
  line-height:1.4;
}

.pdDetail1 .sum .sname {
  display:inline-block;
  vertical-align:middle;
  margin-right:0.75rem;
  font-size:137.5%;
}

.pdDetail1 .sum .tag {
  font-weight:normal;
}

@media print,screen and (min-width:641px) {
  .pdDetail1 {
    padding-top:50px;
    padding-bottom:60px;
  }
  
  .pdDetail1 .photo {
    width:570px;
    float:left;
    height:440px;
  }
  
  .pdDetail1 .sum {
    width:570px;
    float:right;
  }
}

@media screen and (max-width:640px) {
  .pdDetail1 {
    padding-top:2rem;
    padding-bottom:2rem;
  }
  
  .pdDetail1 .photo {
    padding-top:80%;
    margin-bottom:1.5rem;
  }
}


/* 短いコメント
=====================================================================================*/

.pdDetail1 .sum .scome {
  position:relative;
  padding-right:33px;
}

.pdDetail1 .sum .scome p {
  min-height:74px;
  border:2px solid #ccd2d9;
  box-sizing:border-box;
  border-radius:4px;
  padding:1rem;
  line-height:1.6;
}

.pdDetail1 .sum .scome p:after {
  content:"";
  display:block;
  width:40px;
  height:74px;
  position:absolute;
  right:0;
  bottom:0;
  background:url(../image/ika2.png) no-repeat left center;
  background-size:contain;
}

@media print,screen and (min-width:641px) {
  .pdDetail1 .sum .scome { margin-top:1.5rem; }
}

@media screen and (max-width:640px) {
  .pdDetail1 .sum .scome { margin-top:1.25rem; }
}


/* コメント1
=====================================================================================*/

@media print,screen and (min-width:641px) {
  .pdDetail1 .sum .come { margin-top:1.5rem; }
}

@media screen and (max-width:640px) {
  .pdDetail1 .sum .come { margin-top:1.25rem; }
}


/*-----------------------------------------------------------------------------------

  写真2 コメント2　以降
  
-----------------------------------------------------------------------------------*/

.pdDetailS:before {
  content:"";
  width:100%;
  height:20px;
  display:block;
  background:url(../image/waveline.png) no-repeat center center;
  background-size:contain;
}

@media print,screen and (min-width:641px) {
  .pdDetailS { padding-bottom:70px; }
}

@media screen and (max-width:640px) {
  .pdDetailS { padding-bottom:2.5rem; }
}


.colBox {
  display:inline-block;
  box-sizing:border-box;
}

.colBox .come {
  text-align:left;
  padding-top:0.75rem;
  line-height:1.6;
}


/*-----------------------------------------------------------------------------------
  写真2・3　コメント2・3
-----------------------------------------------------------------------------------*/

.pdDetailS_block2 {
  display:inline-block;
  margin-left:auto;
  margin-right:auto;
  letter-spacing:-1rem;
}

.pdDetailS_block2 .colBox {
  letter-spacing:normal;
  vertical-align:top;
}

@media print,screen and (min-width:641px) {
  .pdDetailS_block2 {
    max-width:940px;
    margin-top:60px;
  }
  
  .pdDetailS_block2 .colBox {
    max-width:430px;
    margin-left:20px;
    margin-right:20px;
    letter-spacing:normal;
    vertical-align:top;
  }
  
  .pdDetailS_block2 .colBox .photo img { max-height:400px; }
}

@media screen and (max-width:640px) {
  .pdDetailS_block2 {
    margin-top:2.25rem;
    padding-left:0.375rem;
    padding-right:0.375rem;
  }
  
  .pdDetailS_block2 .colBox {
    max-width:50%;
    padding-right:0.375rem;
    padding-left:0.375rem;
  }
}


/*-----------------------------------------------------------------------------------
  写真3・4　コメント4・5
-----------------------------------------------------------------------------------*/

.pdDetailS_block1 {
  margin-left:auto;
  margin-right:auto;
}

@media print,screen and (min-width:641px) {
  .pdDetailS_block1 { width:700px; }
  .pdDetailS_block1 .colBox { margin-top:60px; }
}

@media screen and (max-width:640px) {
  .pdDetailS_block1 .colBox { margin-top:2.25rem; }
  .pdDetailS_block1 .colBox .photo img { max-height:500px; }
}


/*-----------------------------------------------------------------------------------

  購入
  
-----------------------------------------------------------------------------------*/

.buy {
  background-color:#f2f4f5;
  text-align:left;
  box-sizing:border-box;
}

.buy .tagGP { display:inline-block; margin-right:0.5rem; }
.buy .tag { margin-right:4px; }
.buy .shopping-cost { display:inline-block; vertical-align:middle; }

@media print,screen and (min-width:641px) {
  .buy { padding:25px 30px 30px 30px; }
}

@media screen and (max-width:640px) {
  .buy { padding:1.25rem 0.75rem; }
  .buy .shopping-cost { display:block; margin-top:0.5rem; }
}


/*-----------------------------------------------------------------------------------
  注文フォーム
-----------------------------------------------------------------------------------*/

.buy_itemTbl {
  width:100%;
  border-collapse:collapse;
  margin-top:1.25rem;
  background-color:#fff;
}

.buy_itemTbl tr:nth-child(n+2) {
  border-top:1px solid #e5e8ec;
}

.buy_itemTbl th,
.buy_itemTbl td {
  padding:0.5rem;
  vertical-align:middle;
}

.buy_itemTbl th.sname {
  padding-left:1rem;
  line-height:1.4;
  text-align:left;
}

.buy_itemTbl th.sname b {
  display:inline-block;
  padding-left:1.25em;
}

.buy_itemTbl th.sname b:before {
  content:"●";
  margin-left:-1.25em;
  margin-right:0.25em;
}

.buy_itemTbl td.price { color:#ca0a14; white-space:nowrap; padding-left:1rem; text-align:right; }
.buy_itemTbl td.price b { font-size:118.8%; }

.buy_itemTbl td.kosuu { white-space:nowrap; text-align:right; }
.buy_itemTbl td.kosuu input[type="text"] {
  width:4rem;
  margin-left:0.25rem;
  margin-right:0.25rem;
}

.buy_itemTbl td.kosuu input[type="text"],
.buy_itemTbl td.kosuu option {
  padding:0.25rem;
}

.buy_itemTbl td.kosuu select { margin-right:0.75rem; }

.buy_itemTbl td.cart .cartBtn {
  display:inline-block;
  border-radius:3px;
  overflow:hidden;
  vertical-align:middle;
}

.buy_itemTbl td.cart input[type="submit"] {
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  display:inline-block;
  box-sizing:border-box;
  border:none;
  margin:0;
  outline:none;
  font-size:inherit;
  text-align:center;
  text-decoration:none;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
  
  width:200px;
  height:50px;
  background:url(../image/cartBtn.png) no-repeat center center;
  background-size:cover;
}

@media print,screen and (min-width:641px) {
  .buy_itemTbl td.cart { padding:0.75rem; }
  .buy_itemTbl td.cart .cartBtn {
    background:url(../image/cartBtn_on.png) no-repeat center center;
    background-size:cover;
  }
  
  .buy_itemTbl td.cart input[type="submit"] {
    -webkit-transition:opacity 0.15s ease;
    transition:opacity 0.15s ease;
  }

  .buy_itemTbl td.cart input[type="submit"]:hover {
    opacity:0;
  }

  .buy_itemTbl th.sname {
    width:80%;
  }
}

@media screen and (max-width:640px) {
  .buy_itemTbl tr {
    text-align:right;
  }
  
  .buy_itemTbl th.sname {
    text-align:left;
    display:block;
    padding-top:1rem;
    padding-bottom:0;
  }
  
  .buy_itemTbl td.fmTd {
    display:block;
    box-sizing:border-box;
    padding:0;
  }
  
  .buy_itemTbl td.price {
    text-align:left;
    display:block;
    padding-bottom:0;
  }
  
  .buy_itemTbl td.price,
  .buy_itemTbl td.kosuu {
    padding-left:2.25rem;
  }
    
  
  .buy_itemTbl td.kosuu,
  .buy_itemTbl td.cart {
    display:inline-block;
  }
  
  .buy_itemTbl td.cart {
    padding-right:1rem;
    padding-bottom:1rem;
  }
}


/*-----------------------------------------------------------------------------------
  問合せ
-----------------------------------------------------------------------------------*/

.buy-toiawase {
  background-color:#e2f3f8;
  box-sizing:border-box;
}

.buy-toiawase_hd {
  width:100%;
  max-width:550px;
}

.buy-toiawase ul {
  list-style:none;
}

.buy-toiawase li {
  background-color:#fff;
  box-sizing:border-box;
  line-height:1;
}

.buy-toiawase li.tel a { display:inline-block; box-sizing:border-box; }
.buy-toiawase li.tel img { max-width:280px; width:100%; margin-top:0.25rem; margin-bottom:0.5rem; }

.buy-toiawase li a,
.buy-toiawase li a:visited,
.buy-toiawase li a:hover { color:inherit; text-decoration:none; }

@media print,screen and (min-width:641px) {
  .buy-toiawase { padding:35px 30px 30px 30px; }
  .buy-toiawase_hd { margin-bottom:2rem; }
  
  .buy-toiawase li {
    width:550px;
    float:right;
    padding:25px;
  }
  
  .buy-toiawase li.mail { margin-right:20px; }
  .buy-toiawase li.mail .l-btn { margin-top:0.2rem; }
}

@media screen and (max-width:640px) {
  .buy-toiawase { padding:2rem 0.75rem 1.25rem 0.75rem; }
  .buy-toiawase_hd { margin-bottom:1.75rem; }

  .buy-toiawase li.mail { padding:0 1.5rem 1.5rem 1.5rem; }
  .buy-toiawase li.mail { margin-bottom:0.5rem; }
  
  .buy-toiawase li.tel { padding:1.5rem 1.5rem 1.25rem 1.5rem; }
}


/*-----------------------------------------------------------------------------------
  売切れ
-----------------------------------------------------------------------------------*/

.buy-soldout img {
  width:100%;
  max-width:300px;
}

.buy-soldout p {
  color:#ed2b28;
  font-size:118.8%;
  padding-top:1rem;
}


/*-----------------------------------------------------------------------------------
  戻るボタン
-----------------------------------------------------------------------------------*/

@media print,screen and (min-width:641px) {
  .pgBackBtn {
    padding-top:50px;
    padding-bottom:70px;
  }
}

@media screen and (max-width:640px) {
  .pgBackBtn {
    padding-top:2rem;
    padding-bottom:2.5rem;
  }
}