@charset "UTF-8";

/******************************************************
    * CSS変数（カラーパレット）
******************************************************/

:root {
  /* テキスト・背景 */
  --color-text:           #666666;  /* 本文テキスト */
  --color-text-dark-mode: #F1F1F1;  /* ダークモードの本文テキスト */
  --color-white:          #FFFFFF;
  --color-bg-muted:       #F1F1F1;  /* パンくず・引用・QR背景など */
  --color-bg-dark:        #666666;  /* ヘッダー・フッター背景 */

  /* ボーダー・見出し */
  --color-border:         #838383;  /* 見出し線・h3ボーダー */
  --color-border-light:   #BEBEBE;  /* h4・h5ボーダー */

  /* アクセントカラー */
  --color-primary:        #2C9BC7;  /* リンクhover・ボタンon */
  --color-primary-light:  #63BADD;  /* ボタンonhover */
  --color-accent:         #F58E7E;  /* ボタンoff・back-next */
  --color-accent-light:   #F9B7AD;  /* アイコン・年号色 */

  /* ダークモード用サーフェス */
  --color-dark-bg:        #333333;
  --color-dark-surface:   #555555;
  --color-dark-surface2:  #666666;

  /* テーブル */
  --color-table-border:   #B9B9B9;

  /* リンク */
  --color-link:           #0044CC;
  --color-link-hover:     #39f;
  --color-link-dark-mode: #66CCFF;
}


/******************************************************
    * 基本設定
******************************************************/

/****** フルードイメージの設定（画像だけではなく動画などのメディアも含める） ******/

header img, /* headerを指定しないとa8の画像が縮小する */
p img, /* pを指定しないとa8.netの画像が縮小する */
.gazou img,
video,
object {
    max-width: 100%;
    height: auto; /* これを入れないと縦横比が崩れる */
    width: 100%\9; /* IE8のみ適用 */
    vertical-align:middle; /* ぴったり行内に収める */
}

header img {
    width: auto; /* これを入れないと縦横比が崩れる */
    max-height: 4em; /* 64px */
    margin: 1.125em auto; /* 72px 上下の余白 */
}



/****** タイポグラフィの設定（Vertical Rhythm） ******/

html {
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', /*"游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic,*/ "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; /* フォントの種類 */
    line-height: 1.5; /* 行の高さ（日本語では、フォントサイズの1.5倍がもっとも読みやすい行の高さ） */
    color: var(--color-text); /* 文字色 */
/*  background: url(../img/960_grid_12_col.png) repeat-y top center;*/ /* 960 grid system */
}

#contents {
    letter-spacing: 0.1em; /* 文字と文字の距離 */
    font-size: 100%; /* 16px レスポンシブタイプセッティングの指定 */
}

#pankuzu,
nav,
footer {
    font-size: 87.5%; /* 10px レスポンシブタイプセッティングの指定 */
}

h1 {
    font-size: 1.5000em; /* 24px */
    line-height: 1.3333em; /* 48px */
    margin-bottom: 0.6667em; /* 24px */
    clear:both; /* これが無いとfooterの右に回りこむことがある。 */
} 

h1 span.subtitle { /* h1タグ中のサブタイトルの設定 */
    font-size: 0.5em; /* 18px（1emの基準サイズはh1タグの36px） */
}

h1 {
    clear:both; /* これが無いとheaderの右に回りこむことがある。 */
}

h2 {
    font-size: 1.5000em; /* 24px */
    line-height: 2.0000em; /* 48px */
    margin-top: 2.0000em; /* 48px 20150407追記 */
    margin-bottom: 1.0000em; /* 24px */
}

h2 span.subtitle { /* h2タグ中のサブタイトルの設定 */
    font-size: 0.6666em; /* 16px（1emの基準サイズはh2タグの24px） */
}

h2.kanren {
    clear:both; /* これが無いとback-nextボタンの右に回りこむことがある。 */
}

h3 {
    font-size: 1.3125em; /* 21px */
    line-height: 1.1429; /* 24px */
    margin-bottom: 1.1429em; /* 24px */
}

h3 + p,
h3 + ul,
h3 + h4 {
    margin-top: -0.5em; /* 8px 見出し直後の段落の間のマージンを縮小 */
}

h3 span.subtitle { /* h3タグ中のサブタイトルの設定 */
    font-size: 0.8571em; /* 18px（1emの基準サイズはh3タグの21px） */
}

h4 {
    font-size: 1.1250em; /* 18px */
    line-height: 1.3333; /* 24px */
    margin-bottom: 1.3333em; /* 24px */
}

h4 + p,
h4 + ul,
h4 + table {
    margin-top: -1em; /* 8px 見出し直後の段落の間のマージンを縮小 */
}

h5 {
    font-size: 1.0000em; /* 16px */
    line-height: 1.5000; /* 24px */
    margin-bottom: 1.5000em; /* 24px */
}

p {
    font-size: 1em; /* 16px */
    line-height: 2; /* 行の高さ（日本語では、フォントサイズの1.5倍がもっとも読みやすい行の高さ） */
    margin-bottom: 1.5em; /* 24px */
}

.note { /* 注釈で1行目のみ字下げする設定 */
    font-size: 0.8750em; /* 14px */
    text-indent: -1em; /* 全体を右に1em移動 */
    padding-left: 1em; /* 1文字目を左に1em字下げ */
}

.note-c { /* 注釈で1行目のみ字下げする設定 */
    font-size: 0.8750em; /* 14px */
    text-indent: -1em; /* 全体を右に1em移動 */
    padding-left: 1em; /* 1文字目を左に1em字下げ */
    text-align: center; /* テキストを中央揃え */
}


.koukoku{ /* スポンサードリンクの設定 */
    font-size: 0.8750em; /* 14px */
    text-align: center;
    margin-bottom: 0px;
}

#contents ul { /* #contentsを付けないとロゴ画像の下に空白ができる */
    margin-bottom: 1.5em; /* 24px */
}

li {
    font-size: 1em; /* 16px */
    line-height: 1.5; /* 行の高さ（日本語では、フォントサイズの1.5倍がもっとも読みやすい行の高さ） */
}

li span.subtitle { /* リスト中のサブタイトルの設定 */
    font-size: 0.8750em; /* 14px */
}

#pankuzu {
    font-size: 0.750em; /* 12px */
}

