@charset "utf-8";
/* ---------------------------------------------------------------------------------------------

    モジュールグループ

    サイト内全体で使いまわす事を想定

    接頭辞：mod_

--------------------------------------------------------------------------------------------- */

/* アンダーバーでつなぐ */


/* ----------------------------------------------

 * mod_sronly
 * Screen Reader Only
 * 
 * 適用対象 : all
 * 
 ---------------------------------------------- */

.mod_sronly {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}



/* ----------------------------------------------

 * mod_note
 * 注釈
 * 
 ---------------------------------------------- */
.mod_note {
    font-size: 90%;
}

/* ----------------------------------------------

 * mod_r-corners
 * 角丸
 * 
 ---------------------------------------------- */
.mod_r-corners {
    color: #fff;
    padding: 1em;
    text-align: center;
    border-radius: 25px;
    background-color: var(--footer_heading_color);
}

/* ----------------------------------------------

 * mod_txt-c
 * テキスト中央ぞろえ
 * 
 ---------------------------------------------- */
.mod_txt-c {
    text-align: center;
}

/* ----------------------------------------------

 * mod_txt-r
 * テキスト右ぞろえ
 * 
 ---------------------------------------------- */
.mod_txt-r {
    text-align: right;
}

/* ----------------------------------------------

 * mod_txt-bold
 * テキスト太字
 * 
 ---------------------------------------------- */
.mod_txt-bold {
    font-weight: bold;
}


/* ----------------------------------------------

 * mod_box-centered
 * 角丸
 * 
 ---------------------------------------------- */
.mod_box-centered {
    margin: auto;
}

/* モバイル */
@media not screen and (min-width: 1280px) {
    .mod_box-centered {
        width: auto;
        padding: 0 1em;
    }
}

/* パソコン */
@media print,
screen and (min-width : 1280px) {
    .mod_box-centered {
        width: 80%;
        margin: auto;
    }
}

/* ----------------------------------------------

 * 表示非表示
 * 
 ---------------------------------------------- */
/* モバイル */
@media not screen and (min-width: 1280px) {
    /* スマホ時のみ非表示 */
    .mod_display_false_mb {
        display: none;
    }
}

/* パソコン */
@media print,
screen and (min-width : 1280px) {
    /* PCの時のみ非表示 */
    .mod_display_false_pc {
        display: none;
    }
}

/* ----------------------------------------------

 * mod_sliders
 * スライダー表示の基本的な設定
 * 
 * 適用対象 : block-level element
 * 
 ---------------------------------------------- */

.mod_sliders {
    position: relative;

    overflow: hidden;

    width: 100%;
    height: 100%;

}
    .mod_sliders img {
        width: 100%;
    }

/* ----------------------------------------------

 * mod_movies
 * YouTube等のiframeで表示される動画をレスポンシブに対応する
 * 
 * 適用対象 : block-level element
 *
 ---------------------------------------------- */
