/*
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;
    --content-width-3     : 930px;

    --color-black      : #080910;
    --color-black2     : #222222;
    --color-gray       : #707070;
    --color-gray2      : #BCBCBC;
    --color-gray3      : #D5D5D5;
    --color-gray4      : #F7F8FA;
    --color-gray5      : #EFEFEF;
    --color-gray6      : #D9D9D9;
    --color-blue       : #003399;
    --color-blue2      : #0050AC;
    --color-blue3      : #0065D9;
    --color-blue4      : #648EFF;
    --color-lightblue  : #B3ECFF;
    --color-lightblue2 : #DCEBEF;
    --color-yellow     : #FFD92E;
    --color-yellow2    : #EDC40F;
    --color-yellow3    : #E6C94B;
    --color-red        : #FF2E2E;
    --color-pink       : #FF0058;
    --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;  
}

.pc_only {
    display: block;
}
.sp_only {
    display: none;
}
@media (max-width: 767px){
    .pc_only {
        display: none;
    }
    .sp_only {
        display: block;
    }
}

/* =========================================================================================================================================== */
/* 共通パーツ
/* =========================================================================================================================================== */
/* ------------------------------------------------------------- */
/* 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%;
    }
}


/* ------------------------------------------------------------- */
/* パンくずリスト
/* ------------------------------------------------------------- */
@media all {
    #breadcrumb {
        padding-top: 15px;
    }
    #breadcrumb ul {
        display: block;
    }
    #breadcrumb ul li {
        display: inline;
        font-size: 12px;
        letter-spacing: 0.0238em;
        line-height: 17px;
        color: var(--color-black2);
    }
    #breadcrumb ul li a {
        color: var(--color-black2);
    }
    #breadcrumb ul li::after {
        content: "";
        display: inline-block;
        width: 0;
        height: 0;
        border-left: solid 5px var(--color-gray2);
        border-top: solid 4px transparent;
        border-bottom: solid 4px transparent;
        margin-left: 10px;
        margin-right: 7px;
    }
    #breadcrumb ul li:last-child::after {
        content: none;
    }
}
@media (max-width: 767px){
    #breadcrumb {
        padding-top: 10px;
    }
    #breadcrumb ul li {
        font-size: 10px;
        line-height: 15px;
    }
}


/* ------------------------------------------------------------- */
/* H1 
/* ------------------------------------------------------------- */
/* h1 type2 */
@media all {
    .h1.type2 h1 {
        font-size: 36px;
        font-weight: var(--font-weight-bold);
        letter-spacing: 0.0272em;
        line-height: 52px;
        color: var(--color-blue3);
    }
}
@media (max-width: 767px){
    .h1.type2 h1 {
        text-align: center;
        font-size: 23px;
        line-height: 34px;
    }
}


/* h1 type3 */
@media all {
    .h1.type3 h1 {
        font-size: 36px;
        font-weight: var(--font-weight-bold);
        letter-spacing: 0.0272em;
        line-height: 52px;
    }    
}
@media (max-width: 767px){
    .h1.type3 h1 {
        font-size: 23px;
        line-height: 34px;
    }
}


/* ------------------------------------------------------------- */
/* 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;
    }
}


/* h2 type3 */
@media all {
    .h2.type3 h2 {
        font-size: 32px;
        font-weight: var(--font-weight-bold);
        line-height: 46px;
        letter-spacing: 0.032em;
    }
}
@media (max-width: 767px){
    .h2.type3 h2 {
        font-size: 18px;
        letter-spacing: 0.0272em;
        line-height: 26px;
    }
}


/* h2 type4 */
@media all {
    .h2.type4 {
        width: 100%;
        height: 66px;
        background-color: var(--color-lightblue2);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-radius: 5px;
    }

    .h2.type4::before {
        content: "";
        width: 20px;
        height: 5px;
        display: block;
        background-color: var(--color-blue3);
    }

    .h2.type4 h2 {
        padding-left: 15px;
        font-size: 28px;
        letter-spacing: 0.0272em;
        line-height: 40px;
    }
}
@media (max-width: 767px) {
    .h2.type4 {
        height: 42px;
    }
    .h2.type4::before {
        width: 14px;
        height: 3px;
    }
    .h2.type4 h2 {
        padding-left: 8px;
        font-size: 18px;
        line-height: 26px;
    }
}


