/*
Theme Name: AIM Selling Theme
Author: Your Name
Description: オリジナルテーマ
Version: 1.0
*/

/* 冒頭に追加：サイトの基本色を変数で管理する */
/* :root {
    --main-color: #0073aa;      
    --main-color-hover: #005a87; 
} */

/* =========================================
   1. サイト全体の基本設定
   ========================================= */
body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #333;
    line-height: 1.8;
    margin: 0;
    background-color: #f9f9f9; /* 目に優しい薄いグレー */
}

/* プロンプトやコードを表示する枠 */
code {
    background-color: #f0f0f0;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
    color: #d63384; /* 少し目立つ色に */
}

pre {
    background: #2d2d2d;
    color: #f8f8f2;
    padding: 20px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 20px 0;
}

/* =========================================
   2. レイアウト（配置）
   ========================================= */
.container {
    max-width: 1000px;  /* 画面の最大幅 */
    margin: 0 auto;     /* 真ん中に寄せる */
    padding: 0 20px;    /* 左右に少し余白を作る */
}

/* =========================================
   3. ヘッダー（サイト上部）
   ========================================= */
.site-header {
    background-color: #ffffff;
    padding: 20px 0;
    border-bottom: 3px solid #0073aa; /* WordPressっぽい青色のアクセント */
    text-align: center;
}

.site-title a {
    text-decoration: none;
    color: var(--main-color);
    font-size: 2rem;
    font-weight: bold;
}

/* =========================================
   4. メインコンテンツ
   ========================================= */
.main-content {
    background-color: #ffffff;
    padding: 40px;
    margin-top: 20px;
    border-radius: 8px; /* 角を少し丸くする */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 軽い影で浮かせる */
}

/* =========================================
   5. お問い合わせフォーム用の装飾
   ========================================= */
.contact-section {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 2px dashed #ccc;
}


/* お問い合わせフォームの調整 */
.contact-item {
    margin-bottom: 20px;
}
.contact-item label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}
.contact-item input, .contact-item textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* 枠線を含めた幅計算にする設定 */
}
.contact-submit input {
    background: #0073aa;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 5px;
    cursor: pointer;
}
.contact-submit input:hover {
    background: #005a87;
}


/* 記事詳細ページの装飾 */
.post-detail-content {
    background: #fff;
    padding: 50px;
    margin-top: 30px;
    border-radius: 12px;
}

.post-title {
    font-size: 2.2rem;
    color: #1a1a1a;
    line-height: 1.3;
    margin-bottom: 10px;
}

.post-meta {
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 30px;
}

/* 本文内の見出し（h2）をプロっぽく */
.post-body h2 {
    position: relative;
    padding: 15px 20px;
    background: #f4f7f9;
    border-left: 6px solid #0073aa;
    margin: 40px 0 20px;
    font-size: 1.6rem;
}

/* 本文内の見出し（h3） */
.post-body h3 {
    border-bottom: 2px solid #0073aa;
    display: inline-block;
    padding-bottom: 5px;
    margin-top: 30px;
}

/* 本文の文字の読みやすさ */
.post-body p {
    margin-bottom: 1.8em;
    font-size: 1.1rem;
    letter-spacing: 0.03em;
}

/* 文字の強調（太字）を少し目立たせる */
.post-body strong {
    background: linear-gradient(transparent 70%, #fffacd 70%); /* 黄色のマーカー風 */
    font-weight: bold;
}

/* 引用文（blockquote）をオシャレに */
.post-body blockquote {
    position: relative;
    padding: 20px 30px;
    box-sizing: border-box;
    font-style: italic;
    background: #f9f9f9;
    color: #555;
    border-left: 4px solid #ccc;
    margin: 30px 0;
}

/* 記事内の画像に高級感を出す装飾 */
.post-body img {
    border: 1px solid #ddd;
    padding: 5px;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    margin: 20px 0;
    max-width: 100%;
    height: auto;
}

/* 記事内で使えるオシャレなボタンのベース */
.custom-button {
    display: inline-block;
    padding: 12px 28px;
    background-color: #0073aa;
    color: #fff;
    text-decoration: none;
    border-radius: 50px; /* 流行りの丸みのあるボタン */
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,115,170,0.2);
}

