@charset "UTF-8";

/* A Modern CSS Reset */

*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}

/* スマホ用のCSSはメディアクエリの外に記述する */

html, body {
    font-family: 'Noto Serif JP', serif;
    font-weight: 400;
    height: 100%; /* フッター下に余白を作らないようにする */
}



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

/* 768px以下に適用されるCSS（スマホ/タブレット用） */



}

/*  全体の設定
---------------------------------------------------- */


body {
    /* 書式設定 */
    font-size: 16px;
    text-align: justify; /* 両端揃え */
    text-justify: inter-ideograph; /* 均等割付 */
    font-family: 'Noto Sans JP', sans-serif; /* Google Fonts */

    /* 背景色 */
    background: #fff;

    margin: 0;
}

a {
    text-decoration: none;
}
.section {
    margin: inherit;}

/* リンク色 */
a {
    color: inherit;
    transition: 0.5s; /* リンク色のを変化させる秒数 */
}

/* 編集用マークを消す */
.quickedit {
    display: none;
}

/*  サイト全体のラッパー
---------------------------------------------------- */
.wrapper {
    width: 100%;
    position: relative;
    min-height: 100%;
}

/*  ヘッダー
---------------------------------------------------- */

.header-img {
    width: 100%;
    height: 300px;
    background:#ddd url(http://2.bp.blogspot.com/-f1VnL0mRWmc/YLl0hPkGZHI/AAAAAAAABxM/mCcLL4f_TmsHM4S5f25GJm7MiUhMS1CawCK4BGAYYCw/s1600/pixel_yoko.png) no-repeat center center;
    background-size:cover;
    background-position: 0 50%;
}

/* 768px以下に適用されるCSS（スマホ/タブレット用） */
@media screen and (max-width: 768px) {
    .header-img {
        height: 200px;
    }
}


/*  ナビゲーションバー
---------------------------------------------------- */

.nav {
    background-color: #303F5B;
    height: 60px;
    margin:0 auto;
    text-align:center;

}

.nav-wrap {
    height: 60px; /* navでコンテンツが隠れないようにnavの高さ分だけ高さ確保 */
}

.nav-inner {
    width: 100%;
    margin: 0 auto;
    max-width: 1160px;


}

.nav-inner h1 {
    font-size: 20px;
    display: inline-block;      /* インラインブロック要素にする */
    margin: 15px 10px 0 10px;
    color: #fff;

}


.nav-inner li {
    min-width:120px;
    display:inline-block;
    vertical-align:middle;
    position: relative;
    height: 52px;
    margin-left: 1%;

}

.nav-inner li a   {
    display:block;
    width:120px;
    height: 45px;
   color: white;
   text-shadow:
       3px 3px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
    border:0px;
    font-size: 16px;
    border-radius: 20px 20px 0px 0px;
    padding: 15px 0px 0px 0px;
    position: absolute;
    bottom: 0px;
    font-family: 'RocknRoll One', sans-serif;

    background-size: 100%; /* 背景画像をサイズに合わせて表示 */
    background-repeat: no-repeat; /* 背景画像を繰り返さない */
}


.nav-inner li a:hover {  /* カーソルが上に乗っていた時 */
    height: 50px;
}

.nav-inner li a.active { /* 特定のページを表示している時 */
    height: 50px;
}

.button-mainlabel1 {
    background-color: #19A3FF;
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyLGVI7PeUNv0GhzL-F46RK1NEPHAXhyGBN7YenG8V04kzuJ3bttJfCp-fUb150Tjr_820nkMcz9Y5WQv85vZfHkYFKLvdSNKOdjgUDYZjxPxAoMSWxeLaqyMmq6sDvoJTCmLUGZYPoDV8inwGe-XRdA8-hV5gvk721FEeBzMytGNT-82edtAgDK5kchQa/s320/mainlabel1.png);
}

.button-mainlabel2 {
    background-color: #E5D416;
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyLGVI7PeUNv0GhzL-F46RK1NEPHAXhyGBN7YenG8V04kzuJ3bttJfCp-fUb150Tjr_820nkMcz9Y5WQv85vZfHkYFKLvdSNKOdjgUDYZjxPxAoMSWxeLaqyMmq6sDvoJTCmLUGZYPoDV8inwGe-XRdA8-hV5gvk721FEeBzMytGNT-82edtAgDK5kchQa/s320/mainlabel1.png);
}

.button-mainlabel3 {
    background-color: #29EED0;
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyLGVI7PeUNv0GhzL-F46RK1NEPHAXhyGBN7YenG8V04kzuJ3bttJfCp-fUb150Tjr_820nkMcz9Y5WQv85vZfHkYFKLvdSNKOdjgUDYZjxPxAoMSWxeLaqyMmq6sDvoJTCmLUGZYPoDV8inwGe-XRdA8-hV5gvk721FEeBzMytGNT-82edtAgDK5kchQa/s320/mainlabel1.png);
}

.button-mainlabel4 {
    background-color: #A0ACC5;
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyLGVI7PeUNv0GhzL-F46RK1NEPHAXhyGBN7YenG8V04kzuJ3bttJfCp-fUb150Tjr_820nkMcz9Y5WQv85vZfHkYFKLvdSNKOdjgUDYZjxPxAoMSWxeLaqyMmq6sDvoJTCmLUGZYPoDV8inwGe-XRdA8-hV5gvk721FEeBzMytGNT-82edtAgDK5kchQa/s320/mainlabel1.png);
}

/* スクロールすると上に固定 */
.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    align-items: center;
    z-index: 10;
}



/* 768px以下に適用されるCSS（スマホ/タブレット用） */
@media screen and (max-width: 768px) {
    .nav-inner {
        display: none;      /* 非表示 */
    }
}

/* ナビゲーションのドロワー */

.drawer h1 {
    font-size: 20px;
    display: inline-block;      /* インラインブロック要素にする */
    margin: 12px 10px 0 10px;
    color: #fff;

}


/* 769px以上に適用されるCSS（PC用） */
@media screen and (min-width: 769px) {
    .drawer {
        display: none;      /* 非表示 */
    }
}

.drawer-menu {
    background-color: #fff;
    min-height: 100%;
    padding: 10px 10px;

}

/* ドロワー内Menuタイトル */

