/* =========================================================
  BASE (Desktop-first)
========================================================= */

@media (min-width: 1100px) {
section .container{
	max-width: 1100px;
}}
section{
	padding: 100px 0 0;
}
section#service_item{
	padding: 0px;
}
#service_item{
	width: 100%;
	max-width: 856px;
	margin: 0 auto;
	transform: translateY(-25%);
	display: flex;
	background: #fff;
	height: 180px;
	box-shadow: 0 0 94px 0 rgba(0,0,0,.09);
}
#service_item .item{
	width:calc(100% / 3);
	text-align: center;
	align-content: center;
}
#service_item .item:not(:last-child){
	border-right:1px solid #D9D9D9;
}
#service_item .item.amazon img{
	width: 132px;
}
#service_item .item.rakuten img{
	width: 146px;
}
#service_item .item.d2c img{
	width: 76px;
}

#service_item .item p{
	font-size: 24px;
	letter-spacing: .18em;
	font-weight: bold;
	line-height: 1.5;
	margin-top: 1rem;
}
#service_list{
	padding: 80px 0;
}
#service_list h2{
	text-align: center;
	font-weight: 300;
	font-size: 55px;
	padding-bottom: 3rem;
	position: relative;
	margin-bottom: 6rem;
}

#service_list h2::after{
	width: 91px;
	height: 7px;
	background: #0A2647;
	content: "";
	position: absolute;
	bottom: 0;
	left: calc(50% - 45.5px);
}
#service_list .service_list_flex{
	display: flex;
	gap:30px;
	box-shadow: 0 0 22px 0 rgba(0,0,0,.08);
	position: relative;
}
#service_list .service_list_flex:not(:last-child){
	margin-bottom: 4.5rem;
}

#service_list .service_list_flex::before{
	content: "";
	background: #0A2647;
	width: 452px;
	height:196px;
	clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);
	position: absolute;
	left: 0;
	bottom: 0;
	
}
#service_list .service_list_flex .item:first-child{
	width: 497px;
	transform: translateY(-2rem);
}
#service_list .service_list_flex .item:last-child{
	width: calc(100% - 527px);
	align-self: center;
}

#service_list .service_list_flex .item h3{
font-weight: 700;
font-size: 32px;
line-height: 1.5;
letter-spacing: 0.18em;
color: #0A2647;
	margin-bottom: 1.5rem;
	
}
#service_list .service_list_flex .item h3 span{
	position: relative;
}

#service_list .service_list_flex .item h3 span::after{
	content: "";
	width: 195px;
	height: 1px;
	position: absolute;
	top: calc(50% - .5px);
	right: -215px;
	background: #0A2647;
}
#service_list .service_list_flex .item h4{
font-weight: 700;
font-size: 24px;
line-height: 1.5;
letter-spacing: 0.18em;
color: #0A2647;
	margin-bottom: 1.5rem;
}

#service_list .service_list_flex.amazon a.more_btn{
	margin-top: 1.5rem;
	display:block;
	color: #fff;
	padding: 1rem 0;
	text-align: center;
	width: 283px;
	border-radius: 30px;
	background: #FFB84E;
	text-decoration: none;
}
#service_list .service_list_flex.rakuten a.more_btn{
	margin-top: 1.5rem;
	display:block;
	color: #fff;
	padding: 1rem 0;
	text-align: center;
	width: 283px;
	border-radius: 30px;
	background: #FF4949;
	text-decoration: none;
}
#service_list .service_list_flex.d2c a.more_btn{
	margin-top: 1.5rem;
	display:block;
	color: #fff;
	padding: 1rem 0;
	text-align: center;
	width: 283px;
	border-radius: 30px;
	background: #0A2647;
	text-decoration: none;
}
#declaration {
	padding: 80px 0;
}
#declaration h2{
	text-align: center;
	font-weight: 300;
	font-size: 50px;
	padding-bottom: 3rem;
	position: relative;
	margin-bottom: 6rem;
}

#declaration h2::after{
	width: 91px;
	height: 7px;
	background: #0A2647;
	content: "";
	position: absolute;
	bottom: 0;
	left: calc(50% - 45.5px);

}
#declaration .declaration_flex{
	display: flex;
	gap:30px;
	border-bottom: 1px solid #929292;
	padding-bottom: 2rem;
}
#declaration .declaration_flex .left{
	width:326px;
	
}
#declaration .declaration_flex .right{
	width:calc(100% - 356px);
	align-self: center;
}

#declaration .declaration_flex .right p{
font-weight: 300;
font-size: 20px;
line-height: 1.7;
	color: #161616;}

