@charset "utf-8";
/*
    ==================================================
    Portrait / Mobile layout
    ==================================================
    CSS構成
    --------------------------------------------------
    style_reset.css     : 共通リセット・共通フォント設定
    style_landscape.css : PC・横長画面用レイアウト
    style_portrait.css  : スマホ・縦長画面用レイアウト
*/
/* ●ヘッダー -------------------------------------------------------------------------------  */
    #header-wrap              { width                   : 160px;
                                border-radius           : 0 0 0 8px;
    }
    .sitename img             { left                    : 10px;
    }
/* ●サイト自己紹介  ------------------------------------------------------------------------- */
    .siteprof                 { width                   : 100vw; 
    }
/* ◎カバー写真 -------------------------------------------------------------------------------  */
    .block-cover img          { width                   : 90vw;
    }

/* ==================================================
   About リンクカード / Portrait
   ================================================== */

.about-cards {
    width                   : 90%;
    margin                  : 30px auto 0;
    display                 : flex;
    flex-direction          : column;
    gap                     : 20px;
    box-sizing              : border-box;
}


/* カード */

.about-card {
    display                 : flex;
    width                   : 100%;
    height                  : 25vw;
    margin                  : 30px 0 0;
    padding                 : 0;
    box-sizing              : border-box;
    overflow                : hidden;
    border                  : 1px solid #ccc;
    border-radius           : 6px;
    background              : #fff;
    color                   : #222;
    text-decoration         : none;
}

.about-card:hover {
    color                   : #222;
    text-decoration         : none;
}


/* 画像 */

.about-card-image {
    flex                    : 0 0 25vw;
    width                   : 25vw;
    height                  : 25vw;
    margin                  : 0;
    padding                 : 0;
    overflow                : hidden;
    box-sizing              : border-box;
}

.about-card-image img {
    display                 : block;
    width                   : 25vw;
    height                  : 25vw;
    margin                  : 0;
    padding                 : 0;
    object-fit              : cover;
}


/* テキスト */

.about-card-content {
    flex                    : 1 1 auto;
    min-width               : 0;
    height                  : 25vw;
    padding                 : 15px;
    box-sizing              : border-box;
    overflow                : hidden;
}

.about-card-content h3 {
    width                   : 100%;
    margin                  : 0 0 8px;
    padding                 : 0;
    border                  : none;
    font-size               : 1.4em;
    line-height             : 1.4;
    color                   : #222;
}

.about-card-content p {
    width                   : 100% !important;
    margin                  : 0 !important;
    padding                 : 0;
    font-size               : 0.9em !important;
    line-height             : 1.5 !important;
    color                   : #555;
}


/* ●1階層目ナビ  -------------------------------------------------------------------------- */
    /* 1階層目メニュー部分 */
    .fstnav                   { z-index                 : 991;
                                left                    : -60vw;
                                width                   : 60vw;
    }
    /* 各要素 */
    .fstnav ul                { padding                 : 15px 20px; 
    }
/* ●2階層目ナビ  --------------------------------------------------------------------------- */
    .nav-wrapper2             { border-left             : 1px solid #000;
    }
    /* 2階層目メニュー部分 */
    .scndnav                  { right                   : -60vw;
                                width                   : 60vw;   
                                z-index                 : 992;
    }
    /* ページネーション */
    .mono-pagination          { width                   : 60vw; 
    }
    .scndnav h2               { width                   : 60vw; 
                              }
    .scndnav ul               { width                   : 60vw; 
    }
    .eyecth                   { width                   : 80px;
                                height                  : 80px;
    }
    .gazou                    { width                   : 80px;
                                height                  : 80px;
    }
    .titoru                   { width                   : 140px;
    }

/* ハンバーガーアイコン（左） -------------------------------------------------------------------- */
    .hmbrg                    { position                : fixed;
                                z-index                 : 993;
                                bottom                  : 0;
                                left                    : 0;
                                width                   : 50px;
                                height                  : 50px;
                                display                 : flex;
                                justify-content         : center;
                                align-items             : center;
                                background              : #eeeeee;
                                cursor                  : pointer;
                                transition              : all 0.5s;
                                opacity                 : 0.6;
    }
    .hmbrg .MenuBtn-BarFrame  { position                : absolute;
                                display                 : block;
                                width                   : 26px;
                                height                  : 4px;
                                transition              : all .60s ease-in;
    }
    .hmbrg_line               { position                : absolute;
                                display                 : block;
                                border-radius           : 9999px;
                                background-color        : #000000;
                                transition              : all .15s linear;
    }
    .hmbrg_line1              { width                   : 100%;
                                height                  : 100%;
    }
    .hmbrg_line2              { width                   : 100%;
                                height                  : 100%;
                                transform-origin        : center left;
                                transform               : translateY(-9px) rotate(0deg);
    }
    .hmbrg_line3              { width                   : 100%;
                                height                  : 100%;
                                transform-origin        : center left;
                                transform               : translateY(9px) rotate(0deg);
                              }
    /* ハンバーガーがクリックされた時の動き */
    .open .fstnav             { left                    : 0;
                                width                   : 280px;
    }
    .open .hmbrg_line2        { width                   : 16px;
                                transform               : translateY(1.414px) rotate(-45deg);
    }
    .open .hmbrg_line3        { width                   : 16px;
                                transform               : translateY(-1.414px) rotate(45deg);
                              }