.custom-button:hover {
    background-color: #005a87;
    transform: translateY(-2px); /* 少し浮き上がる演出 */
    box-shadow: 0 6px 20px rgba(0,115,170,0.3);
}

/* 記事内で使えるポイント枠 */
.point-box {
    background: #fdfdfd;
    border: 2px dashed #0073aa;
    padding: 25px;
    margin: 30px 0;
    position: relative;
    border-radius: 8px;
}

.point-box::before {
    content: "CHECK!";
    position: absolute;
    top: -12px;
    left: 20px;
    background: #0073aa;
    color: #fff;
    padding: 2px 12px;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 4px;
}

/* リスト（箇条書き）の装飾 */
.post-body ul {
    list-style: none;
    padding-left: 0;
}

.post-body ul li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 0.8em;
}

.post-body ul li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: #0073aa;
    font-weight: bold;
}

/* 簡易パンくずリストのスタイル（将来の実装用） */
.breadcrumb {
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 20px;
}

.breadcrumb a {
    color: #0073aa;
    text-decoration: none;
}

.breadcrumb a::after {
    content: ">";
    margin: 0 8px;
    color: #ccc;
}

/* フッターメニューの横並び調整 */
footer nav a {
    display: inline-block;
    padding: 5px 10px;
    transition: color 0.2s;
}

footer nav a:hover {
    color: #0073aa !important;
}



/* 注意喚起用のボックス */
.alert-box {
    background-color: #fff5f5;
    border: 1px solid #feb2b2;
    color: #c53030;
    padding: 20px;
    margin: 30px 0;
    border-radius: 8px;
    font-size: 0.95rem;
}

.alert-box strong {
    color: #9b2c2c;
}

/* 補足説明用のスタイル */
.note-text {
    font-size: 0.85rem;
    color: #666;
    background: #f1f1f1;
    padding: 10px 15px;
    border-radius: 4px;
    display: inline-block;
}

/* ステップ表示用の装飾 */
.workflow-step {
    display: flex;
    align-items: flex-start;
    margin: 40px 0;
}

.step-number {
    background: #0073aa;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    margin-right: 20px;
    flex-shrink: 0; /* 数字が潰れないように */
}

.step-content {
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.step-content h2 {
    margin-top: 0 !important; /* 余計な余白を消す */
}

/* モダンなグラデーションの見出し装飾 */
.trend-highlight {
    background: linear-gradient(90deg, #0073aa, #00c6ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    font-size: 1.2em;
}

/* 記事内の「まとめ」などを囲むモダンな枠 */
.modern-summary {
    background: #f8fafc;
    border-left: 5px solid #0073aa;
    padding: 25px;
    margin: 40px 0;
    box-shadow: 0 10px 25px rgba(0,0,0,0.03);
    border-radius: 0 10px 10px 0;
}

/* 運営者プロフィールボックス */
.author-box {
    background: #f9f9f9;
    border: 1px solid #eee;
    padding: 30px;
    margin-top: 50px;
    display: flex;
    align-items: center;
    border-radius: 10px;
}

.author-icon {
    width: 80px;
    height: 80px;
    background: #0073aa; /* ここにアイコン画像を入れる */
    border-radius: 50%;
    margin-right: 20px;
    flex-shrink: 0;
}

.author-info h3 {
    margin: 0 0 10px 0;
    font-size: 1.2rem;
}

.author-info p {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
}


/* メリットを表示するボックス */
.advantage-box {
    background-color: #f0f9ff;
    border: 1px solid #bae6fd;
    padding: 20px;
    margin: 30px 0;
    border-radius: 8px;
}

.advantage-box h4 {
    color: #0369a1;
    margin-top: 0;
    display: flex;
    align-items: center;
}

.advantage-box h4::before {
    content: "🚀";
    margin-right: 10px;
}