/* =========================================================
  BASE (Desktop-first)
========================================================= */
body{
	background: #F8F9FA;
}
@media (min-width: 1100px) {
section .container{
	max-width: 1100px;
}}
section{
	padding: 100px 0 0;
}

#mv_content .cta{
	display: flex;
	gap:15px;
}
#mv_content .cta .item{
	width: min(19.53125vw,375px);
	text-align: center;
}
#mv_content .cta .item a{
	padding: 1rem 0;
	font-size: min(1.4583333333333333vw,28px);
	letter-spacing: .18em;
	line-height: 1.5;
	font-weight: 300;
	display: block;
	text-decoration: none;
}
#mv_content .cta .item:first-child a{
	background: #041931;
	border-radius: 51px;
	border: solid 1px #fff;
	color: #fff;
}
#mv_content .cta .item:last-child a{
	background: #fff;
	border-radius: 51px;
	border: solid 1px #041931;
	color: #041931;
}
#mv_content .cta .item span{
	display: inline-block;
	position: relative;
	padding-right: 45px;
}
#mv_content .cta .item span::after{
	position: absolute;
	top:calc(50% - 17.5px);
	content: "";
	background-image: url(../images/arrow_white.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 35px;
	right: 0;
	aspect-ratio:1/1;
		
}
#mv_content .cta .item:last-child span::after{
	background-image:url(../images/arrow_navy.svg);
}
#mv #mv_content h1.ja{
font-weight: 700;
font-size: min(5vw,96px);
line-height: 1.5;
letter-spacing: 0.02em;
color: #FFFFFF;
}
#mv #mv_content p.maincopy{
font-weight: 700;
font-size:min(3.3333333333333335vw,64px);
line-height: 1.5;
letter-spacing: 0.02em;
color: #FFFFFF;
	margin-bottom: 1rem;
}
#mv #mv_content p{
font-weight: 300;
font-size: min(1.875vw,36px);
line-height: 1.5;
letter-spacing: 0.18em;
color: #FFFFFF;
	margin-bottom: 1.5rem;
}
#onayami h2{
	text-align: center;
font-weight: 300;
font-size: 40px;
line-height: 48px;
color: #041931;
	padding-bottom: 3rem;
    position: relative;
    margin-bottom: 3rem;
}
#onayami h2::after {
    width: 91px;
    height: 7px;
    background: #0A2647;
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(50% - 45.5px);
}
#onayami .onayami_wrap{
background: #FFFFFF;
border: 1px solid #0A2647;
border-radius: 10px;
	padding: 1.5rem 2rem;
	background-image:url("../images/onayami_bg.jpg");
	background-size: 344px 258px;
	background-position: center right;
	background-repeat: no-repeat;
	margin-bottom: 6rem;
}
#onayami .onayami_wrap ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
#onayami .onayami_wrap ul li{
font-weight: 700;
font-size: 24px;
line-height: 58px;
letter-spacing: 0.18em;
color: #161616;
	padding-left: 70px;
	position: relative;
}

#onayami .onayami_wrap ul li::before{
	content: "";
	width: 58px;
	aspect-ratio:1/1;
	background: url("../images/column_list_icon.svg");
	background-size: contain;
	background-position: center right;
	background-repeat: no-repeat;
	position: absolute;
	left: 0;
	top:0;
}#onayami .onayami_wrap + p{
font-size: 40px;
line-height: 48px;
	text-align: center;
	position: relative;
	padding-top: 100px;
color: #041931;
}
#onayami .onayami_wrap + p::before{
	content: "";
	position: absolute;
	width: 131px;
  height: 43px;
  background-color: #0A2647;
  /* 左上(0 0)、右上(100% 0)、下中央(50% 100%)を結ぶ */
  clip-path: polygon(0 0, 100% 0, 50% 100%);
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}
#youtube_embed h2{
font-weight: 300;
font-size: 40px;
line-height: 48px;
color: #041931;
	text-align: center;
	margin-bottom: 3rem;
}
#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;
}
#d2c_reason{
	padding: 150px 0;
	
}
#d2c_reason h2{
	text-align: center;
