@charset "UTF-8";

/*====================================================================================================

　CSS構成

　//絶対に変更しないCSS
　- reset.css           全てのブラウザ固有CSSをリセットするCSS。基本触らないこと。
　- bootstrap.min.css   Bootstrapコンポーネントを利用するためのCSS。基本触らないこと。
　- all.min.css         Font Awesome を利用するためのCSS。基本触らないこと。
　- aos.css             AOSを利用するためのCSS。基本触らないこと。

　//設定項目を基本的には変更しないCSS
　- base.css            基本の設定をまとめたもの。

　//メインで利用しているCSS
　- common.css          ヘッダー、フッター、下層ページのタイトルなど、共通ページレイアウトを記載したCSS
　- stlye.css           各ページ固有のレイアウトを記載したCSS

　//補助的に利用しているCSS
　- module.css          見出しやリスト、テーブルなど、共通利用できるパーツをまとめたCSS
　- utility.css         マージンやパディング、文字サイズや文字色など、補助的に利用できるCSS

====================================================================================================*/


/*------------------------------------------------------------------
  base
------------------------------------------------------------------*/

html {
    overflow-x: hidden;
    background-color: #FBECE9;
}

html {
    --bg-color: #f4f4f4;
    --primary-color: #8a8f9f;
    --primary-light-color: #fbebe9;
    --accent-deep-color: #ed402b;
    --accent-color: #fd4f3a;
    /* 水平垂直ずらし背景 */
    --green-color: #6db268;
    --sand-color: #dcbe8b;
    --sky-color: #87c4d6;
    --pink-color: #ff7b97;
    --purple-color: #6779fb;
    --orange-color: #fead45;
    --yellow-color: #ffed89;
    /* 斜めずらし背景 */
    --c-blue-color: #adc2fe;
    --c-green-color: #51bf49;
    --c-pink-color: #ffbbfb;
    --c-orange-color: #ffb975;
    --c-purple-color: #b188db;
    --c-red-color: #fe8b8b;
    --c-gray-color: #8a8f9f;
    --c-yellow-color: #f7ffb4;
    --c-sky-color: #c9f2ff;
    /* 基本カラー */
    --red-color: #f04545;
    --white-color: #fff;
    --gray-color: #BDBDBD;
    --gray-dark-color: #343333;
    --gray-light-color: #ececec;
    --black-color: #000;
    /* グラデ */
    --gradient-bronze: linear-gradient(90deg,
            #8f3a1a 0%,
            #be5c35 12%,
            #DB7154 25%,
            #D36B4E 38%,
            #9d4a31 54%,
            #873510 64%,
            #8b3918 72%,
            #9d4729 77%,
            #b7654b 81%,
            #cf856f 84%,
            #e69b86 87%,
            #d88f79 90%,
            #be6e55 94%,
            #873510 100%);
--gradient-stainless: linear-gradient(90deg,
        #1f1f1f 0%,
        #343434 26%,
        #6f6f6f 43%,
        #9a9a9a 50%,
        #6f6f6f 57%,
        #343434 74%,
        #1f1f1f 100%);

--gradient-aluminum: linear-gradient(90deg,
        #2a2a2a 0%,
        #505050 28%,
        #8f8f8f 44%,
        #c4c4c4 50%,
        #8f8f8f 56%,
        #505050 72%,
        #2a2a2a 100%);

--gradient-copper: linear-gradient(90deg,
        #6b270d 0%,
        #8f3514 28%,
        #bf6840 43%,
        #e09a78 50%,
        #bf6840 57%,
        #8f3514 72%,
        #5a1f0a 100%);

--gradient-brass: linear-gradient(90deg,
        #5a3506 0%,
        #8a5a12 28%,
        #c28f32 43%,
        #e2c16b 50%,
        #c28f32 57%,
        #8a5a12 72%,
        #4a2b04 100%);

--gradient-iron: linear-gradient(90deg,
        #111111 0%,
        #262626 30%,
        #4a4a4a 44%,
        #686868 50%,
        #4a4a4a 56%,
        #262626 70%,
        #0b0b0b 100%);
    /* 文字 */
    --letter-spacing: .025em;
    position: relative;
    font-family: "IBM Plex Sans JP", sans-serif;
    --en-font: "Syncopate", sans-serif;
    font-weight: 500;
    color: var(--black-color);
    line-height: 1.725;
    z-index: 1;
}


a {
    color: var(--black-color);
}

body {
    font-size: 1rem;
    background-color: #FBECE9;;
}

@media screen and (max-width:1599px) {
    body {
        font-size: 1rem;
    }
}

@media screen and (max-width:991px) {
    body {
        font-size: 1rem;
    }
}

@media screen and (max-width:374px) {
    body {
        font-size: 0.95rem;
    }
}

* {
    letter-spacing: var(--letter-spacing);
}

hr {
    border-top: 1px dashed #ccc;
    border-right: none;
    border-bottom: none;
    border-left: none;
}


/* input-style ----------------------------------------*/

input[type="text"],
input[type="password"],
input[type="tel"],
input[type="email"],
input[type="number"],
select,
textarea {
    padding: 8px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 3px;
}

select {
    padding: 8px 25px 8px 10px;
}

label:hover,
select:hover {
    cursor: pointer;
}

.inputfile_box {
    margin-bottom: 15px;
}

::-webkit-input-placeholder {
    color: #aaa;
    opacity: 1;
}

:-moz-placeholder {
    color: #aaa;
}

::-moz-placeholder {
    color: #aaaaaa;
    opacity: 1;
}

:-ms-input-placeholder {
    color: #aaa;
}


/*------------------------------------------------------------------
  Custom Bootstrap
------------------------------------------------------------------*/

.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-fluid {
    padding-left: 6vw;
    padding-right: 6vw;
}

@media (min-width: 576px) {

    .container,
    .container-sm {
        max-width: initial;
    }
}

@media screen and (min-width:768px) {

    .container,
    .container-sm,
    .container-md {
        max-width: initial;
    }
}

@media screen and (min-width:992px) {

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-fluid {
        padding-left: 60px;
        padding-right: 60px;
    }

    .container,
    .container-sm,
    .container-md,
    .container-lg {
        max-width: initial;
    }
}

@media screen and (min-width:1200px) {

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl {
        max-width: 1470px;
    }
}

@media print {

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-fluid {
        padding: 0 15px !important;
    }
}