/*
Theme Name: WING-AFFINGER5 Child
Template: affinger5
Description: ver20180831以上対応
Version: 20180831
*/
#toc_container li {
	text-indent:.3em!important;
}


/* ここからアプリ */
/* 一番上のランキングタグ */
.value{
font-size:17px;
color:#fff;

}
/* アプリ全体のボックス */
.ranking-section__app__infomation-area {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	margin: -15px -10px 0;
	overflow: hidden;
	padding: 10px;
	position: relative;
	z-index: 0;
}
/* ボタンより上のボックス */
.flex-box-app{
	display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
/* テキストのボックス */
.text-wrap{
	margin-top:10px;
}
/* アプリアイコン */
.ranking-section__app__infomation-area .ranking-section__app__icon-wrap {
	display: inline-block;
	vertical-align: top;
}
div.ranking-section__app__icon-wrap img {
	border: 1px solid #D8D8D8;
	border-radius: 20%;
	height: auto;
	left: 0;
	top: 0px;
	max-width: 160px;
}
/* アプリタイトル */
.text-wrap h3{
	background: transparent!important;
	padding-top:0px!important;
	padding-right:0px!important;
	padding-left:15px!important;
	padding-bottom:0px!important;
	margin:0!important;
	font-size:1.4rem;
	border-top:0px!important;
	border-bottom:0px!important;
border-right:0px!important;
border-left:0px!important;
}
.app-title{
	color:#fff;
	font-weight:bold;
	padding:9px 15px 10px 15px;
	margin-left: -10px ;
	font-size:18px;
	}

.text-wrap h3 a{
	color:#fff;
	font-size:2.1rem;
}

.text-wrap h3::after{
	border-bottom:0px!important;
	background: transparent!important;
}

/* スター */
.text-wrap .shortcode-star-rating{
padding:0px!important;
margin-bottom:10px;
}


.ranking-section__app__infomation-area::after {
	content: "";
	background-color: #333;
	opacity: 0.75;
	position: absolute;
	top: -10px;
	left: -10px;
	right: 0px;
	bottom: 0px;
	z-index: -1;
}

.ranking-section__app__infomation-area__value {
	color: #FE9A2E;
	font-size: 2.3em;
	position: relative;
	margin-left:15px;
	margin-top: -15px;
}


/* ジャンルタグ */
.ranking-section__app__infomation-area__tags{
margin:0px!important;
padding-left:15px!important;
padding-top:10px!important;
}

ul.ranking-section__app__infomation-area__tags li {
	background-color: #fafafa;
	border-radius: 20px;
	color: #424242;
	display: inline-block;
	font-size: 0.9rem;
	font-weight: bold;
	padding: 0px 9px;
	margin-right: 5px;
	list-style: none;
	margin-top: 0;
}


.app-area{
margin:15px 0;
}
/* ボタン部分 */
.app-btn{
	padding-top:10px;
margin:0 auto;
}

.btn-center{
	display:block;
	max-width:290px;
	margin:0 auto;
}
.btn-center>a>img{
margin:5px!important;

}

/* ここまでアプリ */

/* スマホメニュー */
#st-menuwide .smanone {
	display:block;
background-color:#414858;
} 
.pcnone{
	display: none;
}
/* clearfix */
 .clearfix {
	zoom: 1;
}


.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
 
.survise-box{
 max-width:180px;
margin:0 2px;
}
.survise-box img{
 width:100%
}
.survise-box p{
  font-size: 15px;
 margin:0;
}

/*media Queries スマートフォンとタブレットサイズ（959px以下）で適応したいCSS - スマホ・タブレット
---------------------------------------------------------------------------------------------------*/

/* スマホメニュー */
@media only screen and (max-width: 959px) {
	header .smanone ul.menu li {
    box-sizing: border-box;
    list-style-type: none;
    float: left;
    width: 33.333333%;
    height: 40px;
    text-align: center;
		border-right: solid 1px #f3f3f3;
		border-bottom: solid 1px #f3f3f3;
		border-top: solid 0.5px #f3f3f3;
		position: relative;
		padding:10px 0;
}
header .smanone ul.menu li {
	font-size: 15px;
}
header .smanone ul.menu li a{
	text-decoration: none;
}
	
/* アプリアイコン */
.ranking-section__app__icon-wrap img {
	max-width: 90px!important;
}
img .alignleft {
	max-width: 100px;
}
	/* アプリボタン */
.app-btn{
	margin-left: 0px;
}
/* アプリタイトル */
.text-wrap h3 a{
	font-size:1.3rem;
}
.text-wrap{
	margin-top:-10px;
}
	/*-- ランキング星部分 --*/
.ranking-section__app__infomation-area__value {
	font-size:1.2em;
	
}
	/*-- ジャンルタグ --*/
ul.ranking-section__app__infomation-area__tags li {
	font-size: 0.7rem;
}
	/*-- ボタン部分 --*/
	.btn-center　img{
margin:0 5px 5px 5px;
}
.btn-center img.alignleft {
    float: left;
    margin: 5px 5px 0;
}
}
/*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) {
	header .smanone ul.menu li {
    box-sizing: border-box;
    list-style-type: none;
    float: left;
    width: 16.6%;
    height: 40px;
    text-align: center;
    border-right: solid 1px #f3f3f3;
    position: relative;
}


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

/*media Queries スマホサイズ（599px）以下で適応したいCSS - スマホのみ
---------------------------------------------------------------------------------------------------*/
/*-- ４つのバナー部分をカラムにする --*/
@media print, screen and (max-width: 599px) {

	.flex{
		flex-wrap: wrap;
		}
		.survise-box{
		max-width:45%;
		padding:5px;
		}
	/*-- ここまで --*/
}

