@charset "utf-8";

#influencers {
	position: relative;
	padding-top: 160px;
	background: url(/https/ramen.walkerplus.com/influencer/img/influencers_bg.jpg) repeat center;
	background-size: 100%;
	margin: 0;
	font-family: 'Kiwi Maru', serif;
	display: none;
}
#influencers a,#influencers a:hover{
	transition: all .3s;
	word-wrap: break-word;
}
#influencers img{
	max-width: 100%;
}
#influencers .content-box{
	max-width: 1100px;
	margin: 0 auto;
	box-sizing: border-box;
}
#influencers .content-box .content-inner{
	max-width: 1000px;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 0 25px;
	width: 100%;
}
#influencers header{
	/* height: 90px; */
	height: 160px;
	padding: 15px 15px 5px;
	box-sizing: border-box;
	margin: 0 auto;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	background-color: #fff;
	z-index: 100;
	display: flex;
	align-items: center;
}
#influencers header img{
	/* max-height: 75px; */
	max-height: 120px;
	width: auto;
}
#influencers header a:hover{
	opacity: .6;
}
#influencers header .content-box .content-inner{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	box-sizing: border-box;
	padding: 0 10px;
}
/* #influencers header  .content-inner >a{
	width: 230px;
} */
#influencers header .logo-area{
	width: 200px;
}
#influencers header .logo-area a{
	display: block;
}
#influencers header .logo-area a:nth-of-type(2){
	margin-top: 10px;
}
#influencers header .ban-area{
	/* width: calc(100% - 460px); */
	width: calc(100% - 220px);
	box-sizing: border-box;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: nowrap;
	box-sizing: border-box;
}
#influencers header .ban-area > a,#influencers header .ban-area ul{
	display: block;
	box-sizing: border-box;
	/* max-width: 300px; */
	margin: 0 10px;
	text-align: right;
}
#influencers header .ban-area .slide-items{
	list-style: none;
	width: 100%;
	height: 100%;
	margin: 0;
}
#influencers header .ban-area ul li{
	width: 100%;
	object-fit: cover;
	margin: 0;
	padding: 0;
}
#influencers header .ban-area ul li a {
	/* width: 100%; */
	display: inline-block;
	vertical-align: bottom;
	object-fit: cover;
	margin: 0;
	padding: 0;

}
#influencers header .ban-area ul li a img{
	vertical-align: bottom;
	object-fit: cover;

}

#influencers main{
	background: url(/https/ramen.walkerplus.com/influencer/img/mainbg_pc.jpg) no-repeat center;
	background-size: cover;
	height: 360px;
}
#influencers main .content-box,#influencers main .content-inner{
	position: relative;
	height: 100%;
	width: 100%;
	max-width: 1000px;
}
#influencers main .content-inner #influencers_logo{
	position: absolute;
	display: block;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 100%;
	max-width: 500px;
	display: none;
}

#influencers .contents .lead-txt{
 max-width: 560px;
 display: block;
 margin: 60px auto 0;
 font-size: 16px;
}

#influencers .contents ul{
	margin-top: 40px;
	display: block;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	box-sizing: border-box;
  position: relative;
}
#influencers .contents ul::after{
	content: '';
	width: 31%;
	display: block;
}
#influencers .contents ul li{
	width: 31%;
	display: block;
	background-color: #fff;
	margin-top: 30px;
	box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.3);
	padding: 0;
	box-sizing: border-box;
	border-radius: 8px;
	overflow: hidden;
  position: relative;
	 transition: all .5s;
}
#influencers .contents ul li:hover{
	box-shadow: 0px 0px 15px -2px rgba(0,0,0,0);
}
#influencers .contents ul li::after{
	content: '';
	width: 80px;
	height: 29px;
	background: url(/https/ramen.walkerplus.com/influencer/img/obj01.png) no-repeat center;
	background-size: contain;
	position: absolute;
	right: 10px;
	bottom: 5px;
}

