/*
Theme Name: AFFINGER Child
Template: affinger
Description: AFFINGER6 対応
Version: 20240601
*/

/* 円で番号を囲う  */
ol.list_circle_number {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:0.5em;
  background: #f5faff;
}
ol.list_circle_number li {
  position: relative;
  padding-left: 30px;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.5em 30px;
}

ol.list_circle_number li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*以下数字のデザイン変える*/
  display:inline-block;
  background: #5c9ee7;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  /*以下 上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}


/* タグにアイコンを入れた場合 */
ul.list_icon_tag {
  border: solid 2px #ffb03f;
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
  margin-top: 2em;
}
ul.list_icon_tag li {
  line-height: 1.5;
  padding: .5em 0 .5em 10px;
  list-style-type: none!important;
	margin-left:0;
}
ul.list_icon_tag li:before {
  /*リストのアイコン*/
  font-family: "stsvg";
  content: "\f00c";
  position: absolute;
  left : 1em; /*左端からのアイコンまでの距離*/
  color: #ffb03f; /*アイコン色*/
}
ul.list_icon_tag li:after {
  /*タブ*/
  background: #ffb03f;
  color: #fff;
  font-family: "stsvg",'Avenir','Arial',sans-serif;
  position: absolute;
  left: -2px;
  bottom: 100%;
  padding: 1px 7px;
  content: '\f0a7  Check';/*アイコンコード＋文字*/
  letter-spacing: 0.05em;/*字間*/
}


/* チェック */
ul.list_check {
    list-style-type: none;
    padding: 1em;
    border: 2px solid #25c5d0;
}

ul.list_check li {
    display: flex;
    align-items: center;
    gap: 0 5px;
    padding: .3em;
}

ul.list_check li::before {
    display: inline-block;
    width: 10px;
    height: 5px;
    border-bottom: 2px solid #25c5d0;
    border-left: 2px solid #25c5d0;
    transform: rotate(-45deg) translateY(-1.5px);
    content: '';
}


/* 矢印アイコンリスト */
ul.list_arrow_icon {
  border: 2px solid #99bdde;
  border-radius: 10px;
  list-style: none !important;
  padding: 0 .8em .5em;
  position: relative;
}
ul.list_arrow_icon li {
  border-bottom: 1px dashed #b9b9b9;
  margin-top: 10px;
  padding: .5em 0 .5em 2em;
}
ul.list_arrow_icon li:before {
  color: #99bdde;
  content: "\f138";
  font-family: "stsvg";
  font-weight: 900;
  left : 1em;
  margin: 3px 0;
  position: absolute;
}
ul.list_arrow_icon li:last-of-type {
  border-bottom: none;
}


/* 影を付けたリストデザイン */
ul.list_shadow{
  font: 14px/1.6 'arial narrow', sans-serif;
  padding: 10px;
  color: #448ccb;
  background: #ecf3fa;
  border-radius: 20px;
  list-style: none !important;
  -webkit-box-shadow: 1px 1px 5px rgba( 236, 243, 250, 0.7) ;
  -moz-box-shadow: 1px 1px 5px rgba( 236, 243, 250, 0.7) ;
  box-shadow: 1px 1px 5px rgba( 236, 243, 250, 0.7) ;
}
ul.list_shadow li{
  position: relative;
  line-height: 25px;
  padding-left: 30px;
  font-weight: bold;
}
ul.list_shadow li:before{
  content: "・";
  position: absolute;
  left: 7px;
  font-size: 20px;
}


/* キャプションが付いているリストデザイン */
ul.list_caption{
  position: relative;
  padding: 15px 15px 15px 30px;
  font: 14px/1.6 'arial narrow', sans-serif;
  border: solid 2px #adcce8;
  border-radius:8px;
  background: #fff;
	list-style:none !important;
	margin: 50px 0;
}
ul.list_caption:before{
  content: "POINT";  /* 好きな文字を記述 */
  position: absolute;
  display: block;
  top: -15px;
  left: 20px;
  background: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 0 10px;
}
ul.list_caption li{
  font-weight: bold;
	padding-left:10px;
}

