@charset "utf-8";
/* CSS Document */

.page-header{
	padding-top: 10px;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid #DDD;
}
.campaign__control .block-categories-list__item .fa{margin-left:5px;}
.detailText{
	font-size:1.5rem;
	text-align:left;
}
.campaign__control .block-categories-list__title{
	font-size:1.5rem;
	font-weight:500;
}
.mainimg img{
  max-width:100%;
  height:auto;
}
.mainimg + p span.sup{
  font-size:10px;
  vertical-align: super;
}
.mainimg + p,.attention{
  font-size:16px;
  text-align:center;
  margin-top:1.3rem;
  color:#333;
  font-weight:bold;
}
.attention{
	color:#D80000;
	padding:16px;
	margin-top:20px;
	border:2px solid #D80000;
}
.mainimg + p + p.mainImgSubInfo{
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    margin-top: 1.2em;
}
.mainimg + p span.comment{
  font-size: 10px;
  float: right;
  padding-right: 1%;
  margin-top: 10px;
  font-weight: normal;
  text-align: right;
}
.mainimg + p + p.mainImgSubInfo span.comment{
  font-size: 10px;
  margin-top: 10px;
  font-weight: normal;
    display: block;
}

.mainimg + p + p.mainImgSubInfo span.comment .comment-xs {
    display: none;
}

@media (max-width: 768px){
  .mainimg + p,.attention,.mainimg .mainImgSubInfo{font-size:14px; text-align:left;}
  .campaign__control .block-categories-list__item {
    display: inline-block;
    margin-right: 0;
    padding-left:10px;
  }
	.attention{
		padding:7px;
	}
.mainimg + p + p.mainImgSubInfo,
.mainimg + p span.comment,
.mainimg + p + p.mainImgSubInfo span.comment{
  text-align: left;
}   
.mainimg + p + p.mainImgSubInfo span.comment .comment-xs {
    display: block;
}

}
@media (max-width: 420px){
  .mainimg + p{font-size:3.73333vw}
	.attention{
		margin-top:10px;
		font-size:3.2vw;
	}
}


/* 特集コンテンツ下部のブランドロゴ表示 */
/*---------------------------------------------------*/
#pickup-makerBrand{
	width:100%;
	margin:0 auto 50px;
}
#pickup-makerBrand .headline-text{padding:0 10px; margin-top:50px; text-align: center;}
#pickup-makerBrand .inner{
	overflow-x:scroll;
	white-space: nowrap;
	-webkit-overflow-scrolling:touch;
	padding-bottom:5px;
}
#pickup-makerBrand ul li{
	width:100px;
	display:inline-block;
	margin:6px 10px 6px 0;
	text-align:center;
	border:1px solid #DDD;
}
#pickup-makerBrand ul li a img{
	width:100%;
	height:auto;
}

#pickup-makerBrand ul li a:hover{
	opacity:0.5;
}

@media screen and (min-width: 686px){
	#pickup-makerBrand .inner{
		width:100%;
		overflow-x:hidden;
		white-space:normal;
		margin-top:-10px;
	}
	#pickup-makerBrand ul{
		width:100%;
		display:flex;
		flex-wrap:wrap;
	}
	#pickup-makerBrand ul li{
		width:calc(16.666666666% - 2.5%);
		display:block;
		margin:10px 1.25%;
		text-align:center;
		border:1px solid #DDD;
	}
}

@media screen and (min-width: 1500px){
	#pickup-makerBrand{
		width:1200px;
		margin:0 auto 50px;
	}
}

/* スタッフスタートバナー表示 */
/*---------------------------------------------------*/
#tenpanBnr{
	width:100%;
	margin:0 auto 50px;
    text-align: center;
}
#tenpanBnr .sp{display: none;}
#tenpanBnr h2{text-align: center;}
#tenpanBnr img{ width:100%; max-width: 700px;}
#tenpanBnr a:hover{opacity: 0.7;}
#tenpanBnr h2 span.pop{
    position: relative;
    display: inline-block;
    padding: 0 20px;
    /*margin-bottom: 36px;*/
    color:#111;
    font-size: 23px;
}

@media (max-width: 767px){
    #tenpanBnr .sp{display: block;}
    #tenpanBnr h2{
        font-size:18px;
        text-align: center;
    }
    
    #tenpanBnr h2 span.pop {
    position: relative;
    display: inline-block;
    padding: 0 30px;
    /* margin-bottom: 36px; */
    color: #111;
    font-size: 18px;
    line-height: 1.2em;
}
}

 
#tenpanBnr h2 span.pop:before {
  position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 3px;
    height: 100%;
    background: #111;
    border-radius: 3px;
    transform: rotate(-25deg);
}
#tenpanBnr h2 span.pop:after {
  position: absolute;
    content: "";
    right: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: #111;
    border-radius: 3px;
    transform: rotate(25deg);
}
