@charset "UTF-8";

/*========= ベース ===============*/
.pdguide {
  text-align: center;
  font-family: "Zen Maru Gothic", serif !important;
}

/*========= FV ===============*/
.pdguide section.fv {
  position: relative;
  background-image: url("../images/bg_fv.png");
  padding-bottom: 7%;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.pdguide section.fv h2 {
  position: relative;
  width: 90%;
  margin: 7% auto 0;
  z-index: 5;
}
.pdguide section.fv .fv__txt {
  background-color: rgba(255, 255, 255, 0.4);
  padding: 5% 0 2%;
  margin: 2% 0 0%;
}
.pdguide section.fv .fv__txt p {
  font-size: 1.7em;
  font-weight: 400;
}
.pdguide section.fv .fv__txt p span {
  display: block;
}
.pdguide section.fv .fv__item img {
  position: absolute;
  z-index: 3;
  width: 22%;
}
.pdguide section.fv .fv__item img:first-of-type {
  top: 2%;
  right: -2%;
}
.pdguide section.fv .fv__item img:nth-of-type(2) {
  top: 35%;
  left: 1%;
}
.pdguide section.fv .fv__item img:nth-of-type(3) {
  bottom: 12%;
  right: 0%;
}
/*========= おすすめポイント ===============*/

.pdguide .checkpoint {
  display: block;
  position: relative;
  margin: 2% auto 5%;
  padding: 3% 5%;
  border-radius: 5px;
  width: 85%;
  background: #fff;
  box-sizing: border-box;
}
.pdguide .checkpoint.custom01 {
  padding: 3% 7% 3%;
}
.pdguide .checkpoint.custom02 {
  padding: 3% 3%;
}
.pdguide .checkpoint dt {
  font-family: /*"icomoon", */ "Yu Gothic", YuGothic, "メイリオ", Meiryo, Arial,
    sans-serif;
  font-size: 3em;
  font-weight: bolder;
  font-feature-settings: "palt";
  letter-spacing: 0.02em;
}
.pdguide section#drink .checkpoint dt {
  color: #7bba73;
}
.pdguide section#food .checkpoint dt {
  color: #ffb422;
}
.pdguide section#sweets .checkpoint dt {
  color: #f993a9;
}
.pdguide .checkpoint dd {
  padding: 3% 1% 3%;
}
.pdguide .checkpoint ul {
  line-height: 1.8;
  list-style-type: none;
  text-align: left;
}

.pdguide .checkpoint li + li {
  margin-top: 5px;
}

.pdguide .checkpoint li {
  position: relative;
  padding-left: 1.7em;
  font-size: 1.8em;
  font-weight: 500;
}

.pdguide .checkpoint li:before {
  content: "";
  position: absolute;
  width: 12px;
  height: 25px;
  top: 10%;
  left: 3%;
  -webkit-transform: rotate(50deg);
  -ms-transform: rotate(50deg);
  transform: rotate(50deg);
  border-right: 5px solid #f4535e;
  border-bottom: 5px solid #f4535e;
  border-radius: 3px;
  z-index: 5;
}

.pdguide .checkpoint li:after {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 1em;
  height: 1em;
  border-radius: 2px;
}
/* チェックボックスの色 ドリンクタイプ*/
.pdguide section#drink .checkpoint li:after {
  background-color: #e6ece6;
}
/* チェックボックスの色 主食タイプ*/
.pdguide section#food .checkpoint li:after {
  background-color: #edeae5;
}
/* チェックボックスの色 デザートタイプ*/
.pdguide section#sweets .checkpoint li:after {
  background-color: #f4eaec;
}
.pdguide .checkpoint .ribbon {
  display: inline-block;
  position: absolute;
  left: -6px;
  top: 6%;
  margin: 0;
  padding: 10px 0px 11px 15px;
  z-index: 2;
  width: 85px;
  text-align: center;
  color: white;
  font-size: 13px;
  border-radius: 2px 0 0 0;
}

.pdguide .checkpoint .ribbon:before {
  position: absolute;
  content: "";
  left: 0;
  bottom: -5px;
  border: none;
  border-bottom: solid 5px transparent;
}

