/*--------------------------------------
  目次　変更
--------------------------------------*/
#toc_container {/*目次全体*/
    margin: 0 0 2em 0;/*外側の余白設定*/
    padding: 0;/*内側の余白を0に*/
    border-color: #4242428a!important;/*枠線の色*/
    border: solid 2px;/*枠線の種類と幅*/
    border-top: none;/*上線削除*/
    border-radius: 3px;/*角をちょっとだけ丸く*/
    background: #4242420d;/*背景色*/
    box-shadow: none;/*影を削除*/
}
div#toc_container .toc_list:after {/*右下のアイコン*/
    content: "";/*アイコンの書類*/
    position: absolute;/*自由に羽ばたけるように*/
    font-family: FontAwesome;
    bottom: -20px;/*下方向の位置調整*/
    right: 5%;/*右方向の位置調整*/
    font-size: 5em;/*アイコンの大きさ*/
    opacity: 0.1;/*透明度*/
}
#toc_container .toc_title {/*目次のタイトル*/
    display: block;/*段落に*/
    margin: 0;/*外側の余白を削除*/
    padding: 0;/*内側の余白を削除*/
    font-size: 18px;/*文字の大きさ*/
    line-height: 42px;/*行の高さ*/
    font-weight: bold;/*太文字*/
    background: #4242428a;/*背景色*/
    text-align: center;/*中央揃え*/
    color: white!important;/*文字の色*/
}
#toc_container .toc_title:before {/*タイトル前のアイコン*/
    display: none;/*消し消し*/
}
#toc_container .toc_list {/*目次のコンテンツ*/
    margin: 0;/*外側の余白削除*/
    color: #424242de;/*文字の色*/
    padding: 1em 6% 1em 10%;/*内側の余白調整*/
    position: relative;/*基準に設定*/
}
#toc_container .toc_list li a {/*アンカーリンクの設定*/
    color: #424242b3;/*文字色*/
    display: block;/*横いっぱいまでリンクにする*/
}
#toc_container .toc_list li a:hover {/*マウスホバーしたとき*/
    text-decoration: none;/*下線を表示しない*/
    opacity: .5;/*うっすら透明に*/
}
#toc_container ul {/*箇条書き*/
    list-style-type: decimal;/*番号に変更*/
    color: #424242b3!important;/*文字の色*/
}
@media only screen and (min-width: 481px){/*PC表示*/
#toc_container {
    padding: 0;/*内側の余白を削除*/
}}




/*--------------------------------------
  検索欄　枠線ヒュッと出てくるver
--------------------------------------*/
input#s {/*検索欄*/
    border-bottom: none;/*下線削除*/
    box-shadow: none;/*ドロップシャドウ削除*/
    border-radius: 0;/*角丸削除*/
    transition: .1s ease-in-out;/*変化にかかる時間*/
}
input#s:focus {/*入力している時*/
    box-shadow: none;/*影削除*/
    border: 3px solid #797979;/*枠線追加*/
}
#searchsubmit {/*検索欄の虫眼鏡部分*/
    background-color: #424242;/*背景色*/
    border-radius: 0;/*角丸削除*/
    border-bottom: none;/*下線削除*/
}
input#s:focus+#searchsubmit {/*入力している時の虫眼鏡部分*/
    background-color: #797979;/*背景色*/
}
input#s:focus+#searchsubmit i {/*入力しているときのアイコン*/
    font-size: inherit;/*サイズ引き継ぎ*/
}


/*--------------------------------------
記事カードに余白を追加
--------------------------------------*/
.cardtype__img img {/*カード記事の画像*/
    padding: .45em .45em 0 .45em;/*上　右　下　左の余白*/
}
/*-----こちらはお好みで-----*/
.osusume-card .cardtype__link {/*カード記事全体に対して*/
    padding-bottom: 15px;/*下の余白(内側)*/
    text-align: center;/*文字中央揃え*/
}


/*--------------------------------------
NEW部分の位置調整（記事カード余白追加用）
--------------------------------------*/
.newmark {/*NEWの部分*/
    right: 1.05em;/*右からの距離*/
    top: 1.05em;/*上からの距離*/
}


/*--------------------------------------
  TOPページ記事一覧カード
--------------------------------------*/
.sidelong__link {/*記事一覧カード*/
    color: rgba(66,66,66,0.87);/*文字の色*/
    padding: 4px;/*内側の余白*/
}
.newmark {/*新着のマーク*/
    border-radius: 20px;/*丸くする*/
}
.sidelong__img {/*アイキャッチのサイズ*/
    width: 100px;/*横幅*/
    height: 100px;/*縦幅*/
}
.sidelong__article {/*カード部分*/
    margin:0;/*外側の下余白*/
    border-bottom: 1px solid rgba(66,66,66,0.15);/*下線*/
}
.sidelong {/*記事全体*/
    border-top: 1px solid rgba(66,66,66,0.15);/*上の線*/
}


