﻿@charset "utf-8";

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

  Parts

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

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

  Button
  
----------------------------------------------------------------------------------------------------*/

.p-btn {
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  display:inline-block;
  vertical-align:middle;
  border:none;
  margin:0;
  outline:none;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  line-height:1.4;
  font-weight: bold;
  position:relative;
  overflow:hidden;
  padding:1em 1.2em;
  border-radius: 2em;
}

.ua-pc .p-btn {
  transition:border 0.15s ease-out, background 0.15s ease-out, color 0.15s ease-out;
}

.p-btn[btn-size="S"] { padding:0.3em 0.8em 0.5em 0.8em; }

.p-btn,
.p-btn:visited,
.p-btn:hover,
.ua-pc .p-btn:hover,
.p-btn a,
.p-btn a:visited,
.p-btn a:hover,
.ua-pc .p-btn a:hover { color:inherit; text-decoration:none !important; }


/*--------------------------------------------------------------------------------
  アイコン
--------------------------------------------------------------------------------*/

/* 矢印（テキスト有）
----------------------------------------------------------------------*/

.p-btn--txt .p-arrow {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  margin-top:-1px;
}

.p-btn--txt:not([arrow="prev"]) { padding-right:3em; padding-left:3em; }
.p-btn--txt[arrow="prev"] { padding-left:3em; padding-right:3em; }

.p-btn--txt:not([arrow="prev"]) .p-arrow { right:1em; }
.p-btn--txt[arrow="prev"] .p-arrow { left:1em; }

.ua-pc .p-btn--txt:not([arrow="prev"]):hover .p-arrow,
.ua-pc .p-btn--txt:not([arrow="prev"]) a:hover .p-arrow { right:0.8em; }
.ua-pc .p-btn--txt[arrow="prev"]:hover .p-arrow,
.ua-pc .p-btn--txt[arrow="prev"] a:hover .p-arrow { left:0.8em; }

.p-btn--txt[btn-size="S"]:not([arrow="prev"]) { padding-right:2em; padding-left:1.4em; }
.p-btn--txt[btn-size="S"][arrow="prev"] { padding-left:2em; padding-right:1.4em; }

.p-btn--txt[btn-size="S"]:not([arrow="prev"]) .p-arrow { right:0.6em; }
.p-btn--txt[btn-size="S"][arrow="prev"] .p-arrow { left:0.6em; }

.ua-pc .p-btn--txt[btn-size="S"]:not([arrow="prev"]):hover .p-arrow,
.ua-pc .p-btn--txt[btn-size="S"]:not([arrow="prev"]) a:hover .p-arrow { right:0.4em; }
.ua-pc .p-btn--txt[btn-size="S"][arrow="prev"]:hover .p-arrow,
.ua-pc .p-btn--txt[btn-size="S"][arrow="prev"] a:hover .p-arrow { left:0.4em; }

.ua-pc .p-btn--txt .p-arrow:before,
.ua-pc .p-btn--txt .p-arrow:after {
  transition:border 0.2s ease-out, background 0.2s ease-out;
}
.ua-pc .p-btn--txt .p-arrow {
  transition:right 0.15s linear, left 0.15s linear;
}


/* テキスト無
----------------------------------------------------------------------*/

.p-btn--icon {
  padding:0;
  line-height:1;
  width:2em;
  height:2em;
}

.p-btn--icon .p-arrow,
.p-btn--icon .p-icon:before,
.p-btn--icon .p-icon:after {
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  right:50%;
  transform:translateX(-50%);
  margin:auto !important;
}


/*--------------------------------------------------------------------------------
  Color
--------------------------------------------------------------------------------*/

/* 茶色
----------------------------------------------------------------------*/

.p-btn[btn-color="brown"],
.p-btn[btn-color="brown"]:visited
.p-btn[btn-color="brown"]:hover,
.p-btn[btn-color="brown"] a,
.p-btn[btn-color="brown"] a:visited
.p-btn[btn-color="brown"] a:hover {
  color:#fff;
  background-color:#4b3c2d;
}

