/*
  Skin Name: マイスキン
  Description: 紫系レスポンシブ
  Skin URI: https://wp-cocoon.com/
  Author: 匿名希望
  Author URI: https://nelog.jp/
  Screenshot URI: https://im-cocoon.net/wp-content/uploads/skin-template.png
  Version: 1.0.2
  Priority: 9999000000
*/
/*以下にスタイルシートを記入してください*/


/* ------------------------------
   背景画像とオーバーレイ
--------------------------------*/
body {
  background-image: url("https://あなたのドメイン.com/wp-content/uploads/2025/09/background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.15); /* 半透明オーバーレイ */
  z-index: -1;
}

/* ------------------------------
   ヘッダー
--------------------------------*/
.header-container {
  background-color: #dbd0e6; /* メインカラー */
  color: #333333;
  padding: 20px 30px;
}

/* ------------------------------
   見出し
--------------------------------*/
h2 {
  color: #dbd0e6; /* メインカラー */
  border-bottom: 2px solid #a899c8; /* アクセント */
  padding-bottom: 5px;
  margin-top: 25px;
}

/* ------------------------------
   リンク
--------------------------------*/
a {
  color: #8c72b1;
}
a:hover {
  text-decoration: underline;
}

/* ------------------------------
   ボタン
--------------------------------*/
.button, .btn {
  background-color: #dbd0e6;
  color: #ffffff;
  border-radius: 5px;
  padding: 10px 20px;
  text-decoration: none;
  display: inline-block;
}

/* ------------------------------
   記事カード
--------------------------------*/
.entry-card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  padding: 20px;
  margin-bottom: 25px;
}

/* ------------------------------
   サイドバー
--------------------------------*/
.sidebar {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 25px;
}

/* ------------------------------
   タブレット表示（768px以下）
--------------------------------*/
@media screen and (max-width: 768px) {
  .header-container {
    padding: 15px 20px;
  }
  h2 {
    font-size: 1.4em;
  }
  .entry-card, .sidebar {
    padding: 15px;
    margin-bottom: 20px;
  }
  .button, .btn {
    width: 100%;
    text-align: center;
    padding: 12px 0;
  }
  .content-area, .sidebar {
    width: 100%;
    float: none;
    margin: 0 0 20px 0;
  }
}

/* ------------------------------
   スマホ表示（480px以下）
--------------------------------*/
@media screen and (max-width: 480px) {
  h2 {
    font-size: 1.2em;
  }
  body {
    font-size: 14px;
  }
  .header-container {
    padding: 10px 15px;
  }
  .entry-card, .sidebar {
    padding: 10px;
    margin-bottom: 15px;
  }
  .button, .btn {
    padding: 10px 0;
  }
}