/*--------------------------------------
  お知らせ欄　動くグラデーション
--------------------------------------*/
.header-info {
  background: linear-gradient(45deg, #FFB74D, #FF5252, #FFA5A5);/*角度 色三色*/
  background-size: 600% 600%;/*背景のサイズ幅と高さ*/
  animation: osirase 5s ease infinite;/*切り替わるスピード*/
}
@keyframes osirase {/*アニメーションのキーフレーム*/
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
 
/*--------------------------------------
  ヘッダーお知らせ欄
--------------------------------------*/
.header-info a {/*お知らせ欄全体*/
    padding: 5px;/*内側の余白　上下左右*/
    font-size: 15px;/*文字の大きさ*/
}
.header-info a:after {/*後ろにぶち込む*/
    content: "クリックして見に行く";/*PCでのセリフ*/
    font-weight: 500;/*文字の太さ*/
    border: 1px solid #fff;/*枠線*/
    border-radius: 5px;/*角丸*/
    padding: 2px 10px;/*内側の余白*/
    margin-left: 5px;/*外側の余白（文字との距離）*/
}
@media screen and (max-width: 500px){/*スマホ表示*/
.header-info a:after {
    display: block;/*改行されるように*/
    width: 60%;/*ボタンっぽいやつの横幅*/
    content: "タップして見に行く";/*スマホでのセリフ*/
    margin: 0 auto;/*中央寄せ*/
    font-size: .8em;/*文字のサイズ*/
}}
 

 
/*--------------------------------------
  スマホ用ナビドロワーにホームボタン追加
--------------------------------------*/
.bc-home {
    display: inherit;/*引き継ぐよ*/
    width: 90%;/*長さ*/
    height: 60px;/*高さ*/
    line-height: 60px;/*文字の高さ*/
    margin: 0 auto;/*中央揃え*/
    padding-right: 10px;/*内側右の余白*/
    border-radius: 5px;/*角丸*/
    text-align: center;/*文字中央揃え*/
    letter-spacing: .05em;/*文字の間隔*/
    background: #424242de;/*背景色*/
    color: white;/*文字の色*/
}
.bc-home .fa {/*アイコーン*/
    vertical-align: -11%;/*縦方向の位置調整*/
    padding-right: 10px;/*右側の余白*/
}


/*--------------------------------------
  ヘッダーメニュー固定
--------------------------------------*/

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

.header {
  position: fixed;/*ヘッダー固定*/
  top: 0;
  left: 0;
  width:100%;
}

/*ヘッダーの高さだけコンテンツを下げる*/
#container{
  padding-top:62px;/*ヘッダーの高さにあわせて調整*/
}

/*目次から見出しへ飛ぶリンクのズレを修正*/
h2 span, h3 span {
  padding-top: 62px;/*ヘッダーの高さにあわせて調整*/
  margin-top: -62px;/*ヘッダーの高さにあわせて調整（マイナスは消さない）*/
}
}


/*--------------------------------------
 ずっといる目次へGOボタン
--------------------------------------*/
.tomkj a {
    position: fixed;
    bottom: 65px;
    right: 320px;
    height: 64px;
    width: 64px;
    text-align: center;
    border-radius: 50%;
    z-index: 9;
    opacity: 0.7;
    font-size: .9em;
}
.tomkj-c a {
    background: #00AC97;
    color: white;
    border: 2px solid #00AC97;
}
.tomkj a:hover {
    text-decoration: none;
}
.tomkj p {
    margin-bottom: -18px;
    margin-top: 8px;
}
.tomkj p:last-child {
    font-size: 1.4em;
}


/*続きを読む*/
.linkto,
.c_linkto{
	font-size: .9em;
	position: relative;
}
.linkto{
	box-shadow: 0 3px 6px rgba(0, 0, 0, .25);
	transition: .3s;
	border: solid 1px #eaedf2;
}
.linkto:after,
.c_linkto:after{
	position: absolute;
	font-family: 'Quicksand','Avenir','Arial',sans-serif,FontAwesome;
	content:'もっと見る＞';
	right:10px;
	bottom: 10px;
	padding:1px 10px;
	background:#777777;/*「続きを読む」の背景色*/
	color:#fff;/*「続きを読む」の文字色*/
	font-size: .8em;
	border-radius:2px;
}
.linkto:hover{
	background:#fff;
	box-shadow: 0 13px 20px -3px rgba(0,0,0,.24);
}
.linkto img,
.linkto:hover img {
	box-shadow: none;
}
.tbtext{
	padding: 1em .5em;
}
.c_linkto_text{
	margin-bottom:20px;
}
.linkto .tbimg {
	width: 120px;
}

@media (min-width:768px) and (max-width:1023px) {
	.linkto {
		padding:5px;
	}
	.linkto:after{
	right:5px;
	bottom: 5px;
	}
	.linkto .tbimg {
		width: 100px;
		vertical-align:top;
		padding-top:3px;
	}
	.tbtext {
		padding: 0 .5em 1.5em .5em;
	}	
	.longc_content{
		padding: 15px 13px 30px 13px !important;
	}
}

@media (max-width:767px){
	.linkto {
		padding:3px;
	}
	.linkto:after{
		right:3px;
		bottom: 3px;
	}
	.linkto .tbimg {
		width: 100px;
		vertical-align:top;
		padding-top:3px;
	}
	.tbtext {
		padding: 0 .5em 1.5em .5em;
	}	
}
/*関連記事カスタマイズここまで*/