#influencers .su_button_circle{
  background-color: red;
  border-radius: 1000px;
  position: absolute;
  left:0;
  top:0;
  width: 0px;
  height: 0px;
  margin-left: 0px;
  margin-top: 0px;
  pointer-events: none;
  /*animation-timing-function: ease-in-out; */
}
#influencers .button_su_inner{
	display: inline-block;
	background: #fff;
	width: 100%;
	transition: 400ms;
	z-index: 100000;
	padding: 14px;
	box-sizing: border-box;
}
#influencers .contents ul li a{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: nowrap;
	box-sizing: border-box;
	height: 100%;
	text-decoration: none;
	position:relative;
	z-index: 99;

}
#influencers .contents ul li a:hover{
	opacity: 1;
}
.explode-circle {
	animation: explode 0.4s forwards;

}

.desplode-circle{
	animation: desplode 0.4s forwards;
}
@keyframes explode {
  0% {
    width: 0px;
    height: 0px;
    margin-left: 0px;
    margin-top: 0px;
    background-color: rgba(116, 141, 202, 0.2);
  }
  100% {
    width: 600px;
    height: 600px;
    margin-left: -300px;
    margin-top: -300px;
    background-color: rgba(255, 229, 58, 1);
  }
}

@keyframes desplode {
  0% {
    width: 600px;
    height: 600px;
    margin-left: -300px;
    margin-top: -300px;
    background-color: rgba(255, 229, 63, 0.8);
  }
  100% {
    width: 0px;
    height: 0px;
    margin-left: 0px;
    margin-top: 0px;
    background-color: rgba(236, 173, 212, 0.4);
  }
}
#influencers .contents ul li a  img{
	width: 100px;
	height: 100px;
	object-fit: cover;
}
#influencers .contents ul li a .btn-txt{ 
	width: calc(100% - 115px);
	text-align: left;
}
#influencers .contents ul li a .btn-txt .btn-name{
	font-size: 22px;
	color: #000;
	line-height: 1.1;
	transition: all .4s;
}
#influencers .contents ul li:hover a .btn-txt .btn-name{
	color: #0041a3;
}
#influencers .contents ul li a .btn-txt .btn-atr{
	font-size: 15px;
	color: #646464;
	margin-top: 7px;
	line-height: 1.1;
} 

/*===========記事===========*/
#influencers .influencers-entry{
	position: relative;
	padding: 42px 0 0;
}
#influencers .influencers-entry::before,#influencers .influencers-entry::after{
	content: '';
	width: 100%;
	height: 42px;
	background: url(/https/ramen.walkerplus.com/influencer/img/entry-line.png) repeat center;
	background-size: contain;
	position: absolute;
	display: block;
}
#influencers .influencers-entry::before{
	top: 0;
	left: 0;
}
#influencers .influencers-entry::after{
	bottom: -80px;
	left: 0;
}
#influencers .influencers-entry h1{
	width: 100%;
	max-width: 210px;
	margin: 20px auto;
}
#influencers .influencers-entry .gridbox{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	box-sizing: border-box;
}
#influencers .influencers-entry .gridbox > *{
	width: 32%!important;
	z-index: 99;
	position: relative;
	display: block;
	margin-bottom: 15px;
}
#influencers .influencers-entry .gridbox::after{
	content: '';
	display: block;
	width: 32%;
}
#influencers .influencers-entry .youtube-box {
	width: 100%;
  aspect-ratio: 16 / 9;
}
#influencers .influencers-entry .youtube-box iframe {
  width: 100%;
  height: 100%;
}