.mod_movies {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
    .mod_movies iframe {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }


/* ----------------------------------------------

 * mod_btn
 * 
 * ボタンの設定

 ---------------------------------------------- */
.mod_btn {
}

/* ----------------------------------------------

 * mod_fx
 * flex の宣言
 * 
 * 適用対象 : block-level element
 *
 ---------------------------------------------- */
.mod_fx {
    display: flex;
}


/* --------------------

 * mod_fx_dir_column
 * flexの方向をたてならびにする
 * 
 * 条件：mod_fx と併用
 *
 * 適用対象 : フレックスコンテナー
 *
 -------------------- */

.mod_fx_dir_column {
    flex-direction: column;
}


/*------------
 * mod_fx_mblonly_dir_column
 * スマホの時のみ direction を column にする
------------ */
@media not screen and ( min-width:1280px ) {
    .mod_fx_mblonly_dir_column {
        flex-direction: column;
    }
}


/* --------------------

 * mod_fx_dir_column_rev
 * 並びを逆にする（カラム）
 * 
 * 条件：mod_fx と併用
 *
 * 適用対象 : フレックスコンテナー
 *
 -------------------- */

.mod_fx_dir_column_rev {
    flex-direction: column-reverse;
}

/* --------------------

 * mod_fx_dir_row_rev
 * 並びを逆にする（列）
 * 
 * 条件：mod_fx と併用
 *
 * 適用対象 : フレックスコンテナー
 *
 -------------------- */

.mod_fx_dir_row_rev {
    flex-direction: row-reverse;
}


/* --------------------

 * mod_fx_wrap
 * 子要素の折り返し
 * 
 * 条件：mod_fx と併用
 * 
 * 適用対象 : フレックスコンテナー
 *
-------------------- */
.mod_fx_wrap {
    flex-wrap: wrap;
}

/* モバイル */
@media not screen and (min-width: 1280px) {
    .mod_fx_mbonly_wrap {
        flex-wrap: wrap;
    }
}

/* --------------------

 * mod_fx_jc_
 * 水平方向の揃え
 * 
 * 条件：mod_fx と併用
 * 
 * 適用対象 : フレックスコンテナー
 *
-------------------- */

/* ------------
 * mod_fx_jc_center
 * 中央寄せ
------------ */
.mod_fx_jc_center {
    justify-content: center;
}

@media screen and (min-width:1280px) {
    .mod_fx_pconly_jc_center {
        justify-content: center;
    }
}

/* ------------
 * mod_fx_jc_between
 * 均等配置
------------ */
.mod_fx_jc_between {
    justify-content: space-between;
}

/* ------------
 * mod_fx_shrink_none
 * 子要素をコンテナー要素にあわせて伸縮させない
------------ */
.mod_fx_shrink_none {
    flex-shrink: 0;
}

/* --------------------

 * mod_fx_row2
 * flex で横2つ並び
 * 
 * 条件：mod_fx と併用
 * 
 * 適用対象 :
 * 
-------------------- */

.mod_fx_row2 > * {
    width: calc(100% / 2);
}

/*------------
 * mod_fx_pconly_row2
 * PCのみ 横2つ並び にする
------------ */
@media screen and ( min-width:1280px ) {
    .mod_fx_pconly_row2 > * {
        width: calc(100% / 2);
    }
}


/* --------------------

 * mod_fx_row3
 * flex で横3つ並び
 * 
 * 条件：mod_fx と併用
 * 
 * 適用対象 :
 * 
 -------------------- */

.mod_fx_row3 > * {
    width: calc(100% / 3);
}

/*------------
 * mod_fx_pconly_row3
 * PCのみ 横3つ並び にする
------------ */
@media screen and ( min-width:1280px ) {
    .mod_fx_pconly_row3 > * {
        width: calc(100% / 3);
    }
}

/* --------------------
 *
 * 行や列の間のすき間の定義
 * 
 * 適用対象：段組み要素、フレックスコンテナー、グリッドコンテナー
 * 
--------------------*/

.mod_gap_column {
    column-gap: 1rem;
}

.mod_gap_column_2 {
    column-gap: 2rem;
}

.mod_gap_column_3 {
    column-gap: 3rem;
}

.mod_gap_row {
    row-gap: 1rem;
}

.mod_gap_row_2 {
    row-gap: 2rem;
}

.mod_gap_row_3 {
    row-gap: 3rem;
}

/*------------
 * 
 * スマホのみ カラムに隙間をつくる
------------ */
@media not screen and (min-width:1280px) {
    .mod_gap_column_mbonly {
        column-gap: 1rem;
    }

    .mod_gap_column_2_mbonly {
        column-gap: 2rem;
    }

    .mod_gap_column_3_mbonly {
        column-gap: 3rem;
    }

    .mod_gap_row_mbonly {
        row-gap: 1rem;
    }

    .mod_gap_row_2_mbonly {
        row-gap: 2rem;
    }
}

/*------------
 * 
 * PCのみ カラムに隙間をつくる
------------ */
@media screen and (min-width:1280px) {
    .mod_gap_column_pconly {
        column-gap: 1rem;
    }
        
    .mod_gap_column_2_pconly {
        column-gap: 2rem;
    }

    .mod_gap_column_3_pconly {
        column-gap: 3rem;
    }

    .mod_gap_row_pconly {
        row-gap: 1rem;
    }

    .mod_gap_row_2_pconly {
        row-gap: 2rem;
    }
}


/* --------------------
 * 
 * mod_fx_alnself_
 * flexアイテム（子要素の設定）
 * 
 * 条件：mod_fx と併用
 * 
 * 適用対象 : フレックスアイテム、グリッドアイテム、絶対位置指定のボックス
 * 
-------------------- */

/* ------------
 * 
 * mod_fx_alnself_end
 *
 * end flexアイテム（子要素）の垂直方向の揃えを下にする
 *
------------ */
.mod_fx_alnself_end {
    align-self: flex-end;
}


/* ------------
 * 
 * mod_fx_alnself_center
 *
 * center flexアイテム（子要素）の垂直方向の揃えを中央にする
 *
------------ */
.mod_fx_alnself_center {
    align-self: center;
}

/*------------
 * 
 * スマホのみ mod_fx_alnself_center_mbonly
------------ */
@media not screen and (min-width:1280px) {
    .mod_fx_alnself_center_mbonly {
        align-self: center;
    }
}


/* ------------
 * 
 * mod_fx_alnself_center
 *
 * center flexアイテム（子要素）の垂直方向の揃えを中央にする
 *
------------ */
.mod_fx_alnitems_center {
    align-items: center;
}

/* ------------
 * 
 * mod_order
 *
 * 並び順を変更する
 *
------------ */

.mod_order1 {
    order: 1;
}

.mod_order2 {
    order: 2;
}

.mod_order3 {
    order: 3;
}

.mod_order4 {
    order: 4;
}

.mod_order5 {
    order: 5;
}

.mod_order6 {
    order: 6;
}

/* ------------
 * 
 * mod_grid
 *
 * display: grid; の宣言
 *
------------ */
.mod_grid {
    display: grid;
}

/* ------------
 * 
 * mod_grid_1col
 *
 * 単純な1カラム
 *
------------ */

/*------------
 * mod_grid_1col_mbonly
 * スマホのみ 2カラムにする
------------ */
/* モバイル */
@media not screen and (min-width: 1280px) {
    .mod_grid_1col_mbonly {
        grid-template-columns: 1fr;
    }
}


/* ------------
 * 
 * mod_grid_2col
 *
 * 単純な2カラム
 *
------------ */

.mod_grid_2col {
    grid-template-columns: 1fr 1fr;
}

/*------------
 * mod_grid_2col_pconly
 * PCのみ 2カラムにする
------------ */
@media print,
screen and (min-width : 1280px) {
    .mod_grid_2col_pconly {
        grid-template-columns: 1fr 1fr;
    }
}



/* ------------
 * 
 * cell_merging
 *
 * 単純な2カラムの列を結合する
 *
------------ */
.mod_grid_2col .cell_merging {
    grid-column: 1/3;
}

/*------------
 * PCのみ 2カラムにする
------------ */
@media print,
screen and (min-width : 1280px) {
    .mod_grid_2col_pconly .cell_merging {
        grid-column: 1/3;
    }
}

/* ------------
 * 
 * mod_float-left
 *
 * float left
 *
------------ */
.mod_float-left {
    float: left;
}

@media print,
screen and (min-width : 1280px) {
    .mod_float-left_pconly {
        float: left;
    }
}

/*------------
 * PCのみ 
------------ */

/* ------------
 * 
 * mod_nowrap
 *
 * 改行させない
 *
------------ */
.mod_nowrap {
    white-space: nowrap;
}




/* ------------
 * 
 * mod_table_layout_fixed
 *
 * テーブルのセルを均等そろえにする
 *
------------ */
.mod_table_layout_fixed {
    table-layout: fixed;
}


/* ------------
 * 
 * mod_margin_b-s_1rem
 *
 * marginの上を1remあける
 *
------------ */

.mod_margin_b-s_1rem {
    margin-block-start: 1rem;
}

/* ------------
 * 
 * mod_margin_b-e_1rem
 *
 * marginの下を1remあける
 *
------------ */

.mod_margin_b-e_1rem {
    margin-block-end: 1rem;
}

/* モバイル */
@media not screen and (min-width: 1280px) {
    .mod_margin_b-e_1rem_mbonly {
        margin-block-end: 1rem;
    }
}

/* ------------
 * 
 * mod_margin_b-s_2rem
 *
 * marginの上を2remあける
 *
------------ */

.mod_margin_b-s_2rem {
    margin-block-start: 2rem;
}

/* ------------
 * 
 * mod_margin_b-e_2rem
 *
 * marginの下を2remあける
 *
------------ */

.mod_margin_b-e_2rem {
    margin-block-end: 2rem;
}

@media not screen and (min-width: 1280px) {
    .mod_margin_b-e_2rem_mbonly {
        margin-block-end: 2rem;
    }
}

/* ------------
 * 
 * mod_margin_b-e_3rem
 *
 * marginの下を3remあける
 *
------------ */

.mod_margin_b-e_3rem {
    margin-block-end: 3rem;
}

@media not screen and (min-width: 1280px) {
    .mod_margin_b-e_3rem_mbonly {
        margin-block-end: 3rem;
    }
}

/* ------------
 * 
 * mod_padding_b-e_2rem
 *
 * paddingの下を2remあける
 *
------------ */

.mod_padding_b-e_2rem {
    padding-block-end: 2rem;
}

/* ------------
 * 
 * table.mod_vertical_row
 *
 * テーブルレイアウトを縦並びにする
 *
------------ */
table.mod_vertical_row th,
table.mod_vertical_row td {
    display: block;
}

/*------------
 * table.mod_vertical_row_mbonly
 * スマホのみ テーブルレイアウトを縦並びにする
------------ */
/* モバイル */
@media not screen and (min-width: 1280px) {
    table.mod_vertical_row_mbonly th,
    table.mod_vertical_row_mbonly td {
        display: block;
    }
}

/*------------
 * .mod_scroll-x
 * スマホのみ テーブルを横スクロールできるようにする
------------ */
@media not screen and (min-width: 1280px) {

    .mod_scroll-x {
        display: block;
        overflow-x: scroll;
    }
        .mod_scroll-x table {
            width: 100%;
            
        }
}


/* ---------------------------------------------------------------------------------------------

 * Responsive Web Design Media Queries

--------------------------------------------------------------------------------------------- */
/* モバイル＞タブレット＞パソコン */


/* モバイル */
@media not screen and (min-width: 1280px) {}

/* パソコン */
@media print,
screen and (min-width : 1280px) {}