/*
Theme Name: FBIA専用テーマ
Text Domain: fbia
Version: 1.0
*/
@charset "UTF-8";

/* =========================================================================================================================================== */
/*
/* ベースデザイン
/*
/* =========================================================================================================================================== */

/* =========================================================================================================================================== */
/* Googleフォント
/* =========================================================================================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Noto+Sans+JP:wght@500;700;900&display=swap');


/* =========================================================================================================================================== */
/* CSS変数
/* =========================================================================================================================================== */
:root {
    --webfont-notosans :  'Noto Sans JP', sans-serif;
    --webfont-montserrat :  'Montserrat', sans-serif;

    --font-size-normal    : 16px;

    --font-weight-medium  : 500;
    --font-weight-bold    : 700;
    --font-weight-black   : 900;

    --width-100           : calc(100% - 30px);
    --content-width-1     : 1100px;
    --content-width-2     : 900px;

    --color-black     : #080910;
    --color-gray      : #707070;
    --color-gray2     : #BCBCBC;
    --color-gray3     : #D5D5D5;
    --color-blue      : #003399;
    --color-blue2     : #0050AC;
    --color-blue3     : #0065D9;
    --color-blue4     : #648EFF;
    --color-lightblue : #B3ECFF;
    --color-yellow    : #FFD92E;
    --color-yellow2   : #EDC40F;
    --color-yellow3   : #E6C94B;
    --color-white     : #ffffff;

    --height-adminbar : 32px;

    --zindex-header       : 100;
    --zindex-gnavi        : 200;
}

@media (max-width: 782px) {
    :root {
        --height-adminbar : 46px;
    }
}

/* =========================================================================================================================================== */
/* 共通・ベース設定
/* =========================================================================================================================================== */
* {
    box-sizing: border-box;
}

img {
    width: 100%;
    vertical-align: bottom;
}

a {
    color: var(--color-black);
    text-decoration: none;
}
html {
    height: -webkit-fill-available;
}

body {
	font-family: var(--webfont-notosans);
	font-weight: var(--font-weight-medium); 
	color: var(--color-black);
	font-size: var(--font-size-normal);
    min-height: 100vh;
    /* mobile viewport bug fix */
    min-height: -webkit-fill-available;  
}


/* =========================================================================================================================================== */
/* 共通パーツ
/* =========================================================================================================================================== */
/* ------------------------------------------------------------- */
/* FLEXレイアウト 
/* ------------------------------------------------------------- */
@media all {
    .grp_flex {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
}


/* 2列 (PC=2列、SP=1列）*/
@media all {
    .grp_flex.col2 .flex_col {
        width: calc((100% - 60px) / 2);
    }
}
@media (max-width: 767px) {
    .grp_flex.col2 .flex_col {
        width: 100%;
    }
}


/* ------------------------------------------------------------- */
/* H2 
/* ------------------------------------------------------------- */
@media all {
    .h2.center {
        text-align: center;
    }
}


/* h2 type1 */
@media all {
    .h2.type1 h2 {
        font-size: 32px;
        font-weight: var(--font-weight-black);
        letter-spacing: 0.0272em;
        line-height: 46px;
    }    
    .h2.type1 .h2_sub {
        padding-top: 2px;
        font-weight: var(--font-weight-bold);
        line-height: 19px;
        color: var(--color-yellow);
    }
}
@media (max-width: 767px) {
    .h2.type1 h2 {
        font-size: 24px;
        line-height: 35px;
    }
    .h2.type1 .h2_sub {
        padding-top: 3.5px;
    }
}

/* h2 type2 */
@media all {
    .h2.type2 h2 {
        font-size: 40px;
        font-weight: var(--font-weight-black);
        color: var(--color-black);
        letter-spacing: 0.0272em;
        line-height: 58px;
    }
    .h2.type2 .h2_sub {
        font-size: 20px;
        font-weight: var(--font-weight-bold);
        color: var(--color-blue3);
        line-height: 24px;
        padding-top: 7px;
    }
}
@media (max-width: 767px) {
    .h2.type2 h2 {
        font-size: 32px;
        line-height: 46px;
    }
    .h2.type2 .h2_sub {
        font-size: 17px;
        line-height: 20px;
        padding-top: 4px;
    }
}


/* ------------------------------------------------------------- */
/* ボタン
/* ------------------------------------------------------------- */
@media all {
    .blk_btn a {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        border-radius: 33px;
        box-shadow: 0 0 10px rgba(49, 47, 85, 0.25);
        margin: 0 auto;
        font-size: 22px;
        font-weight: var(--font-weight-bold);
    }
    .blk_btn.type1 a {
        max-width: 340px;
        height: 66px;
    }
    .blk_btn.blue a {
        background-color: var(--color-blue3);
        color: var(--color-white);
    }
    .blk_btn.blue a:hover {
        background-color: var(--color-blue2);
    }
}
@media (max-width: 767px) {
    .blk_btn.type1 a {
        max-width: 300px;
        height: 53px;
    }
    .blk_btn a {
        font-size: 16px;
    }
}


/* ------------------------------------------------------------- */
/* リンク
/* ------------------------------------------------------------- */
@media all {
    .blk_link.center {
        text-align: center;
    }
    .blk_link a {
        display: inline-block;
        font-size: 20px;
        line-height: 29px;
        font-weight: var(--font-weight-bold);
        letter-spacing: 0.0272em;
    }
    .blk_link a::after {
        content: "";
        display: inline-block;
        width: 28px;
        height: 28px;
        margin-left: 10px;
        vertical-align: bottom;
        background-image: url('assets/images/ico_arrow_right.svg');
        background-size: cover;
        transition: margin-left 0.3s ease;
    }
    .blk_link a:hover {
        color: var(--color-blue3);
    }
    
    .blk_link a:hover::after {
        margin-left: 20px;
    }
}
@media (max-width: 767px){
    .blk_link {
        text-align: center;
    }
    .blk_link a {
        font-size: 16px;
        line-height: 24px;
    }
    .blk_link a::after {
        width: 22px;
        height: 22px;
    }
}


/* ------------------------------------------------------------- */
/* テキスト
/* ------------------------------------------------------------- */
@media all {
    .blk_txt {
        line-height: 24px;
        letter-spacing: 0.0272em;
    }
}
@media (max-width: 767px){
    .blk_txt {
        font-size: 14px;
        line-height: 21px;
        letter-spacing: 0.0238em;
    }
}

/* =========================================================================================================================================== */
/* メインコンテンツ
/* =========================================================================================================================================== */
@media all {
    #site-content {
        min-height: calc(100vh - 84px - 451px);
    }
    
    .admin-bar #site-content {
        min-height: calc(100vh - 84px - 451px - var(--height-adminbar));
    }
}

@media (max-width: 1023px) {
    #site-content {
        min-height: calc(100vh - 64px - 531.59px);
    }

    .admin-bar #site-content {
        min-height: calc(100vh - 64px - 531.59px - var(--height-adminbar));
    }
}