@charset "utf-8";

/* 統一設定----------------------------- */
:root {
    /* --- カラー（Color） --- */
    --base-color: #faf3e0; /* 背景色 */
    --main-color: #6f4e37; /* メインカラー（コーヒーブラウン） */
    --accent-color: #f27a2c; /* アクセント（ボタンなど） */
    --text-color: #4a3a2a; /* 基本の文字色 */

    /* --- フォント種類 --- */
    /* Google Fontsを読み込む */
    --font-jp-Zen: 'Zen Maru Gothic', sans-serif;
    --font-jp-Noto: 'Noto Sans JP', sans-serif;
    --font-en-Playfair: 'Playfair Display', sans-serif;

    /* --- フォントサイズ --- */
    --fs-h1: 40px;
    --fs-h2: 28px;
    --fs-reg20: 20px;
    --fs-reg16: 16px;

    /* --- フォントウェイト（太さ） --- */
    --fw-bold: 700; /* ボールド（太字） */
    --fw-medium: 500; /* ミディアム（中太） */

    /*  --- ボタンの枠太さと色 ---  */
    --border-button-bold_color: 3px solid #d8cfc0; /* ボタンの枠の太さ */
    --border-button-radius: 6px; /* 枠の丸み */
}

h1 {
    font-family: var(--font-jp-Noto);
    color: var(--base-color);
    font-size: var(--fs-h1);
    line-height: 1.6; /* 文字の行間 */
    letter-spacing: 0.05em; /* 文字間隔 */
}

h2 {
    font-family: var(--font-jp-Noto);
    color: var(--text-color);
    font-size: var(--fs-h2);
}

p {
    font-family: var(--font-jp-Noto);
    color: var(--text-color);
    font-size: var(--fs-reg16);
}

/* body幅指定 */
.container {
    /* SP幅だが画像は画面いっぱい */
    max-width: 375px;
    margin: 0 auto;
    background: var(--base-color);
}

/* header----------------------------- */
.header_container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px;
    background-color: var(--main-color);
}

.header_logo {
    width: 100%;
}

/* hero----------------------------- */
.hero_img {
    position: relative; /* 擬似要素の基準 */
    display: flex;

    /* 背景にファーストビュー画像を設定 */
    background-image: url(../img/fv.jpg);

    /* 画像の繰り返し表示を防ぐ */
    background-repeat: no-repeat;

    /* 要素全体を覆うように画像を拡大・縮小（トリミングされてもOK） */
    background-size: cover;

    /* 画像の中央を基準に表示（画面サイズが変わっても中央を維持） */
    background-position: center;

    /* 画面の高さからヘッダー分（40px）を引いた高さを確保
       → ファーストビューを画面いっぱいに表示するため */
    min-height: calc(100vh - 40px);

    /* 中の文字やボタンを中央配置するためにFlexboxを使用 */

    align-items: flex-end; /* 下に配置*/

    /* 横方向（左右）の中央揃え */
    justify-content: center;
}

/* 画像の下半分に半透明のボックス */
.hero_container {
    position: absolute;
    z-index: 9990;

    width: 100%;
    height: 65%;

    background: rgba(111, 78, 55, 0.7);
}