font-weight: 300;
font-size: 40px;
line-height: 48px;
color: #041931;
	padding-bottom: 3rem;
    position: relative;
    margin-bottom: 3rem;
}
#d2c_reason h2::after {
    width: 91px;
    height: 7px;
    background: #0A2647;
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(50% - 45.5px);
}
#d2c_reason .d2c_reason_flex{
	display: flex;
}
#d2c_reason .d2c_reason_flex:not(:last-child){
	margin-bottom: 3rem;
}

#d2c_reason .d2c_reason_flex .item{
	width: calc(100% - 602px);
	align-self: center;
}
#d2c_reason .d2c_reason_flex .item.image{
	width: 577px;
	padding-right: 25px;
}
#d2c_reason .d2c_reason_flex .item.image:nth-child(2){
	padding-right: 0px;
	padding-left: 25px;
}

#d2c_reason .d2c_reason_flex .item p{
font-weight: 300;
font-size: 16px;
line-height: 1.5;
color: #0A2647;
}
#d2c_reason .d2c_reason_flex .item .num{
font-weight: 700;
font-size: 16px;
line-height: 1.6;
color: #161616;
margin-bottom: 2rem;

}

#d2c_reason .d2c_reason_flex .item h3{

font-weight: 700;
font-size: 32px;
line-height: 1.5;
letter-spacing: 0.18em;
color: #0A2647;
margin-bottom: 2rem;

}
#d2c_suport{
	padding: 150px 0;
	
}
#d2c_suport h2{
	text-align: center;
font-weight: 300;
font-size: 40px;
line-height: 48px;
color: #041931;
	padding-bottom: 3rem;
    position: relative;
    margin-bottom: 3rem;
}
#d2c_suport h2::after {
    width: 91px;
    height: 7px;
    background: #0A2647;
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(50% - 45.5px);
}
#d2c_suport .d2c_suport_wrap{
background: #FFFFFF;
border: 4px solid #0A2647;
border-radius: 20px;
	padding: 3rem;
}

#d2c_suport .d2c_suport_wrap .d2c_suport_inner{
	display: flex;
	flex-wrap: wrap;
}
#d2c_suport .d2c_suport_wrap .d2c_suport_inner .item:first-child{
	border-bottom:1px solid #D9D9D9;
	border-right:1px solid #D9D9D9;
	width: 32.5%;
	padding-right: 1.5rem;
	padding-bottom: 1.5rem;
}
#d2c_suport .d2c_suport_wrap .d2c_suport_inner .item:nth-child(2){
	border-bottom:1px solid #D9D9D9;
	width:35%;
	padding-right: 1.5rem;
	padding-left: 1.5rem;
	padding-bottom: 1.5rem;
}
#d2c_suport .d2c_suport_wrap .d2c_suport_inner .item:nth-child(3)
{
	border-bottom:1px solid #D9D9D9;
	border-left:1px solid #D9D9D9;
	width: 32.5%;
	padding-left: 1.5rem;
	padding-bottom: 1.5rem;
	
}
#d2c_suport .d2c_suport_wrap .d2c_suport_inner .item:nth-child(4){
	border-right:1px solid #D9D9D9;
	width: 32.5%;
	padding-right: 1.5rem;
	padding-top: 1.5rem;
}
#d2c_suport .d2c_suport_wrap .d2c_suport_inner .item:nth-child(5){
	width: 35%;
	padding-right: 1.5rem;
	padding-left: 1.5rem;
	padding-top: 1.5rem;
	
}
#d2c_suport .d2c_suport_wrap .d2c_suport_inner .item:nth-child(6)
{
	border-left:1px solid #D9D9D9;
	width: 32.5%;
	padding-left: 1.5rem;
	
	padding-top: 1.5rem;
}

#d2c_suport .d2c_suport_wrap .d2c_suport_inner .item .image{
	width: 174.5px;
	margin: 0 auto 1rem;
}
#d2c_suport .d2c_suport_wrap .d2c_suport_inner .item .text{
font-weight: 700;
font-size: 24px;
line-height: 1.5;
text-align: center;
letter-spacing: 0.18em;
color: #0A2647;
}

#faq .faq_wrap{
	counter-reset: faq-count;
}
#faq dl dt{
	background: #0A2647;
	padding: 1rem 2.5rem;
	cursor: pointer;
	position: relative;
	color: #fff;
	font-weight: bold;
	font-size: 24px;
	letter-spacing: .18em;
	line-height: 1.7;
	border:1px solid #0A2647;
}

