/* CSS Document */

/*
 general
-------------------------------------------------------------*/
html {
    background-color: transparent;
    background-image: none;
    overflow-y: scroll;
    font-size: 62.5%;
}

body {
    position: relative;
    min-width: 1000px;
    background: url(/common/img/bgAllWrap.png);
    line-height: 1.6;
    font-family:  "メイリオ", "Meiryo", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", sans-serif;
    font-size: 1.6rem;
	color: #333333;
	overflow: visible;
    border-top: #f18b00 solid 16px;
	font-family: dnp-shuei-mgothic-std, sans-serif;
	font-weight: 400;
	font-style: normal;
}

p img {
   vertical-align: bottom;
}
a{
    transition: opacity 0.3s;
}
a:link{
    color: #f18b00;
    text-decoration: none;
}
a:visited{
    color: #f18b00;
    text-decoration: underline;
}
a:hover{
    opacity: 0.5;
    color: #f18b00;
    text-decoration: underline;
}
a:active{}


.pc { display: block !important; }
.sp { display: none !important; }


/*
 pankuzu
-------------------------------------------------------------*/
.outDisc{
    position: absolute;
    top: -16px;
    box-sizing: border-box;
}
.outDisc__txt{
    width: 1000px;
    height: 16px;
    line-height: 1.6;
    color: #fff;
    font-size: 1.0rem;
    font-size: 10px;
    overflow: hidden;
}

/*
 container
-------------------------------------------------------------*/
.container{
    position: relative;
    width: 1000px;
    margin: 0 auto;
}

/*
 header
-------------------------------------------------------------*/
.l-header{
}
.headTtlImg{
	float: left;
	width: 150px;
}
.headTtlImg img{
	width: 100%;
}
.headTtl {
	float: right;
	width: 820px;
	position: relative;
	display: inline-block;
	margin: 1.5em 0;
	padding: 40px;
/*	min-width: 120px;
	max-width: 100%;
*/	color: #555;
	font-size: 2rem;
	background: #FFF;
	border: solid 3px #f18b00;
	box-sizing: border-box;
	border-radius: 6px;
	box-sizing: border-box;
}

.headTtl:before {
	content: "";
	position: absolute;
	top: 50%;
	left: -24px;
	margin-top: -12px;
	border: 12px solid transparent;
	border-right: 12px solid #FFF;
	z-index: 2;
}

.headTtl:after {
	content: "";
	position: absolute;
	top: 50%;
	left: -30px;
	margin-top: -14px;
	border: 14px solid transparent;
	border-right: 14px solid #f18b00;
	z-index: 1;
}
/*
 contents
-------------------------------------------------------------*/
.contents{}
.breadNavi{
}
.breadNaviList{
    margin: 16px 0;
    font-size: 1.0rem;
	clear: both;
}
.breadNaviList__item{
    float:left;
}
.breadNaviList__item:after{
    content: "＞";
    display: inline-block;
    margin: 0 2px;
    color: #999;
}
.breadNaviList__item:last-child:after{
    content: "";
}
.breadNaviList__item a{
    color: #999;
    text-decoration: none;
}

/*
 main contents
-------------------------------------------------------------*/
.mainContents{
    float: right;
    width: 728px;
}

.contentsList{
    width: 728px;
    margin-bottom: 32px;
    padding: 24px;
    border: 1px solid #ccc;
    background: #eee;
    box-sizing: border-box;
}
.contentsList__txt{
    margin-bottom: 16px;
    font-size: 2.0rem;
    font-weight: bold;
}
.contentsList__block{
    margin: 0 0 16px 16px;
}
.contentsList__block__item-01{
    margin-bottom: 4px;
}
.contentsList__block__item-02{
    margin: 0 0 4px 24px;
}
.contentsList__block__item-01 a,
.contentsList__block__item-02 a{
    text-decoration: underline;
}
.contentsList__block__item-01 a:hover,
.contentsList__block__item-02 a:hover{
    text-decoration: none;
}