.box23 {
    position: relative;
    margin: 2em 0 2em 40px;
    padding: 8px 15px;
    background: #fff0c6;
    border-radius: 30px;
}
.box23:before{font-family: FontAwesome;
    content: "\f111";
    position: absolute;
    font-size: 15px;
    left: -40px;
    bottom: 0;
    color: #fff0c6;
}
.box23:after{
    font-family: FontAwesome;
    content: "\f111";
    position: absolute;
    font-size: 23px;
    left: -23px;
    bottom: 0;
    color: #fff0c6;
}
.box23 p {
    margin: 0; 
    padding: 0;
}

/*-- 交差線 --*/
.box17{
    margin:2em 0;
    position: relative;
    padding: 0.5em 1.5em;
    border-top: solid 2px #584544;
    border-bottom: solid 2px #584544;
}
.box17:before, .box17:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: #584544;
}
.box17:before {left: 10px;}
.box17:after {right: 10px;}
.box17 p {
    margin: 0; 
    padding: 0;
}

/*-- ストライプ --*/
.box16{
    padding: 0.5em 1em;
    margin: 2em 0;
    background: -webkit-repeating-linear-gradient(-45deg, #f89174, #f89174 3px,#e9f4ff 3px, #e9f4ff 7px);
    background: repeating-linear-gradient(-45deg, #f89174, #f89174 3px,#e9f4ff 3px, #e9f4ff 7px);
}
.box16 p {
    margin: 0; 
    padding: 0;
}

.hutoaka {
	font-weight:bold;
	color:#e66060;
}

/*補足説明[memo]*/
.memo {
  margin-bottom: 1.5em;
  padding: 1em;
  background: #fff9e5;
  color: #545454;
}
.memo_ttl {
  margin-bottom: 5px;
  color: #ffb36b;
  font-size: 1.2em;
  font-weight: bold;
}
.memo_ttl:before {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  margin: 0 3px 0 0;
  border-radius: 50%;
  background: #ffb36b;
  color: #fff;
  font-family: FontAwesome;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  content: "\f040";
}
.fa5 .memo_ttl:before {
  content: "\f303";
  font-size: 17px;
}
.memo p {
  margin: 0 0 5px;
}

/*引用符*/
blockquote {
    position: relative;
    padding: 30px 15px 8px 15px;
    box-sizing: border-box;
    font-style: italic;
    background: #efefef;
    color: #555;
}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: 13px;
    left: 15px;
    content: "\f10d";
    font-family: FontAwesome;
    color: #cfcfcf;
    font-size: 28px;
    line-height: 1;
    font-weight: 900;
}

blockquote p {
    padding: 0;
    margin: 10px 0;
    line-height: 1.7;
}

blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}


/* こんな方におすすめ */
.st-blackboard {
	padding: 10px 20px 0px; 
	border: 3px solid #353e59;
	background: #fff;
  	margin: 30px 0;
  	border-radius:0;
}

.st-blackboard-title-box {
	text-align: center; 
	margin-bottom:10px;
}

.st-blackboard-title {
	color:#353e59;
	display: inline-block;
	border-bottom:2px solid #353e59;
	font-weight: bold; 
	text-align: center; 
	padding:10px 10px 5px;
	background:#fff;
}

.st-blackboard-title:before {
  	content: "\f0f6\00a0\00a0";
  	font-family: FontAwesome;
}

.st-blackboard:not(.square-checkbox) ol.st-blackboard-list:not(.st-css-no){
	padding-left: 20px;
}

.st-blackboard:not(.square-checkbox) ul.st-blackboard-list:not(.st-css-no) {
	padding-left: 30px;
}

.st-blackboard:not(.square-checkbox) ul.st-blackboard-list:not(.st-css-no) li,
.post .st-blackboard:not(.square-checkbox) ul.st-blackboard-list:not(.st-css-no) li:last-child {
	border-bottom:dotted 1px #353e59;
  	line-height:1.3;
	padding:10px 0;
	margin:0;
	list-style:none;
	text-indent:-1.3em;
	padding-left:1.3em;
}