#influencers .influencers-entry .inf-plofile .inf-img{
	width: 100%;
	height: auto;
	max-width: 580px;
	object-fit: cover;
	margin: 0 auto;
	display: block;
}
#influencers .influencers-entry .inf-plofile h2{
	font-size: 50px;
	margin: 20px auto 0;
	position: relative;
	padding: 0 80px;
	box-sizing: border-box;
	color: #000;
	display: inline-block;
	font-weight: 500;
}
#influencers .influencers-entry .inf-plofile h2::before,#influencers .influencers-entry .inf-plofile h2::after{
	content: '';
	width: 80px;
	height: 29px;
	display: block;
	background: url(/https/ramen.walkerplus.com/influencer/img/obj01.png) no-repeat center bottom;
	background-size: contain;
	position: absolute;
}
#influencers .influencers-entry .inf-plofile h2::before{
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
#influencers .influencers-entry .inf-plofile h2::after{
	top:50%;
	bottom: auto;
	left: auto;
	right: 0;
	transform:  scale(-1, 1) translateY(-50%);
}
#influencers .influencers-entry .inf-plofile .entry-atr{
	font-size: 28px;
	color: #4f4f4f;
	margin: 10px auto;
	display: block;
	text-align: center;
}
#influencers .influencers-entry .inf-plofile .prf-contents{
	display: block;
	width: 100%;
	max-width: 750px;
	margin: 30px auto ;
	background-color: #fff;
	padding: 25px;
	box-sizing: border-box;
}
#influencers .influencers-entry .inf-plofile .prf-contents .prf-contents_inner{
	display: block;
	padding-bottom: 20px;
	border-bottom: 2px solid #f0f0f0;
	margin-top: 20px;
	text-align: left;
}
#influencers .influencers-entry .inf-plofile .prf-contents .prf-contents_inner:first-child{
	margin-top: 0;
}
#influencers .influencers-entry .inf-plofile .prf-contents .prf-contents_inner:last-of-type{
	border: none;
	padding-bottom: 0;
}
#influencers .influencers-entry .inf-plofile .prf-contents .prf-contents_inner h3{
	background: none;
	color: #000;
	font-size: 26px;
	padding-left: 12px;
	box-sizing: border-box;
	display: block;
	position: relative;
	margin: 0 0 15px;
}
#influencers .influencers-entry .inf-plofile .prf-contents .prf-contents_inner h3::before{
	content: '';
	width: 3px;
	height: 100%;
	display: inline-block;
	border-radius: 100px;
	background-color: #f68989;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

#influencers .influencers-entry .inf-plofile .prf-contents .prf-contents_inner.collabo .grid-inner a{
	color: #02a5d4;
	font-size: 14px;
	margin: 7px 0 0;
	display: inline-block;
}
#influencers .influencers-entry .inf-plofile .prf-contents .prf-contents_inner.collabo .grid-inner a::before{
	content: '▶︎';
	color: #02a5d4;
	font-size: 10px;
	margin-top: -5px;
	display: inline-block;
}
#influencers .influencers-entry .inf-plofile .prf-contents .prf-contents_inner ul.prf-link li{
	font-size: 18px;
	color: #1591b4;
	padding-left: 20px;
	position: relative;
	display: block;
	margin-bottom: 10px;
	line-height: 1.3;
}
#influencers .influencers-entry .inf-plofile .prf-contents .prf-contents_inner ul.prf-link li::before{
	content: '・';
	position: absolute;
	top: 0;
	left: 0;
}
#influencers .influencers-entry .inf-plofile .prf-contents .prf-contents_inner ul.prf-link li a{
	text-decoration: none;
	color: #1591b4;
}
.twitter-timeline iframe{
	width: 100%!important;
}
#influencers .influencers-entry .prf-sns  .gridbox > *{
	width: 47%!important;
}
#influencers .influencers-entry .prf-sns .gridbox .grid-inner >*{
	font-size: 17px;
	margin: 5px 0;
}
#influencers .influencers-entry .prf-sns .gridbox .grid-inner > img{
	float: left;
}
#influencers .influencers-entry .prf-sns .gridbox .grid-inner > a{
	font-size: 17px;
	margin: 5px 0;
	text-decoration: none;
	color: #02a5d4;
	display: block;
	float: inherit;
	line-height: 1.2;
}
#influencers .snsblock{
	display: block;
	position: fixed;
	bottom: 10px;
	right: 15px;
	text-align: center;
	z-index: 999;
}
#influencers .snsblock a{
	display: block;
	max-width: 35px;
	margin: 10px auto;
	transition: all .4s;
}
#influencers .snsblock a:hover{
	opacity: 1;
	max-width: 50px;
	transition: all .4s;
}
#influencers .snsblock a img{
	object-fit: contain;
	width: 100%;
}