.contentsTtl-h1 {
  position: relative;
  margin-bottom: 24px;
  padding: 1.5rem 1.5rem calc(1.5rem + 10px);
  border: 2px solid #f18b00;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  font-size: 2.4rem;
}

.contentsTtl-h1:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  content: '';
  border-top: 2px solid #f18b00;
  background-image: -webkit-repeating-linear-gradient(135deg, #f18b00, #f18b00 1px, transparent 2px, transparent 5px);
  background-image: repeating-linear-gradient(-45deg, #f18b00, #f18b00 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.contentsTtl-h2{
	position: relative;
	margin-bottom: 24px;
	padding: 8px 12px 8px 48px;
	background: #f18b00;
	border-radius: 50px;
	font-size: 2rem;
	color: #fff;
}
.contentsTtl-h2::before{
	position: absolute;
	top: 50%;
	left: 8px;
	content: "";
	width: 30px;
	height: 30px;
	margin-top: -15px;
	border-radius: 50%;
	background: #fff;
}
.contentsTtl-h3{
    margin-bottom: 16px;
    padding: 8px;
    border-bottom: 4px double #f18b00;
    font-size: 1.8rem;
    font-weight: bold;
	color: #f18b00;
}

.contentsTtl-h4{
    position:relative;
    margin-bottom: 16px;
    padding-left:30px;
	color: #f18b00;
}
.contentsTtl-h4:before{
	position: absolute;
	top: 2px;
	left: 0;
	content: "";
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #f18b00;
}
 
.contentsTtl-h5{
    position: relative;
    margin-bottom: 8px;
    font-size: 1.6rem;
    font-weight: normal;
    display: block;
    padding: 8px 8px 8px 32px;
	font-weight: 600;
}
.contentsTtl-h5:before{
    display: block;
	content: "";
	position: absolute;
	top: 16px;
	left: 0px;
	width: 20px;
	height: 4px;
	border-top: 2px solid #f18b00;
	border-bottom: 2px solid #f18b00;
}
.contentsTxt{
    margin-bottom: 40px;
    font-size: 16px;
    font-size: 1.6;
}
.contentsImgLeft{
    float: left;
    margin: 0 16px 16px 0;
}
.contentsImgRight{
    float: right;
    margin: 0 0 16px 16px;
}
.contentsImgCenter{
    margin: 0 8px 8px 0;
    text-align: center;
}

.osusumeLink{
	position: relative;
	width: 100%;
	border: solid 1px #7cc426;
	margin: 100px 0 40px;
	padding: 16px;
	box-sizing: border-box;
}
.osusumeLink__ttl{
	position: absolute;
	top: -42px;
	left: -1px;
	padding: 8px 32px;
	background: #7cc426;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	color: #fff;
}
.osusumeLinkLeft{
	float: left;
	width: 86%;
	margin-bottom: 24px;
	line-height: 2;
}
.osusumeLinkLeft__txt{
	margin-bottom: 24px;
}
.osusumeLinkLeft__link{
	clear: both;
	margin-top: 24px;
}
.osusumeLinkLeft__link a{
	width: 40%;
}
.osusumeLinkLeft__link a img{
	width: 100%;
}
.osusumeLinkLeft__link a span{
	display: block;
	margin-top: 8px;
}
.osusumeLinkRight{
	float: right;
	width: 12%;
	margin-bottom: 24px;
}
.osusumeLinkLeft__img{
	width: 100%;
}
.osusumeLinkLeft__img img{
	width: 100%;
}

.contentsTbl{
	width: 100%;
	margin-bottom: 40px;
}
.contentsTbl__row{
	border-top: 1px solid #f18b00;
	border-left: 1px solid #f18b00;
}
.contentsTbl__row__head{
	padding: 8px;
	border-bottom: 1px solid #f18b00;
	border-right: 1px solid #f18b00;
	background: #FFC16E;
}
.contentsTbl__row__data{
	padding: 8px;
	border-bottom: 1px solid #f18b00;
	border-right: 1px solid #f18b00;
}

.flowChart{
	margin-bottom: 40px;
}
.flowChart__item{
	margin-bottom: 65px;
	padding: 16px;
	background: #fff;
	border: 1px solid #707070;
	border-radius: 10px;
	position: relative;
}
.flowChart__item--blue{
	background: #b2eaff;
	border: none;
	color: #333;
}
.flowChart__item:before {
    font-family: "Font Awesome 5 Free";
	content: "\f150";
	font-weight: 400;
    position: absolute;
    font-size: 40px;
	margin-left: -20px;
    left: 50%;
    bottom: -65px;
    color: #f18b00;
}
.flowChart__item:last-child{
	margin-bottom: 0;
}
.flowChart__item:last-child:before {
    content:none;
}

.flowChart__item p{
	margin: 0;
}
.flowChart__item__ttl{
	margin: 0 0 8px;
	padding: 0 0 8px;
	border-bottom: dashed 1px #ccc;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
}
.flowChart__item__txt{}

.discBox{
	position: relative;
	margin: 100px 0 40px;
	padding: 8px;
	border: solid #f18b00 1px;
	box-sizing: border-box;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	font-size: 1.6rem;
}
.discBox::before{
	content: "";
	position: absolute;
	top: -51px;
	left: -1px;
	display: inline-block;
	width: 100px;
	height: 50px;
	border-radius: 50% / 100% 100% 0 0;
	background: #f18b00;
}
.discBox::after{
    font-family: "Font Awesome 5 Free";
	content: "\f0eb";
	font-weight: 400;
	position: absolute;
	top: -48px;
	left: 38px;
	color: #fff;
	text-align: center;
	font-size: 3rem;
}
.discBox__ttl{
	padding: 12px;
	border-bottom: dashed 1px #f18b00;

	color: #f18b00;
}
.discBox__data{
	margin: 0;
	padding: 12px;
}

.numberList {
	counter-reset: my-counter;
	list-style: none;
	margin: 0 10px 16px;
	padding: 0;
}
 
.numberList__item {
  margin: 0 0 24px;
  padding-left: 20px;
  position: relative;
}
.numberList__item:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  background: #f18b00;
  color: #fff;
  display: block;
  float: left;
  line-height: 22px;
  margin-left: -30px;
  text-align: center;
  height: 22px;
  width: 22px;
  border-radius: 50%;
}
.numberList__item:last-child {
  margin-bottom: 0;
}

