/*
 Theme Name:   Twenty Seventeen Child - Namickey Tropical
 Theme URI:    https://namickeytours.net/
 Description:  ナミッキーツアーズ用 トロピカルフラワー配色の子テーマ
 Author:       Namickey Tours
 Template:     twentyseventeen
 Version:      1.0.3
*/

/* ==========================================================
   1. カラーパレット（トロピカルフラワー）
   ========================================================== */
:root{
  --nm-pink:   #E8527A; /* ハイビスカスピンク */
  --nm-yellow: #FFD166; /* プルメリアイエロー */
  --nm-green:  #0F5C4A; /* 深緑パーム */
  --nm-green-light: #1B7A63;
  --nm-cream:  #FFF6E9; /* クリームサンド */
  --nm-ink:    #2E2018;
}

/* ==========================================================
   2. フォント（Google Fonts は functions.php で読み込み）
   ========================================================== */
body{
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--nm-ink);
  background-color: var(--nm-cream);
  overflow-x: hidden;
}

.site-title a,
.site-title a:hover,
.entry-title a,
h1, h2, h3 {
  font-family: "Fredoka", "Noto Sans JP", sans-serif;
  color: var(--nm-green);
}

/* ==========================================================
   3. ヘッダー / サイトタイトル
   ========================================================== */
#masthead,
.navigation-top {
  background: linear-gradient(135deg, var(--nm-green) 0%, var(--nm-green-light) 100%);
}

.site-title a {
  color: #fff !important;
  font-weight: 700;
  letter-spacing: .02em;
}

.site-description {
  color: var(--nm-yellow) !important;
}

/* ヘッダー下の波の演出 */
#masthead::after{
  content:"";
  display:block;
  width:100%;
  height:40px;
  background:
    linear-gradient(135deg, var(--nm-green) 0%, var(--nm-green-light) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C150,40 350,0 600,20 C850,40 1050,0 1200,20 L1200,40 L0,40 Z' fill='%23FFF6E9'/%3E%3C/svg%3E") no-repeat bottom;
  background-size: 100% 40px;
}

/* ==========================================================
   4. リンク / ボタン
   ========================================================== */
a {
  color: var(--nm-pink);
}
a:hover,
a:focus {
  color: var(--nm-green);
}

button,
.button,
input[type="button"],
input[type="submit"],
.search-submit {
  background-color: var(--nm-pink) !important;
  border-color: var(--nm-pink) !important;
  color: #fff !important;
  border-radius: 999px;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  letter-spacing: .02em;
  transition: background-color .2s ease, transform .2s ease;
}
button:hover,
.button:hover,
input[type="submit"]:hover {
  background-color: var(--nm-green) !important;
  border-color: var(--nm-green) !important;
  transform: translateY(-2px);
}

/* ==========================================================
   5. 投稿カード（お客様紹介の各投稿）
   ========================================================== */
.entry-content,
.type-post {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 26px rgba(15, 92, 74, 0.10);
}

.entry-title a{
  border-bottom: 3px solid var(--nm-yellow);
  padding-bottom: 2px;
}

.entry-content img{
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(15, 92, 74, 0.15);
}

.entry-meta,
.entry-meta a {
  color: var(--nm-pink) !important;
  font-family: "Fredoka", sans-serif;
  font-size: 0.8rem;
}

/* ==========================================================
   6. サイドバー（検索・アーカイブ）
   ========================================================== */
.widget-title {
  color: var(--nm-green);
  font-family: "Fredoka", sans-serif;
  border-bottom: 2px solid var(--nm-yellow);
  padding-bottom: 8px;
  display: inline-block;
}

.widget {
  background: #fff;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 8px 18px rgba(15, 92, 74, 0.08);
  margin-bottom: 24px;
}

.search-form input[type="search"]{
  border: 2px solid var(--nm-yellow);
  border-radius: 999px 0 0 999px;
  padding: 8px 16px;
}

/* ==========================================================
   7. お客様投稿カード（ポラロイド風・キラキラ演出）
   ※ article要素に自動で適用されるので、過去・今後の
     すべての投稿（432件含む）に一括で反映されます
   ========================================================== */

.type-post{
  position: relative;
  margin-bottom: 46px !important;
}
.type-post:hover{
  transform: translateY(-4px);
  transition: transform .25s ease;
}

/* テープ留め風の装飾 */
.type-post::before{
  content:"";
  position:absolute;
  top:-10px; left:50%;
  transform:translateX(-50%) rotate(-3deg);
  width:64px; height:22px;
  background:rgba(255,209,102,.85);
  border:1px solid rgba(255,209,102,1);
  box-shadow:0 3px 6px rgba(0,0,0,.12);
  z-index:2;
}

/* タイトル横のキラキラ */
.entry-title a::before{
  content:"✦";
  display:inline-block;
  color: var(--nm-yellow);
  margin-right:8px;
  animation: nm-twinkle 2.4s ease-in-out infinite;
}
@keyframes nm-twinkle{
  0%,100%{ opacity:.35; transform:scale(0.85); }
  50%{ opacity:1; transform:scale(1.15); }
}

/* 投稿内の写真をポラロイド風フレームに */
.entry-content img{
  display:block;
  background:#fff;
  padding:8px 8px 22px;
  border:1px solid rgba(15,92,74,0.08);
  max-width:100%;
  height:auto;
}

/* 投稿と投稿の間に波の区切り線 */
.type-post + .type-post{
  position:relative;
  padding-top:40px;
}
.type-post + .type-post::after{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M0,7 C25,14 50,0 75,7 C100,14 125,0 150,7 C175,14 190,7 200,7' fill='none' stroke='%23FFD166' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 100px 14px;
  opacity:.9;
}

@media (prefers-reduced-motion: reduce){
  .entry-title a::before{ animation:none; }
}

/* ==========================================================
   8. フッター
   ========================================================== */
#colophon,
.site-footer {
  background: linear-gradient(180deg, var(--nm-green) 0%, #0B3B2E 100%);
  color: #fff;
}
.site-footer a {
  color: var(--nm-yellow);
}