body{
margin:0;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;
background:#f5f5f5;
color:#333;
}

/* ヘッダー */

.header{
background:white;
border-bottom:1px solid #eee;
}

.header-inner{
max-width:1100px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
padding:15px;
}

.logo img{
height:100px;
}

/* メニュー */

.nav ul{
display:flex;
gap:25px;
list-style:none;
margin:0;
padding:0;
}

.nav a{
text-decoration:none;
color:#333;
font-weight:500;
}

.nav a:hover{
color:#ff8aa0;
}

/* メイン画像 */

.hero img{
width:100%;
max-height:420px;
object-fit:cover;
}

/* レイアウト */

.container{
max-width:1100px;
margin:auto;
display:flex;
gap:30px;
padding:20px;
}

.main{
flex:3;
}

.sidebar{
flex:1;
}

/* カード */
.card-grid{
display:grid;
grid-template-columns:1fr;
gap:20px;
}
.card{
background:white;
border-radius:10px;
overflow:hidden;
box-shadow:0 4px 15px rgba(0,0,0,0.05);
}

.card img{
width:100%;
height:300px;
object-fit:cover;
}

.card h3{
padding:10px;
margin:0;
}

.card p{
padding:0 10px 15px;
color:#666;
}

/* サイドバー */

.widget{
background:white;
padding:20px;
margin-bottom:20px;
border-radius:10px;
box-shadow:0 3px 10px rgba(0,0,0,0.05);
}

.profile-img{
width:120px;
height:120px;
border-radius:50%;
object-fit:cover;
display:block;
margin:10px auto;
}

/* 記事 */

.article{
max-width:800px;
margin:auto;
background:white;
padding:40px;
margin-top:30px;
border-radius:10px;
box-shadow:0 3px 10px rgba(0,0,0,0.05);
}

.eyecatch{
width:100%;
border-radius:10px;
margin:20px 0;
}

/* フッター */

footer{
text-align:center;
padding:40px;
color:#777;
}

/* スマホ */

@media (max-width:768px){

.container{
flex-direction:column;
}

.nav ul{
flex-wrap:wrap;
justify-content:center;
}

}

/* post1 */
/* 日付 */

.date{
color:#999;
margin-bottom:20px;
}

/* 目次 */

.toc{
background:#fff4f6;
padding:20px;
border-radius:10px;
margin:30px 0;
}

.toc ul{
padding-left:20px;
}

/* 見出し */

.article h2{
border-left:5px solid #ff8aa0;
padding-left:10px;
margin-top:40px;
}

/* ボックス */

.box{
background:#f8f8f8;
padding:20px;
border-radius:10px;
margin:20px 0;
}

/* 吹き出し */

.speech{
background:#fff0f3;
padding:20px;
border-radius:10px;
margin:20px 0;
}

/* お問い合わせ */
form{
margin-top:30px;
}

label{
display:block;
margin-top:20px;
font-weight:600;
}

input,
textarea{
width:100%;
padding:12px;
margin-top:5px;
border:1px solid #ddd;
border-radius:6px;
font-size:16px;
}

button{
margin-top:20px;
padding:12px 25px;
border:none;
background:#ff8aa0;
color:white;
font-size:16px;
border-radius:6px;
cursor:pointer;
}

button:hover{
opacity:0.9;
}

/* =============================
   記事一覧ページ (articles.html)
   css/style.css に追記してください
   ============================= */

.articles-main {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
}

.articles-main h1 {
  font-size: 1.6rem;
  margin-bottom: 8px;
  border-bottom: 2px solid #f4a7b9;
  padding-bottom: 8px;
}

.articles-count {
  color: #999;
  font-size: 0.9rem;
  margin-bottom: 24px;
}

.articles-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.articles-item {
  border-bottom: 1px solid #eee;
  padding: 16px 0;
}

.articles-item a {
  display: flex;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  align-items: center;
}

.articles-item a:hover .articles-title {
  color: #f4a7b9;
}