.summaryBox{
	margin: 0 0 40px;
	padding: 24px;
	border: solid 1px #f18b00;
	background: #FFE6C5;
	border-radius: 4px;
    font-size: 16px;
	font-size: 1.6rem;
}
.listCont{
	border: 1px solid #ffd867;
	background: #fff7e0;
	margin-bottom: 24px;
	padding: 16px;
	box-sizing: border-box;
}
.listCont__item{
	position: relative;
	margin: 0 0 12px 20px;
	font-size: 16px;
}
.listCont__item::before{
	position: absolute;
	left: -20px;
    font-family: "Font Awesome 5 Free";
	content: "\f02b";
	font-weight: 600;
	color: #f70;
}
.listCont__item:last-child{
	margin-bottom: 0;
}

.pointList{
	margin-bottom: 40px;
}
.pointList__item{
	position: relative;
	margin: 0 0 8px 20px;
	font-size: 16px;
}
.pointList__item::before{
	position: absolute;
	left: -20px;
    font-family: "Font Awesome 5 Free";
	content: "\f101";
	font-weight: 600;
	color: #f70;
}
.listBox{
	margin-bottom: 40px;
}
.listBox__item{
	position: relative;
	margin: 0 0 12px 20px;
	font-size: 16px;
}
.listBox__item::before{
	position: absolute;
	left: -20px;
    font-family: "Font Awesome 5 Free";
	content: "\f14a";
	font-weight: 600;
	color: #f70;
}

