@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*,*::before,*::after{box-sizing:border-box}*{margin:0}html,body{height:100%}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root,#__next{isolation:isolate}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.05rem !important;
  line-height: 1.8 !important;
  font-family: "Lato", "Helvetica Neue", Hiragino Kaku Gothic ProN, "Trebuchet MS", "Noto Sans JP", Meiryo, sans-serif !important;
}

a { 
  color: #009df8;
  display: inline-block;
  transition: .3s;
  text-decoration: none !important; }
@media (hover: hover) {
  a:hover:not(img) {
    color: #fff;
  }
}
  a:hover { text-decoration: none !important; }
  em { font-style: normal; color: #FB9B0D; }
  strong { color: #D02870;  font-weight: bold; }
  del, s { color: #828282 }

  pre.ss {
    position: relative;
    padding: 1em 1.5em;
    margin: 2em 0;
    top: 0;
    color: #7F716E;
    background: #F6F6F6;
    border: none !important;
    font-family: "Lato", "Helvetica Neue", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "Trebuchet MS", "メイリオ", Meiryo, sans-serif !important;
    font-size: 92%;
    letter-spacing: 0.01rem !important;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    white-space: pre-wrap;
}
pre.ss:before, pre.ss:after{
    position: absolute;
    top: 0;
    content:'';
    width: 10px;
    height: 100%;
    display: inline-block;
    box-sizing: border-box;
}
pre.ss:before{
    border-left: dashed 2px #15adc1;
    border-top: dashed 2px #15adc1;
    border-bottom: dashed 2px #15adc1;
    left: 0;
}
pre.ss:after{
    border-top: dashed 2px #15adc1;
    border-right: dashed 2px #15adc1;
    border-bottom: dashed 2px #15adc1;
    right: 0;
}

p code, li code, dd code {
  font-family: "Lato", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "Noto Sans JP", Meiryo, monospace, sans-serif !important;
  color: #0fe3ff;
  background: #031520;
  line-height: 1.5;
  margin: 0 0.25em !important;
  padding: 0.15em 0.45em;
  border-radius: 3px;
}

/* Qiita */
.hcb_wrap.hcb_wrap code, .hcb_wrap.hcb_wrap pre { color: #e3e3e3!important; background: #364549!important; line-height: 1.8!important;}/* 全体 */
.hcb_wrap.hcb_wrap code.language-js { color: #8bdf4c!important;}/* JavaScriptの文字色 */
.token.keyword { color: #ff8095!important;}/* 予約語1 */
.token.keyword { color: #ebd247!important;}/* 予約語2 */
.token.keyword.def { color: #ebd247!important; font-style: initial!important;}/* 予約語def */
.token.string { color: #41b7d7!important;}/* 文字列 */
.token.comment { color: #9dabae!important;}/* コメント */
.token.function { color: #8bdf4c!important;}/* 関数 */
.token.operator { color: #ff8095!important;}/* 演算子 */
.token.punctuation { color: #e3e3e3!important;}/* 記号(句読点) */
.token.number { color: #a980f5!important;}/* 数字 */
.token.boolean { color: #ebd247!important;}/* ブール */
.token.interpolation .token.punctuation { color: #569cd6!important;}/* リテラル内の記号(句読点) */
.token.builtin { color: #e3e3e3!important; font-style: initial!important;}/* 組み込み */

/* フォントサイズ変化 */
.s14 { font-size:1.2rem; }
.s16 { font-size:1.4rem; }
.s18 { font-size:1.6rem; }
.s20 { font-size:1.8rem; }

/* 固定ページに日付を表示させない */
.page .date-tags { display: none; }
  ul.blog-list { display:flex; flex-wrap:wrap;}
  ul.blog-list li { width:30%; text-align:center;}

/* 目次の幅を変更 */
.skin-grayish .toc {
    width: 75%;
  }
  .wrap {
    width: 1024px;
  }

/* Easy Footnote */
.skin-grayish .content .main .entry-content {
  border-bottom: none !important;
}
.easy-footnote sup:before { 
  vertical-align: top;
  content: '*';
  font-size: small;
}
.easy-footnote sup { 
  vertical-align: middle;
}
ol.easy-footnotes-wrapper {
  margin: 0.1em 0.3em;
  padding: 0.2em 0.5em;
  border-top: 1px dashed #666666;
  font-size: 88%;
}
ol.easy-footnotes-wrapper li {
  margin: 0.3em 0.5em 0.3em 1em;
}

.footnote_tooltip {
display: none;
padding: 12px;
font-size: 88%;
background-color: #fff7a7;
border-width: 1px;
border-style: solid;
border-color: #cccc99;
border-radius: 3px; -webkit-box-shadow: 2px 2px 11px #666666; -moz-box-shadow: 2px 2px 11px #666666; box-shadow: 2px 2px 11px #666666;}


/* dl,dt,dd */
dl.authority {
  position: relative;
  background: #F7F9FB;
  box-shadow: 0px 0px 0px 5px #F7F9FB;
  border: dashed 2px #e0eef7;
  padding: 1em;
  color: #454545;
}
dl.authority:after{
  position: absolute;
  content: '';
  right: -7px;
  top: -7px;
  border-width: 0 15px 15px 0;
  border-style: solid;
  border-color: #F7F9FB #fff #F7F9FB;
  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
dl.authority dt {
position: relative;
background: transparent;
box-shadow: none;
border-top: none;
border-right: none;
border-bottom: dashed 1px #b7cedd;
border-left: none;
margin: 0.1em 0 0.2em;
padding: 0.2em 0.8em;
color: #556169;
font-weight: 600;
}

dl.authority dt:after {
content: '';
border-width: 0;
border-style: none;
border-color: none;
box-shadow: none;
}
dl.authority dd {
margin: 0;
padding: 0.3em 1.2em;
font-size: 92%;
color: #778893;
}
dl.authority dd p {
margin: 0.1em 0 !important;
padding: 0.3em 0.5em !important;
}


  dl.dlTable{
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	flex-wrap: wrap;
	align-items: stretch;	
	width: 100%;
	border: 2px solid #fff;
	border-bottom: none;
}
dl.dlTable dt{
	background: #f5f5f5;
	padding:  0.3rem 0 0.3rem 0.5rem;
	width: 210px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
  text-indent: 0.5rem;
}
dl.dlTable dt img{
  display: block;
  margin: 0 auto;
  text-indent: 0 !important;
}
dl.dlTable dd{
	background: #fff;
	padding: 0.3rem 0.1rem 0.3rem 0;
	width: calc(100% - 250px);
  border-bottom: 2px solid #fff;
}

/************************************
** ul, ol, li **
************************************/
[class*="is-style-numeric-list-"] > li {
  margin: auto 1.2rem auto auto;
  padding: 0 0 0.2rem 2.2rem;
  line-height: 1.8;
}
[class*="is-style-numeric-list-"] > li:last-child {
  padding-bottom: 0 !important;
}

/* ol_numeric */
[class*="is-style-numeric-list-"] > li::before {
	font-size: 0.85rem;
	font-weight: normal !important;
	width: 2em;
	height: 2em;
  vertical-align: middle;
	line-height: 2;
}

/* ol_numeric_Step */
.is-style-numeric-list-step > li::before {
	border: 1px solid var(--cocoon-box-border-color);
}
.is-style-numeric-list-step > li::before {
  border-radius: 0.25rem;
}
.is-style-numeric-list-step li {
  padding: 0.01rem 0 1rem 2.2rem !important;
}
.is-style-numeric-list-step > li::after {
  bottom: -1.85em;
	border-left: 1px dashed var(--cocoon-box-border-color);
}

/* List category posts */
  ul.lcp_catlist  {
    display: grid;
    place-content: center;
    grid-template-rows: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    -moz-column-gap: 4px;
    column-gap: 4px;
    row-gap: 4px;
  }

ul.lcp_catlist li {
  list-style:none;
  border-bottom: 1px solid #CCCCCC;
  padding-top: 10px;
  padding-bottom: 50px;
  }
  
  ul.lcp_catlist .lcp_excerpt {
   font-size: small;
  }




  .lcp_paginator {
    margin: 24px 0;
    clear: both;
    text-align: center;
    display: inline-flex;
    justify-content: center;
    width: 100%;
  }
  .lcp_paginator li {
    border: none !important;
  }
  .lcp_paginator li a {
    color: var(--skin-grayish-site-main-hover);
    background-color: var(--cocoon-thin-color);
    text-decoration: none;
    display: inline-block;
    height: 46px;
    width: 46px;
    border: 1px solid var(--cocoon-thin-color);
    margin: 0 4px;
    line-height: 46px;
    text-align: center;
    border-radius: 99% !important;
    border-radius: var(--cocoon-basic-border-radius);
  }
  .lcp_paginator li a:hover {
    color: var(--cocoon-thin-color);
    background-color: var(--skin-grayish-site-main-hover);
    border-color:var(--skin-grayish-site-main-hover);
    transition: .3s;
  }
  .lcp_paginator .lcp_currentpage {
    color: var(--skin-grayish-site-main-hover);
    background-color: transparent;
    border-radius: 99%;
    border: solid 1px var(--skin-grayish-site-main-hover) !important;
    display: inline-block;
    height: 46px;
    width: 46px;
    line-height: 46px;
    text-align: center;
    border-radius: 99% !important;
  }
  .lcp_paginato .lcp_nextlink {
    letter-spacing: 0;
  }

/* FOR smartphone landscape
***************************************************************************/
@media only screen and (max-width: 765px) {
	dl.dlTable dt{ 
		width: 100%;
		border-right: none;
	}
	dl.dlTable dd{
		width: 100%; 
	}
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}