/*
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-main: 'Hiragino Kaku Gothic StdN', 'ヒラギノ角ゴ StdN', 'M PLUS 1', sans-serif;
    --font-mplus: 'M PLUS 1', sans-serif;

    /* カラー設定（Figmaの数値を優先して調整してください） */
   --color-text-dark: #000;    /* 濃い茶色の文字色（目に優しい） */
   --color-main: #289BE6;      /* メインのベージュ・ブラウン（ボタンなど） */
   --color-accent-red: #F10134;

    /* セクションごとの背景色（リズムを作るための絶妙な違い） */
    --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
   ========================================================================== */


.btn-red, .btn-white {
    transition: all 0.15s ease !important; 
    transform: translate(0, 0) !important;
    box-shadow: none !important; 
}
.recommend-btns a:hover,
.btn-red:hover, .btn-white:hover  {
    opacity: 1 !important; 
    transform: translate(2px, 2px) !important;
    box-shadow: 2px 2px 0px #000 !important;  
}