.osusumeBox{
	margin-bottom: 40px;
	padding: 16px;
	border: #f18b00 1px solid;
	border-left: #f18b00 28px solid;
	border-radius: 5px;
}
.osusumeBox__ttl{
	margin-bottom: 16px;
	padding-bottom: 8px;
	border-bottom: #f18b00 2px dashed;
	color:#f18b00;
	font-size: 1.8rem;
}
.osusumeBoxList{}
.osusumeBoxList__item{
	position: relative;
	margin: 0 0 12px 20px;
}
.osusumeBoxList__item::before{
	position: absolute;
	left: -20px;
    font-family: "Font Awesome 5 Free";
	content: "\f0a4";
	font-weight: 600;
	color: #f70;
}
.osusumeBoxList__item:last-child{
	margin-bottom: 0;
}
.osusumeBoxList__item a{
	color: #333;
}

.rankBoxWrap{
	margin-bottom: 40px;
}
.rankBox{
	border: solid #ccc 1px;
	position: relative;
}
.rankBox--no1::before{
	position: absolute;
	content: url("../img/icn_rank01.png");
	left: 16px;
}
.rankBox--no2::before{
	position: absolute;
	content: url("../img/icn_rank02.png");
	left: 16px;
}
.rankBox--no3::before{
	position: absolute;
	content: url("../img/icn_rank03.png");
	left: 16px;
}
.rankBox--no4::before{
	position: absolute;
	content: url("../img/icn_rank04.png");
	left: 16px;
}
.rankBox--no5::before{
	position: absolute;
	content: url("../img/icn_rank05.png");
	left: 16px;
}
.rankBox__ttl{
	background: #eee;
	padding: 16px 16px 16px 120px;
	font-size: 2.4rem;
	font-weight: 600;
}
.rankBoxCont{
	padding: 24px 24px 24px 120px;
}
.rankBoxCont__bnr{
	float: left;
	width: 30%;
}
.rankBoxCont__bnr a img{
	width: 100%;
}
.rankBoxCont__txt{
	float: right;
	width: 65%;
	font-size: 1.4rem;
}
.rankBoxCont__txt__info{
	margin-bottom: 16px;
}
.rankBoxContTbl{
	width: 80%;
	margin: 0 0 40px 120px;
}
.rankBoxContTbl__row{
	border-top: 1px solid #f18b00;
	border-left: 1px solid #f18b00;
}
.rankBoxContTbl__row__head{
	padding: 8px;
	border-bottom: 1px solid #f18b00;
	border-right: 1px solid #f18b00;
	background: #FFC16E;
	font-size: 1.2rem;
	vertical-align: middle;
}
.rankBoxContTbl__row__data{
	padding: 8px;
	border-bottom: 1px solid #f18b00;
	border-right: 1px solid #f18b00;
	font-size: 1.4rem;
	vertical-align: middle;
}
.rankBoxCont__txt__bnr{
	float: right;
	margin: 16px 0;
}
.rankBoxCont__txt__bnr a{
	padding: 16px 40px;
	background: #7cc426;
	color: #fff;
	border-radius: 5px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.affiliate-button a span{
	font-style: normal;
}

/*
 sidebar
-------------------------------------------------------------*/
.side{
    width: 240px;
    float: left;
}
.sideMenu{
    margin-bottom: 24px;
}
.sideMenu__ttl{
	background: #f18b00;
    padding: 16px 8px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	color: #fff;
	text-align: center;
	font-size: 1.8rem;
}
.sideMenu__link{
	padding: 0 8px;
    background: #fff;
	border: 1px solid #f18b00;
}
.sideMenu__link__item{
    border-bottom: #ccc solid 1px;
}
.sideMenu__link__item:last-child{
    border-bottom: none;
}
.sideMenu__link__item a{
    position: relative;
    display: block;
    padding: 8px;
	font-size: 1.4rem;
	color: #333;
}

.wp_rp_footer{
    display: none;
}
.quote{
	margin-bottom: 40px;
	padding: 100px 32px 1px 32px;
	background: url("../img/quote.png") no-repeat 16px 16px #fff4e4;
}

.box-generic{
	margin-bottom: 40px;
}
.comment-list{
	margin-bottom: 40px;
}
.comment{
	margin-bottom: 40px;
	padding: 24px;
	background: #f9f9f9;
}
.comment-author{
	margin-bottom: 16px;
}
#author,#comment{
	padding: 8px;
	border: solid 1px #ccc;
	border-radius: 5px;
}
.avatar{
	margin-right: 12px;
}
.fn{
	font-style:normal;
	line-height: 32px;
}
.says{
	display: none;
}
.comment-meta{
	display: none;
}
.user-comments-grades{
	background: #fff;
}
.comment-reply-title{
	margin-bottom: 32px;
	padding-bottom: 8px;
	border-bottom: solid 2px #f18b00;
}
.logged-in-as{
	margin-bottom: 24px;
	padding: 8px;
	background: #f9f9f9;
	font-size: 1.2rem;
	color: #999;
}
.logged-in-as a{
	color: #999;
}
.comment-form-author{
	width: 100%;
	margin-bottom: 16px;
}
.comment-form-author label{
	display: inline-block;
	width: 20%;
}
.wppr-comment-form-meta{
	position: relative;
	margin-bottom: 16px;
}
.wppr-comment-form-meta label{
	display: block;
	float: left;
}
#wppr-comment-rating-stars .wppr-comment-rating-star{
	position: absolute;
	top: 0;
	left: 145px;
}
#wppr-comment-rating-stars .wppr-comment-rating-star > label:before{
	margin: 0 5px;
    font-size: 1.6rem;
    font-family: dashicons;
    display: inline-block;
    content: "\f155";
}
.comment-form-comment label{
	display: block;

}