/*タブレット*/
@media only screen and (max-width:1024px){
	/* #influencers {
		padding-top: 70px;
	}
	#influencers header{
		height: 70px;
		padding: 10px 0;
	}
	#influencers header img{
		max-height: 50px;
	}
	*/
	#influencers header  .content-inner >a{
		width: 120px;
	}
	#influencers header .ban-area{
		width: calc(100% - 260px);
	}
	/* #influencers header .ban-area a,#influencers header .ban-area ul{
		max-width: 200px;
	}
	#influencers header .ban-area .slide-items{
		width: 50%;
	} 

	#influencers .content-inner{
		width: 87%;
	} */
	#influencers main{
	height: 330px;
}
#influencers main .content-box,#influencers main .content-inner{
	width: 96%;
}
#influencers main .content-inner #influencers_logo{
	max-width: 400px;
}
#influencers .contents .lead-txt{
	margin: 30px auto 0;
	font-size: 15px;
 }
 
 #influencers .contents ul{
	 margin-top: 20px;
 }
 #influencers .contents ul li{
	 margin-top: 25px;
	 border-radius: 6px;
 }
 #influencers .contents ul li::after{
	 content: '';
	 width: 70px;
	 height: 22px;
	 right: 5px;
 }
 
 #influencers .button_su_inner{
	 padding: 12px;
 }
 #influencers .contents ul li a  img{
	width: 80px;
	height: 80px;
	}
	#influencers .contents ul li a .btn-txt{ 
		width: calc(100% - 95px);
	}
	#influencers .contents ul li a .btn-txt .btn-name{
		font-size: 18px;
	}
	#influencers .contents ul li a .btn-txt .btn-atr{
		font-size: 14px;
		margin-top: 5px;
	}

	/*===========記事===========*/
	#influencers .influencers-entry{
		padding: 30px 0 0
		;
	}
	#influencers .influencers-entry::before,#influencers .influencers-entry::after{
		height: 30px;
	}
	#influencers .influencers-entry h1{
		margin: 15px auto;
	}
	
	#influencers .influencers-entry .inf-plofile .inf-img{
		max-width: 400px;
	}
	#influencers .influencers-entry .inf-plofile h2{
		font-size: 30px;
		margin: 15px auto 0;
		padding: 0 50px;
	}
	#influencers .influencers-entry .inf-plofile h2::before,#influencers .influencers-entry .inf-plofile h2::after{
		width: 50px;
		height: 20px;
	}
	#influencers .influencers-entry .inf-plofile .entry-atr{
		font-size: 20px;
		margin: 5px auto;
		line-height: 1.2;
	}
	#influencers .influencers-entry .inf-plofile .prf-contents{
		margin: 20px auto ;
		padding: 20px;
	}
	#influencers .influencers-entry .inf-plofile .prf-contents .prf-contents_inner{
		padding-bottom: 15px;
		margin-top: 15px;
	}
	#influencers .influencers-entry .inf-plofile .prf-contents .prf-contents_inner h3{
		font-size: 20px;
		padding-left: 10px;
		margin: 0 0 10px;
	}
	#influencers .influencers-entry .inf-plofile .prf-contents .prf-contents_inner.collabo .grid-inner a{
		font-size: 13px;
		line-height: 1.4;
	}
	#influencers .influencers-entry .inf-plofile .prf-contents .prf-contents_inner.collabo .grid-inner a::before{
		font-size: 10px;
		margin-top: -3px;
	}
	#influencers .influencers-entry .inf-plofile .prf-contents .prf-contents_inner ul.prf-link li{
		font-size: 16px;
		padding-left: 16px;
	}
}
@media only screen and (max-width:750px){
	#influencers .contents ul li{
		width: 48%;
	}
	#influencers .contents ul ::after{
		width: 48%;
	}
	#influencers .influencers-entry .gridbox > *{
		width: 47%!important;
	}
	#influencers .influencers-entry .gridbox::after{
		width: 47%;
	}
}