nav {
    font-size: 0.625em; /* 10px 画面を縮小した時に2行になるのを防ぐため文字を縮小*/
}

footer {
    font-size: 0.750em; /* 12px */
}



/****** 禁則処理の追加 ******/

p,
li,
dt,
dd,
th,
td,
pre {
    line-break: strict;
    word-break: break-strict;
}


/****** resset.cssで無効化された項目を復活 ******/

strong {
    font-weight: bold; /* 太字にする */
}

b {
    font-weight: bold; /* 太字にする */
}

i {
    font-style: italic; /* 斜体にする */
}

sup {
    vertical-align: super; /* 上付き文字にする */
    font-size: 0.5em;
}

sub {
    vertical-align: sub; /* 下付き文字にする */
    font-size: 0.5em;
}


/****** 文字を選択した状態（反転状態）の際の背景色・文字色 ******/

::selection {
    background: #F8E6AF; /* 背景色 */
    color: var(--color-text); /* 文字色 */
}




/******************************************************
    * 見出しデザインの設定
******************************************************/

h1 {
    box-shadow: 0px 0px 0px 0px var(--color-border) inset, 0px -2px 0px 0px var(--color-border) inset; /* 下線の太さと色、insetで下線を内側に付与 */
}


h2 {
    box-shadow: 0px 1px 0px 0px var(--color-border) inset, 0px -1px 0px 0px var(--color-border) inset; /* 線の太さと色、insetで線を内側に付与 */
/*  background: #F1F1F1;*/ /* 背景色 */
/*  border-radius: 5px; */
    padding-left: 0.4166em; /* 10px（1emの基準サイズはh2タグの24px） */
}

h2.kanren {
    box-shadow: 0px 1px 0px 0px var(--color-border) inset, 0px -1px 0px 0px var(--color-border) inset; /* 線の太さと色、insetで線を内側に付与 */
}

aside h2 {
    box-shadow: 0px 0px 0px 0px var(--color-border) inset, 0px 0px 0px 0px var(--color-border) inset; /* 線の太さと色、insetで線を内側に付与 */
}

h3 {
    border-style: solid;
    border-left-width: 0.4762em; /* 10px（1emの基準サイズはh3タグの21px） */
    border-left-color: var(--color-border);
    padding-left: 0.4762em; /* 10px（1emの基準サイズはh3タグの21px） */
}

h4{
    border-style: solid;
    border-left-width: 0.2777em;/* 5px（1emの基準サイズはh4タグの18px） */
    border-left-color: var(--color-border-light);
    padding-left: 0.5555em; /* 10px（1emの基準サイズはh4タグの18px） */
}

h5{
    border-style: solid;
    border-left-width: 0.15625em;/* 2.5px（1emの基準サイズはh5タグの16px） */
    border-left-color: var(--color-border-light);
    padding-left: 0.625em; /* 10px（1emの基準サイズはh5タグの16px） */
}



/******************************************************
    * リンクの設定
******************************************************/

/****** リンクされた文字の設定 ******/

a{
    color: var(--color-link); /* Bingが採用したテキストリンク色(ユーザーがもっとも関心を持つ色) */
    text-decoration: none; /* リンクの下線：非表示 */


/* 文字色をふんわり変える設定 */

    transition: 0.2s; /* (ベンダープレフィックス無し)アニメーション設定 */
}


/****** カーソルが乗っている時の設定 ******/

a:hover {
    color: var(--color-link-hover);
    text-decoration: underline; /* リンクの下線を表示 */
}


/****** ページ内リンクにリンクの設定を無効化させるための設定 ******/
a[name] {
    color: #404040;
    text-decoration: none; /* リンクの下線：非表示 */
}
a[name]:hover {
    color: #404040;
    text-decoration: none; /* リンクの下線：非表示 */
}


/****** ページのトップに戻るの設定 ******/

.pagetop{
    font-size: 0.8750em; /* 14px ページのトップに戻るのフォントの大きさ */
    line-height: 1.7143; /* 24px */
    margin-bottom: 1.7143em; /* 24px */
    text-align: right;
    align: right;
}

.pagetop a{
    text-decoration: none; /* リンクの下線：非表示 */
    padding: 0.8571em 0; /* スマホでタップしやすくするため上下に高さ12pxを伸ばした。 */
    color: var(--color-border); /* 色 */
}

.pagetop a:hover {
    color: var(--color-link-hover); /* カーソルが乗っている時のリンクの色 */
}



/****** 続きを読むの設定 ******/

.more {
    font-size: 0.8750em; /* 14px ページのトップに戻るのフォントの大きさ */
    line-height: 1.7143; /* 24px */
    margin-bottom: 1.7143em; /* 24px */
    text-align: right;
    align: right;
}

.more a{
    text-decoration: none; /* リンクの下線：非表示 */
    padding: 0.8571em 0; /* スマホでタップしやすくするため上下に高さ12pxを伸ばした。 */
    color: var(--color-border); /* 色 */
}

.more a:hover {
    color: var(--color-link-hover); /* カーソルが乗っている時のリンクの色 */
}

/******************************************************
    * ヘッダーの設定
******************************************************/

header {
    text-align: center; /* テキストや画像を中央揃え */
    background: #666666; /* 背景色 */
}



/******************************************************
    * グローバルナビゲーションの設定
******************************************************/

nav {
    text-align: center; /* グローバルナビゲーションのテキストを中央揃え */
}

nav ul li {
    width: 20%; /* ボタンが5つあるので画面幅(100%)の5分の1(20%)に設定 */
    float: left; /* ボタンを横並びにするための設定 */
    margin-bottom: 1.5em; /* グローバルナビゲーションの下に1行分の余白を確保 */
}

nav ul li a {
    display : block;
    padding : 0.75em 0; /* スマホでタップしやすくするため上下に高さを12px伸ばした。 */
}


/* グローバルナビゲーションoffの設定 */

.button-off {
    color: #fff; /* リンクの色 */
    background: var(--color-accent); /* 背景色 */
    box-shadow: inset 0 0 0 1px var(--color-accent); /* 枠線の太さと色、insetで枠線を内側に付与 */
}