h2.drawer-menu-title {
    border-bottom: 3px solid #000;
}

h3.drawer-menu-title {
    padding: 0.5rem 1rem;
    text-align: left;
    border-left: 10px solid #6E7C96;
    font-size: 16px;
    margin-top: 20px;
    margin-left: 10px;
}

/* ドロワー内メインラベルリスト */

.mainlabel_buttons {
    margin: 0px;
    padding: 10px 0px 0px 0px;
    
}


.mainlabel_buttons li {
    display:inline-block;
    /display:inline;
    /zoom:1;
    position: relative;
    height: 50px;
    margin-bottom: 2px;
    margin-left: 2px;
}

.mainlabel_buttons li a   {
    float:left;
    display:block;
    width:120px;
    height: 50px;
    color: white;
    text-shadow:
        3px 3px 0 #000,
      -1px -1px 0 #000,  
       1px -1px 0 #000,
       -1px 1px 0 #000,
        1px 1px 0 #000;
    text-decoration:none;
    border:0px;
    font-size: 16px;
    border-radius: 15px;
    padding: 13px 0px 0px 0px;
    bottom: 0px;
    font-family: 'RocknRoll One', sans-serif;

    background-size: 100%; /* 背景画像をサイズに合わせて表示 */
    background-repeat: no-repeat; /* 背景画像を繰り返さない */
}

/*  メイン・サイド全体のラッパー
---------------------------------------------------- */

