@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:400;
  position:relative;
  overflow:hidden;
  padding:0.6em 1.2em 0.8em 1.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="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;
  background-color:#ff99af;
}

.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;
  background-color:#FFB2C2;
}

/* 矢印アイコン */
.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="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:#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;
  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="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:#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;
  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;
}


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

.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="line"] {
  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 { color:inherit; 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:#1c1814;
  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; }


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

  List
  
----------------------------------------------------------------------------------------------------*/

ul.p-list--in { margin-left:2.2rem; }

ul.p-listMk { list-style:none; }

ul.p-listMk:not([listmk="at"]) li,
:not(ul).p-listMk:not([listmk="at"]) { padding-left:1.4em; }

ul.p-listMk[listmk="at"] li,
:not(ul).p-listMk[listmk="at"] { padding-left:1.2em; }

ul.p-listMk:not([listmk="at"]) li:before,
:not(ul).p-listMk:not([listmk="at"]):before {
  margin-left:-1.4em;
  margin-right:0.4em;
  display:inline-block;
}

ul.p-listMk[listmk="at"] li:before,
:not(ul).p-listMk[listmk="at"]:before {
  margin-left:-1.2em;
  margin-right:0.2em;
  display:inline-block;
}

ul.p-listMk[listmk="maru"] li:before,
:not(ul).p-listMk[listmk="maru"]:before {
  content:"●";
  font-size:0.8em;
}

ul.p-listMk[listmk="dot"] li:before,
:not(ul).p-listMk[listmk="dot"]:before {
  content:"・";
}

ul.p-listMk[listmk="at"] li:before,
:not(ul).p-listMk[listmk="at"]:before {
  content:"※";
}


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

  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);
}


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

  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;
  width:100%;
  height:100%;
  object-fit:cover;
  font-family:'object-fit: cover;';
}

@media print,screen and (min-width:751px) {
  .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;
  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:#4b3c2d; }

.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 #4b3c2d;
  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:#a0823c; background-color:#a0823c; }

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

@media screen and (max-width:750px) {
  .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__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 {
  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:901px) {
  .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:900px) {
  .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 {
    max-width:400px !important;
    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:901px) {
  .private-alert {
    padding-bottom:60px;
  }
}

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

/* 事例紹介 */
.works_list .works-no {
    color: white;
    background-color: #019d94;
    border-radius: 20px;
    padding: 5px 20px;
    font-weight: bold;
}
.works_list {
    width: 500px;
    margin: 0 auto 60px auto;
    background-image: url("../image/mainvisual-img01.png");
    background-position: center;
    background-repeat: no-repeat;
    background-color:rgba(255,255,255,0.7);
    background-blend-mode:lighten;
}
.works_list dt,dd{
    font-weight: bold;
}
.works_list dt {
    text-align: center;
    margin-top: 20px;
}
.works_list dd {
    text-align: left;
}
.works_list .question {
    color: #019d94;
}
.works_list .answer {
    color: #da2666;
}
.works-hitokoto {
    color: #019d94;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    line-height: 60px;
    margin: 30px auto;
}
@media screen and (max-width:1284px) {
    .works-hitokoto {
        color: #019d94;
        text-align: center;
        font-size: 32px;
        font-weight: bold;
        line-height: 60px;
        margin: 30px auto;
    }
}