@charset "UTF-8";
/* =====================
  reset
===================== */
.main-contents {
  padding-bottom: 120px;
}
.recent-check {
  margin-top: 0;
}

/* =====================
  Grid処理
===================== */
.item-detail {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 1fr;
  -ms-grid-rows: auto auto auto auto auto 1fr;
  grid-template:
    'tag tag' auto
    'img info' auto
    'img anchor' auto
    'img tab' auto
    'img text' auto
    'img table' 1fr
    / auto 1fr;
}
.item-detail .tag {
  grid-area: tag;
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
}
.item-detail .img {
  grid-area: img;
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  -ms-grid-row-span: 5;
}
.item-detail .info {
  grid-area: info;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}
.item-detail .anchor {
  grid-area: anchor;
  -ms-grid-row: 3;
  -ms-grid-column: 2;
}
.item-detail .tab {
  grid-area: tab;
  -ms-grid-row: 4;
  -ms-grid-column: 2;
}
.item-detail .text {
  grid-area: text;
  -ms-grid-row: 5;
  -ms-grid-column: 2;
}
.item-detail .table {
  grid-area: table;
  -ms-grid-row: 6;
  -ms-grid-column: 2;
}

/* =====================
  パンくず
===================== */
.item-contents main .breadcrumb {
  position: relative;
  right: auto;
  bottom: auto;
  padding: 1em 50px;
}
.item-contents main .breadcrumb ul {
  text-align: right;
}