.st-blackboard:not(.square-checkbox) ol.st-blackboard-list:not(.st-css-no) li,
.post .st-blackboard:not(.square-checkbox) ol.st-blackboard-list:not(.st-css-no) li:last-child {
	border-bottom:dotted 1px #353e59;
  	line-height:1.3;
	padding:10px 0;
	margin:0;
}

.st-blackboard:not(.square-checkbox) ul.st-blackboard-list:not(.st-css-no) li:before {
  	content: "\f058\00a0\00a0";
  	font-family: FontAwesome;
	color:#353e59;
}

.st-blackboard:not(.square-checkbox) ul.st-blackboard-list:not(.st-css-no).st-no-ck li,
.post .st-blackboard:not(.square-checkbox) ul.st-blackboard-list:not(.st-css-no).st-no-ck li:last-child {
	text-indent:0;
	padding-left:0;
}

.st-blackboard:not(.square-checkbox) ul.st-blackboard-list.st-no-ck li:before {
  	content: none;
}


.box14{
    padding: 0.2em 0.5em;
    margin: 2em 0;
    background: #a7c1c3;
    box-shadow: 0px 0px 0px 10px #a7c1c3;
    border: dashed 2px white;
	border-radius: 8px;
}
.box14 p {
    margin: 0; 
    padding: 0;
}


.box15{
    padding: 0.2em 0.5em;
    margin: 2em 0;
    background: #d6ebff;
    box-shadow: 0px 0px 0px 10px #d6ebff;
    border: dashed 2px white;
	border-radius: 8px;
}
.box15 p {
    margin: 0; 
    padding: 0;
}

.st-mymarker-s,
.st-mymarker-s {
	background:linear-gradient(transparent 70%,#e66060 0%);
}


.box16{
    padding: 0.5em 1em;
    margin: 2em 0;
    background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
    background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}
.box16 p {
    margin: 0; 
    padding: 0;
}

.box24 {
    position: relative;
    padding: 0.5em 0.7em;
    margin: 2em 0;
    background: #e6f4ff;
    color: #5c98d4;
    font-weight: bold;
}
.box24:after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #e6f4ff;
    width: 0;
    height: 0;
}
.box24 p {
    margin: 0; 
    padding: 0;
}

/* box31 グレー*/
.entry-content .tl_main .box31 {
  margin-top: 2.3em;
}

.box31 {
  margin: 2em 0;
  padding: 0 15px 10px;
  background: #FFFFFF;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.box31 p {
  margin: 0 0 5px;
}

.box31 .box-title {
  margin: 0 -15px 15px;
  padding: 8px 4px;
  background: #414858;
  color: #fff;
  font-size: 1.2em;
  text-align: center;
  line-height: 1.5;
}

.loose-leaf{
  background: #f8f8f8;
  border-left: 5px dotted rgba(0,0,0,.1);
  box-shadow: 0 0 0 5px #f8f8f8;
  padding: 1em;
  margin: 1em 5px;
}

.loose-leaf p{
  margin: 0;
  padding: 0;
}

.box6 {
    padding: 0.5em 1em;
    margin: 2em 0;
    background: #fff;
    border: dashed 2px #414858;/*点線*/
}
.box6 p {
    margin: 0; 
    padding: 0;
}

/*角丸BOX*/
.box7 {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    background: #FFF;
    border: solid 3px #414858;/*線*/
    border-radius: 10px;/*角の丸み*/
}
.box7 p {
    margin: 0; 
    padding: 0;
}

.icon::before {
font-family: "Font Awesome 5 Free";
font-weight: 400; /*←ココ！！！！！！！*/
content: "\f007";
}

.st-step {
 	position: relative;
	display: inline-block;
 	margin: 0 15px 0 0;
	padding: 5px 7px;
 	width: 50px;
 	height: 50px;
 	vertical-align: middle;
 	text-align: center;
 	color: #FFF;
	font-size: 13px;
	background: #414858;
 	box-sizing: border-box;
  line-height:18px;

}

.st-step:before{
	content: "";
	position: absolute;
	bottom: -20px;
	left: 50%;
 	margin-left: -10px;
	border: 10px solid transparent;
	border-top: 13px solid #ccc;
 	z-index: 0;
}

.st-step .step-arrow{
	content: "";
	position: absolute;
	bottom: -20px;
	left: 50%;
 	margin-left: -10px;
	border: 10px solid transparent;
	border-top: 13px solid #353e59;
 	z-index: 0;
}

.st-step-no {
	font-size:150%;
	font-weight: bold;
}

.st-step-title {
  position: relative;
  font-size:20px;
  line-height:30px;
  font-weight:bold;
  padding: 10px 10px 10px 65px;
  background:#fff;
  margin-top:30px;
}

.st-step-title .st-step {
  font-weight:normal;
}