/* ハンバーガーアイコン2（右）-------------------------------------------------------------------- */

    .hmbrg2                   { position                : fixed;
                                z-index                 : 993;
                                bottom                  : 0;
                                right                   : 0;
                                width                   : 50px;
                                height                  : 50px;
                                display                 : flex;
                                justify-content         : center;
                                align-items             : center;
                                background              : #33cc99;
                                cursor                  : pointer;
                                transition              : all 0.5s;
    }
    .hmbrg2 .MenuBtn-BarFrame2{ position                : absolute;
                                display                 : block;
                                width                   : 26px;
                                height                  : 4px;
                                transition              : all .60s ease-in;
    }
    .hmbrg_line-2             { position                : absolute;
                                display                 : block;
                                border-radius           : 9999px;
                                background-color        : #eee;
                                transition              : all .15s linear;
    }
    .hmbrg_line2-1            { width                   : 100%;
                                height                  : 100%;
    }
    .hmbrg_line2-2            { width                   : 100%;
                                height                  : 100%;
                                transform-origin        : center right;
                                transform               : translateY(-9px) rotate(0deg);
    }
    .hmbrg_line2-3            { width                   : 100%;
                                height                  : 100%;
                                transform-origin        : center right;
                                transform               : translateY(9px) rotate(0deg);
    }
    /* ハンバーガー2がクリックされた時の動き */
    .open2 .scndnav           { right                   : 0;
                                width                   : 60vw;
                                /* 開いたら影を出す：距離を短く、ぼかしを大きく、色は薄く */
                                box-shadow              : -3px 0px 15px rgba(0, 0, 0, 0.1);
    }
    .open2 .hmbrg_line2-2     { width                   : 16px;
                                transform-origin        : right center;
                                transform               : translate(9px, 1.414px) rotate(45deg);
    }
    .open2 .hmbrg_line2-3     { width                   : 16px;
                                transform-origin        : right center;
                                transform               : translate(9px, -1.414px) rotate(-45deg);
    }
    .scndnav.nav-close        { right                   : -60vw;
    }
    .scndnav.nav-open         { right                   : 0;
    }

/* ●block-kijiの設定 ------------------------------------------------------------------------ */
    #kijitop                  { width                   : 100vw; 
    }
    /* 画面外へスライドした状態 */
    #kijitop.closed           { left                    : -100vw;
    }
    /* 記事要素 */
/* ----------------------------------------------------------------------
   該当する記事がない場合
---------------------------------------------------------------------- */

     /* 404 NOT FOUND */
    .notfound-title           { font-size               : 8vw;
                                font-weight             : 700;
    }

/* 外部リンクカード ------------------------------------------------------------------------ */
    .mono-linkcard            { width                   : 80%;
    }
    .mono-linkcard a          { display                 : block;
    }
    .mono-linkcard-image      { width                   : 100%;
                                height                  : auto;
    }
    .mono-linkcard-image img  { width                   : 100%;
                                height                  : auto;
    }
    .mono-linkcard-image      { margin                  : 0;
                                padding                 : 0;
                                width                   : 100%;
    }
    .mono-linkcard-image img  { display                 : block;
                                margin                  : 0;
                                padding                 : 0;
                                width                   : 100%;
                                height                  : auto;
    }
    .mono-linkcard-title      { color                   : #000;
    }


/* ●NAVI2案内吹き出し ------------------------------------------------ */

#nav2-hint {
    position                : fixed;
    z-index                 : 994;

    right                   : 20px;
    bottom                  : 62px;

    padding                 : 9px 15px;

    background: rgba(0, 0, 0, 0.8);
    color                   : #ffffff;

    font-size               : 14px;
    line-height             : 1.2;
    white-space             : nowrap;

    border-radius           : 6px;
    box-shadow              : 0 2px 8px rgba(0, 0, 0, 0.15);

    pointer-events          : none;

    animation               : bounce 1.5s ease-in-out 3;
}


/* 吹き出しの◆ */
#nav2-hint::after {
    content                 : "";

    position                : absolute;
    right                   : 12px;
    bottom                  : -3px;

    width                   : 6px;
    height                  : 6px;

    background: rgba(0, 0, 0, 0.8);

    transform               : rotate(45deg);
}