nav ul li a.button-off:hover {
    text-decoration: none; /* リンクの下線：非表示 */
    color: #F7F7F7; /* リンクの色 */
    background: var(--color-primary); /* 背景色 */
    box-shadow: inset 0 0 0 1px var(--color-primary); /* 枠線の太さと色、insetで枠線を内側に付与 */
}


/* グローバルナビゲーションonの設定 */

.button-on {
    color: #F7F7F7; /* リンクの色 */
    background: var(--color-primary); /* 背景色 */
    box-shadow: inset 0 0 0 1px var(--color-primary); /* 枠線の太さと色、insetで枠線を内側に付与 */
}

nav ul li a.button-on:hover {
    text-decoration: none; /* リンクの下線：非表示 */
    color: #FFFFFF; /* リンクの色 */
    background: var(--color-primary-light); /* 背景色 */
    box-shadow: inset 0 0 0 1px var(--color-primary-light); /* 枠線の太さと色、insetで枠線を内側に付与 */
}


nav ul li a::before,
.button::after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
}

nav ul li a,
nav ul li a::before,
nav ul li a::after {
    box-sizing: border-box;
    transition: all .3s; /* 色が変わる速度(ベンダープレフィックス無し設定) */
}



/******************************************************
    * パンくずリストの設定
******************************************************/

#pankuzu{
    text-align: left; /* テキストや画像を左揃え */
    padding: 0.75em 0; /* パンくずリストの上下に余白を12px追加 */
    background: #F1F1F1; /* 背景色 */
}


/****** 画面の左右に余白を取りスクロールバーと重ならないようにするための設定 ******/

#pankuzu ul{
    width: 90%; 
    margin: 0 auto;
}


#pankuzu li{
    display: inline; /* パンくずリストを横並びにするための設定（float: leftでも可） */
}


#pankuzu li a{
    text-decoration: none; /* リンクの下線：非表示 */
}


/****** パンくずリストの>の設定 ******/

#pankuzu li + li:before {
    margin: 0 0.3125em; /* 0 5px */
    content: ">";
}



/******************************************************
    * メインコンテンツの設定
******************************************************/

/****** 画面の左右に余白を取りスクロールバーと重ならないようにするための設定 ******/

#contents {
    width: 90%; 
    margin: 0 auto;
}



/******************************************************
    * 画像の設定
******************************************************/

/****** 1枚の画像の設定 ******/

#contents p img{
    display: block; /* 画像を中央揃え（marginより先に書くこと） */
    margin-left: auto; /* 画像を中央揃え */
    margin-right: auto; /* 画像を中央揃え */
}


/****** 複数の画像の設定 ******/

.gazou {
    text-align: center; /* 画像を中央揃え */
}

.gazou ul {
    width: 100%; 
    margin: 0 auto;
}

.gazou ul li {
    display: inline; /* 画像を横並びにするための設定（float: leftでも可） */
}

.gazou ul li img {
    padding: 0em 0.75em; /* 12px 画像間の距離 */
}

.top ul li img {
    padding: 0em 0em; /* TOPページのボタン画像間の距離 */
}

/******************************************************
    * リストの設定（ポイント）
******************************************************/

.point li {
    margin-bottom: 0.75em; /* 12px */
}

.point li a {
    padding: 0.75em 0px; /* リストの上下に余白を12px追加、リストの左からの距離 */
}



/******************************************************
    * リストの設定（下へ移動する矢印）
******************************************************/

.down li a {
    line-height: 2.25; /* 48px */
    padding: 0.75em 0px; /* リストの上下に余白を12px追加、リストの左からの距離 */
}



/******************************************************
    * リストの設定（動く矢印）（使用停止中）
******************************************************/

.rist-menu li a {
    position: relative;
    z-index: 10;
    margin: 0;
    line-height: 2.25em; /* 48px */
    padding: 0.75em 0em 0.75em 2.5em; /* リストの上下に余白を12px追加、リストの左からの距離40px */
}


/****** :beforeで三角形を作成 ******/

#list li a:before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 0.9375em; /* 15px */
    width: 0;
    height: 0;
    margin-top: -0.46875em; /* -7.5px */
    border: 0.46875em solid transparent; /* 7.5px */
    border-left: 0.46875em solid var(--color-accent-light); /* 7.5px */
}


/****** :afterで四角形を作成 ******/

#list li a:after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 0.625em; /* 10px 矢印の四角部分の左からの距離 */
    width: 0.5em; /* 8px 矢印の四角部分の幅 */
    height: 0.375em; /* 6px 矢印の四角部分の高さ */
    margin-top: -0.1875em; /* -3px */
    background: var(--color-accent-light);
}


/****** マウスを乗せたときは三角形だけ右へ移動 ******/

#list li a:hover:before {
    left: 1.125em; /* 18px */

/* 三角形の移動速度 */

    transition: 0.2s; /* (ベンダープレフィックス無し)アニメーション設定 */
}




/******************************************************
    * 引用文の設定
******************************************************/

blockquote{
    background-color: var(--color-bg-muted);
    padding: 1em 1em 1em 3em;
    position: relative;
    margin-bottom: 1.5em; /* 引用文の下に1行分の余白（24px）を確保 */
}

blockquote p{
    margin-bottom: 0.75em; /* これを入れないと文章の下に不自然な空白ができる */
}

/****** 引用文の前につく「"」の設定 ******/

blockquote:before{
    content: "\201C";
    font-size: 600%;
    line-height: 1em;
    font-family: "ＭＳ Ｐゴシック",sans-serif; /* "のフォントを指定 */
    color: #999;
    position: absolute;
    left: 0;
    top: 0;
}


/****** 引用文元の表示の設定 ******/

blockquote:after {
    content: attr(title) "\a" attr(cite); /* title + 改行 + cite */
    white-space: pre-wrap; /* 以下長いURL対策 */
    word-wrap: break-word;
}



/******************************************************
    * SNSボタンの設定
******************************************************/

ul.snsb {
    overflow: hidden;
}

.snsb li {
    float: left;
    margin-right: 1em;/* 16px */
    line-height: 1em;/* 各SNSボタンの高さを合わせるのに必要な設定 */
}




/******************************************************
    * Adの設定
******************************************************/

.ad {
    text-align: center; /* ボタンのテキストを中央揃え */
    margin-bottom: 1.5em; /* ボタンの下に1行分の余白（24px）を確保 */
}




/******************************************************
    * アフィリエイト（2016/12/23追記）
******************************************************/