.ua-pc .p-btn[btn-color="brown"]:hover,
.ua-pc .p-btn[btn-color="brown"] a:hover,
.ua-pc a:hover .p-btn[btn-color="brown"] {
  color:#fff;
  background-color:#a0823c;
}

/* 矢印アイコン */
.p-btn[btn-color="brown"] .p-arrow:after,
.p-btn[btn-color="brown"] a .p-arrow:after {
  border-top-color:#fff;
  border-right-color:#fff;
}

.p-btn[btn-color="brown"] .p-arrow[arrow="prev"]:after,
.p-btn[btn-color="brown"] a .p-arrow[arrow="prev"]:after {
  border-bottom-color:#fff;
  border-left-color:#fff;
}


/* 赤
----------------------------------------------------------------------*/

.p-btn[btn-color="red"],
.p-btn[btn-color="red"]:visited
.p-btn[btn-color="red"]:hover,
.p-btn[btn-color="red"] a,
.p-btn[btn-color="red"] a:visited
.p-btn[btn-color="red"] a:hover {
  color:#fff;
  background-color:#a0374b;
}

.ua-pc .p-btn[btn-color="red"]:hover,
.ua-pc .p-btn[btn-color="red"] a:hover,
.ua-pc a:hover .p-btn[btn-color="red"] {
  color:#fff;
  background-color:#c8415f;
}

/* 矢印アイコン */
.p-btn[btn-color="red"] .p-arrow:after,
.p-btn[btn-color="red"] a .p-arrow:after {
  border-top-color:#fff;
  border-right-color:#fff;
}

.p-btn[btn-color="red"] .p-arrow[arrow="prev"]:after,
.p-btn[btn-color="red"] a .p-arrow[arrow="prev"]:after {
  border-bottom-color:#fff;
  border-left-color:#fff;
}


/* 青
----------------------------------------------------------------------*/

.p-btn[btn-color="blue"],
.p-btn[btn-color="blue"]:visited
.p-btn[btn-color="blue"]:hover,
.p-btn[btn-color="blue"] a,
.p-btn[btn-color="blue"] a:visited
.p-btn[btn-color="blue"] a:hover {
  color:#fff;
  background-color:#1874d3;
}

.ua-pc .p-btn[btn-color="blue"]:hover,
.ua-pc .p-btn[btn-color="blue"] a:hover,
.ua-pc a:hover .p-btn[btn-color="blue"] {
  color:#fff;
  background-color:#579EE7;
}

/* 矢印アイコン */
.p-btn[btn-color="blue"] .p-arrow:after,
.p-btn[btn-color="blue"] a .p-arrow:after {
  border-top-color:#fff;
  border-right-color:#fff;
}

.p-btn[btn-color="blue"] .p-arrow[arrow="prev"]:after,
.p-btn[btn-color="blue"] a .p-arrow[arrow="prev"]:after {
  border-bottom-color:#fff;
  border-left-color:#fff;
}


/* 黄色
----------------------------------------------------------------------*/

.p-btn[btn-color="gray"],
.p-btn[btn-color="gray"]:visited
.p-btn[btn-color="gray"]:hover,
.p-btn[btn-color="gray"] a,
.p-btn[btn-color="gray"] a:visited
.p-btn[btn-color="gray"] a:hover {
  color:#282828;
  background-color:#eee;
}

.ua-pc .p-btn[btn-color="gray"]:hover,
.ua-pc .p-btn[btn-color="gray"] a:hover,
.ua-pc a:hover .p-btn[btn-color="gray"] {
  color:#282828;
  background-color:#ddd;
}

/* 矢印アイコン */
.p-btn[btn-color="gray"] .p-arrow:after,
.p-btn[btn-color="gray"] a .p-arrow:after {
  border-top-color:#282828;
  border-right-color:#282828;
}