#faq dl dt::after{
	content: "";
	position: absolute;
	right: 1rem;
	top: calc(50% - .5px);
	width: 20px;
	height: 1px;
	background: #fff;
	transform: none;
	transition: all .2s;
}
#faq dl dt::before{
	content: "";
	position: absolute;
	right: calc(1rem + 9.5px);
	top: calc(50% - 10px);
	height: 20px;
	width: 1px;
	background: #fff;
	transition: all .2s;
	transform: none;
}
#faq dl.is-open dt::before{
	transform: rotate(90deg);
	transition: all .2s;
}
#faq dl.is-open dt::after{
	transform: none;
	transition: all .2s;
}
#faq dl dt span{
	display: inline-block;
	padding-left: 60px;
	position: relative;
}

#faq dl dt span::before{
    counter-increment: faq-count;
    content: "Q" counter(faq-count)".";
	position: absolute;
	left: 0;
	font-size: 24px;
	background-image: none;
	line-height: 1.7;
	top: inherit;
}
#faq dl dd{
	display: none;
	background: #fff;
	padding: 1rem 2.5rem;
	position: relative;
	color: #161616;
	font-size: 20px;
	letter-spacing: .18em;
	line-height: 1.7;
	border:none;
}
#faq dl dd span{
	display: inline-block;
	padding-left: 2rem;
	position: relative;
}
#faq dl dd span::before{
	content: "A.";
	position: absolute;
	left: 0;
	font-size: 20px;
	width: inherit;
	background-image: none;
	line-height: 1.7;
	top: inherit;
}
footer{
	background: #041931;
	padding-top: 80px;
}
@media (max-width: 1100px) {
	
	#mv_content .cta .item span::after{
		width: 25px;
	top:calc(50% - 12.5px);
	}
	#mv_content .result{
		margin-bottom: 1.5rem;
	}
	#mv_content .cta .item{
		width: 300px;
	}
#mv_content .cta .item a{
	padding: .75rem 0;
	font-size: 20px;
	}
}
@media (max-width: 992px) {
	.page-template.page-template-d2c #mv {
        background-size: cover;
        aspect-ratio: 15 / 20;
		background-position: right -200px bottom 0px;
    }
	#mv #mv_content h1.ja{
		font-size: 36px;
	}
	#mv #mv_content p.maincopy{
		font-size: 24px;
	}
	#mv #mv_content p{
		font-size: 14px;
		text-shadow: 0 0 10px rgba(0,0,0,1);
	}
	#mv_content .cta {
    display: block;
	}
	
	#mv_content .cta .item:not(:last-child) {
		margin-bottom: 1rem;
	}
	#mv_content .cta .item span::after{
		content: none;
		
	}
	#mv_content .cta .item a{
		position: relative;
	}
	#mv_content .cta .item a::after{
	position: absolute;
    content: "";
    background-image: url(../images/arrow_white.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 25px;
    top: calc(50% - 12.5px);
    right: 1rem;
    aspect-ratio: 1 / 1;
	}
	#mv_content .cta .item:last-child a::after{
		background-image: url(../images/arrow_navy.svg);

	}
	#mv_content .cta .item{
		width: 100%;
	}
	#mv_content .cta .item span{
		padding-right: 0;
	}