/* =====================
  画像
===================== */
.item-detail .img {
  width: 456px;
  margin-right: 39px;
  margin-top: 2em;
}
.item-detail .img img {
  max-height: 100%;
  width: auto;
  max-width: 100%;
}
.item-detail .main-item-image .swiper-slide {
  position: relative;
  text-align: center;
}
.item-detail .main-item-image .swiper-slide::after {
  cursor: pointer;
  content: '';
  display: block;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAEwklEQVRogdWaX0xbVRzHP7SDMMS1g8TRZUKmFG1M2pjp4IGJGxqJMRmDRDGENx/E8KLE+AJRgRf/BV9KjIlvRkMRwhYTQ2xRIDEjQRObmAZxorgpy4aiEGQwxPyac/F615b23lvovi/Nvf2dc7/fe37nnN/5/W4e9sAF+IH7gGNAGXAIKFS9rwN/AYvAZWAWiAJ/Wn26FQF3AmeAOqDSRF/bwA/ABDAOrJghYUZACXAOaNC9Yau4AXwODAG/Z0uAEzgLPGsjcSPE1T4GLgA302mQroCjwCvAPbZRTY0fgbeBX3YzdKbRWTXwOnBXlknrcRioVwIupzLcTYD4+UtAQVZopsYBoBZYVpM9IVIJeBJ4weJKZRXy7JNquZ3LRIC4zYv7TF6PE8A8cMX4RyIBdyufz99TiqmhjcRFtSHuwGFoJn73chaXSSsoVNwO6PswjkAjcDoHyWs4rPaKmHZDPwIlapPKdbQorrcIeDpHXccI4fiMdk8TIJHj4zlBLz08pjjvCDhtdbPy+/1Fw8PD/tnZ2VPb29tPya9cy/0sCCjQ5qo2iZ/X+1Wm6OrqKg+FQjU+n89VWload0P5lev29vbjW1tb65OTk5ZjfwMknB9zqMPIvVbI9/b2ymGG/v7+WCAQGM/Ly/tUfuVa7sv/YmezADmDlMgG8YhaXzNGWVlZ/tzc3Jni4uL87u7uaF9f34Kxj/r6elc4HD61urq66fV6xxcXFzdtFPGOU03e+8207unpOV5XV3dkZGRkoaOj4/tENvPz8zf8fn9hIBAocTqdm2NjY39Ypv0frjnUGdYUKioq7pB2kUjkWqr2oVDoV3T2NuKYQx1WTKG8vDy+wiwtLaXlFpq9jTgqAtxm+5uamoq/+erqalcqO6/XW6S3txFuEXDQbH/T09PxpbGlpaVCJnQyu7a2tgq9vY04aIxGM8Lg4OD1mZmZ6x6PpygYDPqMIuRaNrOqqiqX2Im9zQJuyjIasjIKQnJiYqJGSMpSOTQ0tLC8vLzhdrsLGhoaPCJO7GSlGhgY+DkSidg5Cisi4H3AY6UXESEj0NTUdMtmJcRllQoGgydEYGNj40UbRfwmAl5TRzbLkLintrbWVVlZWST+HovF1qLR6Jr0K64kAm0W8bUIeE4lrLKOLIg4L5M44Q6aDTQ3N0fFpST0GB0drZEww+JjLjlUlnh7P0S0traa3kQV52+d6ox50ko4nSlCodBVCbE7OzsvWehG2o5qeZ+zai7cTvhABGgb2RfAxm1EfkPVFHaOlJIsCu8vp4wQ1hJc+lBiUM2HXMe64hqHPrH1N7AFPJjjAj4EvtEujMHcBVVcyFUIt/N6bkYBUtZ5A1jLQQHiIW8aS0+JstMrqjJSm0Pp9X8U+Zjxj2T1gStqlj+cfW5p4T3gy0SGqSo0UhGRDMJD+zgS8uYHgM+SGexWI5Pa1E9KxF4XPGS5fCvZm9eQTpVSqoRfAQ+o/PxeQMpJrwLf7fasdASgJrbsfpI+8WXQLlNIiPAR8K6qTu4KM75dqj41eMLmTw3kBX0CZHTwtzI5D6kU96MqOWzmYw8JicXHJZj8X/EuXdi1ukhyTDLUVarKeURlvfWf28jx8araY+QUKAeptNwkKYB/ASqlZnd2dlUNAAAAAElFTkSuQmCC');
  position: absolute;
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  right: 18px;
  bottom: 18px;
  transition: all 250ms ease 0s;
  pointer-events: none;
}
.item-detail .main-item-image .swiper-slide:hover::after {
  opacity: 0.7;
}
.item-detail .main-item-image .swiper-slide a {
  display: block;
}
/* コントローラー */
.item-detail .img .swiper-controller {
  display: none;
}
/* ページャー */
.item-detail .img .swiper-pagination {
  display: none;
}
/* サムネイル */
.item-detail .swiper-thumb {
  margin-top: 2em;
}
.item-detail .swiper-thumb .swiper-wrapper {
  flex-wrap: wrap;
  justify-content: space-between;
}
.item-detail .swiper-thumb .swiper-wrapper::before,
.item-detail .swiper-thumb .swiper-wrapper::after {
  content: '';
  display: block;
  width: 105px;
  height: auto;
}
.item-detail .swiper-thumb .swiper-wrapper::before {
  order: 1;
}
.item-detail .swiper-thumb .swiper-slide {
  cursor: pointer;
  width: 105px;
  height: 105px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.item-detail .swiper-thumb .swiper-slide.swiper-slide-thumb-active {
  border: 2px solid #878787;
}
.item-detail .swiper-thumb .swiper-slide:nth-child(n + 5) {
  margin-top: 12px;
}

/* =====================
  info
===================== */
.item-detail .info {
  margin-top: 2em;
  margin-bottom: 1em;
}

/* 受注商品 */
.item-detail .is-order {
  font-family: var(--hirakaku);
  font-weight: normal;
  color: var(--pink);
  font-size: 13px;
}
/* 商品名 */
.item-detail .headtext {
  word-break: break-all;
  font-size: 25px;
  line-height: var(--lhS2);
}
/* 価格 */
.item-detail .price {
  display: flex;
  margin-top: 1.1em;
  font-size: 20px;
  font-family: var(--hirakaku);
}
.item-detail .price .unit {
  display: flex;
  align-items: center;
}
.item-detail .price .unit.is-sale {
  text-decoration: line-through;
}
.item-detail .price .unit + .unit {
  margin-left: 0.5em;
}
.item-detail .price .unit.sale {
  color: var(--pink);
}
.item-detail .price .unit .value {
  word-break: break-all;
  font-weight: bold;
}
.item-detail .price .unit .value::after {
  content: ' 税込';
  font-weight: normal;
  font-size: 14px;
  margin-left: 4px;
}
.item-detail .price .unit.sale .text {
  display: inline-block;
  font-weight: normal;
  font-size: 13px;
  color: #fff;
  padding: 1px 10px;
  vertical-align: middle;
  margin-left: 0.5em;
  background: var(--pink);
}

/* =====================
  anchor
===================== */
.item-detail .anchor {
  border-top: 1px dotted #acacac;
  border-bottom: 1px dotted #acacac;
  padding: 2.3em 0;
  margin-bottom: 1em;
}
/* count */
.item-detail .count-wrapper {
  display: flex;
  align-items: center;
}
.item-detail .count {
  margin-left: 1em;
}
.item-detail .countupdown {
  display: inline-block;
  width: 32px;
  vertical-align: middle;
  height: 32px;
  background: #f1f1f1;
  border-radius: 50%;
  position: relative;
  transition: all 250ms ease 0s;
}
.item-detail .countupdown:hover {
  background: var(--purple);
}
.item-detail .countupdown::before {
  pointer-events: none;
  font-family: var(--icon);
  font-size: 19px;
  font-weight: bold;
  color: #929293;
  display: block;
  position: absolute;
  line-height: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 250ms ease 0s;
}
.item-detail .countupdown[data-type='increment']::before {
  content: 'add';
}
.item-detail .countupdown[data-type='decriment']::before {
  content: 'remove';
}
.item-detail .countupdown:hover::before {
  color: #fff;
}
.item-detail .countupdown + .countupdown {
  margin-left: 0.5em;
}
/* select */
.item-detail .option {
  display: table;
  width: auto;
  border-collapse: collapse;
}
.item-detail .option-unit {
  display: table-row;
  vertical-align: middle;
}
.item-detail .option-unit .head,
.item-detail .option-unit .body {
  display: table-cell;
  padding-bottom: 1.2em;
  vertical-align: middle;
}
.item-detail .option-unit .head {
  font-size: 14px;
  font-family: var(--hirakaku);
  white-space: nowrap;
  padding-left: 8px;
}
.item-detail .option-unit .body {
  padding-left: 1em;
  width: 100%;
}
.item-detail .option-unit .body input[type='tel'],
.item-detail .option-unit .body select {
  background-color: #fff;
  transition: all 250ms ease 0s;
  border-radius: 4px;
  border: 1px solid #d8d8d8;
  padding: 0.75em 1em;
  font-size: 14px;
  font-family: var(--hirakaku);
  font-weight: normal;
}
.item-detail .option-unit .body input[type='tel'] {
  width: 91px;
  text-align: right;
}
.item-detail .option-unit .body input[type='tel']:focus,
.item-detail .option-unit .body select:focus {
  border: 1px solid var(--purple);
}
.item-detail .option-unit .body select {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAICAYAAADN5B7xAAAAtklEQVQYlXXQMUuCURSH8d8rLi1uLuIQEbT1OYTARfwCrg01FPcD1C6Eiy0itLQptOXU2hI42hgtTUEUuCQH7guvgs947vM/95xTpJTqOMPcfk7xh1UNj5jhYo9+ggVecBSBJ/xjiMGOfJjlJt7wEYEJLlHgHv0st/CMdu7ewzrmD+7QwA0ecIArHOMVXfyGWAaC2xy6xjTXlvkg36UUI1VJGOfCOzr4qgrVH4JY/hw/GOFz6xUbdE0hd8CNfIEAAAAASUVORK5CYII=');
  background-repeat: no-repeat;
  background-size: 12px 8px;
  background-position: 95% center;
  padding: calc(0.75em + 2px) 1em;
  padding-right: 2.5em;
  width: 100%;
}

/* submit */
.item-detail .submit {
  margin-top: 0.5em;
  padding-left: 5px;
}
.item-detail .submit button {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #fff;
  font-family: var(--hirakaku);
  font-weight: normal;
  font-size: 16px;
  background: var(--sky);
  border-radius: 4px;
  outline: none;
  padding: 16px 60px;
  transition: all 250ms ease 0s;
}
.item-detail .submit button::after {
  content: '';
  width: 15px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAUCAYAAABSx2cSAAABRUlEQVQ4jZWTPS9EURCGn10iEt/xlWBRiEJLSb2JVkGi3Eoj0fgfSv9ArSVRqFEKlc/QCGuRILwyu+8mm90rufdNbmbm3nnmnDN3DpKSng5JB6rpVNJgUt5/8KHBTUnvki7SwnmDJceLjoeac/O0qtNvLm3vbYebM5PgHttn2yfb7pZMb2FW0pmksqQXb/PDfsVx/du5pIXgctWDw60r7wIzwAqwA3wCP8A2cAScAKvACNBVXzm0br/ouLE5oS37S4778g2NqJ+xDdhvOt0eULZfsZ2MSvOuNPfPP29+Bpy/HCsXXOkmofNJih1+x8r56vK1xrylhEOvwFTA0w6yKPILAY83NCutHoMLeAJ4yAjfAWMBjzbMbxa4P+CYluuM8BXQG3BchBi9LDqO29duouQiuRQV4jIUa560JunLU5NWv5I2/gAUtIk5xuZxUAAAAABJRU5ErkJggg==');
  position: absolute;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 19px;
}
.item-detail .submit button:hover {
  background: var(--skyHover);
}

/* =====================
  tab
===================== */
.item-detail .tab {
  display: none;
}

/* =====================
  text
===================== */
.item-detail .text {
  margin-top: 0.8em;
  margin-bottom: 0.8em;
}
.item-detail .text p {
  line-height: var(--lh);
  font-size: 14px;
  font-family: var(--hirakaku);
  font-weight: normal;
  word-break: break-all;
  line-break: anywhere;
}

/* =====================
  share
===================== */
.item-detail .share {
  display: flex;
  margin-top: 2em;
  align-items: center;
}
.item-detail .share::before {
  text-align: center;
  display: inline-block;
  pointer-events: none;
  content: 'この商品をシェア';
  font-size: 13px;
  font-family: var(--hirakaku);
  font-weight: normal;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  background: #fff;
  padding: 2px 14px;
}
.item-detail .share-icon {
  margin-left: 0.7em;
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.item-detail .share-icon + .share-icon {
  margin-left: 0.75em;
}
.item-detail .share-icon[data-type='twitter'] {
  background-image: url('../../img/icon/twitter-s.png?c415b578-4222-5722-a783-cda53bd4a589');
  width: 19px;
  height: 16px;
}
.item-detail .share-icon[data-type='facebook'] {
  background-image: url('../../img/icon/facebook-s.png');
  width: 16px;
  height: 17px;
}
.item-detail .share-icon[data-type='line'] {
  background-image: url('../../img/icon/line-s.png');
  width: 18px;
  height: 18px;
}

/* =====================
  表
===================== */
.item-detail .table {
  margin-top: 1.7em;
}
.item-detail .table .table-head {
  font-weight: bold;
  font-family: var(--hirakaku);
  font-size: 15px;
}
.item-detail .table .u-table {
  margin-top: 0.75em;
  font-size: 14px;
  font-family: var(--hirakaku);
}
.item-detail .table .u-table th,
.item-detail .table .u-table td {
  padding: 0.65em 1em;
}
.item-detail .table .u-table th {
  width: 106px;
  font-weight: bold;
}
.item-detail .table .u-table td {
  font-weight: normal;
  background: #fff;
  line-height: var(--lh);
}

/* =====================
  artilce2
===================== */
.item-contents main article[data-id='2'] {
  margin-top: 2em;
  padding-bottom: 80px;
}
.item-contents main article[data-id='2'] h3 {
  font-size: 28px;
}
.item-contents main article[data-id='2'] .unit {
  margin-top: 3em;
}

/* =====================
  artilce3
===================== */
.item-contents main article[data-id='3'] {
  margin-top: 7em;
  padding-left: 0;
  padding-right: 0;
  padding-top: 80px;
  padding-bottom: 124px;
  background: #f7f6f4;
}
.item-contents main article[data-id='3'] h3 {
  text-align: center;
  font-size: 28px;
}
.item-contents main article[data-id='3'] .u-categorybox {
  margin-top: 2em;
}