/* h2 type5 */
@media all {
    .h2.type5 {
        font-size: 32px;
        letter-spacing: 0.0272em;
        font-weight: var(--font-weight-black);
        line-height: 46px;
    }
}
@media (max-width: 767px){
    .h2.type5 {
        text-align: center;
        font-size: 20px;
        line-height: 29px;
    }
}


/* h2 type6 */
@media all {
    .h2.type6 {
        font-size: 24px;
        font-weight: var(--font-weight-bold);
        color: var(--color-blue3);
        letter-spacing: 0.0272em;
        line-height: 35px;
    }
    .h2.type6 h2 span {
        font-size: 18px;
    }
}
@media (max-width: 767px) {
    .h2.type6 {
        font-size: 18px;
        line-height: 26px;
    }
    .h2.type6 h2 span {
        font-size: 14px;
    }

}

/* ------------------------------------------------------------- */
/* H3
/* ------------------------------------------------------------- */
/* h3 type1 */
@media all {
    .h3 {
        text-align: center;
    }
    .h3.type1 {
        font-weight: var(--font-weight-bold);
        line-height: 24px;
        letter-spacing: 0.0272em;
    }
}
@media (max-width: 767px){
    .h3.type1 {
        font-size: 14px;
        line-height: 21px;
        letter-spacing: 0.0238em;
    }
}