.articles-thumb {
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.articles-info {
  flex: 1;
}

.articles-date {
  font-size: 0.8rem;
  color: #999;
  display: block;
  margin-bottom: 4px;
}

.articles-title {
  font-size: 1rem;
  font-weight: bold;
  margin: 0 0 6px;
  line-height: 1.5;
}

.articles-desc {
  font-size: 0.85rem;
  color: #666;
  margin: 0;
  line-height: 1.5;
}

/* スマホ対応 */
@media (max-width: 480px) {
  .articles-thumb {
    width: 90px;
    height: 60px;
  }
  .articles-title {
    font-size: 0.9rem;
  }
}
/* =============================
   Amazonリンクボックス
   css/style.css に追記してください
   ============================= */

.amazon-link {
  background: #fff8e1;
  border: 1px solid #f4a7b9;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 32px 0;
  text-align: center;
}

.amazon-link p {
  margin: 0 0 8px;
  font-size: 0.9rem;
  color: #666;
}

.amazon-link a {
  display: inline-block;
  background: #f4a7b9;
  color: #fff;
  padding: 10px 24px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.95rem;
}

.amazon-link a:hover {
  background: #e0839a;
}

/* =============================
   商品カード (:::product)
   css/style.css に追記してください
   ============================= */

.product-card {
  border: 1px solid #f4a7b9;
  border-radius: 8px;
  margin: 24px 0;
  overflow: hidden;
}

.product-card a {
  display: flex;
  gap: 16px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  align-items: center;
}

.product-card a:hover {
  background: #fff8f9;
}

.product-card img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  flex-shrink: 0;
}

.product-info {
  flex: 1;
}

.product-name {
  font-weight: bold;
  font-size: 1rem;
  margin: 0 0 8px;
  line-height: 1.5;
}

.product-price {
  display: block;
  color: #c0392b;
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 10px;
}

.product-btn {
  display: inline-block;
  background: #f4a7b9;
  color: #fff;
  padding: 8px 20px;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: bold;
}

/* スマホ対応 */
@media (max-width: 480px) {
  .product-card a {
    flex-direction: column;
    align-items: flex-start;
  }
  .product-card img {
    width: 100%;
    height: auto;
  }
}

/* =============================
   メルカリ招待コードカード (:::mercari)
   css/style.css に追記してください
   ============================= */

.mercari-card {
  border: 2px solid #FF0211;
  border-radius: 8px;
  margin: 24px 0;
  overflow: hidden;
  text-align: center;
}

.mercari-card img {
  width: 100%;
  height: auto;
  display: block;
}

.mercari-info {
  padding: 16px 20px;
}

.mercari-text {
  font-size: 0.95rem;
  margin: 0 0 12px;
  color: #333;
}

.mercari-code-label {
  font-size: 0.8rem;
  color: #999;
  margin: 0 0 4px;
}

.mercari-code {
  font-size: 1.8rem;
  font-weight: bold;
  color: #FF0211;
  letter-spacing: 4px;
  margin: 0 0 16px;
  font-family: monospace;
}

.mercari-btn {
  display: inline-block;
  background: #FF0211;
  color: #fff;
  padding: 10px 28px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.95rem;
}

.mercari-card a {
  text-decoration: none;
}

.mercari-card a:hover .mercari-btn {
  background: #cc0000;
}

/* =============================
   プロフィールウィジェット（サイドバー用）
   css/style.css の末尾に追記してください
   ============================= */

.profile-widget {
  text-align: center;
}

.profile-widget .profile-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 12px;
  border: 3px solid #f4a7b9;
}

.profile-widget .profile-name {
  font-size: 1.1rem;
  font-weight: bold;
  margin: 0 0 4px;
  color: #333;
}

.profile-widget .profile-tag {
  display: inline-block;
  background: #fff0f3;
  color: #f4a7b9;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 2px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.profile-widget .profile-text {
  font-size: 0.88rem;
  color: #555;
  line-height: 1.8;
  text-align: left;
  margin-bottom: 14px;
}

.profile-widget .profile-info-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  text-align: left;
}

.profile-widget .profile-info-list li {
  font-size: 0.82rem;
  color: #666;
  padding: 5px 0;
  border-bottom: 1px dashed #f4a7b9;
  display: flex;
  gap: 8px;
}

.profile-widget .profile-info-list li:last-child {
  border-bottom: none;
}

.profile-widget .profile-info-list .info-label {
  color: #f4a7b9;
  font-weight: bold;
  white-space: nowrap;
  min-width: 56px;
}

.profile-widget .profile-link {
  display: inline-block;
  background: #f4a7b9;
  color: #fff;
  font-size: 0.85rem;
  font-weight: bold;
  padding: 8px 20px;
  border-radius: 4px;
  text-decoration: none;
}

.profile-widget .profile-link:hover {
  background: #e0839a;
}