@charset "utf-8";

/************************************************************/
/************************************************************
key__navi
************************************************************/
/************************************************************/
html{}

body {
    width:100%;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;	
}

input,textarea,select,button {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}

/*画像リンク*/
a img:hover{animation: flash 1s;}


/*基本非表示*/
.none{display:none}


:placeholder-shown {color:#BFBFBF;}
::-webkit-input-placeholder {color:#BFBFBF;}
:-moz-placeholder {color:#BFBFBF; opacity:1;}
::-moz-placeholder {color:#BFBFBF; opacity:1;}
:-ms-input-placeholder {color:#BFBFBF;}

/*基本ボタン*/
.btn          {/* text-align:left; */}
.btn-is-center{text-align:center}
.btn-is-right {text-align:right}

#wpmem_login .buttons,
#wpmem_reg .buttons,
.btn a,
.btn input[type="submit"]{
    display: inline-block;
    height: 80px;
    line-height: 80px;
    padding:0 80px;
    margin:0 auto;
    border-radius: 5px;
    box-sizing:border-box;
    font-size: 20px;
    font-weight:bold;
    border: 2px solid #000;
    background: #e50112;
    color:#FFF;
    text-decoration:none;
}

@media only screen and (max-width: 800px) {
    #wpmem_login .buttons,
    #wpmem_reg .buttons,
    .btn a,
    .btn input[type="submit"]{
        height: 60px;
        line-height: 60px;
        padding: 0 20px;
        border-radius: 10px;
        font-size: 12px;
        font-weight:bold;
        border: 2px solid #4d2626;
        background: #ff2e3d;
        color:#FFF;
    }
}

#wpmem_login .buttons:hover,
#wpmem_reg .buttons:hover,
.btn a:hover,
.btn.current a,
.btn input[type="submit"]:hover{
    background:#999999;
    border: 2px solid #000;
    color: #325A8C;
    transition: 0.2s;
}

/*基本ボタンREDバージョン*/
.btn-is-red a{
    background:#B82C2C;
    border: 1px solid #B82C2C;
}
/*基本ボタンREDバージョン2(hoverホワイト)*/
.btn-is-red2 a{
    background:#B82C2C;
    border: 1px solid #B82C2C;
}
.btn-is-red2 a:hover{
    background:transparent;
    border: 1px solid #fff;
    color: #525252;
    transition: 0.2s;
}

/*基本ボタンダウンロードバージョン*/
.btn-is-download a{
    width:200px;
    height:auto;
    line-height:1.5;
    padding:10px 20px;
    font-weight:normal;
    text-align:center;
    margin-bottom:10px;
}
.btn-is-download a.big{
    font-weight:bold;
    background:#B82C2C;
    border: 1px solid #B82C2C;
}
.btn-is-download a.big:hover{
    background:transparent;
    border: 1px solid #B82C2C;
    color: #B82C2C;
    transition: 0.2s;
}

.btn-is-download a span{
    display:block;
    font-size:9px;
}





/*基本ボタンクリアバージョン*/
.btn-is-clear a{
    position: relative;
    overflow: hidden;
    background:transparent;
    color:#fff;
    border:#fff solid 1px;
    box-shadow:1px 1px 1px #3F3F3F inset,1px 1px 1px #3F3F3F;
    z-index: 2;
}
.btn-is-clear a:hover {
    border:#fff solid 1px;
    color: #fff;
    text-shadow: 1px 1px 1px #000000;
    transition: 0.2s;
}
.btn-is-clear a::after {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.btn-is-clear a:hover::after {
    top: 0;
    left: 0;
    background-color: #fff;
    box-shadow:1px 1px 1px #3F3F3F;
    transition: 0.2s;
}

/*基本マージンボトム(ブロックエリアでのみ使用)*/
.mb-is-0  {margin-bottom:0    !important;}
.mb-is-10 {margin-bottom:10px !important;}
.mb-is-20 {margin-bottom:20px !important;}
.mb-is-30 {margin-bottom:30px !important;}
.mb-is-40 {margin-bottom:40px !important;}
.mb-is-60 {margin-bottom:60px !important;}
.mb-is-80 {margin-bottom:80px !important;}
.mb-is-100{margin-bottom:100px!important;}


/*基本フォントカラー(ブロックエリアでのみ使用)*/
.c-is-white{color:#ffffff !important;}
.c-is-light{color:#D8D8D8 !important;}
.c-is-gray {color:#7F7F7F !important;}
.c-is-dark {color:#3F3F3F !important;}
.c-is-red  {color:#B92C2C !important;}
.c-is-pink {color:#DB4984 !important;}
.c-is-green{color:#37684E !important;}
.c-is-blue {color:#325A8C !important;}
.c-is-wordpress{color:#B92C2C !important;}
.c-is-seo      {color:#DB4984 !important;}
.c-is-idea_material{color:#FABE00 !important;}
.c-is-marketing{color:#325A8C !important;}
.c-is-coding   {color:#534970 !important;}
.c-is-design   {color:#248696 !important;}


/*基本背景カラー(ブロックエリアでのみ使用)*/
.bgc-is-red  {background:#B92C2C !important;}
.bgc-is-pink {background:#DB4984 !important;}
.bgc-is-green{background:#37684E !important;}
.bgc-is-blue {background:#325A8C !important;}
.bgc-is-wordpress{background:#B92C2C !important;}
.bgc-is-seo      {background:#DB4984 !important;}
.bgc-is-idea_material{background:#FABE00 !important;}
.bgc-is-marketing{background:#325A8C !important;}
.bgc-is-coding   {background:#534970 !important;}
.bgc-is-design   {background:#248696 !important;}



/*マウスオーバーフラッシュ*/
@keyframes flash {
    0%  {opacity: 0.5;}
    100%{opacity: 1.0;}
}


/************************************************************/
.key {
    position: relative;
    width: 102%;
    text-align:center;
}
.key-is-top {background-size: cover;height: auto;min-height: 90vh;z-index:2;width: auto;}
.key-is-about {
    background: url(../img/about/key_about.jpg) no-repeat center bottom fixed;
    background-size: cover;
    height: 400px;
    z-index:2;
}
.key-is-service {
    height: 400px;
    z-index:2;
}
.key-is-service-is-homepage  {background: url(../img/service/key_serviceHomepage.jpg) no-repeat center bottom fixed;background-size: cover;}
.key-is-service-is-marketing {background: url(../img/service/key_serviceMarketing.jpg) no-repeat center bottom fixed;background-size: cover;}
.key-is-service-is-seo       {background: url(../img/service/key_serviceSeo.jpg) no-repeat center bottom fixed;background-size: cover;}
.key-is-service-is-consulting{background: url(../img/service/key_serviceConsulting.jpg) no-repeat bottom center fixed;background-size: cover;}
.key-is-service-is-logo      {background: url(../img/service/key_serviceLogo.jpg) no-repeat center bottom fixed;background-size: cover;}
.key-is-wptheme {
    background: url(../img/wptheme/key_wptheme.jpg) no-repeat center center;
    background-size: cover;
    height: 200px;
    z-index:2;
}
.key-is-works {
    background: url(../img/works/key_works.jpg) no-repeat center center;
    background-size: cover;
    height: 200px;
    z-index:2;
}
.key-is-news {
    background:#EFEFEF;
    height: 200px;
}
.key-is-contact {
    background: url(../img/contact/key_contact.jpg) no-repeat center center;
    background-size: cover;
    height: 200px;
    z-index:2;
}

.key-is-blog {
    background: url(../img/blog/key_blog.jpg) no-repeat center bottom fixed;
    background-size: cover;
    height: 400px;
    z-index:2;
}

.key-is-blog::after{
    background-color: rgba(0,0,0,.25);
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:50px;
    content:'';
    z-index:-1;
}

.key-is-top::after,
.key-is-about::after,
.key-is-service::after,
.key-is-wptheme::after,
.key-is-works::after,
.key-is-contact::after{
    /* background-color: rgba(0,0,0,.25); */
    /* background-image: linear-gradient(90deg, rgba(0,0,0,.5) 50%, transparent 50%), linear-gradient(rgba(0,0,0,.25) 50%, transparent 50%); */
    /* background-size: 2px 2px; */
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    content:'';
    z-index:-1;
}


/*キービジュアルの内枠(ブログでは不使用)*/
.key__inner{
    position: absolute;
    top: 162px;
    right: 0;
    bottom: 200px;
    left: 0;
    margin: auto;
    width: 100%;
    height: 300px;
    text-align:center;
    background: rgba(0, 0, 0, 0.5);
}
.key-is-top .key__inner{/* height: 300px; */}
.key-is-news .key__inner{height:50px;}
.key-is-about .key__inner,
.key-is-service .key__inner{height:120px;}
.key-is-wptheme .key__inner,
.key-is-works .key__inner,
.key-is-contact .key__inner{height:70px;}



.key__subtitle{
    /*	position: relative;
    font-family: 'Anton';*/
    font-size:70px;
    position: relative;
    top: 130px;
    letter-spacing:2px;
    text-shadow: 1px 1px 1px #000000;
    margin-bottom:30px;
    color: #ffffff;
}



.key-is-top .key__subtitle{font-size: 1.4rem;}
.key-is-blog .key__subtitle{margin-top:116px;}
.key-is-blog .key__subtitle a{ text-decoration:none}


.key__title{/*	font-family: "Sawarabi Mincho";*/transform: rotate(0.001deg);position: relative;top: 111px;font-size: 1.4rem;font-weight: normal;letter-spacing:2px;color:#ffffff;text-shadow: 1px 1px 1px #000000;margin-bottom:50px;}
.key-is-blog .key__title{margin-bottom:40px;}

.txtNewyear {position: absolute;top: 84px;line-height: 1.5em;right: 10%;left: 10%;font-size: 2.0em;border-bottom:1px solid #fff;color: #fff;font-family: serif;}
.txtNewyear span {font-size:0.8; color:#fff}

@media screen and (max-width: 719px) {
    .txtNewyear {font-size: 1.3em;font-family: serif;}

    .key__subtitle{
        /*	position: relative;
        font-family: 'Anton';*/
        font-size:70px;
        letter-spacing:2px;
        text-shadow: 1px 1px 1px #000000;
        margin-bottom:30px;
        color: #ffffff;
    }

}


/*ナビエリア(トップページ専用)*/
.key-is-top .key__navi{
    /* margin: 10% auto; */
    /* margin-bottom:50px; */
    width:100%;
    /* height: 200px; */
    position: absolute;
    top: 90%;
}
.key-is-top .key__navi .btn{
    float:left;
    width:235px;
    text-align:center;
    margin-right:20px;
    text-shadow: 1px 1px 1px #000000;
}
.key-is-top .key__navi .btn:last-child{margin-right:0;}
.key-is-top .key__navi .btn a{
    display:block;
    font-size: 1.2rem;
    padding: 0;
    color: #fff;
}



/*ナビエリア(ブログ専用)*/
.key-is-blog .key__navi{
    position: absolute;
    bottom:0;
    left:0;
    width:100%;
    height:50px;
    line-height:50px;
}

/*トグル設定*/
.key-is-blog .key__navi #key__toggle{display: none;}
.key-is-blog .key__navi .key__toggle__switch{
    display:block;
    position: relative;
    width:100%;
    height:50px;
    line-height:50px;
    font-weight:bold;
    font-size:16px;
    color:#FFF;
    cursor:pointer;
}
.key-is-blog .key__navi .key__toggle__switch:hover{animation: flash 1s;}
.key-is-blog .key__navi .key__toggle__switch::before{
    content:"";
    display:inline-block;
    background:url(../img/blog/icon_category.svg) no-repeat;
    width:14px;
    height:14px;
    margin-right:5px;
}
.key-is-blog .key__navi .key__toggle__switch::after{
    content:"OPEN";
    display:inline-block;
    margin-left:5px;
}
.key-is-blog .key__navi #key__toggle:checked + .key__toggle__switch::after{
    content:"CLOSE";
}
/*トグルopen*/
.key-is-blog .key__navi #key__toggle:checked + .key__toggle__switch + ul{
    position:absolute;
    top:50px;
    left:-40px;
    width:1080px;
    height:150px;
    background-color: rgba(0,0,0,0.90);
    border-bottom:#000000 1px solid;
    transition: 0.5s;	
}
.key-is-blog .key__navi ul{
    height:0;
    overflow: hidden;
}
.key-is-blog .key__navi ul li{
    width:50%;
    height:50px;
    line-height:50px;
    float:left;
    color:#FFF;
    text-align:center;
    border-top:#3F3F3F 1px solid;
    border-bottom:#191919 1px solid;
    border-right:#191919 1px solid;
    box-sizing:border-box;
}
.key-is-blog .key__navi ul li:hover{ background:#000;}
.key-is-blog .key__navi ul li:nth-child(even) {border-left:#3F3F3F 1px solid;border-right: none;}
.key-is-blog .key__navi ul li a{text-decoration:none; display:block;}






/*テキストエリア(トップページ専用)*/
.key__text{
    font-weight:bold;
    font-size:18px;
    color:#ffffff;
    text-shadow: 1px 1px 1px #000000;
    margin-bottom: 50px;
}
.key__text b{font-size:32px;}


/*ページscrollボタン(トップページ専用)*/
.key__scroll{
    position: relative;
    display:block;
    width:40px;
    height:60px;
    top: 100%;
    margin: 10% auto;
}
.key__scroll::before{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin:0 0 0 0;
    width: 40px;
    height: 40px;
    border:#fff solid 1px;
    border-radius: 50%;
    box-shadow:1px 1px 1px #3F3F3F inset,1px 1px 1px #3F3F3F;
    box-sizing: border-box;
}
.key__scroll::after{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 14px 0 0 16px;
    width: 8px;
    height: 8px;
    border-bottom:#fff solid 1px;
    border-right:#fff solid 1px;
    transform: rotate(45deg);
    box-shadow:1px 1px 1px #3F3F3F;
}
.key__scroll:hover::before{
    background:#fff;
    box-shadow:1px 1px 1px #3F3F3F;
    transition: 0.2s;
}
.key__scroll:hover::after{
    border-bottom:#ffffff solid 1px;
    border-right:#ffffff solid 1px;
    transition: 0.2s;
}
.key__scroll span{
    display:block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 0 0 -5px;
    text-shadow: 1px 1px 1px #000000;
    color: #fff;
    font-size: 10px;
    width: 50px;
}

/*検索窓エリア(ブログ専用)*/
.key-is-blog .foam__blogInput{width:270px; height:30px; line-height:30px; padding:0 10px; box-sizing:border-box; }
.key-is-blog .foam__blogBtn{width:30px; height:30px; background:#3F3F3F url(../img/blog/icon_search.svg) no-repeat center center; text-indent: -9999px;}



/*=============================================================================================================================
1024px以下
====================================================*/
@media only screen and (max-width: 1024px){

    .key-is-top .key__navi {
        margin: 10% auto;
        /* margin-bottom: 50px; */
        width: 100%;
        /* height: 50px; */
    }

}

/*=============================================================================================================================
812px以下
====================================================*/
@media only screen and (max-width: 812px){

    .key-is-top {
        /*	background: url(../img/top/key_top02.jpg) no-repeat 65% bottom;*/
        background-size: cover;
        height: auto;
        min-height: 100vh;
        z-index:2;
    }


    .key-is-about {
        background: url(../img/about/key_about.jpg) no-repeat center bottom;
        background-size: cover;
        padding:60px 0 40px 0;
        z-index:2;
    }

    .key-is-service {
        padding:60px 0 40px 0;
        z-index:2;
    }

    .key-is-service-is-homepage  {background: url(../img/service/key_serviceHomepage.jpg) no-repeat center bottom;background-size: cover;}
    .key-is-service-is-marketing {background: url(../img/service/key_serviceMarketing.jpg) no-repeat center bottom;background-size: cover;}
    .key-is-service-is-seo       {background: url(../img/service/key_serviceSeo.jpg) no-repeat center bottom;background-size: cover;}
    .key-is-service-is-consulting{background: url(../img/service/key_serviceConsulting.jpg) no-repeat bottom center;background-size: cover;}
    .key-is-service-is-logo      {background: url(../img/service/key_serviceLogo.jpg) no-repeat center bottom;background-size: cover;}
    .key-is-wptheme {
        background: url(../img/wptheme/key_wptheme.jpg) no-repeat center center;
        background-size: cover;
        padding:60px 0 40px 0;
        z-index:2;
    }


    .key-is-works {
        background: url(../img/works/key_works.jpg) no-repeat center bottom;
        background-size: cover;
        padding:60px 0 40px 0;
        z-index:2;
    }


    .key-is-contact {
        background: url(../img/contact/key_contact.jpg) no-repeat center bottom;
        background-size: cover;
        padding:60px 0 40px 0;
        z-index:2;
    }


    .key-is-blog {
        background: url(../img/blog/key_blog.jpg) no-repeat center bottom;
        background-size: cover;
        padding:80px 0 70px 0;
        z-index:2;
    }

    .key-is-blog::after{
        background-color: rgba(0,0,0,.25);
        position:absolute;
        bottom:0;
        left:0;
        width:100%;
        height:40px;
        content:'';
        z-index:-1;
    }

    .key-is-top::after,
    .key-is-about::after,
    .key-is-service::after,
    .key-is-wptheme::after,
    .key-is-works::after,
    .key-is-contact::after{
        /* background-color: rgba(0,0,0,.25); */
        /* background-image: linear-gradient(90deg, rgba(0,0,0,.5) 50%, transparent 50%), linear-gradient(rgba(0,0,0,.25) 50%, transparent 50%); */
        background-size: 2px 2px;
        position:absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
        content:'';
        z-index:-1;
    }



    /*キービジュアルの内枠(ブログでは不使用)*/
    .key__inner{
        width : calc(100% - 40px);
        margin:auto;
    }
    .key-is-top .key__inner{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: 200px;
    }


    .key__subtitle{
        /*	font-family: 'Anton';*/
        font-size:38px;
        letter-spacing:2px;
        line-height: 1.1;
        color:#ffffff;
        text-shadow: 1px 1px 1px #000000;
        margin:0 auto 10px auto;
    }
    .key-is-top .key__subtitle{font-size:38px;}
    .key-is-blog .key__subtitle a{ text-decoration:none}


    .key__title{/*	font-family: "Sawarabi Mincho";*/font-size: 2.2rem;font-weight:normal;letter-spacing:2px;line-height: 1.5;color:#ffffff;text-shadow: 1px 1px 1px #000000;margin:0 auto 20px auto;}
    .key-is-top .key__title{margin-bottom:30px;}


    /*ナビエリア(トップページ専用)*/
    .key-is-top .key__navi{
        margin:0 auto;
        margin: 2% -10px 30px -10px;
        width : calc(100% + 10px);
        height:90px;
    }
    .key-is-top .key__navi .btn{
        float:left;
        width: calc(25% - 10px);
        text-align:center;
        margin:0 0 10px 10px;
        text-shadow: 1px 1px 1px #000000;
    }








    .key-is-top .key__navi .btn a{font-size: 1.2rem;display:block;padding:0;color: #fff;}


    /*ナビエリア(ブログ専用)*/
    .key-is-blog .key__navi{
        position: absolute;
        bottom:0;
        left:0;
        width:100%;
        height:40px;
        line-height:40px;
    }

    /*トグル設定*/
    .key-is-blog .key__navi #key__toggle{display: none;}
    .key-is-blog .key__navi .key__toggle__switch{
        display:block;
        position: relative;
        width:100%;
        height:40px;
        line-height:40px;
        font-weight:bold;
        font-size:16px;
        color:#FFF;
        cursor:pointer;
    }
    .key-is-blog .key__navi .key__toggle__switch:hover{animation: flash 1s;}
    .key-is-blog .key__navi .key__toggle__switch::before{
        content:"";
        display:inline-block;
        background:url(../img/blog/icon_category.svg) no-repeat;
        width:14px;
        height:14px;
        margin-right:5px;
    }
    .key-is-blog .key__navi .key__toggle__switch::after{
        content:"OPEN";
        display:inline-block;
        margin-left:5px;
    }
    .key-is-blog .key__navi #key__toggle:checked + .key__toggle__switch::after{
        content:"CLOSE";
    }
    /*トグルopen*/
    .key-is-blog .key__navi #key__toggle:checked + .key__toggle__switch + ul{
        position:absolute;
        top:40px;
        left:0;
        width:100%;
        height:120px;
        background-color: rgba(0,0,0,0.90);
        border-bottom:#000000 1px solid;
        transition: 0.5s;	
    }
    .key-is-blog .key__navi ul{
        height:0;
        overflow: hidden;
    }
    .key-is-blog .key__navi ul li{
        width:50%;
        height:40px;
        line-height:40px;
        float:left;
        color:#FFF;
        font-size:12px;
        text-align:center;
        border-top:#3F3F3F 1px solid;
        border-bottom:#191919 1px solid;
        box-sizing:border-box;
    }
    .key-is-blog .key__navi ul li:hover{ background:#000;}
    .key-is-blog .key__navi ul li:nth-child(even) {border-left:#3F3F3F 1px solid;border-right: none;}
    .key-is-blog .key__navi ul li a{text-decoration:none; display:block;}


    /*テキストエリア(トップページ専用)*/
    .key__text{
        font-weight:bold;
        font-size: 1.3rem;
        line-height:1.25;
        width:90%;
        margin:0 auto 0 auto;
        color:#ffffff;
        text-shadow: 1px 1px 1px #000000;
    }
    .key__text b{font-size:28px;}


    /*ページscrollボタン(トップページ専用)*/
    .key__scroll{ display:none;}

}




/*=============================================================================================================================
768px以下
====================================================*/
@media only screen and (max-width: 768px){

    .key-is-top {/*	background: url(../img/top/key_top02.jpg) no-repeat 65% bottom;*//* background-size: cover; */height: 45px;min-height: 58vh;z-index: 2;}


    .key-is-about {
        background: url(../img/about/key_about.jpg) no-repeat center bottom;
        background-size: cover;
        padding:60px 0 40px 0;
        z-index:2;
    }

    .key-is-service {
        padding:60px 0 40px 0;
        z-index:2;
    }

    .key-is-service-is-homepage  {background: url(../img/service/key_serviceHomepage.jpg) no-repeat center bottom;background-size: cover;}
    .key-is-service-is-marketing {background: url(../img/service/key_serviceMarketing.jpg) no-repeat center bottom;background-size: cover;}
    .key-is-service-is-seo       {background: url(../img/service/key_serviceSeo.jpg) no-repeat center bottom;background-size: cover;}
    .key-is-service-is-consulting{background: url(../img/service/key_serviceConsulting.jpg) no-repeat bottom center;background-size: cover;}
    .key-is-service-is-logo      {background: url(../img/service/key_serviceLogo.jpg) no-repeat center bottom;background-size: cover;}
    .key-is-wptheme {
        background: url(../img/wptheme/key_wptheme.jpg) no-repeat center center;
        background-size: cover;
        padding:60px 0 40px 0;
        z-index:2;
    }


    .key-is-works {
        background: url(../img/works/key_works.jpg) no-repeat center bottom;
        background-size: cover;
        padding:60px 0 40px 0;
        z-index:2;
    }


    .key-is-contact {
        background: url(../img/contact/key_contact.jpg) no-repeat center bottom;
        background-size: cover;
        padding:60px 0 40px 0;
        z-index:2;
    }


    .key-is-blog {
        background: url(../img/blog/key_blog.jpg) no-repeat center bottom;
        background-size: cover;
        padding:80px 0 70px 0;
        z-index:2;
    }

    .key-is-blog::after{
        background-color: rgba(0,0,0,.25);
        position:absolute;
        bottom:0;
        left:0;
        width:100%;
        height:40px;
        content:'';
        z-index:-1;
    }

    .key-is-top::after,
    .key-is-about::after,
    .key-is-service::after,
    .key-is-wptheme::after,
    .key-is-works::after,
    .key-is-contact::after{
        /* background-color: rgba(0,0,0,.25); */
        /* background-image: linear-gradient(90deg, rgba(0,0,0,.5) 50%, transparent 50%), linear-gradient(rgba(0,0,0,.25) 50%, transparent 50%); */
        background-size: 2px 2px;
        position:absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
        content:'';
        z-index:-1;
    }



    /*キービジュアルの内枠(ブログでは不使用)*/
    .key__inner{
        width : calc(100% - 40px);
        margin:auto;
    }
    .key-is-top .key__inner{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: 300px;
    }


    .key__subtitle{
        /*	font-family: 'Anton';*/
        font-size:38px;
        letter-spacing:2px;
        line-height: 1.1;
        color:#ffffff;
        text-shadow: 1px 1px 1px #000000;
        margin:0 auto 10px auto;
    }
    .key-is-top .key__subtitle{font-size: 29px;}
    .key-is-blog .key__subtitle a{ text-decoration:none}


    .key__title{/*	font-family: "Sawarabi Mincho";*/font-size: 1.6rem;font-weight:normal;letter-spacing:2px;line-height: 4.5;color:#ffffff;text-shadow: 1px 1px 1px #000000;margin:0 auto 20px auto;}
    .key-is-top .key__title{margin-bottom: 14px;}


    /*ナビエリア(トップページ専用)*/
    .key-is-top .key__navi{
        margin:0 auto;
        margin: 20% -10px 30px -10px;
        width : calc(100% + 10px);
        height:90px;
    }
    .key-is-top .key__navi .btn{
        float:left;
        width: calc(25% - 10px);
        text-align:center;
        margin:0 0 10px 10px;
        text-shadow: 1px 1px 1px #000000;
    }








    .key-is-top .key__navi .btn a{font-size: 1.2rem;display:block;padding:0;color: #fff;}


    /*ナビエリア(ブログ専用)*/
    .key-is-blog .key__navi{
        position: absolute;
        bottom:0;
        left:0;
        width:100%;
        height:40px;
        line-height:40px;
    }

    /*トグル設定*/
    .key-is-blog .key__navi #key__toggle{display: none;}
    .key-is-blog .key__navi .key__toggle__switch{
        display:block;
        position: relative;
        width:100%;
        height:40px;
        line-height:40px;
        font-weight:bold;
        font-size:16px;
        color:#FFF;
        cursor:pointer;
    }
    .key-is-blog .key__navi .key__toggle__switch:hover{animation: flash 1s;}
    .key-is-blog .key__navi .key__toggle__switch::before{
        content:"";
        display:inline-block;
        background:url(../img/blog/icon_category.svg) no-repeat;
        width:14px;
        height:14px;
        margin-right:5px;
    }
    .key-is-blog .key__navi .key__toggle__switch::after{
        content:"OPEN";
        display:inline-block;
        margin-left:5px;
    }
    .key-is-blog .key__navi #key__toggle:checked + .key__toggle__switch::after{
        content:"CLOSE";
    }
    /*トグルopen*/
    .key-is-blog .key__navi #key__toggle:checked + .key__toggle__switch + ul{
        position:absolute;
        top:40px;
        left:0;
        width:100%;
        height:120px;
        background-color: rgba(0,0,0,0.90);
        border-bottom:#000000 1px solid;
        transition: 0.5s;	
    }
    .key-is-blog .key__navi ul{
        height:0;
        overflow: hidden;
    }
    .key-is-blog .key__navi ul li{
        width:50%;
        height:40px;
        line-height:40px;
        float:left;
        color:#FFF;
        font-size:12px;
        text-align:center;
        border-top:#3F3F3F 1px solid;
        border-bottom:#191919 1px solid;
        box-sizing:border-box;
    }
    .key-is-blog .key__navi ul li:hover{ background:#000;}
    .key-is-blog .key__navi ul li:nth-child(even) {border-left:#3F3F3F 1px solid;border-right: none;}
    .key-is-blog .key__navi ul li a{text-decoration:none; display:block;}


    /*テキストエリア(トップページ専用)*/
    .key__text{
        font-weight:bold;
        font-size: 1.3rem;
        line-height:1.25;
        width:90%;
        margin:0 auto 0 auto;
        color:#ffffff;
        text-shadow: 1px 1px 1px #000000;
    }
    .key__text b{font-size:28px;}


    /*ページscrollボタン(トップページ専用)*/
    .key__scroll{ display:none;}

}


@media only screen and (max-width: 736px){


    /*キービジュアルの内枠(ブログでは不使用)*/
    .key__inner{
        width : calc(100% - 40px);
        margin:auto;
    }
    .key-is-top .key__inner{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: 200px;
    }

    /*ナビエリア(トップページ専用)*/
    .key-is-top .key__navi{
        margin: 5% -10px 30px -10px;
    }

}

@media only screen and (max-width: 667px){


    /*キービジュアルの内枠(ブログでは不使用)*/
    .key__inner{
        width : calc(100% - 40px);
        margin-top: 50%;
        margin-bottom: 0px;
    }
    .key-is-top .key__inner{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: 200px;
        width: 100%;
    }

    /*ナビエリア(トップページ専用)*/
    .key-is-top .key__navi{
        margin: 5% -10px 30px -10px;
    }


    .key-is-top .key__subtitle {
        font-size: 28px;
    }

    .key__text {
        font-weight: bold;
        font-size: 1.1rem;
    }


}







@media only screen and (max-width: 420px){

    .key-is-top .key__navi .btn{
        width: calc(50% - 10px);

        width: calc(45% - 1%);
        margin: 0 1% 10px 4%;
    }



    .key-is-top .key__subtitle{
        font-size: 0.8rem;
    }


    .key__text{
        font-size: 1.0rem;
    }


    .key__title{font-size: 0.8rem;}

}