/*スマートフォン*/
@media only screen and (max-width:599px){
	#influencers {
		padding-top: 100px;
	}
	#influencers header{
		height: 100px;
	}
	#influencers header img {
    /* max-height: 75px; */
		max-height: 90px;
	}
	#influencers header  .content-inner >a{
		width: 25%;
		max-height: 30px;
	}
	#influencers header .logo-area{
		width: 30%;
	}
	#influencers header .ban-area{
		width: 65%;
	}
	#influencers header .logo-area img{
		max-height: 40px;
	}
	#influencers header .ban-area a,#influencers header .ban-area ul{
		width: auto;
		margin: 0 5px;
		max-height: 90px;
	}
	#influencers header .ban-area a img{
		max-height: 90px;
	}
	#influencers .content-inner{
		width: 90%;
	}
	#influencers main{
		height: 300px;
	/* height: 0;
	padding: 28% 0; */
	background: url(/https/ramen.walkerplus.com/influencer/img/mainbg_sp.jpg) no-repeat center;
	background-size: cover;
	}
	#influencers main .content-box,#influencers main .content-inner{
		width: 96%;
	}
	#influencers main .content-inner #influencers_logo{
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
	}
	#influencers .contents .lead-txt{
		margin: 20px auto 0;
	}
	#influencers .contents ul{
		margin-top: 10px;
	}
	#influencers .contents ul li{
		margin-top: 10px;
		border-radius: 5px;
	}
	#influencers .contents ul li::after{
		width: 50px;
		height: 17px;
	}
	
	#influencers .button_su_inner{
		padding: 10px;
	}
	#influencers .contents ul li a  img{
		width: 60px;
		height:60px;
		}
		#influencers .contents ul li a .btn-txt{ 
			width: calc(100% - 70px);
			font-size: 15px;
			line-height: 1.3;
		}
		#influencers .contents ul li a .btn-txt .btn-name{
			font-size: 16px;
		}
		#influencers .contents ul li a .btn-txt .btn-atr{
			font-size: 13px;
		}
		#influencers .influencers-entry .prf-sns  .gridbox > *{
			width: 100%!important;
		}
}

@media only screen and (max-width:420px){
	#influencers .contents ul{
		display: block;
	}
	#influencers .contents ul li{
		width: 100%;
		margin-top: 17px;
	}
	#influencers .contents ul ::after{
		content: none;
	}
	#influencers .contents ul li a  img{
		width: 70px;
		height:70px;
		}
		#influencers .contents ul li a .btn-txt{ 
			width: calc(100% - 80px);
		}
		#influencers .influencers-entry .gridbox{
			display: block;
		}
		#influencers .influencers-entry .gridbox > *{
			width: 100%!important;
		}
		#influencers .influencers-entry .gridbox::after{
			content: none;
		}
		#influencers .influencers-entry h1 {
			max-width: 140px;
			margin: 10px auto;
	}
		#influencers .influencers-entry .inf-plofile .inf-img{
			max-width: 280px;
		}
		#influencers .influencers-entry .inf-plofile h2{
			font-size: 20px;
		}
		#influencers .influencers-entry .inf-plofile h2::before,#influencers .influencers-entry .inf-plofile h2::after{
			width: 60px;
			height: 14px;
		}
		#influencers .influencers-entry .inf-plofile .entry-atr{
			font-size: 18px;
		}
		#influencers .influencers-entry .inf-plofile .prf-contents .prf-contents_inner h3 {
			font-size: 16px;
			margin: 0 0 6px;
	}
	#influencers .influencers-entry .inf-plofile .prf-contents .prf-contents_inner.collabo .grid-inner a {
		margin: 5px 0 0;
	}
}