.main-wrapper {
    max-width: 1160px !important;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* 768px以下に適用されるCSS（スマホ/タブレット用） */
@media screen and (max-width: 768px) {
    .main-wrapper {
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
    }
}


/*  フレックスボックス・メイン・サイドバー
---------------------------------------------------- */
.flexbox {
    background: #fff;
}
.main {
    margin-bottom: 10px;
    width: 100%;
    display: block;
}
.side {
    background: #fff;
    margin-right: 0px;
    margin-left: auto;
    padding: 10px;
}

/* 769px以上に適用されるCSS（PC用） */
@media screen and (min-width: 769px) {
    .flexbox {
        display: -webkit-flex;
        display: flex;
    }
    .main {
        margin: 0 0px 0 0;
    }
    .side {
        width: 270px;
        min-width: 270px;
    }
}

/*  サイドバーのコンテンツ（ウィジェット等）
---------------------------------------------------- */

/* ウィジェット等のタイトル(サイドバーとドロワー内共通) */

.widget h3 {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #fff;
    padding: 6px 6px;
    margin: 5px 0px;
    background-color: #6E7C96;
}
/* ウィジェット */
.side .widget {
    margin-bottom: 20px;
}

/* ウィジェットの中身 */
.side .widget-content {
    padding: 0px 0px;
    overflow: hidden;
}

/*  人気の投稿
---------------------------------------------------- */



.PopularPosts .post-content {
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  .PopularPosts .widget-content h3 {
    letter-spacing: 1px;
    background: transparent;
    padding: 2px 0;
    order:1;
  }

  .PopularPosts .widget-content h3 a {
    display: block;
    font-size: 15px;
    text-align: center;
    color: #333;
    border-top: dashed 1px #333;
    border-bottom: dashed 1px #333;
  }

  .PopularPosts .snippet-container {
    font-size: 13px;
    line-height: 1.5em;
    color: #444;
    padding: 0 10px;
    margin: 10px 0 20px;
    max-height: 80px;
    order:3;
  }

  .PopularPosts .item-thumbnail {
    width: 100%;
    text-align: center;
    margin: 15px 0 0;
    order:2;
  }

  .PopularPosts .item-thumbnail img {
    width: 40%;
    border-radius: 50%;
    border: solid 1px #ddd;
    object-fit: cover;
    order:2;
  }

  .PopularPosts .item-thumbnail a {
    height: 0;
    padding: 0;
    margin: 0;
  }

  .PopularPosts img {
    padding: 0;
  }

/*  人気の投稿(カスタム)
---------------------------------------------------- */
/* タイトルのみ */

.pp-title-only {
    font-size: 14px;
  }
  
  .pp-title-only::before {
    font-family: "Font Awesome 5 Free";
    content: "\f521";
    font-size: 14px;
    font-weight: 900;
  }
  
  /* 共通 */

  .custom-pp ul {
    padding: 0; /*左寄せ*/
  }
  
  .custom-pp li {
    border-bottom: solid 1px #ddd;
    list-style:none; /*点消し*/
  }
  
  .custom-pp li:last-child {
    border: none;
  }
  
  .custom-pp a {
    display: block;
    color: #444;
  }
  
  .pp-title {
    font-size: 15px;
    font-weight: bold;
    width: 120px;
    /*ここで行数の指定*/
	-webkit-line-clamp: 3;
	/*　おまじないのように書く三行
	　　displayプロパティをboxに。
	　　box-orientプロパティをverticalで、
	　　要素の配置方向（上から下へ垂直に積み重ねて表示）を指定。
	　　overflowプロパティをhiddenに。
	　　Flexコンテナとしてline-clampプロパティで行数を認識させる　*/
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;

    
  }
  
  .pp-snippet {
    font-size: 13px;
    margin-top:10px;
  }
  
  .pp-items {
    display: flex;
  }
  
  .pp-thumb img {
    width: 112px;
    height: 63px;
    border: solid 1px #ddd;
    margin-right:10px;
    object-fit: cover;
  }

  /* レスポンシブで下に大きくウィジェットを表示するときだけタイトル幅を広げる */


    @scope (.side) {
        @media screen and (max-width: 768px) {
        .pp-title {
   
            max-width: 280px;
            width: auto;
            
          }
      }
    
  }
  

/*  注目の投稿
---------------------------------------------------- */
.FeaturedPost {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.FeaturedPost h3 {
    display: block;
    font-size: 16px;
    text-align: left;
    color: #333;
    word-break: break-all; /*横幅に達したら無理矢理改行*/
    margin: 0px;
    text-decoration: none;
}

.FeaturedPost h3 a {
    text-decoration: none;
}

.FeaturedPost p {
    font-size: 12px;
    order:3;
}

.FeaturedPost img {
    width: 100%;
    border-radius: 50%;
    border: solid 1px #ddd;
    object-fit: cover;
    order:2;
}

/*  検索フォーム
---------------------------------------------------- */
.search-box {
    text-align: right;
    padding-top: 20px;

}

.search-text {
    position: relative;
    padding: 0;
    margin: 0 10px 0 0;
    width: 200px;
    background-color: #cccccc;
}

input.search-text::-webkit-search-cancel-button {    
    -webkit-appearance: none; /* 検索キャンセルボタン非表示 */
}

input.search-text{
    line-height: 30px;
    padding: 5px 45px 5px 13px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    border: none;
    font-weight: bold;
    border-radius: 100px;
    outline: none;
}
button.search-submit{
    position: relative;
    margin-right: 15px;
    top:-35px;
    border: none;
    border-radius: 3px;
    background: 0 0;
    font-size: 18px;
    cursor: pointer;
    width: 30px;
}

/*  基本情報（プロフィール）
---------------------------------------------------- */
.profile-info {
    display: flex;
    flex-direction: column;
}

/* 画像 */
.profile-img {
    border-radius: 50%;
}

.Profile img{
    margin: 0 auto;
    background-color: aqua;
    width: 75px;
    height: 75px;
    object-fit: cover;
}

.profile-data {
    text-align: center;
    margin: 10px 0;
}

.profile-data a {
    font-size: 16px;
    color: #333;
}

.profile-textblock {
    text-align: center;
    font-size: 14px;
    padding: 0 10px;
}

.profile-link {
    padding-top: 10px;
    font-size: 14px;
    color: #cc5;
    float: right;
    text-decoration: none;
    padding-right: 10px
}

.profile-link::before {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    margin: 5px 0px -0px -15px;
    box-sizing: border-box;
    border: 5px solid transparent;
    border-left: 8px solid #cc5;
}

/*  ブログアーカイブ
---------------------------------------------------- */

/*  フォロワー
---------------------------------------------------- */

/*  イメージ
---------------------------------------------------- */
.widget.Image img{
    height: auto;
    border-radius: 5px 5px 5px 5px;
    margin-bottom: -58px;
}
span.caption{
    /* キャプション文字 */
    font-size: 14px;
    color: #fff;
    display: inline-block; /* 枠の生成 */
    width: 250px;
    height: auto;
    padding: 10px 5px 10px 5px;
    margin: -45px 0px 0px 0px;
    background-color: rgba(0,0,0,0.7); /* キャプションの背景文字 */
    border-radius: 0px 0px 5px 5px;
}

/* 768px以下に適用されるCSS（スマホ/タブレット用） */
@media screen and (max-width: 768px) {

    span.caption {
        width: 100%;
    }
}

/*  ラベル（リスト表示）
---------------------------------------------------- */

.widget-content.list-label-widget-content {
    padding: 0;
}
.list-label-widget-content ul li {
    padding: 0;
}
.list-label-widget-content li a {
    display: block;
    font-size: 14px;
    color: #444;
    background: #fff;
    padding: 6px;
    margin: 0;
}
.list-label-widget-content li:nth-child(even) a {
    display: block;
    font-size: 14px;
    color: #444;
    background: #f9f9f9;
    padding: 6px;
    margin: 0;
}
.list-label-widget-content li a::before {
    font-family: "Font Awesome 5 Free";
    content: "\f0da";
    font-size: 15px;
    font-weight: 900;
    margin-left: 2px;
    margin-right: 8px;
}
.list-label-widget-content li a:hover {
    opacity: 1;
    background: #ddd;
}

/*  ラベル（クラウド表示）
---------------------------------------------------- */

.label-size,.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
    font-size: 14px;
    padding: 0;
    margin: 0;
    opacity: 1;
}
.cloud-label-widget-content {
    display: flex;
    flex-wrap: wrap;
}
.cloud-label-widget-content span a {
    display: inline-block;
    color: #444;
    background: #fff;
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 3px 5px;
    border:solid 1px #ddd;
}
.cloud-label-widget-content span:nth-child(even) a {
    display: inline-block;
    color: #444;
    background: #f9f9f9;
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 3px 5px;
    border:solid 1px #ddd;
}
.cloud-label-widget-content span a:hover {
    opacity: 1;
    background: #ddd;
}

.cloud-label-widget-content span a:hover {
    opacity: 1;
    background: #ddd;
}

/*  ページ
---------------------------------------------------- */

/*  リンクリスト
---------------------------------------------------- */

/*  テキスト
---------------------------------------------------- */

/*  ブログの統計情報
---------------------------------------------------- */

/*  メールでフォロー
---------------------------------------------------- */

/*  フィード
---------------------------------------------------- */

/*  ロゴ
---------------------------------------------------- */

/*  リンク登録
---------------------------------------------------- */

/*  翻訳
---------------------------------------------------- */
.google_translate_element {
    text-align: center;
    border-radius: 14px;
}
.google_translate_element img {
    display: inline;
}

/*  リスト
---------------------------------------------------- */

/*  連絡フォーム
---------------------------------------------------- */

.contact-form-widget{
    font-size: 14px;

}

.contact-form-name,.contact-form-email{
    border-radius: 14px;
    border: none;
    width: 100%;
    height: 28px;
    padding: 2px 10px 2px 10px;
    font-size: 14px;
}

.contact-form-email-message {
    width: 100%;
    border-radius: 14px;
    padding: 2px 10px 2px 10px;
    font-size: 14px;
}

.contact-form-button-submit{
    border-radius: 14px;
    border: none;
    width: 100%;
    height: 30px;
    margin: 5px 0 0 0;
    background-color: #cd0;
    color: #cd0;
    transition: all 0.5s; /* hoverで移動にかける秒数 */
}

.contact-form-button-submit:hover{
    background-color: #c80;
    color: #c80;

}

/* 送信マーク */
.contact-form-widget::after{
    font-family: 'Material Icons';
    content: "\e5db";
    font-size: 18px;
    display: inline-block;
    margin: -28px 0px 0px 116px;
    position: absolute;
    color: #fff;
    pointer-events: none; /* ボタンに干渉させないように非クリック */
    transition: all 0.5s; /* hoverで移動にかける秒数 */
    transform: rotate(-90deg);
}

/* 768px以下に適用されるCSS（スマホ/タブレット用） */
@media screen and (max-width: 768px) {

    .contact-form-widget::after {
        margin-left: 47%;
    }
}

.contact-form-widget:hover::after{
    content: "\e163";
    transform: rotate(0deg);
}


/*  Wikipedia
---------------------------------------------------- */

/*  Attribution
---------------------------------------------------- */

/*  不正行為を報告
---------------------------------------------------- */

/*  main-記事リスト（トップ・カテゴリ・検索）
---------------------------------------------------- */

.article-list-container{
    width: 100%;
}

.article-list-wrap{
    border: solid 1px;
    border-color: #ccc;
    border-radius: 10px;
    transition: all 0.5s; /* hoverで移動にかける秒数 */
    padding-bottom: 10px;
}
.article-list-wrap:hover {
    box-shadow: 4px 4px 2px rgba(0,0,0,.20); /* hoverでシャドウ */
    opacity: 0.9 ; /* 半透明 */
}


/* 960px以上に適用されるCSS（PC用）２列配置 */
@media screen and (min-width:960px){
    .article-list-container{
        display:flex;
        flex-wrap:wrap;
        padding-left: 10px;
        padding-bottom: 10px;
        display: block;
    }
    .article-list-wrap {
        width: 48.4%;
        height: 380px;
        min-width: 311px;
        margin: 10px 10px 0 0;
        float: left;
    }

}


/* 959px以下に適用されるCSS（スマホ/タブレット用） */
@media screen and (max-width: 959px) {

    .article-list-container{
        padding: 10px;
    }
    .article-list-wrap{
        margin-bottom: 20px;
        width: 100%;
    }

    }



.article-list-thumb {
    padding-bottom: 4px;
    position: relative;

}

.article-list-img-wrap {
    padding-top: calc(100% * 0.56); /* 16:9 */
}


.article-list-thumb img {
    border-radius: 8px 8px 0 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;


}

.article-list-postdate,
.article-list-lastupdate{
    padding: 4px 10px 0px 10px;
    font-size: 14px;
    font-family: 'Work Sans', sans-serif;
    color: #999;
}

.article-list-postdate::before {
    font-family: 'Material Icons Outlined';
    content: "\e3c9";
    font-size: 14px;
    display: inline-block;
    position:relative;
    top:2px;
    margin-right: 4px;
    color: #88d;
}

.article-list-lastupdate > .material-icons {
    font-size: 14px;
    display: inline-block;
    position:relative;
    top:2px;
    margin-right: 4px;
    color: #88d;
}

.article-list-title {
    padding: 0px 10px 4px 10px;
    font-size: 18px;
    color: #333;

}

/* タイトルを2行に収まらない時は省略 */
@supports (-webkit-line-clamp: 2) {
    .article-list-title {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}


.article-list-label{
    position:absolute;
    bottom: 3px;
    right: 0px;
    font-family: 'RocknRoll One', sans-serif;
    font-size: 16px;

}

.article-list-main-label{
    margin: none;
}

.mainlabel1,.mainlabel2,.mainlabel3,.mainlabel4 {
    margin-right: -1px;
    padding: 2px 20px 2px 10px;
    clip-path: polygon(0% 100%, 6.5% 0%, 100% 0%, 100% 100%); /* 台形にする */
}

.mainlabel1 {
    background-color: #19A3FF;
}
.mainlabel2 {
    background-color: #E5D416;
}

.mainlabel3 {
    background-color: #29EED0;
}

.mainlabel4 {
    background-color: #A0ACC5;
}

.article-list-main-label::after {
    font-family: 'Material Icons';
    content: "\e5cd";
    font-size: 16px;
    display: inline-block;
    position: absolute;
    color: #fff;
    margin-left:-20px;
    margin-top: -3px;
    padding: 4px 4px 2px 6px;
    background-color: #555;
    clip-path: polygon(0% 100%, 17.5% 0%, 100% 0%, 100% 100%); /* 台形にする */
}

.article-list-sub-label {
    color: #fff;
    background-color: #555;
    padding: 2px 4px 2px 8px;
    min-width: 50px;

}

.article-list-all-label{
    padding: 0px 10px 14px 26px;
    font-size: 14px;
    color: #ccc;
    line-height:26px; /* 行間 */
    text-align:left; /* 左に寄せて揃える */

    overflow: hidden; /* 2行目以降は省略 */
    height: 52px; /* 2行の高さ */


}

.article-list-all-label::before {
    font-family: 'Material Icons Outlined';
    content: "\e54e";
    font-size: 14px;
    display: inline-block;
    position: absolute;
    color: #ccc;
    margin-left:-14px;
    margin-top: 1px;

}
.article-list-all-label>span {
    border: solid 1px;
    border-radius: 16px;
    margin-left: 4px;
    padding: 0px 6px;
    word-break: keep-all; /* 折り返し */
    font-feature-settings: "palt"; /* 字間 */


}

/*  記事リストのページャ
---------------------------------------------------- */

.pager-wrap {
    display: flex;
    justify-content: center;
    padding: 0;
    margin-top: 30px;

    width: 100%;
}


/* 960px以上に適用されるCSS（PC用）２列配置 */
@media screen and (min-width:960px){
    .pager-wrap {
        min-width: 630px;
        padding-top: 30px;
    }

}

#blog-pager {
    padding: 0;
    margin: 0;
}

.blog-pager a {
    display: inline-block;
    text-decoration: none;
    background-color: #fff;
    color: #999;
    padding: 6px 12px;
    margin: 0 2px;
}

.blog-pager a:hover {
    background-color: #ddd;
    color: #666;
}

/* 前の投稿 */
.blog-pager-older-link {
    font-size: 0;
}

.blog-pager-older-link::before {
    font-family: "Material Icons Outlined";
    content: "\e5cc";
    font-size: 13px;
}

/* ホーム */
.home-link {
    font-weight: 900;
    font-size: 13px;
}

/* 新しい投稿 */
.blog-pager-newer-link {
    font-size: 0;
}

.blog-pager-newer-link::before {
    font-family: "Material Icons Outlined";
    content: "\e5cb";
    font-size: 13px;
}


/*  記事リストの番号付きページャ
---------------------------------------------------- */

#blog-pager {overflow: visible}

/* Page * of * の表示 */
.showpageOf {
    visibility:hidden;
    font-size: 0;
    padding: 0;
    margin: 0;
}

/* アクティブ番号 */
span.showpagePoint {
    display: inline-block;
    font-size: 13px;
    font-weight: 900;
    padding: 6px 12px;
    margin: 0 2px;
    background-color: #333;
    color: #fff;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    border-radius: 20px;
}

/* 番号リスト */
span.showpageNum, span.showpage {
    margin: 0 2px;
}

.showpageNum a, .showpage a {
    display: inline-block;
    font-size: 13px;
    font-weight: 900;
    padding: 6px 12px;
    color: #999;
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    border: 1px solid #999;
    border-radius: 20px;
}

/*  main-個別記事
---------------------------------------------------- */
.article-page-container {
    padding: 10px;
    width: 100%;
    display: block;

}

.article-page-wrap {
    border: solid 1px;
    border-color: #ccc;
    border-radius: 10px;
    width: 100%;
    display: block;
}

/* 769px以上に適用されるCSS（PC/タブレット用）*/
@media screen and (min-width:769px){
    .article-page-wrap {
        padding: 20px;
    }
}

/* 768px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 768px) {
    .article-page-wrap {
        padding: 10px;
    }

}



/* 投稿日時・更新日時 */

.article-page-date{
    text-align:right;
}

.article-page-postdate,
.article-page-lastupdate{
    font-size: 14px;
    font-family: 'Work Sans', sans-serif;
    color: #999;
}

.article-page-postdate::before {
    font-family: 'Material Icons Outlined';
    content: "\e3c9";
    font-size: 14px;
    display: inline-block;
    position:relative;
    top:2px;
    margin-right: 4px;
    color: #88d;
}

.article-page-lastupdate > .material-icons {
    font-size: 14px;
    display: inline-block;
    position:relative;
    top:2px;
    margin-right: 4px;
    color: #88d;
}


/* 記事のタグ一覧 */

.article-page-all-label{
    padding-bottom: 6px;
    padding-left: 10px;
    font-size: 14px;
    line-height:26px; /* 行間 */
    text-align:right; /* 右に寄せて揃える */
}
.article-page-all-label > i{
    position: absolute;
    font-size: 16px;
    display: inline-block;
    color: #6CF;
    margin-top: 5px;
    margin-left: -20px;
}
.article-page-all-label a{
    border: none 0px;
    border-radius: 16px;
    margin-left: 4px;
    padding: 0px 6px;
    word-break: keep-all; /* 折り返し */
    font-feature-settings: "palt"; /* 字間 */
    background-color: #6cf;
    color: #fff;
}

/* 記事タイトル */

.article-page-title {
    font-size: 24px;
    color: #333;
    border-bottom: 3px solid #cc8;
    padding-bottom: 4px;
    margin-bottom: 10px;
    width: 100%;
}

/* 記事本文 */

.article-page-detail {
    width: 100%;
    color: #333;
}

/* 見出し */

.article-page-detail h1 {
    font-size: 24px;
    margin: 10px 0;
    padding: 6px;
    color: #010079;
    text-shadow: 0 0 5px white;
    border-left: solid 7px #010079;
    background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
    background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}

.article-page-detail h2 {
    background: #b0dcfa; /*背景色*/
    padding: 10px;/*文字周りの余白*/
    color: white;/*文字を白に*/
    border-radius: 10px;/*角の丸み*/
    font-size: 22px;
    margin: 20px 0;
}

.article-page-detail h3{
    font-size: 18px;
    margin: 20px 0;
    padding: 4px 8px;
    border-left: 6px solid #7c7;
}

.article-page-detail h4 {
    position: relative;
    padding-left: 1.2em;/*アイコン分のスペース*/
    line-height: 1.4;
    margin: 20px 0;
}

.article-page-detail h4:before {
    font-family: "Material Icons Outlined";
    content: "\e876";/*アイコンのユニコード*/
    font-weight: 900;
    position: absolute;/*絶対位置*/
    font-size: 1em;/*サイズ*/
    left: 0;/*アイコンの位置*/
    top: 0;/*アイコンの位置*/
    color: #5ab9ff; /*アイコン色*/
    font-weight: 900;
}

/* 箇条書き */
.article-page-detail ul {
    position: relative;
    padding-left: 28px;
}

.article-page-detail ul li {
    list-style-type: none!important;
}

.article-page-detail ul li:before {
    font-family: "Material Icons";
    content: "\e061";
    position: absolute;
    font-size: 8px;
    line-height:26px;
    left : 12px; /*左端からのアイコンまで*/
    color: #c83; /*アイコン色*/
}

/* 番号付き箇条書き */

.article-page-detail ol {
    list-style:  none;          /* デフォルトのアイコンを消す */
    margin:  10px;                 /* デフォルト指定上書き */
    padding: 0;                 /* デフォルト指定上書き */
    counter-reset: li_count;    /* カウンタをセット */
}

.article-page-detail ol li {
}

.article-page-detail ol li:before  {
    font-family: 'RocknRoll One', sans-serif;
    counter-increment: li_count;  /* カウンタの値を計算していく */
    content: counter(li_count)"."; /* 数字出力 */
    color: #c83;               /* 文字色指定 */
    margin-right: 2px;            /* 余白指定 */
}


/* 引用 */

.article-page-detail blockquote {
    position: relative;
    margin: 20px 30px;
    padding: 36px 20px 30px 20px;
    box-sizing: border-box;
    font-style: italic;
    background: #efefef;
    color: #555;
}

.article-page-detail blockquote:before{
    display: inline-block;
    position: absolute;
    top: 5px;
    left: 15px;
    content: "\e244";
    font-family: "Material Icons";
    color: #cfcfcf;
    font-size: 28px;
    line-height: 1;
    transform: rotate(180deg);
}

.article-page-detail blockquote p {
    padding: 0;
    margin: 10px 0;
    line-height: 1.7;
}

.article-page-detail blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

/* パンくずリスト */

.breadcrumb-wrap {
    padding: 10px 15px 20px 15px;
}

.breadcrumbs {
    position:absolute;
    width: 95%;
    font-size: 13px;
    font-weight: bold;
    color: #666;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.breadcrumbs a {
    color: #999;
    text-decoration: none;
    padding: 2px;
}

.breadcrumbs span {
    vertical-align: text-top;
}

.breadcrumbs .material-icons-outlined {
    font-size: 21px;
    vertical-align: bottom;
}

.breadcrumbs > i {
    color: #999;
    font-size: 13px;

}

.breadcrumbs a:hover {
    opacity: 0.6;
}

/* レスポンシブ（スマホ縦） */

@media screen and (max-width: 768px) {
    .breadcrumbs {
        overflow-x: auto;
        overflow-y: hidden;
        text-overflow: unset;
        -webkit-overflow-scrolling: touch;
    }
}


/* 目次 */

.b-toc-container {
    background: #f9f9f9;
    border: 1px solid #aaa;
    width: 90%!important;
    margin: 20px auto!important; /* 枠を中央に表示 */
    display: table;
    padding: 20px;
    font-size: 14px;

    text-align: center; /* 中央寄せ */
}

.b-toc-container p {
    text-align: center;
    margin: 0;
    padding: 0
}

.b-toc-container ul {
    list-style-type: none;
    list-style: none;

    /* 左揃えで中央寄せ */
    padding-left: 0;
    display: inline-block;
}

.b-toc-container > ul {
    margin: 15px 0 0;
}

.b-toc-container.hide > ul {
    display: none;
}

.b-toc-container ul li {
    margin: 0;
    padding: 0 0 0 20px;
    list-style: none;

    text-align: left; /* 左揃え */
}

.b-toc-container ul li:after,
.b-toc-container ul li:before {
    background: 0;
    border-radius: 0;
    content: ""
}

.b-toc-container ul li a {
    text-decoration: none;
    color:#0ae !important;
    font-weight: 400;
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;

    line-height: 18px; /* 行間 */
}

.b-toc-container ul li .toc-number {
    margin: 0 .5em 0 0;
    white-space: nowrap
}

.b-toc-container ul li .toc-text:hover {
    text-decoration: underline
}

/* 吹き出しコメント */

/* 吹き出しのCSS　*/
.article-page-detail .l-fuki,
.article-page-detail .r-fuki {
    position: relative;
    width: calc(100% - 82px);
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 20px;
    border-radius: 6px;
    border: 2px solid #ddd;
    box-shadow: 0 3px 8px -2px rgba(0,0,0,.16);
    background-color: #fff;
    z-index: 1;
    box-sizing: border-box;
}
.article-page-detail .l-fuki {
    margin: 20px auto 36px 0;
}
.article-page-detail .r-fuki {
    margin: 20px 0 36px auto;
}
.article-page-detail .l-fuki::before,
.article-page-detail .r-fuki::before {
    position: absolute;
    content: "";
    top: 16px;
    width: 10px;
    height: 10px;
    border-right: 2px solid #ddd;
    border-bottom: 2px solid #ddd;
    background-color: #fff;
    z-index: 2;
}
.article-page-detail .l-fuki::before {
    right: -7px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.article-page-detail .r-fuki::before {
    left: -7px;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}
.article-page-detail .l-fuki::after,
.article-page-detail .r-fuki::after {
    position: absolute;
    content: "";
    width: 60px;
    height: 60px;
    top: -6px;
    border-radius: 50%;
    border: 3px solid #fff;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow: 1px 1px 5px #aaa;
    box-sizing: border-box;
}
.article-page-detail .l-fuki::after {
    right: -82px;
}
.article-page-detail .r-fuki::after {
    left: -82px;
}
@media screen and (min-width: 478px) {
    .article-page-detail .l-fuki::after,
    .article-page-detail .r-fuki::after {
        width: 80px;
        height: 80px;
    }
    .article-page-detail .l-fuki,
    .article-page-detail .r-fuki {
        width: calc(100% - 106px);
    }
    .article-page-detail .l-fuki::after {
        right: -106px;
    }
    .article-page-detail .r-fuki::after {
        left: -106px;
    }
}
.fuki-yoh-happy::after {background-image:url(fukidashi.jpg);}
.fuki-yoh-sad::after {background-image:url(fukidashi.jpg);}


/* 個別記事の画像付きページャ */

#post-pager {
    margin-top: 2em;
    border: #00cc00 solid 1px; /*チェック用*/
  }
  .pager-div {
    word-break: break-all;
    margin-bottom: 13px;

    border: #f00 solid 1px; /*チェック用*/
  }
  .prev-post {
    text-align: right;
  }
  .pager-link {
    display: table;
    width: 100%;
    font-size: 95%;
    color: #444 !important;
    text-decoration: none;
    transition: 0.3s ease;
  }
  .pager-link:hover {
    opacity: 0.6;
    text-decoration: none;
  }
  .pager-img {
    position: relative;
    display: table-cell;
    width: 108px;
    vertical-align: middle;
    text-align: center;
    padding: 0 14px;
    box-sizing: border-box;
    border: #00f solid 1px; /*チェック用*/
  }
  .pager-img img {
    height: 45px;
    object-fit: cover;
    vertical-align: top;
  }
  .pager-title {
    display: table-cell;
    vertical-align: middle;
    border: #ff0 solid 1px; /*チェック用*/
  }
  .next-post .pager-img:before {
    position: absolute;
    left: 0;
    content: "\f104";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    line-height: 45px;
    padding: 0 3px;
    border: #ff00ee solid 1px; /*チェック用*/
  }
  .prev-post .pager-img:after {
    position: absolute;
    right: 0;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    line-height: 45px;
    padding: 0 3px;
    margin-top: -45px;
    border: #00ffee solid 1px; /*チェック用*/
  }

/* 外部サイトへのリンクアイコン */

/* 外部サイトサムネイル */

/*  個別記事ページャ
---------------------------------------------------- */



/*  フッター
---------------------------------------------------- */
 .footer {
     background: #445;
     width: 100%;
     height: 200px;
     bottom: 0px; /*下に固定*/
     position: relative;
     text-align: center;

}

.copyright {
    color: #fff;
    position:absolute;
    bottom:20px; /*下に固定*/
    display: inline-block;
    transform:translateX(-50%);
    white-space: nowrap; /*改行不可*/
    font-family: "arial",sans-serif;

}


/*  記事内でコードを表示する Google code-prettify
---------------------------------------------------- */

.article-page-detail > pre.prettyprint ol li:before {
    content: none !important; /* 番号付き箇条書きの設定を解除 */
}

pre.prettyprint {
    border: 1px solid #cccccc !important;
    line-height: 14px;
    padding: 10px !important;
    display: block;
    width: 100%;
    font-size: 12px;

}

/* 769px以上に適用されるCSS（PC/タブレット用）*/
@media screen and (min-width:769px){
    pre.prettyprint{
        white-space: pre-wrap; /*　chrome等の右端の折り返し設定 */

    }
}

/* 768px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 768px) {
    pre.prettyprint{
        white-space:nowrap;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;/*iphoneのスクロール潤滑コード */
    }

    }