/* ------------------------------------------------------------- */
/* フォーム
/* ------------------------------------------------------------- */
@media all {
    .blk_frm .tr {
        border-top: solid 1px var(--color-gray6);
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .blk_frm .row {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .blk_frm .th {
        width: 230px;
        letter-spacing: 0.0272em;
        line-height: 24px;
        padding-top: 12px;
        padding-left: 20px;
    }
    .blk_frm .th span {
        color: var(--color-red);
    }
    .blk_frm .th .note {
        font-size: 14px;
        line-height: 21px;
        letter-spacing: 0.0238em;
    }
    .blk_frm .td {
        width: calc(100% - 230px);
    }
    .blk_frm .td .note {
        font-size: 14px;
        line-height: 21px;
        letter-spacing: 0.0238em;
        padding-top: 10px;
    }
     
    /* 入力ボックス */
    .blk_frm .input-text input {
        width: 100%;
        height: 48px;
        border-radius: 5px;
        border: solid 1px var(--color-gray2);
        background-color: var(--color-white);
        padding: 0 10px;
        appearance: none;
        -webkit-appearance: none;
        font-size: 16px;
    }
    
    /* 送信ボタン */
    .blk_frm .input-submit {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
        height: 60px;
        position: relative;
    }
    .blk_frm .input-submit::after {
        content: "";
        display: block;
        position: absolute;
        background-image: url('assets/images/ico_arrow.svg');
        width: 22px;
        height: 22px;
        background-size: cover;
        background-repeat: no-repeat;
        top: 19px;
        right: 39px;
    }
    .blk_frm .input-submit input {
        display: block;
        width: 100%;
        height: 100%;
        appearance: none;
        -webkit-appearance: none;
        border: none;
        border-radius: 30px;
        background-color: var(--color-yellow);
        font-size: 18px;
        font-weight: var(--font-weight-bold);
        cursor: pointer;
    }
    .blk_frm .input-submit input:hover {
        background-color: var(--color-yellow2);
    }

    /* 個別： 氏名 */
    .blk_frm .name .td {
        display: flex;
        justify-content: flex-start;
    }
    .blk_frm .name .td .familyname,
    .blk_frm .name .td .firstname {
        display: flex;
        justify-content: flex-start;
        max-width: 226px;
        margin-right: 20px;
    }
    .blk_frm .name .td .familyname .label ,
    .blk_frm .name .td .firstname .label {line-height: 48px;width: 26px;}
    .blk_frm .name .td .familyname .input-text ,
    .blk_frm .name .td .firstname .input-text {
        width: calc(100% - 26px);
    }
    
    /* 個別: 希望日 */
    .blk_frm .preferred .row:first-child {
        padding-bottom: 10px;
    }
    .blk_frm .preferred .td {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .blk_frm .preferred .input-select select {
        width: 82px;
        height: 48px;
        border-radius: 5px;
        border: solid 1px var(--color-gray2);
        padding-left: 15px;
        letter-spacing: 0.0272em;
        background-color: var(--color-white);
        appearance: none;
        -webkit-appearance: none;
        font-size: 16px;
    }
    .blk_frm .preferred .input-select.year select {
        width: 118px;
    }
    .blk_frm .preferred .input-select {
        padding-right: 10px;
        position: relative;
    }
    .blk_frm .preferred .input-select::after {
        content: "";
        display: block;
        position: absolute;
        border-top: solid 8px var(--color-gray2);
        border-left: solid 6px transparent;
        border-right: solid 6px transparent;
        top: 21px;
        right: 25px;
        pointer-events: none;
    }
    .blk_frm .preferred .bar {
        line-height: 48px;
    }
}
@media (max-width: 767px) {
    .blk_frm .tr {
        padding-top: 16px;
        padding-bottom: 16px;
    }
    .blk_frm .row {
        display: block;
    }
    .blk_frm .th {
        width: 100%;
        padding: 0;
        padding-bottom: 8px;
        font-size: 14px;
        line-height: 20px;
    }
    .blk_frm .td {
        width: 100%;
    }
    .blk_frm .td .note {
        font-size: 12px;
        line-height: 18px;
        padding-top: 8px;
    }
    
    .blk_frm .name .td .familyname .label,
    .blk_frm .name .td .firstname .label {
        font-size: 14px;
    }
    .blk_frm .name .td .familyname {
        margin-right: 15px;
        width: 100%;
    }
    .blk_frm .name .td .firstname {
        margin-right: 0;
        width: 100%;
    }
    
    .blk_frm .preferred .td {
        max-width: 315px;
    }
    .blk_frm .preferred .input-select.year {
        padding-bottom: 8px;
    }
    .blk_frm .preferred .row:first-child {
        padding-bottom: 16px;
    }
    .blk_frm .input-submit {
        height: 53px;
    }
    
    .blk_frm .input-submit input {
        font-size: 16px;
    }    
    .blk_frm .input-submit::after {
        top: 16px;
        right: 28px;
    }    
    .blk_frm .tr.send {
        padding-top: 40px;
        padding-bottom: 0;
    }
}



/* ------------------------------------------------------------- */
/* ユーザ登録フォーム
/* ------------------------------------------------------------- */
@media all {
    .um-register.um {
        max-width: var(--content-width-3) !important;
    }
    .um-register form {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        border-top: solid 1px var(--color-gray6);
    }
    

    /* お名前のヘッダー */
    .um-register .um-row-heading {
        width: 230px;
        padding-top: 43px;
        letter-spacing: 0.0272em;
        color: var(--color-black);
        padding-bottom: 0 !important;
        border-bottom: solid 1px var(--color-gray6) !important;
        padding-left: 20px;
        box-sizing: border-box;
    }
    .um-register .um-row-heading::after {
        content: "*";
        color: var(--color-red);
        padding-left: 0.2em;
    }
    
    
    /* お名前のボディ */
    .um-register .rowname {
        width: calc(100% - 230px);
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-bottom: 0 !important;
        padding-top: 30px !important;
        padding-bottom: 30px !important;
        border-bottom: solid 1px var(--color-gray6) !important;
    }
    .um-register .rowname .um-col-121,
    .um-register .rowname .um-col-122 {
        max-width: 226px;
        margin-right: 20px;
    }
    .um-register .rowname .um-field-text {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-top: 0;
    }
    .um-register .rowname .um-field-label {
        line-height: 48px;
        margin-bottom: 0;
        width: 26px;
    }
    .um-register .rowname .um-field-area input {
        width: 100%;
        height: 48px !important;
        border: solid 1px var(--color-gray2) !important;
        border-radius: 5px;
    }
    
    
    /* 項目デザイン */
    .um-register .rowgroup {
        width: 100%;
    }
    .um-register .rowgroup .um-field {
        padding-top: 30px;
        padding-bottom: 30px;
        border-bottom: solid 1px var(--color-gray6);
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .um-register .rowgroup .um-field-label {
        width: 230px;
        margin-bottom: 0;
        padding-top: 12px;
        padding-left: 20px;
        box-sizing: border-box;
        font-weight: var(--font-weight-medium);
    }
    .um-register .rowgroup .um-field-label label {
        font-weight: var(--font-weight-medium);
        font-size:  16px !important;
        letter-spacing: 0.0272em;
        color: var(--color-black);
    }
    .um-register .rowgroup .um-field-label label::after {
        content: "*";
        color: var(--color-red);
        padding-left: 0.2em;
    }
    .um-register .rowgroup .um-field-area {
        width: calc(100% - 230px);
    }
    .um-register .rowgroup .um-field-area input {
        height: 48px !important;
        border-radius: 5px;
        border: solid 1px var(--color-gray2) !important;
    }

    
    /* 注意事項のデザイン */
    .um-register .rowgroup .um-field-area::after {
        display: block;
        font-size: 14px;
        letter-spacing: 0.0238em;
        padding-top: 10px;
        color: var(--color-black);
    }


    /* 会社名項目のデザイン */
    .um-register .rowgroup #um_field_62_company .um-field-area::after {
        content: "注）法人格を入力ください。現在お勤めされていない方は「一般」とご入力ください。";
    }


    /* 部署項目のデザイン */
    .um-register .rowgroup #um_field_62_division .um-field-area::after {
        content: "注）部署が無い場合は「なし」と入力してください。";
    }
    

    /* 役職項目デザイン */
    .um-register .rowgroup #um_field_62_position .um-field-area::after {
        content: "注）役職が無い場合は「なし」と入力してください。";
    }


    /* 電話番号項目デザイン */
    .um-register .rowgroup #um_field_62_phone_number .um-field-area::after {
        content: "注）ハイフンなしで半角数字でご入力ください。";
    }


    /* パスワード項目デザイン */
    .um-register .rowgroup #um_field_62_user_password .um-field-area::after {
        content: "注）6文字以上半角英数字";
    }
    .um-register .rowgroup #um_field_62_user_password::after {
        content: "ログインするために必要となります。ご自身で設定いただきます。";
        padding-left: 230px;
        display: block;
        font-size: 14px;
        letter-spacing: 0.0238em;
        color: var(--color-red);
        line-height: 21px;
    }


    /* 都道府県項目専用デザイン */
    .um-register .rowgroup #um_field_62_pref .select2 {
        max-width: 280px;
    }
    .um-register .rowgroup #um_field_62_pref .select2-selection {
        border-radius: 5px !important;
        border: solid 1px var(--color-gray2) !important;
    }


    /* 送信ボタン */
    .um-register .um-col-alt {
        width: 100%;
        margin-top: 20px;
    }
    .um-register .um-center {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
        height: 60px;
        position: relative;
    }
    .um-register .um-center::after {
        content: "";
        display: block;
        position: absolute;
        background-image: url('assets/images/ico_arrow.svg');
        width: 22px;
        height: 22px;
        background-size: cover;
        background-repeat: no-repeat;
        top: 19px;
        right: 39px;
    }
    .um-register .um-center input[type=submit].um-button {
        display: block !important;
        width: 280px !important;
        height: 60px !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        border: none;
        border-radius: 30px !important;
        background-color: var(--color-yellow);
        font-size: 18px;
        font-weight: var(--font-weight-bold) !important;
        color: var(--color-black);
    }
    .um-register .um-center input[type=submit].um-button:hover {
        background-color: var(--color-yellow2);
    }

}
@media (max-width: 767px) {
    /* お名前のヘッダー */
    .um-register .um-row-heading {
        width: 100%;
        padding-top: 16px;
        padding-left: 0;
        border-bottom: none !important;
        font-size: 14px;
        line-height: 20px;
    }
    

    /* お名前のボディ */
    .um-register .rowname {
        width: 100%;
        padding-top: 8px !important;
        padding-bottom: 16px !important;
        flex-wrap: initial;
    }
    .um-register .rowname .um-col-121 {
        width: 100%;
        max-width: 148px;
    }
    .um-register .rowname .um-col-122 {
        width: 100%;
        max-width: 148px;
        margin-right: 0;
    }    
    .um-register .rowname .um-field-label {
        width: 24px;
    }
    .um-register .rowname .um-field-area {
        width: calc(100% - 24px);
    }


    /* 項目デザイン */
    .um-register .rowgroup .um-field {
        padding-top: 16px;
        padding-bottom: 16px;
    }
    .um-register .rowgroup .um-field-label {
        width: 100%;
        padding-top: 0;
        padding-left: 0;
    }
    .um-register .rowgroup .um-field-label label {
        font-size: 14px !important;
    }
    .um-register .rowgroup .um-field-area {
        width: 100%;
        padding-top: 8px;
    }
    

    /* 注意事項のデザイン */
    .um-register .rowgroup .um-field-area::after {
        font-size: 12px;
        line-height: 18px;
        padding-top: 8px;
    }


    /* パスワード項目デザイン */
    .um-register .rowgroup #um_field_62_user_password::after{
        font-size: 12px;
        line-height: 18px;
        padding-left: 0;
    }


    /* 送信ボタン */
    .um-register .um-col-alt {
        margin-top: 10px
    }
}