.form-submit{
	margin-bottom: 16px;
}
.submit{
	padding: 16px 40px;
	background: #7cc426;
	color: #fff;
	border-radius: 5px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.3);
	border: none;
	transition: .4s;
}
.submit:hover{
	cursor: pointer;
	opacity: 0.7;
}

/*
 footer
-------------------------------------------------------------*/
.foot{
    padding-top: 24px;
    background: #fff4e4;
}
.footContBox{
    width: 1000px;
    margin: 0 auto 24px;
    padding: 16px;
    border: dashed #999 1px;
    background: #fff;
    box-sizing: border-box;
}
.footContBox__txt{
    margin-bottom: 8px;
    color: #999;
    font-size: 12px;
    font-size: 1.2rem;
}
.footContBox__txt:last-child{
    margin-bottom: 0;
}
.footCopy{
    width: 100%;
}
.footCopy__txt{
    width: 1000px;
    margin: 0 auto;
    padding: 4px 0;
    text-align: center;
    color: #fff;
    font-size: 12px;
    font-size: 1.2rem;
}
.footCopy__txt a{
    color: #666;
}
.footCopy__txt a:hover{
}









.pagetop {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 28px;
}
.pagetop a {
    display: block;
    background-color: #f18b00;
    text-align: center;
    color: #fff;
    text-decoration: none;
    padding: 10px;
	border-radius: 4px;
	border: 1px solid #fff;
}
.pagetop a span{
	display: block;
	font-size: 1.2rem;
}
.pagetop a:hover {
    color: #fff;
    text-decoration: none;
    opacity: 0.8;
}
/*---------------------------------------------------------------

調整用CSS

---------------------------------------------------------------*/
.mt0{margin-top: 0; !important}
.mt5{margin-top: 5px; !important}
.mt10{margin-top: 10px; !important}
.mt15{margin-top: 15px; !important}
.mt20{margin-top: 20px; !important}
.mt25{margin-top: 25px; !important}
.mt30{margin-top: 30px; !important}
.mt35{margin-top: 35px; !important}
.mt40{margin-top: 40px; !important}
.mt45{margin-top: 45px; !important}
.mt50{margin-top: 50px; !important}
.mt55{margin-top: 55px; !important}
.mt60{margin-top: 60px; !important}
.mt65{margin-top: 65px; !important}
.mt70{margin-top: 70px; !important}
.mt75{margin-top: 75px; !important}
.mt80{margin-top: 80px; !important}
.mt85{margin-top: 85px; !important}
.mt90{margin-top: 90px; !important}
.mt95{margin-top: 95px; !important}
.mt100{margin-top: 100px; !important}

