@charset "utf-8";

/*--------------------------------------------------------------
  根本設定
--------------------------------------------------------------*/
html,
body,
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box !important;

    color: #333;
    font-feature-settings: "palt" 1;
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
    text-align: justify;

    /* ルート要素で定義した変数を使用 */
    font-size: var(--base-font-size);
    line-height: var(--base-line-height);
}

a {
    font-size: 1rem;
    line-height: 1;
}

.inblock,
.inblock>* {
    display: inline-block;
}

/* clamp()をサポートしているブラウザ */
@supports (font-size: clamp(1px, 1vw, 1px)) {
    body {
        font-size: clamp(var(--base-font-size), 2vw, calc(var(--base-font-size) + 2px));
    }
}

/* clamp()をサポートしていないブラウザへの対応(min(), max()で代用) */
@supports not (font-size: clamp(1px, 1vw, 1px)) {
    body {
        /* 最小値と推奨値の大きい方を適用 */
        font-size: max(var(--base-font-size), 2vw);
        /* 推奨値と最大値の小さい方を適用 */
        font-size: min(calc(var(--base-font-size) + 2px), 2vw);
        /* 上書き */
    }
}

.noto-sans-jp-400 {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}


body {
    background-color: #fff;
}

.bg-img,
.bg-img-mobile {
    width: 100vw;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*--------------------------------------------------------------
    内側のリストマーカー
  --------------------------------------------------------------*/

/* ul要素全体に適用する場合 */
ul.custom-list-marker {
    margin: 0 0 0 1rem;
    padding: 0;
    list-style-type: none;
    padding-left: 0;
    list-style-position: outside;
}

ul.custom-list-marker li::marker {
    content: '・ ';
    color: #000;
    font-weight: bold;
}

/* 特定のli要素だけに適用することも可能 */
li.important-note::marker {
    content: '・ ';
}


/*--------------------------------------------------------------
    Bootstrapで印刷時にURLが表示されてしまうのを防ぐ
  --------------------------------------------------------------*/

@media print {
    a[href]:after {
        content: "" !important;
    }

    abbr[title]:after {
        content: "" !important;
    }
}


/*--------------------------------------------------------------
  main設定
--------------------------------------------------------------*/

main {
    margin: 0;
    padding: 0;
    width: 100vw;
    min-height: 100vh;
}

main .main-container {
    /* 横幅100%用コンテンツ */
    width: 100vw;
    margin: 0;
    padding: 0 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* フルサイズ-コンテナ */
main .container-max {
    /* border: 1px solid #f00; */
    /* メインコンテンツ */
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 960pxコンテナ */
main .container-just {
    width: 100vw;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

main .container-just>div {
    /* border: 1px solid #f00; */
    /* メインコンテンツ */
    width: 960px;
    margin: 0;
    padding: 3rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media (max-width: 767.98px) {

    /* sm 以下の画面サイズの場合のスタイル */
    main .container-just>div {
        width: 100vw;
        padding: 3rem 1rem;
    }
}

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

    /* md の画面サイズの場合のスタイル */
    main .container-just>div {
        width: 100vw;
        padding: 3rem 1rem;
    }
}

@media (min-width: 992px) {
    /* lg 以上の画面サイズの場合のスタイル */
}