/*
Theme Name: WOW WORKS
Theme URI:https://morioka-house-gide.com
Description: WOW WORKS　オリジナルテーマ
Version: 1.0.0
Author: WOW WORKS
Author URI: https://morioka-house-gide.com
Text Domain: WOW WORKS
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom, responsive, media, reform
*/

/* ==========================================================================
   CSS Variables（ここを変えるだけでサイト全体の色・フォントが変わります）
   ========================================================================== */
:root {
    /* フォント設定 */
    --font-mincho: 'Shippori Mincho', serif;
    --font-gothic: 'Zen Maru Gothic', sans-serif;

    /* カラー設定（Figmaの数値を優先して調整してください） */
    --color-text-main: #313131;    /* 濃い茶色の文字色（目に優しい） */
    --color-primary: #E9E5DD;      /* メインのベージュ・ブラウン（ボタンなど） */
    
    /* セクションごとの背景色（リズムを作るための絶妙な違い） */
    --bg-white: #ffffff;           /* 基本の白 */
    --bg-beige-light: #B6B09F;     /* FVの下や、FREE DESIGN等に */
    --bg-beige-accent: #AFAA9C;    /* さらに少し濃いベージュ */
}

/* ==========================================================================
   Base Styles
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* 基本は「Zen 丸ゴシック」を適用 */
    font-family: var(--font-gothic);
    line-height: 1.8;
    color: var(--color-text-main);
    background-color: var(--bg-white); /* ベース背景は白で固定 */
    -webkit-font-smoothing: antialiased;
}

/* 明朝体にしたい要素をここで一括指定 */
h1, h2, h3, h4, .text-mincho, .hero-title, .section-title {
    font-family: var(--font-mincho);
    font-weight: 700;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s ease;
}

a:hover {
    opacity: 0.7;
}

/* ==========================================================================
   Section Backgrounds（セクションごとにクラスを使い分けて管理）
   ========================================================================== */

/* 白背景のセクション */
.section-white {
    background-color: var(--bg-white);
}

/* 薄いベージュ背景のセクション（FREE DESIGNなど） */
.section-beige-light {
    background-color: var(--bg-beige-light);
}

/* 濃いベージュ背景のセクション（アクセント用） */
.section-beige-accent {
    background-color: var(--bg-beige-accent);
}


/* ==========================================================================
   Components - Square Buttons with Shadow
   ========================================================================== */

/* 共通設定 */
.button, .company-btn, .btn-red, .btn-beige {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;             /* 横幅いっぱいに広げる場合 */
    max-width: 340px;        /* カンプに合わせた最大幅 */
    padding: 18px 10px;      /* 上下に厚みを持たせる */
    font-size: 18px;         /* 文字を少し大きくして存在感を出す */
    font-weight: 700;
    border-radius: 0 !important; /* 絶対に四角！ */
    cursor: pointer;
    text-align: center;
    position: relative;
    transition: all 0.2s ease;
    /* パキッとした影（右と下に4px） */
    box-shadow: 4px 4px 0px #000; 
}

/* 🔴 赤ボタン（ルームクラフトに相談してみる） */
.btn-red {
    background-color: #8F2A20 !important;
    color: #ffffff !important;
}

/* ⚪️ ベージュボタン（紹介記事で詳しく見る） */
.btn-beige {
    background-color: #F2F2F2 !important;
    color: #000000 !important;
}

/* ✨ ホバー（マウスを乗せた時）の動き */
.btn-red:hover, .btn-beige:hover {
    opacity: 1 !important; /* 透明度は下げない */
    transform: translate(2px, 2px); /* ボタン自体を少し右下へ */
    box-shadow: 2px 2px 0px #000;   /* 影を少し短くして「押し込まれた感」を出す */
}

/* 矢印アイコンなどがあれば少し余白を作る */
.btn-arrow {
    margin-left: 10px;
}