pre.prettyprint > ol.linenums
{
    padding-left: 2em;
}
pre.prettyprint > ol.linenums > li
{
    border-left: 1px solid #cccccc;
    margin-bottom: 0;
}
pre.prettyprint > ol.linenums > li.L0,
pre.prettyprint > ol.linenums > li.L1,
pre.prettyprint > ol.linenums > li.L2,
pre.prettyprint > ol.linenums > li.L3,
pre.prettyprint > ol.linenums > li.L4,
pre.prettyprint > ol.linenums > li.L5,
pre.prettyprint > ol.linenums > li.L6,
pre.prettyprint > ol.linenums > li.L7,
pre.prettyprint > ol.linenums > li.L8,
pre.prettyprint > ol.linenums > li.L9
{
    list-style-type: decimal;
}
pre.prettyprint > ol.linenums > li.L1,
pre.prettyprint > ol.linenums > li.L3,
pre.prettyprint > ol.linenums > li.L5,
pre.prettyprint > ol.linenums > li.L7,
pre.prettyprint > ol.linenums > li.L9
{
    background-color: transparent;
}
pre.prettyprint > ol.linenums > li span:first-child
{
    padding-left: 1em;
}
pre.prettyprint > ol.linenums > li span:last-child
{
    padding-right: 1em;
}
/* plain text */
pre.prettyprint .pln { color: #cccccc; }
/* string content */
pre.prettyprint .str { color: #cccc33; }
/* a keyword */
pre.prettyprint .kwd { color: #00cc00; }
/* a comment */
pre.prettyprint .com { color: #cc3366; }
/* a type name */
pre.prettyprint .typ { color: #00cc00; }
/* a literal value */
pre.prettyprint .lit { color: #3399cc; }
/* punctuation, lisp open bracket, lisp close bracket */
pre.prettyprint .pun,
pre.prettyprint .opn,
pre.prettyprint .clo
{ color: #cccccc; }
/* a markup tag name */
pre.prettyprint .tag { color: #3399cc; }
/* a markup attribute name */
pre.prettyprint .atn { color: #00cc00; }
/* a markup attribute value */
pre.prettyprint .atv { color: #cccc33; }
/* a declaration; a variable name */
pre.prettyprint .dec,
pre.prettyprint .var
{ color: #00cc00; }
/* a function name */
pre.prettyprint .fun { color: #cc66cc; }


/*  drawer用css
---------------------------------------------------- */

/*!
* jquery-drawer v3.2.2
* Flexible drawer menu using jQuery, iScroll and CSS.
* http://git.blivesta.com/drawer
* License : MIT
* Author : blivesta <design@blivesta.com> (http://blivesta.com/)
*/

/*!------------------------------------*\
Base
\*!------------------------------------*/

.drawer-open {
    overflow: hidden !important;
}

.drawer-nav {
    position: fixed;
    z-index: 101;
    top: 0;
    overflow: hidden;
    width: 260px; /* 左側ナビゲーション横幅 */
    padding: 5px; /* 左側ナビゲーション上下左右空白 */
    height: 100%;
    color: #222;
    background-color: #fff;
}

.drawer-brand {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 3.75rem;
    display: block;
    padding-right: .75rem;
    padding-left: .75rem;
    text-decoration: none;
    color: #222;
}

.drawer-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.drawer-menu-item {
    font-size: 1rem;
    display: block;
    padding: .75rem;
    text-decoration: none;
    color: #222;
}

.drawer-menu-item:hover {
    text-decoration: underline;
    color: #555;
    background-color: transparent;
}

/*! overlay */

.drawer-overlay {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .2);
}

.drawer-open .drawer-overlay {
    display: block;
}

/*!------------------------------------*\
Top
\*!------------------------------------*/

.drawer--top .drawer-nav {
    top: -100%;
    left: 0;
    width: 100%;
    height: auto;
    max-height: 100%;
    -webkit-transition: top .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    transition: top .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

.drawer--top.drawer-open .drawer-nav {
    top: 0;
}

.drawer--top .drawer-hamburger,
.drawer--top.drawer-open .drawer-hamburger {
    right: 0;
}

/*!------------------------------------*\
Left
\*!------------------------------------*/

.drawer--left .drawer-nav {
    left: -16.25rem;
    -webkit-transition: left .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    transition: left .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

.drawer--left.drawer-open .drawer-nav,
.drawer--left .drawer-hamburger,
.drawer--left.drawer-open .drawer-navbar .drawer-hamburger {
    left: 0;
}

.drawer--left.drawer-open .drawer-hamburger {
    left: 16.25rem;
}

/*!------------------------------------*\
Right
\*!------------------------------------*/

.drawer--right .drawer-nav {
    right: -16.25rem;
    -webkit-transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

.drawer--right.drawer-open .drawer-nav,
.drawer--right .drawer-hamburger,
.drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
    right: 0;
}

.drawer--right.drawer-open .drawer-hamburger {
    right: 16.25rem;
}

/*!------------------------------------*\
Hamburger
\*!------------------------------------*/

.drawer-hamburger {
    position:absolute; /* ★fixedから変更 */
    z-index: 104;
    /* top: 0; ★削除*/
    display: block;
    box-sizing: content-box;
    width: 2rem;
    margin-top: -40px;/* ★追加 */
    padding: 0;
    padding-top: 18px;
    padding-right: .75rem;
    padding-bottom: 30px;
    padding-left: .75rem;
    -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    border: 0;
    outline: 0;
    background-color: transparent;
}

.drawer-hamburger:hover {
    cursor: pointer;
    background-color: transparent;
}

.drawer-hamburger-icon {
    position: relative;
    display: block;
    margin-top: 10px;
}

.drawer-hamburger-icon,
.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
    width: 100%;
    height: 3px;/* ★太さ2pxから変更 */
    -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    background-color: #fff; /* ★色を変更 */
}

.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
    position: absolute;
    top: -10px;
    left: 0;
    content: ' ';
}

.drawer-hamburger-icon:after {
    top: 10px;
}

.drawer-open .drawer-hamburger-icon {
    background-color: transparent;
}

.drawer-open .drawer-hamburger-icon:before,
.drawer-open .drawer-hamburger-icon:after {
    top: 0;
}

.drawer-open .drawer-hamburger-icon:before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.drawer-open .drawer-hamburger-icon:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/*!------------------------------------*\
accessibility
\*!------------------------------------*/

/*!
* Only display content to screen readers
* See: http://a11yproject.com/posts/how-to-hide-content
*/

.sr-only {
    position: absolute;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

/*!
* Use in conjunction with .sr-only to only display content when it's focused.
* Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
* Credit: HTML5 Boilerplate
*/

.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static;
    overflow: visible;
    clip: auto;
    width: auto;
    height: auto;
    margin: 0;
}

/*!------------------------------------*\
Sidebar
\*!------------------------------------*/

.drawer--sidebar {
    background-color: #fff;
}

.drawer--sidebar .drawer-contents {
    background-color: #fff;
}

@media (min-width: 64em) {
    .drawer--sidebar .drawer-hamburger {
        display: none;
        visibility: hidden;
    }

    .drawer--sidebar .drawer-nav {
        display: block;
        -webkit-transform: none;
        transform: none;
        position: fixed;
        width: 12.5rem;
        height: 100%;
    }

    /*! Left */
    .drawer--sidebar.drawer--left .drawer-nav {
        left: 0;
        border-right: 1px solid #ddd;
    }

    .drawer--sidebar.drawer--left .drawer-contents {
        margin-left: 12.5rem;
    }

    /*! Right */
    .drawer--sidebar.drawer--right .drawer-nav {
        right: 0;
        border-left: 1px solid #ddd;
    }

    .drawer--sidebar.drawer--right .drawer-contents {
        margin-right: 12.5rem;
    }

    /*! container */
    .drawer--sidebar .drawer-container {
        max-width: 48rem;
    }
}

@media (min-width: 75em) {
    .drawer--sidebar .drawer-nav {
        width: 16.25rem;
    }

    .drawer--sidebar.drawer--left .drawer-contents {
        margin-left: 16.25rem;
    }

    .drawer--sidebar.drawer--right .drawer-contents {
        margin-right: 16.25rem;
    }

    /*! container */
    .drawer--sidebar .drawer-container {
        max-width: 60rem;
    }
}

/*!------------------------------------*\
Navbar
\*!------------------------------------*/

.drawer--navbarTopGutter {
    padding-top: 3.75rem;
}

.drawer-navbar .drawer-navbar-header {
    border-bottom: 1px solid #ddd;
    background-color: #fff;
}

.drawer-navbar {
    z-index: 102;
    top: 0;
    width: 100%;
}

/*! .drawer-navbar modifier */

.drawer-navbar--fixed {
    position: fixed;
}

.drawer-navbar-header {
    position: relative;
    z-index: 102;
    box-sizing: border-box;
    width: 100%;
    height: 3.75rem;
    padding: 0 .75rem;
    text-align: center;
}

.drawer-navbar .drawer-brand {
    line-height: 3.75rem;
    display: inline-block;
    padding-top: 0;
    padding-bottom: 0;
    text-decoration: none;
}

.drawer-navbar .drawer-brand:hover {
    background-color: transparent;
}

.drawer-navbar .drawer-nav {
    padding-top: 3.75rem;
}

.drawer-navbar .drawer-menu {
    padding-bottom: 7.5rem;
}

@media (min-width: 64em) {
    .drawer-navbar {
        height: 3.75rem;
        border-bottom: 1px solid #ddd;
        background-color: #fff;
    }

    .drawer-navbar .drawer-navbar-header {
        position: relative;
        display: block;
        float: left;
        width: auto;
        padding: 0;
        border: 0;
    }

    .drawer-navbar .drawer-menu--right {
        float: right;
    }

    .drawer-navbar .drawer-menu li {
        float: left;
    }

    .drawer-navbar .drawer-menu-item {
        line-height: 3.75rem;
        padding-top: 0;
        padding-bottom: 0;
    }

    .drawer-navbar .drawer-hamburger {
        display: none;
    }

    .drawer-navbar .drawer-nav {
        position: relative;
        left: 0;
        overflow: visible;
        width: auto;
        height: 3.75rem;
        padding-top: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    .drawer-navbar .drawer-menu {
        padding: 0;
    }

    /*! dropdown */
    .drawer-navbar .drawer-dropdown-menu {
        position: absolute;
        width: 16.25rem;
        border: 1px solid #ddd;
    }

    .drawer-navbar .drawer-dropdown-menu-item {
        padding-left: .75rem;
    }
}

/*!------------------------------------*\
Dropdown
\*!------------------------------------*/

.drawer-dropdown-menu {
    display: none;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #fff;
}

.drawer-dropdown-menu > li {
    width: 100%;
    list-style: none;
}

.drawer-dropdown-menu-item {
    line-height: 3.75rem;
    display: block;
    padding: 0;
    padding-right: .75rem;
    padding-left: 1.5rem;
    text-decoration: none;
    color: #222;
}

.drawer-dropdown-menu-item:hover {
    text-decoration: underline;
    color: #555;
    background-color: transparent;
}

/*! open */

.drawer-dropdown.open > .drawer-dropdown-menu {
    display: block;
}

/*! drawer-caret */

.drawer-dropdown .drawer-caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 4px;
    -webkit-transition: opacity .2s ease, -webkit-transform .2s ease;
    transition: opacity .2s ease, -webkit-transform .2s ease;
    transition: transform .2s ease, opacity .2s ease;
    transition: transform .2s ease, opacity .2s ease, -webkit-transform .2s ease;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

/*! open */

.drawer-dropdown.open .drawer-caret {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

/*!------------------------------------*\
Container
\*!------------------------------------*/

.drawer-container {
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 64em) {
    .drawer-container {
        max-width: 60rem;
    }
}

@media (min-width: 75em) {
    .drawer-container {
        max-width: 70rem;
    }
}