.af-box{
    border-radius: 5px;
    border: 1px solid #d1d1d1;
    padding: 10px;
    margin: 0 8px;
}
.af-imgbox{
    width: 170px;
    margin-right: 10px;
    float: left;
    text-align: center;
}
.af-textbox{
    width: 100%;
}
.af-title{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}
.af-desc{
    font-size:14px;
    margin-bottom: 10px;
}
.af-kobox{
    width: 120px;
    margin: 0 5px 0 0;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    float: left;
    text-align: center;
}
.af-kobox a.aflink{
    display: block;
    padding: 5px 0 5px 0;
    text-decoration: none;
}


/****** 2016/12/23追記 ここから ******/
.aflink{
    display: block;
    padding: 5px 0 5px 0;
}

.aflink a{
    text-decoration: none;
}
/****** 2016/12/23追記 ここまで ******/


.af-amazon{
    border: 1px solid #F3A847;
}
.af-amazon a{
    color: #F3A847;
}
.af-rakuten{
    border: 1px solid #BF0000;
    color: #BF0000;
}
.af-rakuten a{
    color: #BF0000;
}
.af-blue{
    border: 1px solid #1995DF;
    color: #1995DF;
}
.af-blue a{
    color: #1995DF;
}
.clear{clear:both;}
@media screen and (max-width: 399px) {

    .af-imgbox{
        margin: 0 auto;
        text-align: center;
        float: none;
    }

}







/******************************************************
    * 「前のページヘ」「次のページへ」ボタンの設定
******************************************************/

.back-next {
    text-align: center; /* ボタンのテキストを中央揃え */
}

ul.back-next li a {
    display: block;
    padding: 0.75em 0; /* スマホでタップしやすくするため上下に高さ12pxを伸ばした。 */
    color: #fff; /* リンクの色 */
    background: var(--color-accent); /* 背景色 */
    box-shadow: inset 0 0 0 0.1875em #FFFFFF; /* 枠線の太さ3pxと色、insetで枠線を内側に付与 */
}

ul.back-next li a:hover {
    text-decoration: none; /* リンクの下線：非表示 */
    color: #FFFFFF; /* リンクの色 */
    background: var(--color-primary); /* 背景色 */
    box-shadow: inset 0 0 0 0.1875em #FFFFFF; /* 枠線の太さ3pxと色、insetで枠線を内側に付与 */
}

ul.back-next li a::before,
.button::after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
}

ul.back-next li a,
ul.back-next li a::before,
ul.back-next li a::after {
    box-sizing: border-box;
    transition: all .3s; /* 色が変わる速度(ベンダープレフィックス無し設定) */
}



/******************************************************
    * お気に入りボタンの設定
******************************************************/

#favorite{
    text-align: center; /* ボタンの位置：中央揃え */
}

.button-f {
    display: inline-block;
    position: relative;
    width: 100%; /* ボタンの幅900px以下の時、横幅の長さに合わせる */ /* width: 18.75em; */ /* ボタンの幅300px */ 
/*  height: 48px;*/ /* ボタンの高さ */
/*  border-radius: 4px;*/ /* 角丸の半径(停止中) */
    background-color: #3BC492; /* ボタンの色 */
/*  box-shadow: 0 3px 0 #206B50;*/ /* ボタンの側面の高さと色(停止中) */

    font-size: 1em; /* 16px */
    line-height: 2.25em; /* 36px 行の高さ */
    text-align: center; /* テキストの位置：中央揃え */
    color: #fff; /* テキストの色 */
/*  text-shadow: 0 1px 1px rgba(0, 0, 0, .4);*/ /* テキストの影(停止中) */
    text-decoration: none; /* リンクの下線：非表示 */
    outline: none;

    transition: none; /* (ベンダープレフィックス無し)アニメーション設定 */

    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.25em; /* 4px */
}

.button-f::before,
.button-f::after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
}

.button-f,
.button-f::before,
.button-f::after {
    box-sizing: border-box; /* (ベンダープレフィックス無し)ボックスサイズにパディングとボーダーを幅と高さに含める */
    transition: all .3s; /* (ベンダープレフィックス無し)アニメーション設定：対象、色が変化する時間 */
}

.button-f:hover {
    background-color: #EFAC4E; /* カーソルが乗っている時の色 */
/*  box-shadow: 0 3px 0 #B2811E;*/ /* カーソルが乗っている時のボタンの側面の高さと色(停止中) */

    color: #fff; /* テキストの色(テキストリンクのcssの設定を回避するための項目) */
    text-decoration: none; /* リンクの下線：非表示(テキストリンクのcssの設定を回避するための項目) */
}

.button-f:active {
    top: 0.1875em; /* 3px */
    box-shadow: none; /* クリックされた時のボタンの側面の高さと色 */
}



/******************************************************
    * Twitterフォローボタンの設定（2018/10/09追記）
******************************************************/

#tw{
    text-align: center; /* ボタンの位置：中央揃え */
}

.tw-follow-btn {
    display: inline-block;
    position: relative;
    width: 100%; /* ボタンの幅900px以下の時、横幅の長さに合わせる */ /* width: 18.75em; */ /* ボタンの幅300px */ 
/*  height: 48px;*/ /* ボタンの高さ */
/*  border-radius: 4px;*/ /* 角丸の半径(停止中) */
    background-color: #000000; /* ボタンの色 */
/*  box-shadow: 0 3px 0 #206B50;*/ /* ボタンの側面の高さと色(停止中) */

    font-size: 1em; /* 16px */
    line-height: 2.25em; /* 36px 行の高さ */
    text-align: center; /* テキストの位置：中央揃え */
    color: #fff; /* テキストの色 */
/*  text-shadow: 0 1px 1px rgba(0, 0, 0, .4);*/ /* テキストの影(停止中) */
    text-decoration: none; /* リンクの下線：非表示 */
    outline: none;

    transition: none; /* (ベンダープレフィックス無し)アニメーション設定 */

    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.25em; /* 4px */
}

.tw-follow-btn::before,
.tw-follow-btn::after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
}

.tw-follow-btn,
.tw-follow-btn::before,
.tw-follow-btn::after {
    box-sizing: border-box; /* (ベンダープレフィックス無し)ボックスサイズにパディングとボーダーを幅と高さに含める */
    transition: all .3s; /* (ベンダープレフィックス無し)アニメーション設定：対象、色が変化する時間 */
}

