@charset "utf-8";

/********************* 
変数宣言
**********************/

:root {
    /* 色の設定 */
    --main-color: #ffe9b7;
    --sub-color: #fdb266;
    --hover-color: #f17618;
    --text-color: #242424;
    --accent-color: #7ad44d;
    --white: #ffffff;
    /* 透過色の設定 */
    --white-transparent: rgba(255, 255, 255, 0.8);
    --black-transparent: rgba(0, 0, 0, 0.7);
    /* 色の設定ここまで */

    /* 余白の設定 */
    /* 共通設定 */
    --gutter-base: 8px;
    --gutter-2x: 16px;
    --gutter-3x: 24px;
    --gutter-4x: 32px;
    --gutter-5x: 40px;
    --gutter-6x: 48px;
    --gutter-7x: 56px;
    --gutter-8x: 64px;
    --gutter-9x: 72px;
    --gutter-10x: 80px;
    --gutter-20x: 160px;
    --gutter-30x: 240px;
    --gutter-40x: 320px;
    --gutter-50x: 400px;
    /* スマホ版の設定 */
    --section-gutter: 80px;
    --content-gutter: 40px;
    --header-gutter: 120px;
    --footer-gutter: 120px;
    /* PC版の設定 */
    --section-gutter-pc: 160px;
    --content-gutter-pc: 80px;
    --header-gutter-pc: 240px;
    --footer-gutter-pc: 240px;
    /* 余白の設定ここまで */

    /* 文字の設定 */
    /* 文字サイズの設定 */
    --size-sm: 12px;
    --size-md: 16px;
    --size-lg: 24px;
    --size-xl: 32px;
    --size-xxl: 40px;
    /* フォントの設定 */
    --font-sans: "Noto Sans JP";
    --font-serif: "Noto Serif JP";
    /* 文字の設定ここまで */
}

/********************* 
共通設定
**********************/

/* 全ページ共通 */

body {
    /* フォントをゴシック体にする */
    font-family: var(--font-sans);
    /* 文字サイズを基本のサイズにする */
    font-size: var(--size-md);
    /* 字詰めを1.4文字分にする */
    line-height: 1.4;
    /* 文字色を基本の文字色にする */
    color: var(--text-color);
}

/* PC版の設定 */

@media screen and (min-width:950px) {
    body {
        /* 字詰めを1.6文字分にする */
        line-height: 1.6;
    }

}

/*=====min-width:950px=====*/

/* 全ページ共通ここまで */

/* ページタイトルとメニュー */

header {
    /* ページ左上に固定する */
    position: absolute;
    top: 0;
    left: 0;
    /* keyよりも上に表示させる */
    z-index: 100;
    /* 横幅を画面いっぱいにする */
    width: 100%;
    /* 背景色を黒半透明にする */
    background-color: var(--black-transparent);
}

header h1 {
    /* ページタイトルの文字サイズを普通に */
    font-size: var(--size-md);

}

header h1 a {
    /* リンクを親要素いっぱいにする */
    display: block;
    /* リンク文字周りに余白を設ける */
    padding: var(--gutter-base);
}

header a {
    /* リンク色を白にする */
    color: var(--white);
    /* リンクの下線を消す */
    text-decoration: none;
    /* 文字縁取り */
    text-shadow:
        1px 1px 0 #000,
        -1px 1px 0 #000,
        -1px -1px 0 #000,
        1px -1px 0 #000;
}