.mb0{margin-bottom: 0; !important}
.mb5{margin-bottom: 5px; !important}
.mb10{margin-bottom: 10px; !important}
.mb15{margin-bottom: 15px; !important}
.mb20{margin-bottom: 20px; !important}
.mb25{margin-bottom: 25px; !important}
.mb30{margin-bottom: 30px; !important}
.mb35{margin-bottom: 35px; !important}
.mb40{margin-bottom: 40px; !important}
.mb45{margin-bottom: 45px; !important}
.mb50{margin-bottom: 50px; !important}
.mb55{margin-bottom: 55px; !important}
.mb60{margin-bottom: 60px; !important}
.mb65{margin-bottom: 65px; !important}
.mb70{margin-bottom: 70px; !important}
.mb75{margin-bottom: 75px; !important}
.mb80{margin-bottom: 80px; !important}
.mb85{margin-bottom: 85px; !important}
.mb90{margin-bottom: 90px; !important}
.mb95{margin-bottom: 95px; !important}
.mb100{margin-bottom: 100px; !important}

.fs10{font-size: 1.0em; !important}
.fs12{font-size: 1.2em; !important}
.fs13{font-size: 1.3em; !important}
.fs14{font-size: 1.4em; !important}
.fs15{font-size: 1.5em; !important}
.fs16{font-size: 1.6em; !important}
.fs17{font-size: 1.7em; !important}
.fs18{font-size: 1.8em; !important}
.fs19{font-size: 1.9em; !important}
.fs20{font-size: 2.0em; !important}
.fs21{font-size: 2.1em; !important}
.fs22{font-size: 2.2em; !important}
.fs23{font-size: 2.3em; !important}
.fs24{font-size: 2.4em; !important}
.fs25{font-size: 2.5em; !important}
.fs26{font-size: 2.6em; !important}
.fs27{font-size: 2.7em; !important}
.fs28{font-size: 2.8em; !important}
.fs29{font-size: 2.9em; !important}
.fs30{font-size: 3.0em; !important}