.tw-follow-btn:hover {
    background-color: #1a1a1a; /* カーソルが乗っている時の色 */
/*  box-shadow: 0 3px 0 #B2811E;*/ /* カーソルが乗っている時のボタンの側面の高さと色(停止中) */

    color: #fff; /* テキストの色(テキストリンクのcssの設定を回避するための項目) */
    text-decoration: none; /* リンクの下線：非表示(テキストリンクのcssの設定を回避するための項目) */
}

.tw-follow-btn:active {
    top: 0.1875em; /* 3px */
    box-shadow: none; /* クリックされた時のボタンの側面の高さと色 */
}




/******************************************************
    * サイト内検索の設定
******************************************************/


/****** ヘッダー内のサイト内検索の設定 ******/

#search-box-h {
    margin:auto; /* ボタンの位置：中央揃え */
    width: 90%; 
    margin-bottom: 1.5em; /* 検索窓の下に1行分の余白（24px）を確保 */
}


/****** サイドバー内のサイト内検索の設定 ******/

#search-box{
    margin-bottom: 1.5em; /* 検索窓の下に1行分の余白（24px）を確保 */
}




/******************************************************
    * QRコードの設定（2018/10/21追記）
******************************************************/

#qr{
    background: var(--color-bg-muted); /* 背景色 */
    margin-bottom: 1.5em; /* QRコードの下に1行分の余白（24px）を確保 */
    text-align: center; /* 画像の位置：中央揃え */
}

#qr h2 {
    font-size: 1.0000em; /* 16px */
    text-align: center;
    margin-bottom: 0px;
}

#qr p {
    display: inline-block;
    position: relative;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5em; /* 24px */
}




/******************************************************
    * フッターの設定
******************************************************/

footer {
    padding: 1.5em 0; /* フッターの上下に余白を24px追加 */
    color: white; /* フッターの文字色 */
    background: #666; /* 背景色 */
    text-align: center; /* テキストは中央揃え */
}

footer a {
    color: #fff; /* リンクの色 */
    padding: 0.8571em 0; /* スマホでタップしやすくするため上下に高さ12pxを伸ばした。 */
}

footer a:hover {
    text-decoration: none; /* リンクの下線：非表示 */
    color: #fff;
    text-shadow: 0em 0em 0.5em rgba(255, 255, 255, 0.7), 0em 0em 0.5em rgba(255, 255, 255, 0.7); /* グロー効果 */
}


/****** フッター内のリストの設定 ******/

footer ul{
    width: 90%;  /* 画面の左右に余白を取りスクロールバーと重ならないようにするための設定 */
    margin: 0 auto;  /* 画面の左右に余白を取りスクロールバーと重ならないようにするための設定 */
    margin-bottom: 1.5em; /* リストの下に1行分の余白（24px）を確保 */
}

footer li{
    display: inline; /* リストを横並びにするための設定（float: leftでも可） */
}

/****** フッターのリストの|の設定 ******/

footer li + li:before {
    margin: 0 0.3125em; /* 5px */
    content: "|";
    color: #fff; /* 色 */
}




/******************************************************
    * タイムラインの設定
******************************************************/

.cp_timeline01 {
    position: relative;
    width: 100%;
    margin: 3em auto;
    padding: 1em 0;
    list-style-type: none;
}

.cp_timeline01:before {
    position: absolute;
    left: 50%;
    top: 0;
    content: '';
    display: block;
    width: 6px;
    height: 100%;
    margin-left: -3px;
    background: var(--color-bg-muted); /* タイムラインのボーダー色 */
    z-index: 5;
}

.cp_timeline01 li {
    padding: 1em 0;
}

.cp_timeline01 li:after {
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.cp_timeline01 li:nth-child(odd) .timeline_item {
    position: relative;
    width: calc(50% - 29px);
    float: left;
    text-align: right;
}

.cp_timeline01 li:nth-child(even) .timeline_item {
    position: relative;
    width: calc(50% - 29px);
    float: right;
}

.cp_timeline01 li .timeline_item .flag_cont {
    position: relative;
    display: inline-block;
    text-align: center;
}

.cp_timeline01 li .timeline_item .flag {
    position: relative;
    display: inline;
    background: #666;
    color: #ffffff; /* 吹き出しの文字色 */
    padding: 6px 10px;
    border-radius: 5px; /* 吹き出しの角丸 */
    text-align: left;
}

.cp_timeline01 li:nth-child(odd) .timeline_item .flag_cont:before,
.cp_timeline01 li:nth-child(even) .timeline_item .flag_cont:before {
    position: absolute;
    top: 10px;
    right: -41px;
    content: ' ';
    display: block;
    width: 12px;
    height: 12px;
    margin-top: -10px;
    background: var(--color-bg-muted);
    border-radius: 12px;
    border: 6px solid #666;
    z-index: 10;
}

.cp_timeline01 li:nth-child(even) .timeline_item .flag_cont:before {
    left: -41px;
}

.cp_timeline01 li:nth-child(odd) .timeline_item .flag_cont:after,
.cp_timeline01 li:nth-child(even) .timeline_item .flag_cont:after {
    position: absolute;
    top: 12px;
    right: -39px;
    content: ' ';
    display: block;
    width: 16px;
    height: 16px;
    margin-top: -10px;
    border-radius: 10px;
    border: 2px solid var(--color-bg-muted);
    z-index: 10;
}

.cp_timeline01 li:nth-child(even) .timeline_item .flag_cont:after {
    left: -39px;
}

.cp_timeline01 li:nth-child(odd) .timeline_item .flag:after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    height: 0;
    width: 0;
    margin-top: -6px;
    border: solid transparent;
    border-left-color: #666; /* 左の吹き出しの三角の色 */
    border-width: 6px;
}

.cp_timeline01 li:nth-child(even) .timeline_item .flag:after {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    height: 0;
    width: 0;
    margin-top: -6px;
    border: solid transparent;
    border-right-color: #666; /* 右の吹き出しの三角の色 */
    border-width: 6px;
}

.cp_timeline01 li .timeline_item .time {
    display: block;
    margin-top: 1em;
    padding: 4px 6px;
    font-size: 0.6em;
    line-height: 1em;
    color: var(--color-accent-light); /* 年号の文字色 */
    font-weight: bold;
    text-align: right;
}