header .header_link_wrap {
    /* リンクを横2つずつ並べる */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

header .header_link_wrap .header_link_list a {
    /* リンクを親要素いっぱいにする */
    display: block;
    /* リンク文字周りに余白を設ける */
    padding: var(--gutter-base);
    text-align: center;
}

/* PC版の設定 */

@media screen and (min-width:950px) {
    header {
        /* 背景色を透明にする */
        background-color: transparent;
    }

    header h1 {
        /* ページタイトルの文字サイズを1サイズ大きくする */
        font-size: var(--size-lg);
    }

    header h1 a {
        /* リンク文字周りの余白を2倍にする */
        padding: var(--gutter-2x);
        /* 文字の太さを普通にする */
        font-weight: normal;
    }

    header a {
        /* リンク文字色変化にかかる時間 */
        transition: 0.2s;
    }

    header a:hover {
        /* カーソルを合わせるとリンク文字色が変わる */
        color: var(--sub-color);
    }


    header .menu_wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    header .header_link_wrap {
        /* リンクを横に並べる */
        display: flex;
        /* リンク右にページタイトルと同じサイズの余白を設ける */
        margin-right: var(--gutter-2x);
    }

    header .header_link_wrap .header_link_list a {
        /* リンク文字周りに余白を設ける */
        padding: var(--gutter-base);
    }

}

/*=====min-width:950px=====*/

/* ページタイトルとメニューここまで */

/* フッターの設定 */

footer {
    /* フッター内の上下余白 */
    padding: var(--gutter-3x) 0;
    /* フッターの背景色 */
    background-color: var(--sub-color);
}

footer .footer_link_wrap {
    /* フッターのリンクを横並びにする */
    display: flex;
    /* リンクを中央配置にする */
    justify-content: center;
    /* リンクとコピーライト間の余白 */
    margin-bottom: var(--gutter-2x);
}

footer .footer_link_wrap .footer_link_list:not(:last-child) {
    /* 最後のリンク以外に右余白 */
    margin-right: var(--gutter-base);
}

footer .copyright {
    /* コピーライトを中央配置 */
    text-align: center;
    /* 文字を小さめにする */
    font-size: var(--size-sm);
}

/* PC版の設定 */
@media screen and (min-width:950px) {

    footer {
        /* フッター内の上下余白を2倍にする */
        padding: var(--gutter-6x) 0;
    }

    footer .footer_link_wrap .footer_link_list:not(:last-child) {
        /* 最後のリンク以外の右余白を2倍にする */
        margin-right: var(--gutter-2x);
    }

    footer .footer_link_wrap {
        /* リンクとコピーライト間の余白を2倍にする */
        margin-bottom: var(--gutter-4x);
    }

    footer a {
        /* リンク文字色変化にかかる時間 */
        transition: 0.2s;
    }

    footer a:hover {
        /* カーソルを合わせるとリンク文字色が変わる */
        color: var(--white);
    }

}

/*=====min-width:950px=====*/

/* フッターの設定ここまで */

/* ボタンの設定 */

.btn {
    /* ボタンの最大値を400pxにして中央配置 */
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.btn .btn_link {
    /* リンク部分を親要素いっぱいにする */
    display: block;
    width: 100%;
    /* 背景色 */
    background-color: var(--sub-color);
    /* 中央配置 */
    text-align: center;
    /* ボタン内部上下余白 */
    padding: var(--content-gutter) 0;
    /* リンクの下線を消す */
    text-decoration: none;
    /* 文字色を白にする */
    color: var(--white);
}

/* PC版の設定 */
@media screen and (min-width:950px) {
    .btn .btn_link {
        /* リンク文字を大きめにする */
        font-size: var(--size-lg);
        /* hover時間 */
        transition: 0.2s;
    }

    .btn .btn_link:hover {
        /* 背景色 */
        background-color: var(--hover-color);
    }
}

/*=====min-width:950px=====*/

/* ボタンの設定ここまで */

/* メールフォームへのリンクの設定 */
.contact_wrap {
    /* フッターの真上に位置するためフッター用余白を上に設ける */
    margin-top: var(--footer-gutter);
    /* 変更 */
    background-color: var(--main-color);
    /* 内容をすべて中央配置 */
    text-align: center;
    /* 上下左右に余白 */
    padding: var(--content-gutter) var(--gutter-base);
}

.contact_wrap .contact_caption {
    /* キャプションとボタンの間の余白 */
    margin-bottom: var(--content-gutter);
}

.contact_wrap .contact_btn {
    /* ボタンの最大値を400pxにして中央配置 */
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.contact_wrap .contact_btn .contact_btn_link {
    /* リンク部分を親要素いっぱいにする */
    display: block;
    width: 100%;
    /* 背景色 */
    background-color: var(--sub-color);
    /* 中央配置 */
    text-align: center;
    /* ボタン内部上下余白 */
    padding: var(--content-gutter) 0;
    /* リンクの下線を消す */
    text-decoration: none;
    /* 文字色を白にする */
    color: var(--white);
}

@media screen and (min-width:950px) {
    .contact_wrap {
        /* フッターの真上に位置するためフッター用余白を上に設ける PC版 */
        margin-top: var(--footer-gutter-pc);
        /* 上下余白を倍に 左右は不要 */
        padding: var(--content-gutter-pc) 0;
    }

    .contact_wrap .contact_caption {
        /* キャプションとボタンの間の余白 PC版 */
        margin-bottom: var(--content-gutter-pc);
        /* 文字を大きめにする */
        font-size: var(--size-lg);
    }

    .contact_wrap .contact_btn .contact_btn_link {
        /* リンク文字を大きめにする */
        font-size: var(--size-lg);
        /* hover秒数 */
        transition: 0.2s;
    }

    .contact_wrap .contact_btn .contact_btn_link:hover {
        /* 背景色 */
        background-color: var(--hover-color);
    }
}

/*=====min-width:950px=====*/

/* メールフォームへのリンクの設定ここまで */