ul.list_caption li:before {
    position: absolute;
    left: 10px;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "stsvg";
    font-weight: 900;
    content: '\f101';
    color: #69c;
}


/* 付箋風のリストデザイン */
ul.list_sticky_note{
  padding: 0;
  font: 14px/1.6 'arial narrow', sans-serif;
  list-style: none !important;
}
ul.list_sticky_note li{
  position: relative;
  padding: 10px;
  margin-bottom:5px;
  border-left: solid 5px #5c9ee7;
  background: #f1f8ff;
  color: #5c9ee7;
  font-weight: bold;
  -webkit-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.1) ;
  -moz-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.1) ;
  box-shadow:1px 1px 2px rgba(0, 0, 0, 0.1) ;
}

/* 背景色ありのリスト */
ul.list_back_color{
	margin: 0;
	padding: 20px;
	background: #e0ecf9;
}
ul.list_back_color li{
	list-style: none !important;
	position: relative;
	margin: 0 0 15px 0;
	padding: 0 0 0 calc(1em + 5px);
	line-height: 1.4;
}
ul.list_back_color li:before{
	position: absolute;
	top: 0;
	left: 0;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "stsvg"; 
	font-weight: 900;
	content: '\f138';
	color: #6699cc;
}
ul.list_back_color li:last-child{
	margin-bottom: 0px;
}

/* 背景色＋左線のリスト */
ul.list_backborderleft{
	margin: 0;
	padding: 20px;
	background: #e0ecf9;
	border-left: 5px solid #6699cc;
}
ul.list_backborderleft li{
	list-style: none !important;
	position: relative;
	margin: 0 0 15px 0;
	padding: 0 0 0 calc(1em + 5px);
	line-height: 1.4;
}
ul.list_backborderleft li:before{
	position: absolute;
	top: 0;
	left: 0;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "stsvg"; 
	font-weight: 900;
	content: '\f101';
	color: #6699cc;
}
ul.list_backborderleft li:last-child{
	margin-bottom: 0px;
}

/* 固定タイトルが付いたリスト */
ul.list_title{
	position: relative;
	margin: 0 0 20px;
	padding: calc(1.2em + 30px) 10px 20px 10px;
	background: #e0ecf9;
}
ul.list_title:before{
	position: absolute;
	top: 10px;
	left: 10px;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "stsvg",sans-serif; 
	font-weight: 900;
	content: '\f0eb  Point';
	font-size: 1.2em;
	color: #3366cc;
}
ul.list_title li{
	list-style: none !important;
	position: relative;
	margin: 0 0 15px 0;
	padding: 0 0 0 calc(1em + 5px);
	line-height: 1.4;
}
ul.list_title li:before{
	position: absolute;
	top: 0;
	left: 0;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "stsvg"; 
	font-weight: 900;
	content: '\f00c';
	color: #6699cc;
}
ul.list_title li:last-child{
	margin-bottom: 0px;
}

main ul li, main ol li {
    margin-top: 10px;
}

main ul, main ol {
    margin-left: 0;
}

.post h2,.post h3{
    margin-top: 100px !important;
}

.post h4{
    margin-top: 70px !important;
}


/*media Queries スマートフォンとタブレットサイズ（959px以下）で適応したいCSS - スマホ・タブレット
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 959px) {


	/*-- ここまで --*/
}
	
/*media Queries タブレットサイズ（600px～959px）のみで適応したいCSS -タブレットのみ
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) and (max-width: 959px) {


	/*-- ここまで --*/
}	
	
/*media Queries タブレット（600px）以上で適応したいCSS -タブレット・PC
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) {


	/*-- ここまで --*/
}

/*media Queries PCサイズ（960px）以上で適応したいCSS - PCのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (min-width: 960px) {


	/*-- ここまで --*/
}

/*media Queries スマホサイズ（599px）以下で適応したいCSS - スマホのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (max-width: 599px) {

	
	/*-- ここまで --*/
}