/* ------------------------------------------------------------- */
/* コンテンツボックス
/* ------------------------------------------------------------- */
@media all {
    .contentbox {
        padding-top: 48px;
        padding-bottom: 120px;
    }
    .contentbox .contentbox-box {
        border-radius: 20px;
        background-color: var(--color-white);
        box-shadow: 0 0 10px rgba(0,0,0,0.13);
    }
    .contentbox .box-title {
        height: 65px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--color-blue3);
        border-radius: 20px 20px 0 0;
        font-size: 24px;
        font-weight: var(--font-weight-black);
        line-height: 35px;
        color: var(--color-white);
    }
    .contentbox .box-title span {
        font-size: 18px;
        padding-top: 5px;
    }
    .contentbox .box-content {
        padding-top: 40px;
        padding-bottom: 40px;
        padding-left: 40px;
        padding-right: 35px;
    }
}
@media (max-width: 767px) {
    .contentbox {
        padding-top: 40px;
        padding-bottom: 60px;
    }
    .contentbox .box-title {
        font-size: 18px;
        height: 51px;
    }
    .contentbox .box-title span {
        font-size: 13px;
    }
    .contentbox .box-content {
        padding: 13px 15px 38px;
    }
}


/* ------------------------------------------------------------- */
/* リスト
/* ------------------------------------------------------------- */
@media all {
    .blk_lst ul li {
        position: relative;
        padding-left: 1.5em;
        line-height: 24px;
        letter-spacing: 0.0272em;
    }
    .blk_lst ul li::before {
        content: "・";
        position: absolute;
        left: 0;
    }
    .blk_lst ul li .red {
        color: var( --color-red);
    }
}
@media (max-width: 767px) {
    .blk_lst ul li {
        font-size: 12px;
        line-height: 18px;
        letter-spacing: 0.0238em;
    }
}


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

    .blk_btn.type2 a {
        max-width: 280px;
        height: 60px;
        border-radius: 30px;
        font-size: 18px;
        position: relative;
    }
    .blk_btn.type2 a::after {
        content: "";
        width: 22px;
        height: 22px;
        position: absolute;
        top: 19px;
        right: 39px;
        background-image: url('assets/images/ico_arrow.svg');
        background-size: cover;
    }

    .blk_btn.type3 a {
        max-width: 190px;
        height: 35px;
        border-radius: 17.5px;
        font-size: 14px;
        letter-spacing: 0.0238em;
        position: relative;
    }
    .blk_btn.type3 a::after {
        content: "";
        background-image: url('assets/images/ico_arrow2.svg');
        width: 20.36px;
        height: 20.36px;
        position: absolute;
        top: 7.8px;
        right: 13.6px;
    }
    
    .blk_btn.blue a {
        background-color: var(--color-blue3);
        color: var(--color-white);
    }
    .blk_btn.blue a:hover {
        background-color: var(--color-blue2);
    }

    .blk_btn.yellow a {
        background-color: var(--color-yellow);
        color: var(--color-black);
    }
    .blk_btn.yellow a:hover {
        background-color: var(--color-yellow2);
    }

    .blk_btn.black a {
        background-color: var(--color-black);
        color: var(--color-white);
    }
    .blk_btn.black a:hover {
        background-color: var(--color-red);
    }
}
@media (max-width: 767px) {
    .blk_btn a {
        font-size: 16px;
    }
    .blk_btn.type1 a {
        max-width: 300px;
        height: 53px;
    }

    .blk_btn.type2 a {
        height: 53px;
        font-size: 16px;
    }    
    .blk_btn.type2 a::after {
        top: 16px;
        right: 28px;
    }

    .blk_btn.type3 a {
        height: 31px;
        font-size: 12px;
        border-radius: 15.5px;
    }

    .blk_btn.type3 a::after {
        top: 5.8px;
        right: 8px;
    }
}