.cp_timeline01 li:nth-child(even) .timeline_item .time {
    text-align: left;
}

.cp_timeline01 li .timeline_item .desc {
    margin: 1em 0.75em 0 0;
    font-size: 0.7em;
    line-height: 1.5em;
    margin: 1em 1em 0 1em;
    padding: 1em;
    background: var(--color-bg-muted);
    border-radius: 6px;
}


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

.cp_timeline01 {
    width: 100%;
    padding: 4em 0 1em 0;
}
    
.cp_timeline01 li {
    padding: 2em 0;
}
    
.cp_timeline01 li:nth-child(odd) .timeline_item,
.cp_timeline01 li:nth-child(even) .timeline_item {
    float: none;
    width: 100%;
    text-align: center;
}

.cp_timeline01 li .timeline_item .flag_cont {
    text-align: center;
}
    
.cp_timeline01 li .timeline_item .flag {
    z-index: 15;
}

.cp_timeline01 li:nth-child(odd) .timeline_item .flag_cont:before,
.cp_timeline01 li:nth-child(even) .timeline_item .flag_cont:before {
    top: -30px;
    right: calc(50% - 12px);
    left: calc(50% - 12px);
}

.cp_timeline01 li:nth-child(odd) .timeline_item .flag_cont:after,
.cp_timeline01 li:nth-child(even) .timeline_item .flag_cont:after {
    top: -28px;
    right: calc(50% - 10px);
    left: calc(50% - 10px);
}
    
.cp_timeline01 li:nth-child(odd) .timeline_item .flag:after,
.cp_timeline01 li:nth-child(even) .timeline_item .flag:after {
    content: '';
    position: absolute;
    left: 50%;
    top: -6px;
    height: 0;
    width: 0;
    margin-left: -6px;
    border: solid transparent;
    border-bottom-color: #666;
    border-width: 6px;
    pointer-events: none;
}

.cp_timeline01 li .flag_cont {
    display: block;
    position: relative;
    margin: 4px 0 0 0;
    z-index: 14;
}
    
.cp_timeline01 li:nth-child(odd) .timeline_item .time,
.cp_timeline01 li:nth-child(even) .timeline_item .time {
    float: none;
    text-align: center;
    background: #ffffff; /* 年号の背景色 */
}
    
.cp_timeline01 li .timeline_item .desc {
    position: relative;
    z-index: 15;
}

}




/******************************************************
    * Font Awesomeの設定
******************************************************/

/****** 「検索ボタン」の設定 ******/

/* 修正: .fas fa-search:before → .fa-search:before (Font Awesome 4系の正しい記法) */
.fa-search:before {
    content: '\f002'; /* fa-search */
    font-family: 'FontAwesome';
    margin-right: 0.3125em; /* 5px アイコンと要素の空き調整 */
}



/****** 「参考書」の設定 ******/

.book:before {
    content: '\f02d'; /* fa-book */
    font-family: 'FontAwesome';
    margin-right: 0.3125em; /* 5px アイコンと要素の空き調整 */
}


/****** 「どんな資格？」の設定 ******/

.faq:before {
    content: '\f059'; /* fa-question-circle */
    font-family: 'FontAwesome';
    margin-right: 0.3125em; /* 5px アイコンと要素の空き調整 */
}


/****** 「法令」の設定 ******/

.hourei:before {
    content: '\f0e3'; /* fa-legal */
    font-family: 'FontAwesome';
    margin-right: 0.3125em; /* 5px アイコンと要素の空き調整 */
}


/****** 「物理＆化学」の設定 ******/

.buturi-kagaku:before {
    content: '\f0c3'; /* fa-flask */
    font-family: 'FontAwesome';
    margin-right: 0.3125em; /* 5px アイコンと要素の空き調整 */
}


/****** 「危険物」の設定 ******/

.kikenbutu:before {
    content: '\f06d'; /* fa-fire */
    font-family: 'FontAwesome';
    margin-right: 0.3125em; /* 5px アイコンと要素の空き調整 */
}


/****** 「下へ移動する矢印」の設定 ******/

ul.down li:before {
    content: '\f13a'; /* fa-chevron-circle-down */
    font-family: 'FontAwesome';
    margin-right: 0.3125em; /* 5px アイコンと要素の空き調整 */
    color: var(--color-accent-light); /* アイコンの色 */
}

.down li a {
    line-height: 2.25; /* 48px */
    padding: 12px 0px; /* リストの上下に余白を追加、リストの左からの距離 */
}


/****** リスト矢印の設定 ******/

.arrow li:before {
    content: '\f061'; /* fa-arrow-right */
    font-family: 'FontAwesome';
    margin-right: 0.3125em; /* 5px アイコンと要素の空き調整 */
    color: var(--color-accent-light); /* アイコンの色 */
}

.arrow li a {
    line-height: 2.25; /* 48px */
    padding: 0.75em 0em; /* 12px リストの上下に余白を追加、リストの左からの距離 */
}


/****** 「ポイント」の設定 ******/

ul.point li:before {
    content: '\f04d'; /* fa-stop */
    font-family: 'FontAwesome';
    margin-right: 0.3125em; /* 5px アイコンと要素の空き調整 */
    color: var(--color-accent-light); /* アイコンの色 */
}

.point li a {
    line-height: 2.25; /* 48px */
    padding: 0.75em 0em; /* 12px リストの上下に余白を追加、リストの左からの距離 */
}

.point { /* 1行目のみ字下げする設定 */
    text-indent: -1em; /* 全体を右に1em移動 */
    padding-left: 1em; /* 1文字目を左に1em字下げ */
}


/****** 「前のページヘ」ボタン設定 ******/

.back:before {
    content: '\f137'; /* fa-check-square-o */
    font-family: 'FontAwesome';
    margin-right: 0.3125em; /* 5px アイコンと要素の空き調整 */
}



/****** 「次のページヘ」ボタン設定 ******/

.next:after {
    content: '\f138'; /* fa-check-square-o */
    font-family: 'FontAwesome';
    margin-left: 0.3125em; /* 5px アイコンと要素の空き調整 */
}


/****** 関連記事の設定 ******/

