@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/*--------------------------------------
【文字：サイズ・書体・行間】
--------------------------------------*/

/* フォント */
body{
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial,"Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
} 



/* 行間 .post_content>*  */
.post_content>p {
    margin-bottom: 3.5em;
}

.post_content h2,
.post_content h3,
.post_content h4{
	margin-bottom:1.5em;
}
.post_content h2:first-of-type{
	margin-top: 3em;
}
.post_content h2,
.post_content h3,
.post_content h4{
	margin-top: 6em;
}

.p-postList__body h2,
.p-postList__body h3,
.p-postList__body h4{
	margin:0em !important;
}


@media (max-width: 599px){
	.post_content>* {
		line-height: 2;
	}
}
@media (min-width: 600px){
	.post_content>* {
		line-height: 2.3;
	}
}


/*--------------------------------------
記事装飾
--------------------------------------*/

/* リンク */
p a,li a,.p-blogCard__title,.c-blogLink__text{ font-weight:bold; }
p a:hover{ text-decoration:underline; }
.p-blogCard__title{ color:#1e75c2; }

/* マーカーを太字に */
.mark_blue,
.mark_green,
.mark_orange,
.mark_yellow{
	font-weight:bold;
}

/* 記事下の余白を4em→10em */
.post_content {
    margin-bottom:10em;
}

/* 参考：オレンジ */
.sanko:before{
	content : "参考";
	font-size : 12px;
	background-color : #f57c00;
	color : white;
	padding : 5px 7px;
	margin-right : 5px;
}
/* ヒント：緑 */
.hint:before{
	content : "ヒント";
	font-size : 12px;
	background-color : #69bd7a;
	color : white;
	padding : 5px 7px;
	margin-right : 5px;
}
/* もっと詳しく：青 */
.kuwashiku:before{
	content : "もっと詳しく";
	font-size : 12px;
	background-color : #8eaced;
	color : white;
	padding : 5px 7px;
	margin-right : 6px;
}
/* 関連：オレンジ */
.kanren:before{
	content : "関連";
	font-size : 12px;
	background-color : #f57c00;
	color : white;
	padding : 5px 7px;
	margin-right : 5px;
}
/* おすすめ：ピンク */
.osusume:before{
	content : "おすすめ";
	font-size : 12px;
	background-color : #ed8989;
	color : white;
	padding : 5px 7px;
	margin-right : 5px;
}
/* 補足：グレー */
.hosoku:before{
	content : "補足";
	font-size : 12px;
	background-color : #9e9e9e;
	color : white;
	padding : 5px 7px;
	margin-right : 5px;
}
/* 比較：紫 */
.hikaku:before{
	content : "比較";
	font-size : 12px;
	background-color : #c68fda;
	color : white;
	padding : 5px 7px;
	margin-right : 5px;
}
/* 次に読む：緑 */
.tugi:before{
	content : "次に読む";
	font-size : 12px;
	background-color : #69bd7a;
	color : white;
	padding : 5px 7px;
	margin-right : 5px;
}
/* やり方：紺 */
.yarikata:before{
	content : "やり方";
	font-size : 12px;
	background-color : #000080;
	color : white;
	padding : 5px 7px;
	margin-right : 5px;
}


/* コードブロック 
.wp-block-code code {
    line-height : 1.2em;
    border : 1px solid #ccc;
    padding : 22px;
}*/



/*--------------------------------------
アーカイブページ並び
--------------------------------------*/
.p-postList__title{
	color: #1e75c2 !important; /* リンクカラー */
}

.p-postList__title:hover{
	text-decoration: underline; /* ホバー時下線 */
}

.p-postList__item a:hover{
	background-color: #fffff6; /* ホバー背景色 */
}


/* 関連記事の文字サイズ */
#after_article > section > ul > li > a > div.p-postList__body > div{
	font-size:16px;
}

/* スマホ一覧タイトル文字サイズ */
@media (max-width: 599px){
.-type-card.-sp-col1 .p-postList__title {
    font-size: 3.5vw;
}
}
@media (min-width: 600px){
.-type-card .p-postList__title,
.-type-list .p-postList__title,
.-type-list2 .p-postList__title {
    font-size: 17px;
}
.-type-card .p-postList__item{
margin-bottom: 3.7em;
}
}

/* スマホ時のデザイン調整 */
@media (max-width: 599px){
	.-type-card .p-postList__item{
		border: 1px solid #efefef;
		background: white;
		padding: 3px !important;
	}
	.-type-card .p-postList__body{
		padding: 0.2em;
	}
	.-body-solid .p-postList__thumb{
		box-shadow: inherit;
		border: 1px solid #efefef;
	}
}

/*--------------------------------------
【ナビゲーションのカラーコントロール】
--------------------------------------
.c-pageTitle[data-style=b_bottom] .c-pageTitle__inner{
	border-bottom: 1px none;
}*/

/* グローバルナビの間隔を少し広げる 
.c-gnav>.menu-item{
	margin-left:10px;
}*/


/*--------------------------------------
サイドバーの横幅
--------------------------------------*/
@media (min-width: 960px){
	.-sidebar-on #sidebar{
		width: 320px;
	}

	.-frame-on.-sidebar-on .l-mainContent{
		width: calc(100% - 356px) !important;
	}
}

/* パネルメニューの下の余白を取る 
#sidebar .post_content{
	margin-bottom:0px;
}
#sidebar .swell-block-box-menu.is-style-default .swell-block-box-menu__item{
	border:1px solid #dedede;
}*/



/*--------------------------------------
【目次】
--------------------------------------*/

/* h2だけ太字化 */
article > div.post_content > div.p-toc.-simple > ol > li > ol > li > a,
div.p-toc.post_content > ol > li > ol > li > a{
	font-weight:normal !important;
}

/* h3は番号無しにする */
article > div.post_content > div.p-toc.-simple > ol > li > ol > li,
div.p-toc.post_content > ol > li > ol > li{
	list-style-type: disc;
}
article > div.post_content > div.p-toc.-simple > ol > li > ol > li:before,
div.p-toc.post_content > ol > li > ol > li:before{
	content:"";
}
article > div.post_content > div.p-toc.-simple > ol > li > ol,
div.p-toc.post_content > ol > li > ol{
	margin-left:-1.3em;
}
#swell_index-2 > div.p-toc.post_content > ol > li{
	margin-top:1.4em;
}



/* ■目次：文字サイズ・色 */
/* メインカラム */
.p-toc__link{
	font-size:15px;
	color:#1e75c2 !important;
	/* font-weight:normal; */
}
/* h3は文字サイズを小さくする */
.p-toc__list li li{
	font-size:.8em;
}

.toc-chk:checked + .p-toc__ttl + ol li,
.toc-chk:checked + .p-toc__ttl + ul li{
	line-height:1.8em;
}

/* h3の最後の要素の下に余白を入れる */
#main_content > article > div.post_content > div.p-toc.-simple > ol > li > ol > li:last-child{
	padding-bottom:1em;
}

ol.is-style-index>li::before{
	top: 0.33em;
}

/* サイドバー */
.c-widget .p-toc__list li{
	line-height:1.7em;
}

/* ■目次：レイアウトの微調整 */
ol.is-style-index ol>li, ol.is-style-index>li{
	margin-left:2.2em !important;
}
/* 必要のない下の余白を抜く */
.p-toc.-simple li{
	margin:0;
}




@media (max-width: 599px){
.-simple.p-toc {
    padding: 0.75em;
	padding-left: 0em;
}
}