/***********************
************************

Service page

************************
************************/



/* ===================================
common
=================================== */ 

/* section title
------------------------ */
.service-section{
	margin-top: 160px;
}
.service-title-wrap{
	height: 300px;
}
.service-title {
	max-width: 1126px;
	height: 300px;
	margin: 0 auto;
	align-items: center;
	display: flex;
}
.service-title-wrap h1{
	font-family: var(--font-family--en);
	color: #FFFFFF;
	font-size: 420%;
	font-weight: 300;
	text-shadow: 0 0 10px var(--text-color);
	line-height: 1;
}

/* ===================================
catchcopy & important
=================================== */ 

/* catchcopy
------------------------ */
.catchcopy h2{
	font-size: 1.5em;
	letter-spacing: .15em;
	line-height: 2em;
}
.catchcopy-text{
	margin-top: 3em;
}
.catchcopy p + p{
	margin-top: 1rem;
}

/* important
------------------------ */
.important{
	max-width: 1126px;
	margin-top: 120px;
	text-align: center;
}
.important h2{
	font-size: inherit;
}
.important-list{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 60px;
}
.important-list-item{
	flex-basis: calc((100% / 3) - 2%);
	padding-top: calc((100% / 3) - 2%);
	position: relative;
	border: 0.5px solid var(--text-color);
	border-radius: 50%;
}
.important-list-item::before{
	content: '';
	background-color: var(--main-color);
	width: 90%;
	height: 90%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	filter: blur(55px);
}
.important-list-item p{
	font-family: var(--font-family--en);
	font-size: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* ===================================
sns marketing
=================================== */ 

#snsMarketing .service-title-wrap{
	background: url(../images/service/titleImg-snsMarketing.jpg) left 0 center / 140% no-repeat;
}
.service-detail{
	margin-top: 90px;
}

/* prosess
------------------------ */
.prosess{
	margin-top: 60px;
}
.prosess-list{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.prosess-list li{
	width: calc((100% / 5) - 2%);
	padding-top: calc((100% / 5) - 2%);
	border: 0.5px solid var(--text-color);
	position: relative;
}
.prosess-list li::before{
	content: '';
	position: absolute;
	top: 1em;
	left: 1em;
	line-height: 1;
	font-family: var(--font-family--en);
}
.prosess-list li:nth-child(1)::before{
	content: '01';
}
.prosess-list li:nth-child(2)::before{
	content: '02';
}
.prosess-list li:nth-child(3)::before{
	content: '03';
}
.prosess-list li:nth-child(4)::before{
	content: '04';
}
.prosess-list li:nth-child(5)::before{
	content: '05';
}
.prosess-list-group{
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.prosess-list-group img{
	width: 48px;
}
.prosess-list-group p{
	white-space: nowrap;
}

/* works
------------------------ */


/* ===================================
media and commerce
=================================== */ 
#media_commerce .service-title-wrap{
	background: url(../images/service/titleImg-mediaAndCommerce.jpg) top 75% center / cover no-repeat;
}
.service-m_c-detail{
	margin-top: 30px;
	text-align: center;
}
.service-m_c-detail .logo{
	width: 300px;
	margin: 0 auto;
}
.service-m_c-detail .desc p + p{
	margin-top: 1em;
}
.social-list{
	display: flex;
	justify-content: space-between;
	margin-top: 120px;
}
.social-list li{
	width: calc(100% / 3 - 30px);
}
.social-list li:nth-child(2){
	margin-top: 30px;
}
.social-list li:nth-child(3){
	margin-top: 60px;
}
.social-list-img{
	position: relative;
}
.social-list-img::before{
	content: '';
	background-color: #fff;
	width: 70px;
	height: 70px;
	position: absolute;
	right: 0;
	border-bottom-left-radius: 100%;
	opacity: .7;
	transition: all .5s;
}
.social-list-img::after{
	content: '';
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 20px;
	height: 20px;
	position: absolute;
	right: 20px;
	top: 17px;
	transition: all .5s;
}
.social-list li:nth-child(1) .social-list-img::after{
	background-image: url(../images/service/service-online-img.svg);
}
.social-list li:nth-child(2) .social-list-img::after{
	background-image: url(../images/service/service-instagram-img.svg);
}
.social-list li:nth-child(3) .social-list-img::after{
	background-image: url(../images/service/service-tiktok-img.svg);
}
.social-list-img:hover::before{
	width: 80px;
  height: 80px;
}
.social-list-img:hover::after{
	width: 27px;
	height: 27px;
}
.social-list .button-wrap{
	text-align: left;
	margin-top: 1em;
}





/* **********************************************************
**********************************************************

responsive

**********************************************************
********************************************************** */

/* タブレット */
@media screen and (max-width: 768px){

	.service-section{
		margin-top: 120px;
	}
	.service-title{
		margin-left: 5vw;
		margin-right: 5vw;
	}

	/* catchcopy
	------------------------ */
	.catchcopy h2{
		font-size: 2rem;
	}
	.catchcopy br,
	.service-detail br,
	.service-m_c-detail br{
		display: none;
	}

	.prosess-list{
		flex-direction: column;
	}
	.prosess-list li+li{
		margin-top: 20px;
	}
	.prosess-list li{
		width: min(80%, 345px);
		padding-top: min(80%, 345px);
	}
	.prosess-list-group {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
	}
	.prosess-list-group img{
		margin-right: 10px;
	}

	/* ===================================
	media and commerce
	=================================== */ 
	.social-list{
		display: block;
		margin-top: 90px;
	}
	.social-list li{
		width: 100%;
	}
	.social-list li:nth-child(2),
	.social-list li:nth-child(3){
		margin-top: 60px;
	}
	.social-list .button-wrap{
    text-align: right;
	}

}