#declaration .declaration_flex .right .num{
font-weight: 700;
font-size: 40px;
line-height: 1.6;
color: #161616;
margin-bottom: .5rem;
}
#declaration .declaration_flex .right h3{
font-weight: 300;
font-size: 36px;
line-height: 1.6;
color: #161616;
margin-bottom: 1.5rem;
}
#declaration .declaration_flex:not(:last-child){
	margin-bottom: 2rem;
}
#youtube_embed h2{
font-weight: 300;
font-size: 40px;
line-height: 48px;
color: #041931;
	text-align: center;
	margin-bottom: 4rem;
}
#youtube_embed p{
font-weight: 300;
font-size: 19px;
line-height: 1.5;
color: #0A2647;
	margin-top: 4rem;
}
#service_cta{
	position: relative;
	background: #0A2647;
	padding: 80px 0;
}
#service_cta::before{
	width: 50%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	content: "";
	background: url(../images/service_tocontact.jpg);
	background-position: center;
	background-size: cover;
}
#service_cta h2{
font-weight: 700;
font-size: 36px;
line-height: 1.5;
letter-spacing: 0.18em;
color: #FFFFFF;
	margin-bottom: 1.5rem;
}
#service_cta p{
font-weight: 700;
font-size: 24px;
line-height: 1.5;
letter-spacing: 0.18em;
color: #FFFFFF;
	margin-bottom: 1.5rem;
}
#service_cta a{
	display: block;
	width: 418px;
	padding: 1.5rem 0;
	border-radius: 39px;
	background: #fff;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	color: #0A2647;
}
footer{
	background: #041931;
	padding-top: 80px;
}
@media (max-width: 992px) {
	
section{
	padding: 50px 0 0;
}
	#service_item{
		width: 90%;
		height: 130px;
	}
	#service_item .item.amazon img {
    width: 90px;
}
	#service_item .item.rakuten img {
    width: 90px;
}
	#service_item .item.d2c img {
    width: 60px;
}
	#service_item .item p{
		font-size: 16px;
		    letter-spacing: .1em;
		
	}
	#service_list .service_list_flex {
    display: block;
	}
	#service_list .service_list_flex .item:first-child{
		margin-bottom: 1rem;
	}
	#service_list .service_list_flex .item:first-child,
	#service_list .service_list_flex .item:last-child{
		width: 100%;
	}
	#service_list .service_list_flex .item:last-child{
		padding: 1rem;
	}
	#service_list .service_list_flex .item h3{
		font-size: 20px;
		position: relative;
	}
	#service_list .service_list_flex .item h4{
		font-size: 18px;
	}
	#service_list .service_list_flex .item p br{
		display: none;
	}
	#service_list .service_list_flex::before {
    content: "";
    background: #0A2647;
    width: 90%;
		height: inherit;
		aspect-ratio:330/215;
    clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);
    position: absolute;
    left: 0;
    bottom: inherit;
    top: 0;
}
	#service_list .service_list_flex .item h3::after {
    content: "";
    width: 50%;
    height: 1px;
    position: absolute;
    top: calc(50% - .5px);
    right: 0;
    background: #0A2647;
}
	#service_list .service_list_flex .item h3 span::after {
    content: none;
    
	}#service_list .service_list_flex.amazon a.more_btn{
		width: 100%;
	}#service_list .service_list_flex.rakuten a.more_btn{
		width: 100%;
	}#service_list .service_list_flex.d2c a.more_btn{
		width: 100%;
	}
	#declaration h2{
		font-size: 20px;
		line-height: 1.5;
    padding-bottom: 2rem;
    position: relative;
    margin-bottom: 5rem;
	}
	#service_list{
		padding: 50px 0;
	}
	#declaration {
    padding: 50px 0;
}
#declaration .declaration_flex{
	display: block;
	}
	#declaration .declaration_flex .left{
		width:70%;
		margin: 0 auto 1rem;
	}
#declaration .declaration_flex .right{
	width:100%;
	}
	#declaration .declaration_flex .right h3{
		font-size: 20px;
	}
	#declaration .declaration_flex .right p{
		font-size: 16px;
	}
	#declaration .declaration_flex .right .num{
		font-size: 20px;
	}
	#youtube_embed h2{
		font-size: 20px;
	}#youtube_embed p{
		font-size: 16px;
	}
	#service_cta h2,#service_list h2{
		font-size: 24px;
		font-weight: bold;
	}
	#service_cta p{
		font-size: 18px;
	}#service_cta a{
		width: 100%;
	}
	#service_cta{
		background: rgba(10,38,71,.5);
	}
	#service_cta::before{
		z-index: -1;
		width:100%;
		bottom: 0;
		top:inherit;
		right: inherit;
		left: 0;
	}
	#service_list h2 {
    padding-bottom: 2rem;
    margin-bottom: 5rem;
	}
	#service_list h2::after,#declaration h2::after  {
    width: 47px;
    height: 3px;
    background: #0A2647;
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(50% - 23.5px);
	}
}