/* ------------------
フェードイン設定
--------------------- */
@keyframes fadeInUpsmall {
  0% {
    opacity: 0;
    transform: translate3d(0, 10%, 0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.fadeInUpsmall {
  animation-name: fadeInUpsmall
}

@keyframes fadeInDownsmall {
  0% {
    opacity: 0;
    transform: translate3d(0, -10%, 0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.fadeInDownsmall {
  animation-name: fadeInDownsmall
}

@keyframes fadeInRightsmall {
  0% {
    opacity: 0;
    transform: translate3d(10%, 0, 0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.fadeInRightsmall {
  animation-name: fadeInRightsmall
}

@keyframes fadeInLeftsmall {
  0% {
    opacity: 0;
    transform: translate3d(-10%, 0, 0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.fadeInLeftsmall {
  animation-name: fadeInLeftsmall
}


/*---▼リード文用のcss */
.movetext{opacity:0;}
.movetext span{opacity:0;}

/*---▼ふわっと表示させる */
.fade {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 1.5s, transform 1s;
}.fade.active {
	opacity: 1;
	transform: translateY(0px);
}






/* ------------------------------------------------------------------
common
------------------------------------------------------------------ */
#pi_contents {
  /*---▼文字間の設定 */
  font-feature-settings: "palt";
  letter-spacing: 0.2em;
}

/* font */
.pi_main_ttl h1,.pi_main1 h2,.pi_main1 h3,.pi_main2 h2,.pi_main2 h3 {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;
  text-align: center;
  font-weight: normal;
}
.pi_main1 h4,.pi_main2 h4 {
  font-family: century-gothic, sans-serif;
  font-style: normal;
  font-weight: 100;
}
.pi_font {
  font-family: freight-display-pro, serif;
  font-style: normal;
  letter-spacing: 0.1em;
  color: #fff;
}

.pi_flex {
  display: flex;
}

a.pi_btn1 {
  background-color: #3d3d3d;
  color: #fff;
  text-align: center;
}
a.pi_btn2 {
  background-color: #3d3d3d;
  color: #fff;
  text-align: center;
}



/* --------------------------------------
pi_contents
----------------------------------------- */



/* -----------------------
main banner
-------------------------- */

#pi_contents h1.pi_main_ttl {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

/* -----------------------
lead
-------------------------- */
.pi_lead {
  font-size: 1.2rem;
  line-height: 1.7;
  text-align: center;
  font-weight: normal;
  margin: 40px 0 40px 0;
}


/* -----------------------
navi
-------------------------- */
nav ul {
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 8px;
  margin: 0 auto 16%;
}

nav ul li {
  width: 27.6%;
  list-style: none;
}



/* -----------------------
main
-------------------------- */
.pi_main1 {
  width: 100%;
  text-align: center;
  background-color: #ecf1eb;
  padding-bottom: 60px;
}
.pi_main2 {
  width: 100%;
  text-align: center;
  padding-bottom: 60px;
}


/*--------------------------タイトル*/

.title_img {
  padding: 40px 0 25px 0;
}
.pi_detail {
  font-size: 1.2rem;
  line-height: 1.7;
  letter-spacing: 0.2rem;
  margin: 0 0 30px 0;
}


/*--------------------------商品情報*/
.item_img {
  width: 85.3%;
  margin: 0 auto 20px;
}
.txt_category {
  font-size: 1.1rem;
  line-height: 1.7;
  letter-spacing: 0;
  text-decoration: underline;
  margin: 0 0 5px 0;
}
.txt_item {
  font-size: 1.3rem;
  line-height: 1.7;
  letter-spacing: 0;
  margin: 0 0 15px 0;
}
.pi_btn1 {
  font-size: 1.3rem;
	letter-spacing: 0.05em;
	line-height: 1.9;
  margin: 3% auto 0;
  display: block;
  width: 120px;
	height: 25px;
}
.pi_btn2 {
  font-size: 1.5rem;
	letter-spacing: 0.05em;
	line-height: 2.9;
  margin: 3% auto 0;
  display: block;
  width: 320px;
	height: 45px;
}
.pi_line1 {
  width: 85.3%;
  border: 1px solid #fff;
  margin: 40px auto;
}
.pi_line2 {
  width: 85.3%;
  border: 1px solid #d4d4d4;
  margin: 40px auto;
}





/* PC
----------------------------------*/
@media screen and (min-width: 768px) {
  #pi_contents {
    margin: 0 auto;
    width: 500px !important;
    /* PC表示の幅を変えたいときはここを変更する */
  }
}