.p-btn[btn-color="gray"] .p-arrow[arrow="prev"]:after,
.p-btn[btn-color="gray"] a .p-arrow[arrow="prev"]:after {
  border-bottom-color:#282828;
  border-left-color:#282828;
}


/* 白
----------------------------------------------------------------------*/

.p-btn[btn-color="white"],
.p-btn[btn-color="white"]:visited
.p-btn[btn-color="white"]:hover,
.p-btn[btn-color="white"] a,
.p-btn[btn-color="white"] a:visited
.p-btn[btn-color="white"] a:hover {
  color:#50823c;
  background-color:#fff;
}

.ua-pc .p-btn[btn-color="white"]:hover,
.ua-pc .p-btn[btn-color="white"] a:hover,
.ua-pc a:hover .p-btn[btn-color="white"] {
  color:#fff;
  background-color:#3c6428;
}

/* 矢印アイコン */
.p-btn[btn-color="white"] .p-arrow:after {
  border-top-color:#50823c;
  border-right-color:#50823c;
}

.p-btn[btn-color="white"] .p-arrow[arrow="prev"]:after {
  border-bottom-color:#50823c;
  border-left-color:#50823c;
}

.ua-pc .p-btn[btn-color="white"]:hover .p-arrow:after,
.ua-pc .p-btn[btn-color="white"] a:hover .p-arrow:after {
  border-top-color:#fff;
  border-right-color:#fff;
}

.ua-pc .p-btn[btn-color="white"]:hover .p-arrow[arrow="prev"]:after,
.ua-pc .p-btn[btn-color="white"] a:hover .p-arrow[arrow="prev"]:after {
  border-bottom-color:#fff;
  border-left-color:#fff;
}


/* 黒線
----------------------------------------------------------------------*/

.p-btn[btn-color="line"],
.p-btn[btn-color="line"]:visited
.p-btn[btn-color="line"]:hover,
.p-btn[btn-color="line"] a,
.p-btn[btn-color="line"] a:visited
.p-btn[btn-color="line"] a:hover {
  color:#1c1814;
  background-color:transparent;
  border:1px solid #1c1814;
}

.ua-pc .p-btn[btn-color="line"]:hover,
.ua-pc .p-btn[btn-color="line"] a:hover,
.ua-pc a:hover .p-btn[btn-color="wline"] {
  color:#fff;
  background-color:#4b3c2d;
  border-color:#4b3c2d;
}

/* 矢印アイコン */
.p-btn[btn-color="line"] .p-arrow:after {
  border-top-color:#1c1814;
  border-right-color:#1c1814;
}

.p-btn[btn-color="line"] .p-arrow[arrow="prev"]:after {
  border-bottom-color:#1c1814;
  border-left-color:#1c1814;
}

.ua-pc .p-btn[btn-color="line"]:hover .p-arrow:after,
.ua-pc .p-btn[btn-color="line"] a:hover .p-arrow:after {
  border-top-color:#fff;
  border-right-color:#fff;
}

.ua-pc .p-btn[btn-color="line"]:hover .p-arrow[arrow="prev"]:after,
.ua-pc .p-btn[btn-color="line"] a:hover .p-arrow[arrow="prev"]:after {
  border-bottom-color:#fff;
  border-left-color:#fff;
}


/* 白線
----------------------------------------------------------------------*/

.p-btn[btn-color="wline"],
.p-btn[btn-color="wline"]:visited
.p-btn[btn-color="wline"]:hover,
.p-btn[btn-color="wline"] a,
.p-btn[btn-color="wline"] a:visited
.p-btn[btn-color="wline"] a:hover {
  color:#fff;
  background-color:transparent;
  border:1px solid #fff;
}

