@charset "utf-8";
@media screen and (max-width: 1280px) {

	header > div { width: 100%; }
	header > div > h1 { width: 100%;left: 0;right: 0;background-size: 110px 30px;height: 60px;width:auto !important; }
	header > div > h1.surigo { background-size:150px;}
	header > div > nav { left: 0;right: 0;top: 60px; }
	header > div > nav > ul { height: 65px; }
	header > div > nav > ul > li { width: 25%;text-align: center; }
	header > div > nav > ul > li > a { padding: 0px;font-size: 20px;line-height: 65px;height: 65px; }

	header.fixed { height: 125px; }
	header.fixed > div > h1 { background-size: 110px 30px;width:auto !important; }
	header.fixed > div > h1.surigo { background-size:150px;}

	section > .visual { height: 800px; }
	section > .visual::before { right: -100px; }
	section > .visual .slogan { width: 100%;padding-left: 30px;padding-top: 180px;height: 800px; }
	section > .visual .slogan h4 { font-size: 50px;line-height: 65px;letter-spacing: -4px; }
	section > .visual .slogan p { font-size: 20px;line-height: 30px; }
	section > .visual .slogan .phone { right: -20px; }
	section > .visual .slogan a { width: 200px;height: 50px;line-height: 46px;font-size: 15px;padding-left: 20px; }
	section > .visual .slogan a::after { font-size: 17px;line-height: 17px;height: 17px;right: 15px;top: 13px; }

	section > .visual .slogan .phone img:nth-child(1) { width: 300px; }
	section > .visual .slogan .phone img:nth-child(2) { width: 350px; }


	.content div h3 { font-size: 30px;padding: 0 10px;box-sizing: border-box; }
	.content div h3 > i { width:180px;}

	.about {  width: 100%;padding-top: 80px;box-sizing: border-box;padding-left: 15px;padding-right: 15px; }

	.about > .advantage { display: block;box-sizing: border-box;margin:  80px auto auto auto;}
	.about > .advantage > div { width: calc(25% - 8px);margin-bottom: 10px; }
	.about > .advantage > div + div { margin-left: 10px; }
	.about > .advantage > div > p { font-size: 24px;line-height: 30px; }
	.about > .advantage > div > span { font-size: 15px; }

	.support { margin-top: 80px;padding: 80px 0 70px 0;height: auto; }
	.support > .support_inner { display: block;width: 100%;overflow: hidden; }
	.support > .support_inner > .phone_wrap > .phone_bg { top: 0;left: 50%;margin-left: -230px; }
	.support > .support_inner > .phone_wrap { display: block; }
	.support > .support_inner > .phone_wrap > .phone { top: 69px;left: 50%;margin-left: -150px; }
	.support > .support_inner > ul { display: block;box-sizing: border-box;padding: 80px 10px 0px 10px;margin-top: 150px; }

	.download { padding: 200px 0px 160px 0px; }
	.download > p { font-size: 26px; }
	.download > p > span { display: block; }
	.download a { width: 200px; line-height: 46px;font-size: 15px;padding-left: 20px; }
	.download a::after { font-size: 17px;line-height: 17px;height: 17px;right: 15px;top: 13px; }

	.top_btn { right: 20px;bottom: 20px; }

	footer > div { font-size: 14px; }
}