/* ------------------------------------------------------------- */
/* リンク
/* ------------------------------------------------------------- */
@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;
    }
    .blk_txt.black2 {
        color: var(--color-black2);
    }
    .blk_txt.center {
        text-align: center;
    }
    .blk_txt a {
        color: var(--color-blue3);
        text-decoration: underline;
    }
}
@media (max-width: 767px){
    .blk_txt {
        font-size: 14px;
        line-height: 21px;
        letter-spacing: 0.0238em;
    }
}


/* ------------------------------------------------------------- */
/* 製品記事一覧（.posts-products）
/* ------------------------------------------------------------- */
@media all {
    .posts-products .posts-inner {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin: 0 -10px;
    }
    .posts-products article {
        width: calc(100% / 4);
        padding: 0 10px;
        padding-bottom: 30px;
    }
    .posts-products article .article-inner {
        border: solid 1px var(--color-blue3);
        display: block;
        border-radius: 10px;
        padding: 20px;
    }
    .posts-products article .thumb {
        height: 168px;
    }
    .posts-products article .thumb img {
        width: auto;
        height: 100%;
        margin: 0 auto;
        display: block;
    }
    .posts-products article .h3 {
        padding-top: 10px;
        min-height: 58px;
    }
    .posts-products article .blk_btn {
        padding-top: 15px;
    }
}
@media (max-width: 767px){
    .posts-products .posts-inner {
        margin: 0 -4.5px;
    }

    .posts-products article {
        width: calc(100% / 2);
        padding: 0 4.5px;
        padding-bottom: 10px;
    }

    .posts-products article .article-inner {
        padding: 20px 10px 15px;
    }

    .posts-products article .thumb {
        height: 112px;
    }

    .posts-products article .h3 {
        padding-top: 15px;
        min-height: 57px;
    }

    .posts-products article .blk_btn {
        padding-top: 10px;
    }
}