.ua-pc .p-btn[btn-color="wline"]:hover,
.ua-pc .p-btn[btn-color="wline"] a:hover,
.ua-pc a:hover .p-btn[btn-color="wline"] {
  color:#1c1814;
  background-color:#fff;
}

/* 矢印アイコン */
.p-btn[btn-color="wline"] .p-arrow:after {
  border-top-color:#fff;
  border-right-color:#fff;
}

.p-btn[btn-color="wline"] .p-arrow[arrow="prev"]:after {
  border-bottom-color:#fff;
  border-left-color:#fff;
}

.ua-pc .p-btn[btn-color="wline"]:hover .p-arrow:after,
.ua-pc .p-btn[btn-color="wline"] a:hover .p-arrow:after {
  border-top-color:#1c1814;
  border-right-color:#1c1814;
}

.ua-pc .p-btn[btn-color="wline"]:hover .p-arrow[arrow="prev"]:after,
.ua-pc .p-btn[btn-color="wline"] a:hover .p-arrow[arrow="prev"]:after {
  border-bottom-color:#1c1814;
  border-left-color:#1c1814;
}


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

  Text link
  
----------------------------------------------------------------------------------------------------*/

.p-lineLink,
.p-lineLink:visited,
.p-lineLink:hover,
.ua-pc .p-lineLink:hover,
.p-lineLink a,
.p-lineLink a:visited,
.p-lineLink a:hover,
.ua-pc .p-lineLink a:hover { text-decoration:none !important; }

.p-lineLink {
  position:relative;
  line-height:1;
  padding-bottom:0.75em;
}

.p-lineLink a {
  display:block;
  padding-bottom:0.5em;
}

.p-lineLink:not([linelink="prev"]) {
  padding-left:0.25em;
}

.p-lineLink[linelink="prev"] {
  padding-right:0.5em;
}

.p-lineLink:before {
  content:"";
  width:100%;
  height:1px;
  display:block;
  background-color:#1874d3;
  position:absolute;
  bottom:0;
  left:0;
  transform-origin:left top;
  transform:scale(1,1);
  transition:transform 0.6s cubic-bezier(.23, 1, .32, 1);
}

.p-lineLink:hover:before,
.p-lineLink a:hover:before {
  transform-origin:right top;
  transform:scale(0,1);
}

.p-lineLink[linelink="prev"]:before {
  transform-origin:right top;
}

.p-lineLink[linelink="prev"]:hover:before,
.p-lineLink[linelink="prev"] a:hover:before {
  transform-origin:left top;
}


/* 矢印アイコン
----------------------------------------------------------------------*/

.p-lineLink .p-arrow:not([arrow="prev"]) { margin-left:1em; left:0; }
.p-lineLink .p-arrow[arrow="prev"] { margin-right:1em; right:0; }

.ua-pc .p-lineLink .p-arrow {
  transition:left 0.15s ease-out, right 0.15s ease-out;
  transition-delay:0.05s;
}

.ua-pc .p-lineLink:hover .p-arrow:not([arrow="prev"]) { left:0.25em; }
.ua-pc .p-lineLink:hover .p-arrow[arrow="prev"] { right:0.25em; }


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

  Icon
  
----------------------------------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------------
  矢印
--------------------------------------------------------------------------------*/

.p-arrow {
  width:1em;
  height:1em;
  position:relative;
  display:inline-block;
  vertical-align:middle;
  margin-bottom:0.2em;
  text-decoration:none;
}

.p-arrow:after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  right:50%;
  transform:translateX(-50%);
  margin:auto;
  vertical-align:middle;
  width:0.4em;
  height:0.4em;
  border-top:2px solid #1874d3;
  border-right:2px solid #1874d3;
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
  margin-left:-0.25em;
}

.p-arrow[arrow="prev"]:after {
  border-top:0;
  border-right:0;
  border-bottom:1px solid #1874d3;
  border-left:1px solid #1874d3;
  margin-left:-0.15em;
}