section{
	padding: 50px 0 0;
	}#youtube_embed{
		padding-top: 0;
	}
	#youtube_embed h2{
		font-size: 20px;
	}
	#youtube_embed p{
		font-size: 16px;
	}
	#service_cta h2{
		font-size: 20px;
	}
	#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;
	}
	#onayami h2{
		font-size: 20px;
		padding-bottom: 1rem;
	}
	#onayami h2::after {
    width: 60px;
    height: 4px;
    background: #0A2647;
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(50% - 30px);
}
	#onayami .onayami_wrap {
    border: 1px solid #0A2647;
    border-radius: 10px;
    padding: 1.5rem 1rem;
	background-image:none;
    background-size: 50%;
	background-position: center;
		background-blend-mode: lighten;
		background-color: #fff;
		margin-bottom: 4rem;
	}
	#onayami .onayami_wrap ul li {
    font-size: 16px;
    line-height: 1.75;
    padding-left: 34px;
    position: relative;
}
	#onayami .onayami_wrap ul li::before {
    content: "";
    width: 28px;
	}
	#onayami .onayami_wrap + p{
		font-size: 20px;
	}
	#d2c_reason{
		padding: 80px 0 40px;
	}
	#d2c_reason h2{
		font-size: 24px;
		padding-bottom: 1rem;
		font-weight: bold;
	}
	#d2c_reason h2::after {
    width: 60px;
    height: 4px;
    background: #0A2647;
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(50% - 30px);
}
	#d2c_reason .d2c_reason_flex{
		flex-wrap: wrap;
	}
	#d2c_reason .d2c_reason_flex .item{
		order:2;
		width: 100%;
	}
	#d2c_reason .d2c_reason_flex .item.image{
		order:1;
		padding-left: 0;
		padding-right: 0;
		margin-bottom: 1rem;
		width: 100%;
	}
	#d2c_reason .d2c_reason_flex .item.image:nth-child(2){padding-left: 0;
		padding-right: 0;
	}#d2c_reason .d2c_reason_flex .item .num{
		margin-bottom: 1rem;
		font-size: 14px;
	}
	#d2c_reason .d2c_reason_flex .item h3{
		margin-bottom: 1rem;
		font-size: 20px;
	}
	
	#d2c_suport{
		padding: 40px 0 80px;
	}
	
	#d2c_suport h2{
		font-size: 24px;
		padding-bottom: 1rem;
		font-weight: bold;
	}
	#d2c_suport h2::after {
    width: 60px;
    height: 4px;
    background: #0A2647;
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(50% - 30px);
}
	#d2c_suport .d2c_suport_wrap{
		padding: 1rem;
	}
	#d2c_suport .d2c_suport_wrap .d2c_suport_inner .item:first-child,
	#d2c_suport .d2c_suport_wrap .d2c_suport_inner .item:nth-child(2),
	#d2c_suport .d2c_suport_wrap .d2c_suport_inner .item:nth-child(3),
	#d2c_suport .d2c_suport_wrap .d2c_suport_inner .item:nth-child(4),
	#d2c_suport .d2c_suport_wrap .d2c_suport_inner .item:nth-child(5),
	#d2c_suport .d2c_suport_wrap .d2c_suport_inner .item:last-child{
		width: 50%;
	}
	#d2c_suport .d2c_suport_wrap .d2c_suport_inner .item:first-child{
		padding-right:.5rem;
		padding-left:0;
		padding-bottom:.5rem;
		
	}
	#d2c_suport .d2c_suport_wrap .d2c_suport_inner .item:nth-child(2){
		padding-right:0;
		padding-left:.5rem;
		padding-bottom:.5rem;
	}
	#d2c_suport .d2c_suport_wrap .d2c_suport_inner .item:nth-child(3){
		padding-right:.5rem;
		padding-left:0;
		padding-bottom:.5rem;
		padding-top:.5rem;
		border-left:none;
		border-right: 1px solid #D9D9D9;
	}
	#d2c_suport .d2c_suport_wrap .d2c_suport_inner .item:nth-child(4){
		padding-right:0;
		padding-left:.5rem;
		padding-bottom:.5rem;
		padding-top:.5rem;
		border-bottom: 1px solid #D9D9D9;
		border-right: none;
	}
	#d2c_suport .d2c_suport_wrap .d2c_suport_inner .item:nth-child(5){
		padding-right:.5rem;
		padding-left:0;
		padding-top:.5rem;
		padding-bottom:0;
		border-right: 1px solid #D9D9D9;
	}
	#d2c_suport .d2c_suport_wrap .d2c_suport_inner .item:last-child{
		padding-left:.5rem;
		padding-top:.5rem;
		padding-bottom:0;
		border-left: none;
	}
	#d2c_suport .d2c_suport_wrap .d2c_suport_inner .item .image{
		width: 80%;
	}
	#d2c_suport .d2c_suport_wrap .d2c_suport_inner .item .text{
		font-size: 16px;
letter-spacing:0;
	}
	#faq dl dt span::before{
		font-size: 16px;
	}
	#faq dl dt{
		font-size: 16px;
		padding: 1rem 2rem 1rem 1rem;
	}
	#faq dl dd{
		font-size: 16px;
		padding: 1rem;
	}
	#faq dl dt span {
    display: inline-block;
    padding-left: 38px;
	}
	#faq dl dd span {
    padding-left: 1.5rem;
	}
}