/* ------------------------------------------------------------- */
/* サービス記事一覧（.posts-services）
/* ------------------------------------------------------------- */
@media all {
    .posts-services .posts-inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin: 0 -10px;
    }
    .posts-services article {
        width: calc(100% / 3);
        padding: 0 10px;
        padding-bottom: 54px;
    }
    .posts-services a {
        display: block;
        transition: transform 0.3s ease;
    }
    .posts-services .h3 {
        padding-top: 15px;
        min-height: 63px;
    }
    .posts-services a:hover {
        color: var(--color-blue3);
        transform: scale(1.1);
    }
}
@media (max-width: 767px) {
    .posts-services .posts-inner {
        margin: 0;
    }
    .posts-services article {
        width: 100%;
        padding: 0;
        padding-bottom: 20px;
    }
    .posts-services .h3 {
        padding-top: 10px;
        min-height: 52px;
    }
}


/* ------------------------------------------------------------- */
/* カタログ記事一覧（.posts-catalogs）
/* ------------------------------------------------------------- */
@media all {
    .posts-catalogs .posts-inner {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin: 0 -10px;
    }
    
    .posts-catalogs article {
        width: calc(100% / 4);
        padding: 0 10px;
        padding-bottom: 31px;
    }
    
    .posts-catalogs article .article-inner {
        background-color: var(--color-gray5);
        padding: 20px;
    }
    
    .posts-catalogs article .thumb {
        height: 211px;
    }
    
    .posts-catalogs article .thumb img {
        width: auto;
        height: 100%;
        margin: 0 auto;
        display: block;
    }
    
    .posts-catalogs article .subtype {
        display: flex;
        width: 30px;
        height: 16px;
        font-size: 12px;
        font-weight: var(--font-weight-bold);
        text-transform: uppercase;
        color: var(--color-white);
        justify-content: center;
        align-items: center;
        border-radius: 3px;
        margin-top: 20px;
    }
    
    .posts-catalogs article .subtype.pdf {
        background-color: var(--color-red);
    }
    
    .posts-catalogs article .h3 {
        min-height: 48px;
    }
    
    .posts-catalogs article .blk_btn {
        padding-top: 15px;
    }
}
@media (max-width: 767px){
    .posts-catalogs .posts-inner {
        margin: 0 -4.5px;
    }
    .posts-catalogs article {
        width: calc(100% / 2);
        padding: 0 4.5px;
        padding-bottom: 10px;
    }
    .posts-catalogs article .article-inner {
        padding: 10px;
        padding-bottom: 15px;
    }
    .posts-catalogs article .thumb {
        height: 120px;
    }
    .posts-catalogs article .subtype {
        margin-top: 10px;
    }
    .posts-catalogs article .h3 {
        min-height: 41px;
        text-align: left;
    }
    .posts-catalogs article .blk_btn {
        padding-top: 10px;
    }
}