/*--------------------------------------------------------------------------------
  SVG
--------------------------------------------------------------------------------*/

.p-icon:before,
.p-icon[icon-ps="R"]:after {
  content:"";
  width:1em;
  height:1em;
  display:inline-block;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:contain;
  vertical-align:middle;
  margin-bottom:0.2em;
}

.p-icon--mgR:before,
.p-icon--mgR:after { margin-right:0.75rem; }
.p-icon--mgL:before,
.p-icon--mgL:after { margin-left:0.75rem; }
.p-icon--mgR-s:before,
.p-icon--mgR-s:after { margin-right:0.5rem; }
.p-icon--mgL-s:before,
.p-icon--mgL-s:after { margin-left:0.5rem; }

.p-icon[icon-ps="R"]:before {
  display:none;
}

/* 送料 */
.p-icon[icon="track"]:before,
.p-icon[icon="track"]:after {
  width:1.2em;
  background-image:url(../image/icon/track.svg);
}

/* クール便 */
.p-icon[icon="cool"]:before,
.p-icon[icon="cool"]:after {
  width:1.2em;
  background-image:url(../image/icon/cool.svg);
}

/* カート */
.p-icon[icon="cart"]:before,
.p-icon[icon="cart"]:after {
  width:1.2em;
  background-image:url(../image/icon/cart.svg);
}

/* ダウンロード */
.p-icon[icon="dl"]:before,
.p-icon[icon="dl"]:after {
  width:1.2em;
  background-image:url(../image/icon/dl.svg);
}

/* TEL */
.p-icon[icon="tel"]:before,
.p-icon[icon="tel"]:after {
  width:1em;
  height:0.9em;
  background-image:url(../image/icon/tel.svg);
}
.p-icon[icon="tel"]:before,
.p-icon[icon="tel"]:after { margin-right:0.25rem; }


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

  Photo hover
  
----------------------------------------------------------------------------------------------------*/

.p-hvPhoto-link {
  display:block;
}

.p-hvPhoto {
  position:relative;
  overflow:hidden;
}

.p-hvPhoto:after {
  content:"";
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  transition:background-color 0.5s ease;
}

.p-hvPhoto--arrow {
  background-color:transparent;
}

.p-hvPhoto__img {
  transition:transform 0.5s ease;
  min-width:100%;
  height:100%;
  object-fit:cover;
}

@media print,screen and (min-width:641px) {
  .ua-pc .p-hvPhoto-link:hover .p-hvPhoto__img {
    transform:scale(1.05);
  }
}


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

  ページネーション
  
----------------------------------------------------------------------------------------------------*/

.p-pagination {
  font-size:0.88em;
}

.p-pagination__list {
  list-style:none;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  justify-content: center;
  margin-left:-4px;
  margin-right:-4px;
}

.p-pagination__list li {
  padding:4px;
  line-height:1;
}

.p-pagination__list li:after {
  content:"";
  display:block;
  height:0;
  clear:both;
}

.p-pagination__list li a { display:block; }

