@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700&display=swap");
/*
  article / information 共通：いいね・感想まわりのスタイル
  - 記事本体のレイアウトは article.css（.hgp-article 配下）
  - 出力は mu-plugins/hgp-article-reaction.php の hgp_reaction_render()
  - single-article.php の中で読み込む（header.php は触らない）
*/

/* ---- いいね・感想（mu-plugins/hgp-article-reaction.php が出力） ---- */
.hgp-article .hgp-reaction {
  width: 75%;
  max-width: 720px;
  margin: 0 auto 70px;
  padding: 48px 40px;
  background-color: #FDF6EC;
  text-align: center;
  color: #4C4948;
  font-family: "Zen Kaku Gothic New", sans-serif;
  box-sizing: border-box;
}
@media only screen and (max-width: 789px) {
  .hgp-article .hgp-reaction {
    width: 90%;
    margin-bottom: 50px;
    padding: 36px 20px;
  }
}
.hgp-article .hgp-reaction-lead {
  margin: 0 0 20px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.8;
}
.hgp-article .hgp-reaction .hgp-sm-only { display: none; }
@media only screen and (max-width: 789px) {
  .hgp-article .hgp-reaction-lead { font-size: 14px; }
  .hgp-article .hgp-reaction .hgp-sm-only { display: inline; }
}
.hgp-article .hgp-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 32px;
  border: 1px solid #4C4948;
  border-radius: 999px;
  background: #fff;
  color: #4C4948;
  font-family: Jost, "Zen Kaku Gothic New", sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.hgp-article .hgp-like-btn:hover { background-color: #E7EFF3; }
.hgp-article .hgp-like-heart {
  position: relative;
  width: 18px;
  height: 16px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 20.5S2 14.3 2 7.6A5.1 5.1 0 0 1 7.2 2.5c2 0 3.7 1.1 4.8 2.8 1.1-1.7 2.8-2.8 4.8-2.8A5.1 5.1 0 0 1 22 7.6c0 6.7-10 12.9-10 12.9z' fill='none' stroke='%234C4948' stroke-width='1.8'/%3E%3C/svg%3E");
}
.hgp-article .hgp-like-count {
  min-width: 1.5em;
  padding-left: 10px;
  border-left: 1px solid #AFAFAF;
}
.hgp-article .hgp-like-btn.is-liked {
  border-color: #E08A8A;
  background-color: #E08A8A;
  color: #fff;
}
.hgp-article .hgp-like-btn.is-liked:hover { background-color: #D47878; } /* もう一度押すと取り消し */
.hgp-article .hgp-like-btn.is-liked .hgp-like-heart {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 20.5S2 14.3 2 7.6A5.1 5.1 0 0 1 7.2 2.5c2 0 3.7 1.1 4.8 2.8 1.1-1.7 2.8-2.8 4.8-2.8A5.1 5.1 0 0 1 22 7.6c0 6.7-10 12.9-10 12.9z' fill='%23fff'/%3E%3C/svg%3E");
  animation: hgp-like-pop .4s ease-out;
}
.hgp-article .hgp-like-btn.is-liked .hgp-like-count { border-left-color: rgba(255,255,255,.6); }
@keyframes hgp-like-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
/* ---- 感想フォーム（いいね後に開く白いカード） ---- */
.hgp-article .hgp-feedback {
  margin: 32px auto 0;
  padding: 40px 36px 36px;
  border: 1px solid #E3ECEA;
  border-radius: 16px;
  background: #fff;
  text-align: left;
  color: #3F3A39;
  font-family: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s, transform .4s;
}
.hgp-article .hgp-feedback.is-open {
  opacity: 1;
  transform: none;
}
.hgp-article .hgp-feedback-title {
  margin: 0 0 16px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.08em;
}
.hgp-article .hgp-feedback-lead,
.hgp-article .hgp-feedback-present {
  margin: 0;
  text-align: center;
  color: #6B6461;
  font-size: 13px;
  line-height: 2;
  letter-spacing: 0.08em;
}
.hgp-article .hgp-feedback-field {
  display: block;
  margin-top: 28px;
}
.hgp-article .hgp-feedback-lead + .hgp-feedback-field,
.hgp-article .hgp-feedback-present + .hgp-feedback-field {
  margin-top: 36px;
}
.hgp-article .hgp-feedback-label {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.hgp-article .hgp-feedback-label em {
  margin-left: 8px;
  color: #B0646C;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}
.hgp-article .hgp-feedback input[type="text"],
.hgp-article .hgp-feedback input[type="tel"],
.hgp-article .hgp-feedback textarea {
  display: block;
  width: 100%;
  padding: 16px 20px;
  border: 1.5px solid #E2D9CF;
  border-radius: 10px;
  background: #fff;
  color: #3F3A39;
  font-family: inherit;
  font-size: 16px; /* iOS のズーム防止 */
  line-height: 1.7;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.hgp-article .hgp-feedback textarea {
  min-height: 180px;
  resize: vertical;
}
.hgp-article .hgp-feedback input:focus,
.hgp-article .hgp-feedback textarea:focus {
  border-color: #447A7E;
  outline: none;
}
.hgp-article .hgp-feedback textarea::placeholder { color: #A7A09B; }
.hgp-article .hgp-feedback-check {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  color: #6B6461;
  font-size: 14px;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.hgp-article .hgp-feedback-check input {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin: 0;
  border: 1.5px solid #8C8580;
  border-radius: 4px;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.hgp-article .hgp-feedback-check input:checked {
  border-color: #447A7E;
  background: #447A7E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 20px;
}
.hgp-article .hgp-feedback-privacy {
  margin: 24px 0 0;
  color: #6B6461;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}
.hgp-article .hgp-feedback .hgp-feedback-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.hgp-article .hgp-feedback-error {
  min-height: 1em;
  margin: 12px 0 0;
  color: #B0646C;
  font-size: 13px;
}
.hgp-article .hgp-feedback-submit {
  display: block;
  width: 100%;
  margin-top: 12px;
  text-align: center; /* reset.css の all:unset で中央寄せが消えるため明示 */
  line-height: 1.4;
  box-sizing: border-box;
  padding: 22px 20px;
  border: none;
  border-radius: 999px;
  background-color: #447A7E;
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background-color .2s;
}
.hgp-article .hgp-feedback-submit:hover { background-color: #3A6A6E; }
.hgp-article .hgp-feedback-submit:disabled { opacity: .5; cursor: default; }
.hgp-article .hgp-feedback-thanks {
  margin: 28px 0 0;
  font-size: 14px;
  font-weight: 500;
}
@media only screen and (max-width: 789px) {
  .hgp-article .hgp-feedback { padding: 32px 18px 28px; }
  .hgp-article .hgp-feedback-title { font-size: 16px; }
  .hgp-article .hgp-feedback-lead,
  .hgp-article .hgp-feedback-present { font-size: 12px; text-align: left; }
  .hgp-article .hgp-feedback-check { font-size: 13px; gap: 12px; }
  .hgp-article .hgp-feedback-submit { padding: 18px 20px; font-size: 16px; }
}
.hgp-article .hgp-reaction [hidden] { display: none !important; }

/* ---- 公開中の感想一覧（管理画面で「公開」にしたものだけ） ---- */
.hgp-article .hgp-feedback-list {
  margin: 40px 0 0;
  padding: 32px 0 0;
  border-top: 1px solid #DCDCD0;
  text-align: left;
}
.hgp-article .hgp-feedback-list-title {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
}
.hgp-article .hgp-feedback-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.hgp-article .hgp-feedback-item {
  margin: 0 0 12px;
  padding: 16px 20px;
  border-radius: 4px;
  background: #fff;
}
.hgp-article .hgp-feedback-item:last-child { margin-bottom: 0; }
.hgp-article .hgp-feedback-item-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  word-break: break-word;
}
.hgp-article .hgp-feedback-item-date {
  display: block;
  margin-top: 6px;
  color: #8A8786;
  font-family: Jost, sans-serif;
  font-size: 12px;
  text-align: right;
}
@media only screen and (max-width: 789px) {
  .hgp-article .hgp-feedback-list { margin-top: 32px; padding-top: 24px; }
  .hgp-article .hgp-feedback-item { padding: 14px 16px; }
}