h2.kanren:before {
    content: '\f0c1'; /*  fa-link */
    font-family: 'FontAwesome';
    margin-right: 0.3125em; /* 5px アイコンと要素の空き調整 */
}


/****** 関連記事のリスト矢印の設定 ******/

.arrow-k li:before {
    content: '\f061'; /* fa-arrow-right */
    font-family: 'FontAwesome';
    margin-right: 0.3125em; /* 5px アイコンと要素の空き調整 */
    color: #3BC492; /* アイコンの色 */
}

.arrow-k li a {
    line-height: 2.25; /* 48px */
    padding: 0.75em 0em; /* 12px リストの上下に余白を追加、リストの左からの距離 */
}


/****** 「ページのトップに戻る」の設定 ******/

.pagetop a:before {
    content: '\f077'; /* fa-chevron-up */
    font-family: 'FontAwesome';
    margin-right: 0.3125em; /* 5px アイコンと要素の空き調整 */
}


/****** 「続きを読む」の設定 ******/

.more a:after {
    content: '\f054'; /*  fa-chevron-right  */
    font-family: 'FontAwesome';
    margin-left: 0.3125em; /* 5px アイコンと要素の空き調整 */
}


/******  「X」ボタンの設定 （2026/03/25追記） ******/

.twitter:before {
    content: '𝕏';
    font-family: inherit;
    margin-right: 0.3125em; /* 5px アイコンと要素の空き調整 */
}


/****** 「お気に入りに追加」ボタンの設定 ******/

.bookmark:before {
    content: '\f005'; /* fa-star */
    font-family: 'FontAwesome';
    margin-right: 0.3125em; /* 5px アイコンと要素の空き調整 */
}


/******************************************************
    * メディアクエリ(480px以上の設定)
******************************************************/

@media screen and (min-width : 480px) {

html {
    font-size: 100%; /* 16px レスポンシブタイプセッティングの指定 */
}

#pankuzu {
    font-size: 1.1666em; /* 14px 画面サイズ480px以上からパンくずリストのフォントを大きくする*/
}

nav {
    font-size: 1em; /* 16px 画面サイズ480px以上からグローバルナビのフォントを大きくする*/
}

h1{
    font-size: 2.2500em; /* 36px */
}

}




/******************************************************
    * メディアクエリ(640px以下の設定)（2018/10/21追記）
******************************************************/

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

#qr{
    display:none; /* 横幅640px以下のときQRコード非表示 */
}

}




/******************************************************
    * メディアクエリ(640px以上の設定)
******************************************************/

@media screen and (min-width : 640px) {

html {
    font-size: 100%; /* 16px レスポンシブタイプセッティングの指定 */
}

#pankuzu {
    font-size: 0.8750em; /* 14px 画面サイズ640px以上からパンくずリストのフォントを大きくする*/
}

nav {
    font-size: 1em; /* 16px 画面サイズ640px以上からグローバルナビのフォントを大きくする*/
}

h1{
    font-size: 2.2500em; /* 36px */
}

}




/******************************************************
    * メディアクエリ(768px以上の設定)
******************************************************/

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

html {
    font-size: 100%; /* 16px レスポンシブタイプセッティングの指定 */
}

#pankuzu {
    font-size: 0.8750em; /* 14px 画面サイズ768px以上からパンくずリストのフォントを大きくする*/
}

nav {
    font-size: 1em; /* 16px 画面サイズ768px以上からグローバルナビのフォントを大きくする*/
}

h1{
    font-size: 2.2500em; /* 36px */
}



/****** 「前のページヘ」「次のページへ」ボタンは768pxから1行へ ******/

ul.back-next li {
    width: 50%; /* ボタンが2つあるので画面幅(100%)の2分の1(50%)に設定 */
    float: left;
    margin-bottom: 1.5em; /* ボタンの下に1行分の余白（24px）を確保 */
}

}




/******************************************************
    * メディアクエリ(900px以下の設定)（2018/10/17追記）
******************************************************/

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

#favorite{
    display:none; /* 横幅900px以下のときお気に入りボタン非表示 */
}

}




/******************************************************
    * メディアクエリ(900px以上の設定)
******************************************************/

@media screen and (min-width : 900px) {

html {
    font-size: 100%; /* 16px レスポンシブタイプセッティングの指定 */
}

#contents {
    overflow: hidden;
    width: 900px; /* #contentsの幅 */
}

#contents #main,
#contents #sub {
    float: left;
    margin: 0 10px; /* #mainと#subの間の幅 */
} 

#contents #main {
    width: 560px; /* #mainのボックスの幅 */
}

#contents #sub {
    width: 300px; /* #subのボックスの幅 */
}

#tw-main { /* 2018/10/14追記 */
    margin: 0 auto; /* これを設定しないとボタンが中央に配置されない */
}

#search-box-h { /* 2018/10/17追記 */
    display: none; /* 横幅900px以上のときヘッダーの検索ボタン非表示 */  
}

}




/******************************************************
    * メディアクエリ(960px以上の設定)
******************************************************/

@media screen and (min-width : 960px) {

html {
    font-size: 112.5%; /* 18px レスポンシブタイプセッティングの指定 */
}

#contents {
    overflow: hidden;
    width: 960px; /* #contentsの幅 */
}

#contents #main {
    width: 620px; /* #mainのボックスの幅 */
}

#contents #sub {
    width: 300px; /* #subのボックスの幅 */
}


/****** ヘッダーの最大幅の設定 ******/

header {
    width: 960px;
    margin: 0 auto;
}


/****** グローバルナビゲーションの最大幅の設定 ******/

nav ul {
    width: 960px;
    margin: 0 auto;
}


/****** パンくずリストの最大幅の設定 ******/

#pankuzu {
    width: 960px; 
    margin: 0 auto;
}


/****** お気に入りボタンの最大幅の設定 ******/

.button-f {
    width: 100%;
}


/****** Twitterボタンの最大幅の設定（2018/10/09追記） ******/

.tw-follow-btn {
    width: 100%;
}


/****** フッターの最大幅の設定 ******/

footer {
    width: 940px; /* 960-左右10px */
    margin: 0 auto;
}


}




/******************************************************
    * メディアクエリ(1024px以上の設定)
******************************************************/

@media screen and (min-width : 1024px) {

#contents {
    overflow: hidden;
    width: 1024px; /* #contentsの幅 */
}