.p-pagination__list li a,
.p-pagination__list li a:visited,
.p-pagination__list li a:hover { color:inherit; text-decoration:none; }
.p-pagination__list li span.active { color:#fff; background-color:#1874d3; }

.p-pagination__list li span,
.p-pagination__list li a {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  padding-bottom:0.2em;
}

.p-pagination__list li span {
  line-height:1;
  width:2.2em;
  height:2.2em;
  color:inherit;
  border:1px solid #1874d3;
  background-color:transparent;
}

.ua-pc .p-pagination__list li a span {
  -webkit-transition:background ease 0.1s, border ease 0.1s, color ease 0.1s;
  transition:background ease 0.1s, border ease 0.1s, color ease 0.1s;
}

.ua-pc .p-pagination__list li a span:hover { color:#fff; border-color:#4690dc; background-color:#4690dc; }

@media print,screen and (min-width:641px) {
  .p-pagination { padding-top:80px; }
}

@media screen and (max-width:640px) {
  .p-pagination { padding-top:3em; }
}


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

  ブログパターン
  
----------------------------------------------------------------------------------------------------*/

.p-glog {
  text-align:left;
}

.p-glog:after {
  content:"";
  display:block;
  height:0;
  clear:both;
}

.p-glog a { text-decoration:underline; }
.p-glog a:hover { text-decoration:none; }

.p-glog ul,
.p-glog ol {
  margin-left:1.2em;
}

.p-glog b,
.p-glog strong {
  font-weight:600;
}

.p-glog__txt {
  word-break:break-all;
  display:inline;
}

.p-glog__txt--column,
.p-glog__img--center,
.p-glog__datafile {
  width:100%;
}
.p-glog__datafile {
  display: block;
  width:100%;
}

.p-glog__img--center {
  text-align:center;
}

.p-glog__img--left,
.p-glog__img--right {
  display:inline-block;
}

.img--center__item {
  display:inline-block;
}

.p-glog__datafile + .p-glog__txt {
  display: block;
  padding-top:2em;
}
.p-glog__txt + .p-glog__datafile {
  padding-top:2em;
}

.p-glog__img__cp {
  display:block;
  text-align:center;
  line-height:1.4;
  padding-top:0.75em;
}

@media print,screen and (min-width:641px) {
  .p-glog {
    padding-top:60px;
  }

  .p-glog__img--left {
    float:left;
    margin-right:2.5em;
  }
  
  .p-glog__img--right {
    float:right;
    margin-left:2.5em;
  }
  
  .p-glog__img--left:not([data-mg="0"]),
  .p-glog__img--right:not([data-mg="0"]) {
    margin-bottom:1.5em;
  }
  
  .img--center__item[data-ps="top"]:not([data-mg="0"]) {
    margin-bottom:60px;
  }
  
  .img--center__item[data-ps="bottom"]:not([data-mg="0"]) {
    margin-top:60px;
  }
}

@media screen and (max-width:640px) {
  .p-glog {
    padding-top:2em;
  }

  .p-glog__img--left,
  .p-glog__img--right,
  .p-glog__img--left + .p-glog__txt,
  .p-glog__img--right + .p-glog__txt {
    width:100% !important;
  }

  .p-glog__img--left,
  .p-glog__img--right {
    max-width:100% !important;
    text-align:center;
  }
  
  .p-glog__img--left:not([data-mg="0"]),
  .p-glog__img--right:not([data-mg="0"]) {
    margin-bottom:2.5em;
  }
  
  .img--center__item[data-ps="top"]:not([data-mg="0"]) {
    margin-bottom:2.5em;
  }
  
  .img--center__item[data-ps="bottom"]:not([data-mg="0"]) {
    margin-top:2.5em;
  }

  .p-glog__img--left img,
  .p-glog__img--right img,
  .img--center__item {
    width:100% !important;
  }
  
  .p-glog__img--left:not([data-mg="0"]),
  .p-glog__img--right:not([data-mg="0"]) {
    margin-bottom:2.5em;
  }
}


/*--------------------------------------------------------------------------------
  非公開
--------------------------------------------------------------------------------*/

.private-alert p {
  text-align:left;
  background-color:rgba(200,65,95,0.15);
  line-height:1.4;
  color:#a0374b;
  padding:0.75em;
  font-size:1.1em;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}

.private-alert b {
  font-size:0.9em;
  font-weight:600;
  background-color:#a0374b;
  color:#fff;
  padding:0.4em 0.4em 0.5em 0.4em;
  vertical-align:middle;
  margin-right:1em;
  white-space:nowrap;
}

.private-alert small {
  font-size:0.8em;
  -webkit-flex:1;
  flex:1;
}

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

@media screen and (max-width:640px) {
  .private-alert {
    padding-bottom:2.5em;
  }
}

