@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;
  position:relative;
  overflow:hidden;
  padding:1em;
  border-radius: .75em;
  box-sizing: border-box;
}

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

.p-btn,
.p-btn:visited,
.p-btn:hover,
.p-btn a,
.p-btn a:visited,
.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; }

.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; }
*/


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

.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="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 !important;
  background-color:#ff4c4c;
}

.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 !important;
  background-color:#FF6868;
}

/* 矢印アイコン */
.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="pink"],
.p-btn[btn-color="pink"]:visited,
.p-btn[btn-color="pink"]:hover,
.p-btn[btn-color="pink"] a,
.p-btn[btn-color="pink"] a:visited,
.p-btn[btn-color="pink"] a:hover {
  color:#fff !important;
  background-color:#f78da7;
}

.ua-pc .p-btn[btn-color="pink"]:hover,
.ua-pc .p-btn[btn-color="pink"] a:hover,
.ua-pc a:hover .p-btn[btn-color="pink"] {
  color:#fff !important;
  background-color:#FFBAD6;
}

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

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

/* オレンジ
----------------------------------------------------------------------*/

.p-btn[btn-color="orange"],
.p-btn[btn-color="orange"]:visited,
.p-btn[btn-color="orange"]:hover,
.p-btn[btn-color="orange"] a,
.p-btn[btn-color="orange"] a:visited,
.p-btn[btn-color="orange"] a:hover {
  color:#fff !important;
  background-color:#ff6900;
}

.ua-pc .p-btn[btn-color="orange"]:hover,
.ua-pc .p-btn[btn-color="orange"] a:hover,
.ua-pc a:hover .p-btn[btn-color="orange"] {
  color:#fff !important;
  background-color:#FD842E;
}

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

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

/* イエロー
----------------------------------------------------------------------*/

.p-btn[btn-color="yellow"],
.p-btn[btn-color="yellow"]:visited,
.p-btn[btn-color="yellow"]:hover,
.p-btn[btn-color="yellow"] a,
.p-btn[btn-color="yellow"] a:visited,
.p-btn[btn-color="yellow"] a:hover {
  color:#242424 !important;
  background-color:#F0CE0E;
}

.ua-pc .p-btn[btn-color="yellow"]:hover,
.ua-pc .p-btn[btn-color="yellow"] a:hover,
.ua-pc a:hover .p-btn[btn-color="yellow"] {
  color:#242424 !important;
  background-color:#FFE138;
}

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

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

/* イエロー
----------------------------------------------------------------------*/

.p-btn[btn-color="yg"],
.p-btn[btn-color="yg"]:visited,
.p-btn[btn-color="yg"]:hover,
.p-btn[btn-color="yg"] a,
.p-btn[btn-color="yg"] a:visited,
.p-btn[btn-color="yg"] a:hover {
  color:#242424 !important;
  background-color:#CEF048;
}

.ua-pc .p-btn[btn-color="yg"]:hover,
.ua-pc .p-btn[btn-color="yg"] a:hover,
.ua-pc a:hover .p-btn[btn-color="yg"] {
  color:#242424 !important;
  background-color:#E3FF75;
}

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

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

/* グリーン
----------------------------------------------------------------------*/

.p-btn[btn-color="green"],
.p-btn[btn-color="green"]:visited,
.p-btn[btn-color="green"]:hover,
.p-btn[btn-color="green"] a,
.p-btn[btn-color="green"] a:visited,
.p-btn[btn-color="green"] a:hover {
  color:#fff !important;
  background-color:#31A35B;
}

.ua-pc .p-btn[btn-color="green"]:hover,
.ua-pc .p-btn[btn-color="green"] a:hover,
.ua-pc a:hover .p-btn[btn-color="green"] {
  color:#fff !important;
  background-color:#2AC766;
}

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

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

/* 水色
----------------------------------------------------------------------*/

.p-btn[btn-color="lb"],
.p-btn[btn-color="lb"]:visited,
.p-btn[btn-color="lb"]:hover,
.p-btn[btn-color="lb"] a,
.p-btn[btn-color="lb"] a:visited,
.p-btn[btn-color="lb"] a:hover {
  color:#fff !important;
  background-color:#3DC7CC;
}

.ua-pc .p-btn[btn-color="lb"]:hover,
.ua-pc .p-btn[btn-color="lb"] a:hover,
.ua-pc a:hover .p-btn[btn-color="lb"] {
  color:#fff !important;
  background-color:#5CE1E6;
}

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

.p-btn[btn-color="lb"] .p-arrow[arrow="prev"]:after,
.p-btn[btn-color="lb"] 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 !important;
  background-color:#0693e3;
}

.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 !important;
  background-color:#1B9FEB;
}

/* 矢印アイコン */
.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 !important;
  background-color:#eaeaea;
}

.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:#666 !important;
  background-color:#eee;
}

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

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

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

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


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

  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:1px solid #1c1814;
  border-right:1px solid #1c1814;
  -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 #1c1814;
  border-left:1px solid #1c1814;
  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;
}

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

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

/* 送料 */
.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; }

/* ファイル */
.p-icon[icon="file"]:before,
.p-icon[icon="file"]:after {
  width:1.1em;
  height:1.1em;
  background-image:url(../image/icon/file.svg);
}