.hero_text {
    position: absolute;
    width: 100%;
    height: 65%;

    padding: 0 52px 20px 51px;
    z-index: 9998;

    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 疑似要素の影響で文字が下になるので上にする */
.hero_text h1 {
    color: var(--base-color);
}

.reg20 {
    font-size: var(--fs-reg20);
}

.hero_text p {
    color: var(--base-color);
}

.hero_buttons {
    display: flex;
    justify-content: center;
}

.hero_button {
    display: flex; /* 中身を自由自 */
    justify-content: center; /* 横の真ん中 */
    align-items: center; /* 縦の真ん中 */

    /* ボタンの箱のサイズ */
    width: 192px;
    height: 52px;

    /* ボタンの文字と背景色 */
    background-color: var(--accent-color);
    color: var(--base-color);

    font-family: var(--font-jp-Noto);

    /* ボタンの枠 */
    border: var(--border-button-bold_color);
    border-radius: var(--border-button-radius);

    /* 【追加】変化を0.3秒かけて滑らかにする hoverに記載するとマウスを離したときパッと消える*/
    transition: 0.3s;
}

/* section container_beens----------------------------- */
.container_beens {
    display: flex;
    flex-direction: column;
    padding: 36px 45px;
    gap: 36px;
}

.container_beens h2 {
    padding: 0 28px;
}

.container_beens ul {
    padding: 0 25px;
}

.container_beens ul li {
    list-style-type: disc;
}

/* section container_about----------------------------- */
.container_about {
    display: flex;
    flex-direction: column;
    padding: 0 29px 36px;
    gap: 36px;
}

.container_about h2 {
    padding: 0 26.5px;
}

.container_about p {
    padding: auto;
}

.container_about ul {
    padding: 0 25px;
}

.container_about ul li {
    position: relative;
    padding-left: 20px; /* ✓のスペース */
}

.container_about ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--text-color);
    font-weight: bold;
}

/* section section_easy----------------------------- */
.section_easy {
    display: flex;
    flex-direction: column;
    padding: 0 34.5px 36px;
    gap: 36px;
}

.section_easy h2 {
    padding: 0 71.5px;
}

.section_easy p {
    padding: 0 10.5px;
}

/* section section_design----------------------------- */
.section_design {
    display: flex;
    flex-direction: column;
    padding: 0 23px 36px;
    gap: 36px;
}

.section_design h2 {
    padding: 0 auto;
}

.section_design p {
    padding: 0 14px;
}

/* section section_transformation----------------------------- */
.section_transformation {
    display: flex;
    flex-direction: column;
    padding: 0 52px 36px;
}

.section_transformation h2 {
    padding: 0 37.5px 36px;
}

.section_transformation p {
    padding: 0 10px;
}

.transformation {
    padding: 1rem 0;
}

.befo_aft {
    padding: 0 auto;
    margin-bottom: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

/* section section_voice----------------------------- */
.section_voice {
    display: flex;
    flex-direction: column;
    padding: 0 52px 36px;
    gap: 36px;
}

.section_voice h2 {
    padding: 0 54px;
}

.section_voice ul li {
    padding: 0 18px;
}

/* section subscription----------------------------- */
.subscription {
    display: flex;
    flex-direction: column;
    padding: 0 39.5px 36px;
    gap: 36px;
}

.subscription h2 {
    padding: 0 auto;
}

.subscription p {
    padding: 0 auto;
}

/* section final_cta---------------------------- */
.final_cta {
    display: flex;
    flex-direction: column;
    padding: 0 39.5px 36px;
    gap: 36px;
}

.final_cta h2 {
    padding: 0 auto;
}

.buttom_button {
    display: flex;
    justify-content: center;
}

.buttom_button {
    display: flex; /* 中身を自由自 */
    justify-content: center; /* 横の真ん中 */
    align-items: center; /* 縦の真ん中 */

    /* ボタンの箱のサイズ */
    width: 285px;
    height: 52px;

    /* ボタンの文字と背景色 */
    background-color: var(--accent-color);
    color: var(--base-color);

    font-family: var(--font-jp-Noto);

    /* ボタンの枠 */
    border: var(--border-button-bold_color);
    border-radius: var(--border-button-radius);

    /* 【追加】変化を0.3秒かけて滑らかにする hoverに記載するとマウスを離したときパッと消える*/
    transition: 0.3s;
}

.small {
    display: flex; /* 中身を自由自 */
    justify-content: center; /* 横の真ん中 */
    padding: 24px 0 0;
}

.footer_img {
    display: flex;
    justify-content: center;
        /* 背景にファーストビュー画像を設定 */
    background-image: url(../img/Footer_Logo.jpg);

    /* 画像の繰り返し表示を防ぐ */
    background-repeat: no-repeat;
}