/* ------------------------------------------------------------- */
/* 仕様書記事一覧（.posts-specs）
/* ------------------------------------------------------------- */
@media all {
    .posts-specs article::before {
        content: "・";
        display: block;
        position: absolute;
        line-height: 24px;
        left: 0;
    }    
    .posts-specs article {
        position: relative;
        padding-left: 25px;
        padding-bottom: 10px;
    }    
    .posts-specs article a {
        color: var(--color-blue3);
        text-decoration: underline;
        line-height: 24px;
        letter-spacing: 0.0272em;
    }    
    .posts-specs article a:hover {
        color: var(--color-blue2);
    }
}
@media (max-width: 767px) {
    .posts-specs article::before {
        font-size: 14px;
        line-height: 21px;
    }
    .posts-specs article {
        padding-left: 14px;
    }    
    .posts-specs article a {
        font-size: 14px;
        line-height: 21px;
    }
}


/* ------------------------------------------------------------- */
/* ライブイベント記事一覧（.posts-events）
/* ------------------------------------------------------------- */
@media all {
    .posts-events article {
        background-color: var(--color-white);
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.13);
        padding: 40px;
        padding-bottom: 30px;
        margin-bottom: 30px;
    }
    .posts-events article:last-child {
        margin-bottom: 0;
    }
    .posts-events .article-inner {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .posts-events article .thumb {
        width: 150px;
    }
    .posts-events article .infos {
        width: calc(100% - 190px);
    }
    .posts-events article .infos .date {
        color: var(--color-gray);
        font-size: 14px;
        letter-spacing: 0.0238em;
        line-height: 21px;
    }
    .posts-events article .infos .title {
        font-size: 20px;
        font-weight: var(--font-weight-bold);
        line-height: 29px;
        padding-top: 5px;
    }
    .posts-events article .infos .content {
        line-height: 24px;
        letter-spacing: 0.0272em;
        padding-top: 15px;
    }
    .posts-events article .infos .organizer {
        text-align: right;
        padding-top: 20px;
        font-size: 14px;
        line-height: 21px;
        letter-spacing: 0.0238em;
        color: var(--color-black2);
    }
}
@media (max-width: 767px) {
    .posts-events article {
        padding: 20px 13px 30px;
    }
    .posts-events article .thumb {
        width: 100%;
        text-align: center;
    }
    .posts-events article .thumb img {
        width: 130px;
    }
    .posts-events article .infos {
        width: 100%;
        padding-top: 11px;
    }
    .posts-events article .infos .date {
        font-size: 12px;
        line-height: 18px;
    }
    .posts-events article .infos .title {
        font-size: 18px;
        line-height: 26px;
    }
    .posts-events article .infos .content {
        font-size: 14px;
        line-height: 21px;
    }
    .posts-events article .infos .organizer {
        font-size: 12px;
        line-height: 18px;
    }
}

/* =========================================================================================================================================== */
/* メインコンテンツ
/* =========================================================================================================================================== */
@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));
    }
}


/* =========================================================================================================================================== */
/* ページヘッダー
/* =========================================================================================================================================== */
@media all {
    #page-header {
        padding-top: 36px;
        padding-bottom: 34px;
        background-image: url('assets/images/pages/page-header_bg.jpg');
        background-size: cover;
        background-position: center;
    }
    #page-header .h1 {
        text-align: center;
    }
    #page-header .title {
        text-align: center;
    }
    #page-header .title .jp {
        font-size: 40px;
        font-weight: var(--font-weight-black);
        line-height: 58px;
        letter-spacing: 0.06em;
    }
    #page-header .title .en {
        font-size: 18px;
        font-weight: var(--font-weight-bold);
        line-height: 22px;
    }
}
@media (max-width: 767px) {
    #page-header {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    #page-header .title .jp {
        font-size: 24px;
        line-height: 35px;
    }
    #page-header .title .en {
        font-size: 13px;
        line-height: 16px;
        padding-top: 2px;
    }
}


/* =========================================================================================================================================== */
/* ページコンテンツ
/* =========================================================================================================================================== */
@media all {
    #page-content .page-content-inner {
        width: var(--width-100);
        max-width: var(--content-width-1);
        margin: 0 auto;
    }
    #page-content {
        background-color: var(--color-gray4);
    }
}