.pdguide .checkpoint .ribbon:after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  height: 0;
  width: 0;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
}
/* リボンの色 ドリンクタイプ*/
.pdguide section#drink .checkpoint .ribbon {
  background: #7bba73;
}
.pdguide section#drink .checkpoint .ribbon:before {
  border-right: solid 6px #4e8c46;
}
.pdguide section#drink .checkpoint .ribbon:after {
  border-left: 30px solid #7bba73;
}
/* リボンの色 主食タイプ*/
.pdguide section#food .checkpoint .ribbon {
  background: #ffb422;
}
.pdguide section#food .checkpoint .ribbon:before {
  border-right: solid 6px #917642;
}
.pdguide section#food .checkpoint .ribbon:after {
  border-left: 30px solid #ffb422;
}
/* リボンの色 デザートタイプ*/
.pdguide section#sweets .checkpoint .ribbon {
  background: #f993a9;
}
.pdguide section#sweets .checkpoint .ribbon:before {
  border-right: solid 6px #e0738b;
}
.pdguide section#sweets .checkpoint .ribbon:after {
  border-left: 30px solid #f993a9;
}

/*========= カテゴリ見出し ===============*/
.pdguide h3 {
  position: relative;
  font-family: "Zen Maru Gothic", serif !important;
  font-weight: 500;
  font-size: 1.9em;
  color: #fff;
  background-color: #97ca90;
  padding: 5% 0 0px;
  margin: 0 2% 10%;
}
.pdguide section#drink h3 {
  background-color: #97ca90;
}
.pdguide section#food h3 {
  background-color: #ffb422;
}
.pdguide section#sweets h3 {
  background-color: #f993a9;
}
.pdguide h3:after {
  position: absolute;
  content: "";
  top: 100%;
  left: 0;
  height: 0;
  width: 0;
  border-left: 345px solid transparent;
  border-right: 345px solid transparent;
}
.pdguide section#drink h3:after {
  border-top: 70px solid #97ca90;
}
.pdguide section#food h3:after {
  border-top: 70px solid #ffb422;
}
.pdguide section#sweets h3:after {
  border-top: 70px solid #f993a9;
}
.pdguide h3 span.type {
  font-weight: bolder;
  margin-left: 0;
  font-size: 2.5em;
  font-family: /*"icomoon", */ "Yu Gothic", YuGothic, "メイリオ", Meiryo, Arial,
    sans-serif;
  display: block;
  font-feature-settings: "palt";
}
.pdguide h3 span.choice {
  margin-left: 0;
  line-height: 1.2;
  font-size: 1.5em;
  display: block;
  font-feature-settings: "palt";
}

/*========= 商品タイトル ===============*/
.pdguide h4 {
  display: inline-block;
  color: #fff;
  padding: 0.3em 1.5em;
  margin: 2em 1em 1em;
  border-radius: 40px;
  line-height: 1.2em;
  font-weight: 500;
  font-size: 2.2em;
  font-feature-settings: "palt";
  letter-spacing: -0.05em;
  font-family: "Zen Maru Gothic", serif !important;
}
.pdguide section#drink h4 {
  background-color: #97ca90;
}
.pdguide section#food h4 {
  background-color: #ffb422;
}
.pdguide section#sweets h4 {
  background-color: #f993a9;
}
/*見た目調整*/
.pB1 {
  padding-bottom: 1%;
}
.pB3 {
  padding-bottom: 3%;
}
.pB5 {
  padding-bottom: 5%;
}
.pB7 {
  padding-bottom: 7%;
}

/************************
プロティン位置調整
************************/
.pdguide_main_relative {
  position: relative;
}
.pdguide_main_03_01item {
  position: absolute;
}

/*ノーマル*/
#goods32626 .pdguide_main_03_01item {
  top: 22%;
  right: 9%;
  width: 41%;
}
/*MCT*/
#goods32895 .pdguide_main_03_01item {
  top: 33%;
  right: 9%;
  width: 41%;
}
/*スムージー*/
#goods32740 .pdguide_main_03_01item {
  top: 23%;
  right: 9%;
  width: 41%;
}
/*パスタ*/
#goods70099 .pdguide_main_03_01item {
  top: 29%;
  right: 9%;
  width: 41%;
}
/*リゾット*/
#goods70095 .pdguide_main_03_01item {
  top: 13%;
  right: 9%;
  width: 50%;
}
/*ポタージュ*/
#goods32788 .pdguide_main_03_01item {
  top: 16%;
  right: 9%;
  width: 50%;
}
/*フレーク*/
#goods70088 .pdguide_main_03_01item {
  top: 13%;
  right: 5%;
  width: 48%;
}
/*ケーキ*/
#goods32605 .pdguide_main_03_01item {
  top: 27%;
  left: 7%;
  width: 37%;
}