.txtred{
	color:#FF0000;
	font-weight:bold;
}
.txtorange{
	color:#FF6600;
	font-weight:bold;
}
.txtgreen{
	color:#008000;
	font-weight:bold;
}
.txtblue{
	color:#167FA6;
	font-weight:bold;
}
.txtblack{
	font-weight: bold;
}
.txtred120{
	font-weight: bold;
	color: #ff0000;
	font-size: 120%;
}
.txtorange120{
	font-weight: bold;
	color: #FF6900;
	font-size: 120%;
}
.txtgreen120{
	font-weight: bold;
	color: #409526;
	font-size: 120%;
}
.txtblue120{
	color:#167FA6;
	font-weight:bold;
	font-size: 120%;
}
.txtblack120{
	font-weight: bold;
	font-size: 120%;
}
.markerYellow{
	font-weight: bold;
	background: linear-gradient(transparent 60%, #ffff66 60%);
}
.markerGreen{
	font-weight: bold;
	background: linear-gradient(transparent 60%, #b2eaff 60%);
}
.markerRed{
	font-weight: bold;
	background: linear-gradient(transparent 60%, #ffa2a2 60%);
}

.red{ color: #ff0000!important; }
.blue{ color: #167FA6!important; }
.green{ color: #409526!important; }

.b{ font-weight: bold!important; }
.normal{ font-weight: normal!important; }

.imgLeft{
	display: block;
	float: left;
	margin: 0 16px 8px 0;
	width: 30%;
}
.imgCenter{
	display: block;
	margin: 8px auto;
	width: 100%;
}
.imgRight{
	display: block;
	float: right;
	margin: 0 0 8px 16px;
	width: 30%;
}

.markerAnime{
	transition: all 3s linear;
}
.markerAnime--bold{
	font-weight: bold;
}
.markerAnime--yellow{
	background: -webkit-linear-gradient(left, transparent 50%, #ffff66 50%);
	background: linear-gradient(left, transparent 50%, #ffff66 50%);
	background-repeat: repeat-x;
	background-size: 200% .8em;
	background-position: 0 .5em;
}
.markerAnime--red {
	background: -webkit-linear-gradient(left, transparent 50%, #ffa2a2 50%);
	background: linear-gradient(left, transparent 50%, #ffa2a2 50%);
	background-repeat: repeat-x;
	background-size: 200% .8em;
	background-position: 0 .5em;
}
.markerAnime--blue {
	background: -webkit-linear-gradient(left, transparent 50%, #1e77be 50%);
	background: linear-gradient(left, transparent 50%, #1e77be 50%);
	background-repeat: repeat-x;
	background-size: 200% .8em;
	background-position: 0 .5em;
}
.markerAnime.looking{
	background-position: -100% .5em;
}


/*
 other
-------------------------------------------------------------*/
/* clearfix */
.clearfix:after{
	content: " ";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix{
	zoom: 1;
}

.txtRed{
    color:#FF0000;
    font-weight:bold;
}
.txtOrange{
    color:#FF6600;
    font-weight:bold;
}
.txtBlue{
    color:#167FA6;
    font-weight:bold;
}





/* sp */
@media screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }

body {
    min-width: 100%;
}

/*
 pankuzu
-------------------------------------------------------------*/
.outDisc__txt{
    width: 100%;
}

/*
 container
-------------------------------------------------------------*/
.container{
    width: 100%;
}

/*
 header
-------------------------------------------------------------*/
.l-header{
	padding: 0 16px;
	box-sizing: border-box;
}
.headTtlImg{
	float: left;
	width: 28%;
}
.headTtlImg img{
	width: 100%;
}
.headTtl {
	float: right;
	width: 70%;
	padding: 16px;
}
.headTtl:before {
	content: "";
	position: absolute;
	top: 30%;
	left: -24px;
	margin-top: -12px;
	border: 12px solid transparent;
	border-right: 12px solid #FFF;
	z-index: 2;
}

.headTtl:after {
	content: "";
	position: absolute;
	top: 30%;
	left: -30px;
	margin-top: -14px;
	border: 14px solid transparent;
	border-right: 14px solid #f18b00;
	z-index: 1;
}

/*
 main contents
-------------------------------------------------------------*/
.mainContents{
    float: none;
    width: 100%;
	padding: 0 16px;
	box-sizing: border-box;
}
.contentsList{
    width: 100%;
}
.osusumeLinkLeft{
	width: 75%;
}
.osusumeLinkRight{
	width: 23%;
}
.rankBoxCont{
	padding: 50px 24px 24px;
}
.rankBoxContTbl{
	width: 90%;
	margin: 0 auto 40px;
}
.rankBox__ttl {
    padding: 8px 16px 8px 120px;
    font-size: 2.4rem;
    font-weight: 600;
	line-height: 1.4;
}
.quote{
	margin-bottom: 40px;
	padding: 100px 32px 1px 32px;
	background: url("../img/quote.png") no-repeat 16px 16px #fff4e4;
}
.contentsTtl-h1 {
    position: relative;
    margin-bottom: 24px;
    padding: 1.5rem 1.5rem calc(1.5rem + 10px);
    border: 2px solid #f18b00;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    font-size: 2rem;
	line-height: 1.2;
}

/*
 sidebar
-------------------------------------------------------------*/
.side{
    width: 100%;
    float: none;
	padding: 0 16px;
	box-sizing: border-box;
}


/*
 footer
-------------------------------------------------------------*/
.foot{
    padding: 24px;
    background: #fff4e4;
}
.footContBox{
    width: 100%;
}
.footCopy{
    width: 100%;
}
.footCopy__txt{
    width: 100%;
}

#wppr-comment-rating-stars .wppr-comment-rating-star {
    left: 90px;
}
}
/* sp */
@media screen and (max-width: 320px) {
.outDisc{
	padding: 0 8px;
}
.l-header{
	padding: 0;
}
.headTtlImg{
	display: none;
}
.headTtl {
	display: block;
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
	background: #f18b00;
	border-radius: 0;
}
.headTtl a {
	display: block;
	color: #fff;
	padding:16px;
}
.headTtl:before,.headTtl:after {
	content:none;
}
}