#contents #main {
    width: 684px; /* #mainのボックスの幅 */
}


/****** ヘッダーの最大幅の設定 ******/

header {
    width: 1024px;
    margin: 0 auto;
}


/****** グローバルナビゲーションの最大幅の設定 ******/

nav ul {
    width : 1024px;
    margin : 0 auto
}

/****** パンくずリストの最大幅の設定 ******/

#pankuzu {
    width: 1024px; 
    margin: 0 auto;
}


/****** フッターの最大幅の設定 ******/

footer {
    width: 1004px; /* 1024-左右10px */
    margin: 0 auto;
}


}




/******************************************************
    * メディアクエリ(印刷時の設定)
******************************************************/

@media print {

/****** メインコンテンツ以外を非表示にする設定 ******/

header,
#sub,
footer,
.ad,
.snsb,
#tw-main,
.back-next,
.kanren-kiji,
.pagetop {
    display: none;
}


body {
    font-size: 12pt;
    line-height: 1.5;
    letter-spacing: 1px;
    color: #000000;
    background-color: #FFFFFF;
}


a:link,
a:visited {
    background: transparent; 
}


img {
    border: 0;
}


h1,
h2 {
    box-shadow: initial;
    padding-left: 0em;
}

h1 {
    border-style: solid;
    border-bottom: 2px solid #000000;
}

h2 {
    border-style: solid;
    border-top: 1px solid #000000;  
    border-bottom: 1px solid #000000;
}


}




/******************************************************
    * メディアクエリ(ダークモードの設定) ここから（2019/7/27追記）
******************************************************/

@media (prefers-color-scheme: dark) {

html {
    color: var(--color-text-dark-mode);
    background-color: var(--color-dark-bg);
}

/******************************************************
    * 見出しデザインの設定
******************************************************/

h1 {
    box-shadow: 0px 0px 0px 0px #F1F1F1 inset, 0px -2px 0px 0px #F1F1F1 inset;
}

h2 {
    box-shadow: 0px 1px 0px 0px #F1F1F1 inset, 0px -1px 0px 0px #F1F1F1 inset;
}

h2.kanren {
    box-shadow: 0px 1px 0px 0px #F1F1F1 inset, 0px -1px 0px 0px #F1F1F1 inset;
}

aside h2 {
    box-shadow: 0px 0px 0px 0px #F1F1F1 inset, 0px 0px 0px 0px #F1F1F1 inset;
}

h3 {
    border-left-color: #F1F1F1;
}

h4{
    border-left-color: #F1F1F1;
}

h5{
    border-left-color: #F1F1F1;
}



/******************************************************
    * リンクの設定
******************************************************/

a{
    color: var(--color-link-dark-mode);
    transition: 0.2s;
}

a:hover {
    color: var(--color-link-dark-mode);
    text-decoration: underline;
}

a[name] {
    color: #F1F1F1;
}
a[name]:hover {
    color: #F1F1F1;
}

.pagetop a{
    color: #F1F1F1;
}

.pagetop a:hover {
    color: var(--color-link-dark-mode);
}

.more a{
    color: #F1F1F1;
}

.more a:hover {
    color: var(--color-link-dark-mode);
}



/******************************************************
    * パンくずリストの設定
******************************************************/

#pankuzu{
    background: #555555;
}

    
/******************************************************
    * 画像の設定
******************************************************/

#contents p img{
    background: #FFFFFF;
}


/******************************************************
    * 引用文の設定
******************************************************/

blockquote{
    background-color: #555555;
}

blockquote:before{
    color: #F1F1F1;
}


/******************************************************
    * アフィリエイト
******************************************************/

.af-box{
    background-color: #666666;
}

.af-imgbox{
    background-color: #ffffff;
    border-radius: 5px;
    border: 1px solid #f1f1f1f1;
}

.af-amazon{
    border: 1px solid #F3A847;
    background-color: #F3A847;
}
.af-amazon a{
    color: #F1F1F1;
    text-decoration: none;
}
.af-rakuten{
    border: 1px solid #BF0000;
    background-color: #BF0000;
}
.af-rakuten a{
    color: #F1F1F1;
    text-decoration: none;
}
.af-blue{
    border: 1px solid #1995DF;
    background-color: #1995DF;
}
.af-blue a{
    color: #F1F1F1;
    text-decoration: none;
}



/******************************************************
    * 「前のページヘ」「次のページへ」ボタンの設定
******************************************************/

ul.back-next li a {
    box-shadow: inset 0 0 0 0.1875em var(--color-dark-bg);
}

ul.back-next li a:hover {
    box-shadow: inset 0 0 0 0.1875em var(--color-dark-bg);
}

    
/******************************************************
    * QRコードの設定
******************************************************/

#qr{
    background: #555555;
}



/******************************************************
    * フッターの設定
******************************************************/

footer {
    color: #F1F1F1;
    background: #555555;
}

footer a {
    color: #F1F1F1;
}

footer a:hover {
    color: #F1F1F1;
    text-shadow: 0em 0em 0.5em rgba(255, 255, 255, 0.7), 0em 0em 0.5em rgba(255, 255, 255, 0.7);
}

footer li + li:before {
    color: #F1F1F1;
}



/******************************************************
    * タイムラインの設定（ダークモード差分のみ）
******************************************************/

.cp_timeline01 li .timeline_item .flag {
    background: #555;
}

.cp_timeline01 li:nth-child(odd) .timeline_item .flag_cont:before,
.cp_timeline01 li:nth-child(even) .timeline_item .flag_cont:before {
    border: 6px solid var(--color-dark-bg);
}

.cp_timeline01 li:nth-child(odd) .timeline_item .flag:after {
    border-left-color: #555;
}

.cp_timeline01 li:nth-child(even) .timeline_item .flag:after {
    border-right-color: #555;
}

@media only screen and (max-width:640px) {
    .cp_timeline01 li:nth-child(odd) .timeline_item .flag:after,
    .cp_timeline01 li:nth-child(even) .timeline_item .flag:after {
        border-bottom-color: #555;
    }

    .cp_timeline01 li:nth-child(odd) .timeline_item .time,
    .cp_timeline01 li:nth-child(even) .timeline_item .time {
        background: #666;
    }
}


}


/******************************************************
    * メディアクエリ(ダークモードの設定) ここまで
******************************************************/