#goods32606 .pdguide_main_03_01item {
  top: 17%;
  right: 5%;
  width: 37%;
}
/*ムース*/
#goods32586 .pdguide_main_03_01item {
  top: 34%;
  right: 7%;
  width: 50%;
}
.pdguide_main_02 {
  padding: 2% 0 7%;
}

.pdguide_main_02_link {
  display: flex;
  justify-content: space-around;
  margin-top: 4%;
}

.pdguide_main_02_link img {
  flex: 1 0 auto;
  padding: 0 1%;
}

.pdguide_main_02_link a:hover {
  opacity: 0.7;
}

/************************
水玉背景
************************/
/*3つ共通*/
.pdguide_main_03,
.pdguide_main_04,
.pdguide_main_05 {
  background-position: 0 0, 22px 22px;
  background-size: 44px 44px;
  padding-bottom: 0.5%;
  margin-bottom: 5%;
}

/*ドリンクタイプ*/

.pdguide_main_03 {
  background-color: #d8edd5;
  background-image: radial-gradient(#e0f1dd 19%, rgba(255, 255, 255, 0) 22%),
    radial-gradient(#e0f1dd 19%, rgba(255, 255, 255, 0) 22%);
}

/*主食タイプ*/

.pdguide_main_04 {
  background-color: #fdefc9;
  background-image: radial-gradient(#fdf3d5 19%, rgba(255, 255, 255, 0) 22%),
    radial-gradient(#fdf3d5 19%, rgba(255, 255, 255, 0) 22%);
}

/*おやつタイプ*/

.pdguide_main_05 {
  background-color: #fbe1e7;
  background-image: radial-gradient(#fce5ea 19%, rgba(255, 255, 255, 0) 22%),
    radial-gradient(#fce5ea 19%, rgba(255, 255, 255, 0) 22%);
}

/*カスタムインクルード*/

.pdguide_custmitem {
  padding: 5% 3% 2%;
  margin: 1% 5% 13%;
  position: relative;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.4);
}

.pdguide_custmitem:last-child {
  margin-bottom: 5%;
}

/*お求めはこちらからの枠*/
.caption {
  font-size: 2.5em;
  padding: 3% 0.5em 0;
  margin: auto;
  font-weight: bold;
}

.pdguide_custmitem2 .caption3 {
  padding-bottom: 5%;
}

.pdguide_custmitem3 {
  padding: 5% 3% 2%;
  margin: 1% 5% 1%;
  position: relative;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.4);
}

.pdguide_custmitem3_link {
  margin: 2% 5% 3% 0;
  text-align: right;
}

.pdguide_custmitem3_link p {
  display: inline-block;
  font-size: 1.1em;
}

.pdguide_custmitem3_link a {
  border-bottom: 1px solid #333;
  text-decoration: none;
}
.pdguide_custmitem3_link a:hover {
  border: none !important;
}

/*おやつタイプの色*/

.pdguide_main_05 hr {
  border: none;
  border-top: dotted 3px #f993a9;
}

/*こちらもチェック*/

.pdguide_custmitem2 {
  margin: 5% 0% 7%;
}

.pdguide_custmitem2 h1 {
  color: #569e4f;
  font-size: 2.5em;
  padding-bottom: 3%;
}

img {
  max-width: 100%;
  object-fit: contain /*縦横比保持*/;
}
p {
  margin-bottom: 1em !important;
}

/**********************
          PC 
***********************/
@media screen and (min-width: 768px) {
  .pdguide {
    width: 720px;
    margin: auto;
  }
  .pdguide {
    font-size: 1.4rem !important;
  }
  /*.w90{width: 90%;}*/
  .pdguide_custmitem3_link p {
    font-size: 1.5em;
  }
  .pdguide_custmitem .display_exact li,
  .pdguide_custmitem3 .display_exact li {
    padding: 2% 0;
  }
  .pdguide_custmitem .img_box,
  .pdguide_custmitem3 .img_box {
    width: 180px;
  }
  .display_exact .btn {
    min-width: 55%;
    width: 48%;
    margin-top: 5%;
  }
  .display_exact .c-panel__body {
    font-size: 130%;
    margin-left: 33%;
  }
  /* inculude使用時のボタン、画像、商品名調整 */
  .display_exact .c-panel__header img {
    width: 180px;
    float: left;
    text-align: left;
  }
  .btn {
    padding: 14px 1px 14px 100px !important;
  }

  .display_exact .btn {
    min-width: 55%;
    width: 48%;
    margin-top: 5%;
    margin-left: 20%;
  }

  /* 画面下部すべて見るボタン調整 */
  .l-footer .btn-sm {
    padding: 10px 32px !important;
    font-size: 1.4rem !important;
    line-height: 1.5 !important;
    border-radius: 30px !important;
  }
}
/**********************
        　スマホ
***********************/
@media screen and (max-width: 768px) {
  .pdguide {
    margin: 0;
  }
  .pdguide_custmitem .display_exact li,
  .pdguide_custmitem3 .display_exact li {
    padding: 2% 0 0;
  }
  .pdguide_custmitem {
    margin: 1% 3% 13%;
  }
  .pdguide_custmitem:last-child {
    margin: 5% 3% 5%;
  }
  .pdguide_custmitem2 .caption3 {
    width: 75%;
    padding: 2% 3%;
  }
  .pdguide_custmitem3 {
    margin: 1% 3% 1%;
  }

  .pB3 {
    padding-bottom: 5%;
  }
  .pB7 {
    padding-bottom: 5%;
  }
  .w60 {
    width: 60%;
  }
  .w85 {
    width: 85%;
  }
  .w90 {
    width: 95%;
  }
  .main03_point {
    margin-left: -1%;
  }

  #goods32605 .pdguide_main_03_01item {
    top: 43%;
    left: 5%;
    width: 37%;
  }

  .pdguide section.fv .fv__txt p {
    font-size: 0.85em;
  }
  .pdguide h3 {
    margin: 0 0 10%;
    font-size: 0.95em;
  }
  .pdguide h3:after {
    border-left: 50vw solid transparent;
    border-right: 50vw solid transparent;
    border-top: 40px solid #97ca90;
  }
  .pdguide h4 {
    font-size: 1.2em;
  }
  .pdguide .checkpoint {
    width: 95%;
  }
  .pdguide .checkpoint dt {
    font-size: 1.5em;
  }
  .pdguide .checkpoint li {
    font-size: 1em;
  }
  .pdguide .checkpoint li:before {
    width: 5px;
    height: 15px;
    top: 15%;
    left: 3%;
    border-right: 3px solid #f4535e;
    border-bottom: 3px solid #f4535e;
  }
  .pdguide .checkpoint .ribbon {
    width: 55px;
  }
  .pdguide .checkpoint .ribbon:after {
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
  }
  .pdguide .checkpoint .ribbon:after {
    border-left-width: 20px !important;
  }
  h4 span {
    display: block;
  }
  .pdguide h3:after {
    border-top-width: 50px !important;
  }
  .display_exact .c-panel__header {
    font-size: 80%;
  }
  .display_exact .c-panel__header img {
    width: 40%;
    float: left;
    text-align: left;
  }
  .display_exact .c-panel__body {
    margin-left: 43%;
  }
  .display_exact .btn {
    width: 65%;
    margin-left: 40%;
    margin-top: 1%;
  }

  /* 画面下部すべて見るボタン調整 */
  .l-footer .btn-sm {
    padding: 6px 16px;
    font-size: 1.2rem;
    line-height: 1.5;
    border-radius: 30px;
  }
}

dt,
dd,
li {
  letter-spacing: normal;
}
ol,
ul,
li {
  list-style: none;
}
/* テンプレート ------------------- */

.goods_set {
  height: 207px;
}
/* テキスト部分 */
.display_exact .c-panel__body {
  flex: 1;
  gap: 6px;
  margin-top: 0 !important;
}

/* 価格色調整 */
.display_exact .c-panel__price-wrapper {
  color: #f30;
}
.display_exact .c-price {
  margin-top: 0.5em;
  line-height: 1;
  font-size: 130%;
}

/* ボタン調整 */
.display_exact .c-panel__action {
  display: none;
}
.display_exact .c-panel__desc {
  display: none;
}
.display_exact .c-panel__body {
  text-align: left;
}