@media screen and (max-width: 960px) {

	section > .visual { background: linear-gradient(to bottom right, #133fc2, #5785ec);height: 790px; }
	/* section > .visual .slogan { height: 790px; } */
	section > .visual .slogan .phone img:nth-child(1) { width: 200px; }
	section > .visual .slogan .phone img:nth-child(2) { width: 230px; }
	.top_btn { width: 50px;height: 50px; }
	.top_btn::after { font-size: 22px;line-height: 50px;height: 50px; }

	.about > .advantage > div { display: inline-block;width: calc(50% - 5px); }
	.about > .advantage > div:nth-child(3) { margin-left: 0; }
	.about > .advantage > div > p::before { display: none; }
	.about > .advantage > div > p::after { display: none; }

	div.pop > .pop_wrap {width:650px;}
}

@media (max-width: 640px) {
	div.pop > .pop_wrap {width:auto;height:auto;top:0px;left:0px;right:0px;bottom:0px;transform:none;border-radius: 0px;overflow: auto;}
	div.pop > .pop_wrap > header { padding:20px;}
	div.pop > .pop_wrap > header > a.pop_close { right:5px; }
	div.pop > .pop_wrap > section { padding:20px;}
    div.pop > .pop_wrap > section .inputStyle,
    div.pop > .pop_wrap > section .textStyle,
    div.pop > .pop_wrap > section .selectStyle { margin-bottom: 8px; }
    div.pop > .pop_wrap > section .doubleInput { flex-direction: column; gap: 0; }
    div.pop > .pop_wrap > section .doubleInput .inputStyle { width: 100%; }div.pop > .pop_wrap > section button { margin: 30px auto 0; }
    div.pop > .pop_wrap > section tr { display: block; }

	.content div h3 > i { width:140px;}

}

@media screen and (max-width: 450px) {

	section > .visual { height: 700px; }
	section > .visual .slogan { height: 700px; }

	section > .visual .slogan h4 { font-size: 40px;line-height: 50px; }
	section > .visual .slogan p { font-size: 16px;line-height: 24px;padding-right: 10px; }

	section > .visual .slogan .phone { bottom: -50px; }
	section > .visual .slogan .phone img:nth-child(1) { width: 160px; }
	section > .visual .slogan .phone img:nth-child(2) { width: 180px;margin-left: -20px; }

	header > div > nav > ul > li { width: 24%; }
	header > div > nav > ul > li:last-child { width: 26%; }
	header > div > nav > ul > li > a { display: block;padding: 0; font-size: 16px; }

	.support > .support_inner > ul { margin-top: 0;padding: 20px 10px 0px 10px; }
	.support > .support_inner > ul > li::before { left: 25px; }
	.support > .support_inner > ul > li > span { font-size: 15px;margin-top: 5px; }

	.about  { padding-top: 70px; }
	.about > .advantage { margin-top: 70px; }
	.about > .advantage > div { padding: 35px 20px 40px 20px; }
	.about > .advantage > div { display: block;width: 100%; }
	.about > .advantage > div + div { margin-left: 0; }
	.about > .advantage > div > p::before { display: none; }
	.about > .advantage > div > p::after { display: none; }
	.about > p { font-size: 15px;line-height: 24px; }

	.content div h3 { font-size: 26px; }

	.support { margin-top: 70px;padding: 70px 0 70px 0; }
	.support > .support_inner > .phone_wrap > .phone_bg { width: 400px;top: 13px;left: 50%;margin-left: -180px; }
	.support > .support_inner > .phone_wrap > .phone_bg > img { width: 100%; }
	.support > .support_inner > .phone_wrap > .phone { top: 69px;left: 50%;margin-left: -118px;width: 239px; }
	.support > .support_inner > ul > li { font-size: 22px; }
	.support > .support_inner > ul > li.active { border-radius: 20px; }
	.support > .support_inner > ul > li::before { top: 21px; }

	section > .visual .slogan a { width: 180px; }

	footer > div { font-size: 12px; }

}

@media screen and (max-width: 350px) {

	section > .visual .slogan h4 { font-size: 33px;line-height: 45px; }
	section > .visual .slogan p { font-size: 16px; }

	header > div > nav > ul > li { font-size: 14px;width: 24%; }
	header > div > nav > ul > li:last-child { width: 26%; }
	header > div > nav > ul > li > a { display: block;padding: 0; }

	section > .visual .slogan { padding-left: 10px;padding-top: 150px; }
	section > .visual .slogan .phone img:nth-child(1) { width: 140px; }
	section > .visual .slogan .phone img:nth-child(2) { width: 160px; }
	section > .visual .slogan p { font-size: 18px; }

	.content div h3 { font-size: 22px;letter-spacing: -2px; }
	.download > h1 { width: 180px;height: 50px; }
	.download > p { font-size: 22px;letter-spacing: -2px; }

}