@charset "UTF-8";
/* ------------------------------------- */
/* 共通 */
/* ------------------------------------- */
/* 表示 */
.tb {
  display: none;
}
@media only screen and (max-width: 320px) {
  /* --- iPhone SE --- */
  .none320 {
    display: none !important;
  }
}
/* 文字 */
h3.jptit {
  font-size: 2.4rem;
  letter-spacing: 0.7rem;
  display: block;
}
/* 袋文字 */
.num-bd {
  text-shadow: 1px 1px 0px #000, -1px -1px 0px #000, -1px 1px 0px #000, 1px -1px 0px #000, 1px 0px 0px #000, -1px 0px 0px #000, 0px 1px 0px #000, 0px -1px 0px #000;
}
.num-bd.ylw {
  text-shadow: 1px 1px 0px #fff38e, -1px -1px 0px #fff38e, -1px 1px 0px #fff38e, 1px -1px 0px #fff38e, 1px 0px 0px #fff38e, -1px 0px 0px #fff38e, 0px 1px 0px #fff38e, 0px -1px 0px #fff38e;
}
/* 角丸 */
.bdR-t {
  border-radius: 10px 10px 0 0;
  border: 1px solid #000;
  display: inline-block;
}
.bdR-rl {
  border-radius: 0 10px 0 10px;
  border: 1px solid #000;
  display: inline-block;
}
.bdR-b {
  border-radius: 0 0 10px 10px;
  border: 1px solid #000;
  display: inline-block;
}
.bdR-rbl {
  border-radius: 0 10px 10px 10px;
  border: 1px solid #000;
  display: inline-block;
}
.bdR-trl {
  border-radius: 10px 10px 0 10px;
  border: 1px solid #000;
  display: inline-block;
}
.bdR-o {
  border-radius: 10px;
  border: 1px solid #000;
  display: inline-block;
}
.speech {
  position: relative;
  font-size: 2.1rem;
  letter-spacing: .15rem;
  background-color: #fff;
  font-weight: 700;
}
.speech::after {
  content: '';
  display: block;
  position: absolute;
  background: url("../img/library/speech.svg") center/100% no-repeat;
  min-width: 18px;
  min-height: 20px;
}
/* リンク */
a.under {
  border-bottom: 1px solid #000;
}
/* アコーディオン */
.accordion {
  list-style: none;
  width: 100%;
}
.accordion li {
  margin: 0 auto 5.5rem;
  position: relative;
}
.accordion .btnset {
  position: absolute;
  bottom: -43px;
  right: 0;
  z-index: 2;
  cursor: pointer;
  font-size: 1.7rem;
  transition: all .5s ease;
  color: #fff28d;
  text-align: center;
  width: 180px;
  height: 45px;
  background-color: #000;
}
.accordion .btnset::before, .accordion .btnset::after {
  position: absolute;
  content: '';
  width: 15px;
  height: 2px;
  background-color: #000;
  transition: .3s;
  top: 20px;
  right: 31px;
}
.accordion .btnset::before {
  transform: rotate(0deg);
}
.accordion .btnset::after {
  transform: rotate(90deg);
}
.accordion .btnset.close::after {
  transform: rotate(0);
}
.accordion .btnset .icon {
  position: absolute;
  top: 25%;
  right: 16%;
  width: 20px;
  height: 20px;
  display: inline-block;
  border-radius: 50%;
  background-color: #fff28d;
  z-index: -1;
}
.accordion .btnset.close .icon {
  right: 16%;
}
.accordion .btnset .txt::before {
  position: absolute;
  content: "記事を読む";
  top: 15%;
  margin: auto;
  left: -10%;
  right: 0;
}
.accordion .btnset.close .txt::before {
  content: "閉じる";
}
.accordion .box {
  display: none;
  background: #fff;
  border-radius: 10px;
  margin: 0 auto;
}
.accordion .box .inner {
  border-top: 1px solid #000;
  padding: 5% !important;
}
/* ------------------------------------- */
/* アニメーション */
/* ------------------------------------- */
.zoomanim figure {
  margin: 0 auto;
  overflow: hidden;
}
.zoomanim figure img {
  transition: 1s all;
}
.zoomanim:hover figure img {
  transform: scale(1.1, 1.1);
  transition: .5s all;
}
/* 位置で表示 */
.scrollIn {
  opacity: 0;
}
.Fade.scrollIn.scrollShow {
  animation-name: scrollFade;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  transition: opacity 1s, translateY 1s;
  opacity: 0;
}
@-webkit-keyframes scrollFade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes scrollFade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.Up.scrollIn.scrollShow {
  animation-name: scrollUp;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  transition: opacity 1s, translateY 1s;
  opacity: 0;
}
@-webkit-keyframes scrollUp {
  0% {
    opacity: 0;
    transform: translateY(50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes scrollUp {
  0% {
    opacity: 0;
    transform: translateY(50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*文字が滑らかに表示される*/
.smoothT {
  clip-path: inset(0 0 100% 0);
  transition: .8s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}
.smoothT.scrollIn.scrollShow {
  clip-path: inset(0);
  opacity: 1;
}
.smoothL {
  clip-path: inset(0 100% 0 0);
  transition: 1.5s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}
.smoothL.scrollIn.scrollShow {
  clip-path: inset(0);
  opacity: 1;
}
/* 手書き　*/
#stroke-del .st {
  fill: none;
  stroke: #fff;
  stroke-width: 11px;
  /*線の太さを指定する*/
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dasharray: 1500;
  /* 線の間隔を指定する */
  stroke-dashoffset: 1500;
  /* 線の位置を指定する */
}
#stroke-voi .st {
  fill: none;
  stroke: #fff;
  stroke-width: 11px;
  /*線の太さを指定する*/
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dasharray: 1500;
  /* 線の間隔を指定する */
  stroke-dashoffset: 1500;
  /* 線の位置を指定する */
}
/* 時間経過で表示 */
.startup #menu .ani.fade {
  opacity: 0;
  transition: opacity 2s, translateY 2s;
  display: inline-block;
}
.startup #menu .ani.fade.is-show {
  animation-name: fadeani;
  animation-duration: .8s;
  animation-fill-mode: forwards;
}
@-webkit-keyframes fadeani {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeInani {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.startup #menu .ani.up {
  opacity: 0;
  transition: opacity .4s, translateY .4s;
}
.startup #menu .ani.up.is-show {
  animation-name: upani;
  animation-duration: .7s;
  animation-fill-mode: forwards;
}
@-webkit-keyframes upani {
  0% {
    opacity: 0;
    transform: translateY(50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes upani {
  0% {
    opacity: 0;
    transform: translateY(50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@media all and (-ms-high-contrast: none) {
  /* --- IEのみ --- */
  .smoothT.scrollIn.scrollShow, .smoothL.scrollIn.scrollShow {
    animation-name: scrollUp;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    transition: opacity 1s, translateY 1s;
    opacity: 0;
  }
}
@supports (-ms-ime-align: auto) {
  /* --- Edgeのみ --- */
  .smoothT.scrollIn.scrollShow, .smoothL.scrollIn.scrollShow {
    animation-name: scrollUp;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    transition: opacity 1s, translateY 1s;
    opacity: 0;
  }
}
@media only screen and (max-width: 1024px) {
  /* ------------------------------------- */
  /* 共通 */
  /* ------------------------------------- */
  /* --- タブレット横 --- */
  /* 表示 */
  .tb {
    display: block;
  }
}
@media only screen and (max-width: 599px) {
  /* --- スマートフォン縦 --- */
  /* ------------------------------------- */
  /* 共通 */
  /* ------------------------------------- */
  /* 角丸 */
  .bdR-t {
    border-radius: 8px 8px 0 0;
  }
  .bdR-rl {
    border-radius: 0 8px 0 8px;
  }
  .bdR-b {
    border-radius: 0 0 8px 8px;
  }
  .bdR-rbl {
    border-radius: 0 8px 8px 8px;
  }
  .bdR-o {
    border-radius: 8px;
  }
  .speech {
    font-size: 1.6rem;
  }
  /* アコーディオン */
  .accordion .btnset {
    font-size: 1.4rem;
    width: 150px;
    height: 38px;
    bottom: -37px;
  }
  .accordion .btnset::before, .accordion .btnset::after {
    right: 20px;
    top: 16px;
  }
  .accordion .btnset .txt::before {
    top: 20%;
    left: -15%;
  }
  .accordion .btnset .icon {
    right: 12%;
    top: 20%;
  }
  .accordion .btnset.close .icon {
    right: 12%;
  }
  .accordion .btnset.close .txt::before {
    left: -15%;
  }
  .accordion .box .inner {
    padding: 8% 5% !important;
  }
}
/* ------------------------------------- */
/* 配達員募集 */
/* ------------------------------------- */
@media screen and (min-width: 480px) {
  /* スマートフォン横 */
  .recruiting #tab02 .voice-box {
    margin: 5em auto 0;
  }
  .recruiting #tab02 .voice03 {
    margin-bottom: 6em;
  }
  .recruiting #tab02 .voice-box .flx_item .txt-box {
    margin-top: 1em;
  }
  .recruiting #tab02 .voice-box .flx_item {
    display: block;
  }
  .recruiting #tab02 .voice-box .flx_item .voice_point img {
    margin: 0;
  }
  .recruiting #tab02 .voice-box .flx_item {
    width: 100%;
  }
}
@media screen and (min-width: 1025px) {
  /* デスクトップ/タブレット横 */
  .recruiting #tab02 .voice-box {
    margin: 5em auto 0;
  }
  .recruiting #tab02 .voice03 {
    margin-bottom: 7em;
  }
  .recruiting #tab02 .voice-box .flx_item .txt-box {
    max-width: 163px;
    width: 40%;
    margin: 0;
  }
  .recruiting #tab02 .voice-box .flx_item {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .recruiting #tab02 .voice-box .flx_item .voice_point {
    max-width: 163px;
    width: 40%;
    margin: 0;
    display: flex;
    justify-content: center;
  }
  .recruiting #tab02 .voice-box .flx_item .voice_point img {
    width: 93px;
  }
  .recruiting #tab02 .voice-box .flx_item .voice_point::before {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .recruiting #tab02 .voice-box .flx_item .txt-box {
    max-width: 606px;
    width: 70%;
    margin: 0;
  }
  recruiting #tab02 .voice-box .flx_item:nth-of-type(2n), recruiting #tab02 .voice-box .flx_item:last-of-type {
    margin: 0;
  }
}
/* ------------------------------------- */
/* トップ */
/* ------------------------------------- */
.mv-box::before {
  border: 3px solid #000;
  border-bottom-width: 4px;
}
@media screen and (min-width: 1025px) {
  .mv-box::before {
    width: 355px;
  }
}
/* ------------------------------------- */
/* デリバリー */
/* ------------------------------------- */
.delivery .order .att {
  font-size: clamp(1.7rem, 2vw + 0.8rem, 2rem);
  text-align: center;
  color: #000;
  font-weight: bold;
  margin: 30px auto 0
  display: block;
}
.delivery .order .att .line {
  /*border-bottom: 5px solid #fff38e;*/
  color: #d12d2c;
}
@media screen and (max-width: 320px) {
  .delivery .order .att {
    font-size: 1.5rem;
  }
}
/* ------------------------------------- */
/* 取扱新聞（ジャパン） */
/* ------------------------------------- */
.newspaper #postid_1185 #postid_1185_1 .label-ttl span > span:first-of-type::after {
  content: "300";
}
.newspaper #postid_1185 #postid_1185_1 .label-ttl span > span:last-of-type::after {
  content: "400";
}