@charset "UTF-8";
/* ===================================================
	Services / 489ban / App CSS
====================================================== */

/* ---------------------------------------------------
	Global Header Overwrite
------------------------------------------------------ */
#g_header { position: absolute;}

/* ---------------------------------------------------
	Sub Header Overwrite
------------------------------------------------------ */
@media screen and (max-width: 600px) {
.sub_header .sub_box_01 .sub_btn_01{ width: 100%; padding: 0; margin: 0;}
}

/* ---------------------------------------------------
	Contents Overwrite
------------------------------------------------------ */
#contents { padding: 200px 0 0 !important;}

@media screen and (max-width: 600px) {
#contents { padding: 200px 0 0 !important;}
}



h3 { margin: 0; }
.ofi { object-fit: cover; }
[class^="sp_"] { display: none; }
[class^="tit_"] { font-weight: 600; }
.tit_01 {
	display: inline-block;
	color: #364ddc;
}
.tit_02 { text-align: center; font-size: 45px; color: #000; line-height: 1.3; }
.tit_02 span { display: inline-block; color: #8871df; background: -webkit-linear-gradient(0deg, #8871df, #65d7cb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 20px; }
.tit_03 { font-size: 45px; text-align: center;}
.tit_03 span { display: block; font-size: 20px; letter-spacing: 0; opacity: 0.3; }
.ltor { position: relative; display: inline-block; padding: 2px 0 4px; }
.ltor::after,
.ltor span::after { position: absolute; bottom: 0; left: 0; content: ''; width: 100%; height: 1px; }
.ltor::after { background: #fff; transform: scale(0, 1); transform-origin: right top; transition: transform .3s; }
.ltor span::after { background: #000; }
.btn_link { display: inline-block; width: 92%; max-width: 380px; height: 80px; border-radius: 42px; font-size: 20px; font-weight: 500; transition: opacity .5s; }
.btn_link span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.btn_link span::after { content: ''; display: inline-block; width: 13px; height: 16px; margin: 2px 0 0 10px; background: url(../img/services/489ban/app/main_arrow.svg)no-repeat center / cover; }
.note { font-size: 14px; font-weight: 400; color: #717171; letter-spacing: 1px; }

@media screen and (hover: hover) {
	.ltor:hover { text-decoration: none; }
	.ltor:hover::after { transform-origin: left top; transform: scale(1, 1); }
	.btn_link:hover { text-decoration: none; opacity: .75; }
}

@media screen and (min-width: 601px) {
	.sp { display: none; }
	.pc { display: inline-block; }
}
@media screen and (max-width: 600px) {
	.pc { display: none; }
	.sp { display: inline-block; }
	.tit_02,
	.tit_03 { font-size: 24px; }
	.tit_02 span,
	.tit_03 span { font-size: 14px; letter-spacing: 0.05em; }
	.btn_link { font-weight: 600; }
	.btn_link span::after { width: 9px; height: 13px; margin: 2px 0 0 10px; }
}
@media screen and (max-width: 400px) {
	.sp_400 { display: block; }
	.tit_02,
	.tit_03 { font-size: 22px; }
	.btn_link { height: 60px; font-size: 16px; }
	.btn_link span::after { width: 9px; height: 13px; margin: 2px 0 0 10px; }
	.note { font-size: 13px; }
}


/* ===================================================
	App CSS
====================================================== */
#app #main_img,
#app #contents_wrap { font-family: 'Noto Sans JP', sans-serif; font-weight: 400; font-feature-settings: "palt"; letter-spacing: 0.1em; }
#app #contents_wrap #breadcrumb { width: 94%; }
[class^="inner_"] { width: 92%; margin: 0 auto; }
.inner_1400 { max-width: 1400px; }
.inner_1300 { max-width: 1300px; }
.inner_1100 { max-width: 1100px; }

@media screen and (max-width: 600px) {
	#app #main_img,
	#app #contents_wrap { font-size: 14px; }
}


/* ---------------------------------------------------
	Main_img
------------------------------------------------------ */
#main_img .inner_1400,
#main_img h1 { position: relative; }
#main_img .inner_1400::before,
#main_img .inner_1400::after { content: ""; border: 80px solid; position: absolute; z-index: 0; display: block; border-radius: 50%; border-color: rgba(255,255,255,0.2); transform: translate(-50%,-50%); }
#main_img .inner_1400::before { left: -60px; bottom: -130px; width: 450px; height: 450px; animation: scaleup 3s linear infinite; }
#main_img .inner_1400::after { top: -130px; right: -175px; width: 670px; height: 670px; opacity: 0; animation: scaleup 3s .8s linear infinite; }
#main_img .img { z-index: 2; }

#main_img { position: relative; padding: 70px 0 95px; background: linear-gradient(90deg, #6b50eb 15%, #5adbcb 100%)fixed; letter-spacing: 0.04em; text-align: left; overflow: hidden;}
#main_img .inner_1400 { display: grid; grid-template-rows: auto 1fr; grid-template-columns: 52% 1fr; }
#main_img h1,
#main_img .txt { padding-left: 75px; }
#main_img h1 { font-weight: 400; grid-column: 1; grid-row: 1; padding-top: 130px; color: #fff; transition: transform 1.2s 1.2s ease,opacity 1.2s 1.2s ease;}
#main_img .show .w_txt { transition: transform 1.2s 1.2s ease,opacity 1.2s 1.2s ease; }
#main_img h1 > span { line-height: 1; }
#main_img h1 > span:nth-of-type(1) { position: absolute; font-size: 24px; }
#main_img h1 > span:nth-of-type(2),
#main_img h1 > span:nth-of-type(3) { display: block; font-weight: 500; }
#main_img h1 > span:nth-of-type(2) { padding-top: 80px; letter-spacing: 2.8px; }
#main_img h1 > span:nth-of-type(2) span{ font-size: 30px; }
#main_img h1 > span:nth-of-type(3) { margin-top: 20px; font-size: 100px; }
#main_img h1 .w_txt { transition: opacity .3s .6s ease-in; }
#main_img .txt { grid-column: 1; grid-row: 2; margin-top: 55px; color: #fff; }
#main_img .txt p { font-size: 20px; font-weight: 600; }
#main_img .txt .yellow { display: block; font-size: 24px; color: #fff841; }
#main_img .l_box { z-index: 2; width: 46.6%; min-width: 653px; padding: 40px 0 0 75px; }
#main_img .txt { z-index: 2; }
#main_img .txt .btn_link { margin-top: 25px; color: #4a54ec; background: #fff841; box-shadow: 0 0 10px 0px rgb(0 0 0 / 20%); }
#main_img .img { position: relative; grid-column: 2; grid-row: 1/3; right: 10vh; width: 120%; }
#main_img .img img { height: auto;}
.lr_wrap,
.lr_inner { overflow: hidden; }
.lr_inner,
.lr_in { display: inline-block; }
.lr_inner { opacity: 0;
	animation-name:s_txtX100;
	animation-delay: 1.2s;
	animation-duration:0.8s;
	animation-fill-mode:forwards; }
.lr_in { opacity: 0; padding: 9px 70px 11px 20px; background: linear-gradient(-135deg, transparent 40px , #000 40px);
	animation-name:s_txtX-100;
	animation-delay: 1.2s;
	animation-duration:0.8s;
	animation-fill-mode:forwards; }

@keyframes scaleup {
	0% {
		opacity:0;
		transform: scale(0.6);
	}
	50% {
		opacity:1;
		transform: scale(0.9);
	}
	100% {
		opacity:0;
		transform: scale(1);
	}
}

@keyframes s_txtX100 {
	from {
		transform: translateX(-100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes s_txtX-100 {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@media screen and (hover: hover) {
}

@media screen and (max-width: 1400px) {
	#main_img { padding-top: 90px; }
	#main_img .inner_1400 { grid-template-columns: 48% 1fr; }
	#main_img h1 { padding-top: 90px; font-size: 1.92vw; }
	#main_img h1 > span:nth-of-type(1) { font-size: 20px; }
	#main_img h1 > span:nth-of-type(3) { font-size: 6.5vw; }
	#main_img .txt p { font-size: 17px; }
	#main_img .txt .yellow { font-size: 20px; }
	#main_img .img { right: 4vh; width: 110%; }
	#main_img .img img { object-fit: contain; object-position: 0 20%; }
}
@media screen and (max-width: 1380px) {
	#main_img .inner_1400::before { left: -6.5%; width: 380px; height: 380px; }
	#main_img .inner_1400::after { right: -16.8%; width: 600px; height: 600px; }
}
@media screen and (max-width: 1200px) {
	#main_img h1 { font-size: 22px; }
	#main_img h1 > span:nth-of-type(3) { font-size: 75px; }
	#main_img .txt { margin-top: 30px; }
	#main_img h1, #main_img .txt { padding-left: 3%; }
	#main_img .inner_1400::before,
	#main_img .inner_1400::after { max(6vw, 50px) solid rgba(255,255,255,0.2); }
	#main_img .inner_1400::before { left: -8%; }
	#main_img .inner_1400::after { right: -20%; }
}
@media screen and (max-width: 600px) {
	#main_img h1 { padding-top: max(4.5vw,15px); }
	#main_img h1 > span:nth-of-type(2),
	#main_img h1 > span:nth-of-type(3) { font-weight: 600; }
	#main_img { padding: 90px 0 120px; }
	#main_img .inner_1400::before,
	#main_img .inner_1400::after { border: 55px solid rgba(255,255,255,0.2); }
	#main_img .inner_1400::before { left: -25%; width: 240px; height: 240px; }
	#main_img .inner_1400::after { right: -20%; width: 357px; height: 357px; }
	#main_img .inner_1400 { display: block; }
	#main_img .l_box, #main_img .r_box { position: static; }
	#main_img h1 { text-align: center; }
	#main_img h1 > span:nth-of-type(1),
	#main_img .txt p { font-size: 18px; }
	.lr_wrap,
	.lr_inner { width: 100%; }
	.lr_wrap { left: 0; }
	.lr_in { padding: 10px 3%; background: #000; }
	#main_img h1 > span:nth-of-type(2) { padding-top: 60px; }
	#main_img h1 > span:nth-of-type(2),
	#main_img .txt .yellow { font-size: 22px; }
	#main_img h1 > span:nth-of-type(3) { margin-top: 10px; font-size: 62px; }
	#main_img h1, #main_img .txt { padding-left: 0; text-align: center; }
	#main_img .txt { margin-top: -25px; }
	#main_img .btn_link { margin-top: 20px; }
	#main_img .img { position: relative; right: -4.8%; width: 85%;  }
}
@media screen and (max-width: 500px) {
	#main_img h1 > span:nth-of-type(1),
	#main_img .txt p { font-size: 15px; }
	#main_img h1 > span:nth-of-type(2),
	#main_img .txt .yellow { font-size: 17px; }
	#main_img h1 > span:nth-of-type(3) { font-size: 52px; }
	#main_img .txt { margin-top: -15px; }
}
@media screen and (max-width: 400px) {
	#main_img { padding: 70px 0 60px; }
	#main_img h1 { padding-top: 20px; }
	#main_img h1 > span:nth-of-type(2) { letter-spacing: 1.2px; }
	#main_img h1 > span:nth-of-type(3) { margin-top: 10px; }
	#main_img .inner_1400::before { bottom: -50%; left: -25%; }
	#main_img .inner_1400::after { top: -40%; right: -60%; }
	#main_img .img { position: relative; right: -1.5%; width: 92%; }
	#main_img .txt .btn_link { margin-top: 20px; }
}
@media screen and (max-width: 360px) {
	#main_img h1 > span:nth-of-type(1) { font-size: 13px; }
	#main_img h1 > span:nth-of-type(2),
	#main_img .txt .yellow { font-size: 15px; }
	#main_img h1 > span:nth-of-type(3) { font-size: 42px; }
}


/* ---------------------------------------------------
	#sec1
------------------------------------------------------ */
#sec1 { position: relative; display: flex; justify-content: flex-end; margin: -95px auto 0; padding: 90px 45px 60px 40px; box-sizing: border-box; background: #fff; box-shadow: 0px 20px 30px 0 rgb(0 0 0 / 5%); transition: transform 1.2s 0.6s ease,opacity 1.2s 0.6s ease; }
#sec1 .l_box { position: absolute; bottom: 0; left: 40px; }
#sec1 .r_box { width: calc(100% - 583px); }

#sec1 .tit_01 { position: relative; font-size: 45px;}
#sec1 .tit_01::after {
	content: ''; display: block; width: 100%; height: 2px; background: #364ddc;
	/* transform: scaleX(0); transform-origin: left; transition: transform 1.5s 1s; */
}
/* #sec1 .r_box.show .tit_01::after { transform: scaleX(1); position: absolute; bottom: -2px; left: 0; } */

#sec1 .tit_01 + p { margin-top: 40px; font-size: 18px; font-weight: 600; line-height: 1.8; }
#sec1 .r_box p:last-of-type { margin-top: 50px; text-align: right; }
#sec1 .ltor::before { content: '？'; display: flex; align-items: center; justify-content: center; width: 24.5px; height: 24.5px; padding: 0 0 2px 2px; border: 1px solid #000; border-radius: 50%; position: absolute; left: -35px; top: 50%; transform: translateY(-50%); box-sizing: border-box; font-weight: 500; }

@media screen and (max-width: 1300px) {
	#sec1 { margin: -75px auto 0; padding: 60px 40px 40px 30px; }
	#sec1 .tit_01 { font-size: 38px; }
	#sec1 .tit_01 + p { margin-top: 30px; font-size: 17px; }
	#sec1 .l_box { width: 38%; left: 35px; }
	#sec1 .l_box img { height: auto; }
	#sec1 .r_box { width: 56%; }
	#sec1 .r_box p:last-of-type { margin-top: 35px; }
}
@media screen and (max-width: 600px) {
	#sec1 { display: block; padding: 20px 20px 30px; }
	#sec1 .l_box, #sec1 .r_box { position: static; width: 100%; }
	#sec1 .l_box { width: 80%; margin: 0 auto; }
	#sec1 .tit_01 { width: 9em; margin: 20px auto 0; display: block; font-size: 28px; text-align: center; }
	#sec1 .tit_01 + p { margin-top: 20px; font-size: 14px; }
	#sec1 .r_box p:last-of-type { margin-top: 15px; text-align: center; }
}
@media screen and (max-width: 400px) {
	#sec1 { margin: -30px auto 0; }
	#sec1 .tit_01 { font-size: 24px; }
	#sec1 .r_box p:last-of-type { margin-left: 20px; font-size: 14px; }
	#sec1 .ltor::before { width: 22px; height: 22px; padding: 0 0 1px 1px; left: -30px; }
}


/* ---------------------------------------------------
	#sec2
------------------------------------------------------ */
#sec2 { margin-top: 95px; padding: 80px 0 90px; background: url(../img/services/489ban/app/circle03.svg)no-repeat left -50px top -70px / 685px, url(../img/services/489ban/app/circle04.svg)no-repeat right -85px bottom -120px / 830px, linear-gradient(90deg, rgba(113,124,228,0.3), rgba(101,215,203,0.3))fixed; }
#sec2 .inner_1400 { display: flex; flex-wrap: wrap; justify-content: space-between; }
#sec2 .inner_1400 .tit_02 { width: 100%; margin-bottom: 80px; }
#sec2 .inner_1400 > div { position: relative; width: calc((100% - 30px) / 2); padding: 90px 90px 75px; background: rgba(255,255,255,0.7); box-shadow: 0px 10px 30px 0 rgb(0 0 0 / 5%); }
#sec2 p { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; width: 110px; height: 110px; margin: 0 auto; border-radius: 50%; background: #ccc; }
#sec2 h3 { padding: 0 0 30px; font-size: 30px; font-weight: 400; text-align: center; }
#sec2 .inner_1400 > div li { margin-left: 27px; text-indent: -27px; font-size: 18px; font-weight: 600; }
#sec2 .inner_1400 > div li::before { content: ''; display: inline-block; width: 17px; height: 17px; margin-right: 10px; border: 5px solid; border-radius: 50%; box-sizing: border-box; vertical-align: middle; }
#sec2 .inner_1400 > div li + li { margin-top: 15px; }

#sec2 .inner_1400 .l_box p { background: linear-gradient(0deg, #6a9fe3 15%, #3973d3 100%); }
#sec2 .inner_1400 .l_box li::before { border-color: #6197e0; }
#sec2 .inner_1400 .l_box li span { color: #2e43c6 ; }
#sec2 .inner_1400 .r_box p { background: linear-gradient(0deg, #72d2d7 15%, #41b8bf 100%); }
#sec2 .inner_1400 .r_box li::before { border-color: #5abfcb; }
#sec2 .inner_1400 .r_box li span { color: #01948f ; }

@media screen and (max-width: 1400px) {
	#sec2 { background-size: 44%, 50%, 100%; }
	#sec2 .inner_1400 > div { padding: 90px 4% 60px; }
}
@media screen and (max-width: 600px) {
	#sec2 { margin-top: 60px; padding: 40px 0 50px; background: url(../img/services/489ban/app/circle03_sp.svg)no-repeat left -180px top -130px, url(../img/services/489ban/app/circle04_sp.svg)no-repeat right -240px bottom -200px, linear-gradient(90deg, rgba(113,124,228,0.3), rgba(101,215,203,0.3)); background-size: 94%, 94%, 100%; }
	#sec2 .inner_1400 { display: block; }
	#sec2 .inner_1400 .tit_02 { margin-bottom: 60px; }
	#sec2 .inner_1400 > div { width: 100%; padding: 40px 30px; }
	#sec2 .inner_1400 > div li { margin-left: 18px; text-indent: -18px; font-size: 14px; }
	#sec2 .inner_1400 > div li + li { margin-top: 10px; }
	#sec2 .inner_1400 > div li::before { width: 12px; height: 12px; margin-right: 6px; border: 4px solid; }
	#sec2 .inner_1400 .r_box { margin-top: 70px; }
	#sec2 h3 { padding: 0 0 20px; font-size: 22px; }
	#sec2 p { width: 70px; height: 70px; }
	#sec2 p > img { width: 50%; height: auto; }
}


/* ---------------------------------------------------
	#sec3
------------------------------------------------------ */
#sec3 { padding-top: 70px; }
#sec3 .tit_01 { font-size: 35px; line-height: 1.3; }
#sec3 .tit_01 + p { margin-top: 20px; font-size: 17px; }
#sec3 .l_box { width: 52%; padding-top: 30px; }
#sec3 .l_box p:not(.note) { line-height: 1.6; }
#sec3 .l_box .note { margin-top: 10px; }
#sec3 > ul { display: flex; justify-content: space-between; flex-wrap: wrap; }
#sec3 > ul:nth-of-type(1) { margin-top: 30px; }
#sec3 > ul:nth-of-type(1) li { position: relative; display: flex; width: calc((100% - 30px)/ 2); height: 390px; margin-top: 30px; padding: 40px 60px; box-sizing: border-box; background: #f5f5f5; }
#sec3 > ul:nth-of-type(1) li > p { position: absolute; right: 40px; bottom: -12px; width: 38%; text-align: right; }
#sec3 > ul:nth-of-type(1) li > p img { height: auto; }
#sec3 > ul:nth-of-type(1) .ico { position: absolute; z-index: 1; overflow: hidden; }
#sec3 > ul:nth-of-type(1) li:nth-of-type(1) .ico { height: 126px; right: -15px; bottom: 10px; }
#sec3 > ul:nth-of-type(1) li:nth-of-type(4) .ico { right: -10px; bottom: 17px; }

#sec3 > ul:nth-of-type(2) li,
#sec3 > ul:nth-of-type(2) li .img { display: flex; }
#sec3 > ul:nth-of-type(2) { margin: 90px auto 0; max-width: 1100px; }
#sec3 > ul:nth-of-type(2) li { flex-direction: column; align-content: center; width: calc((100% - 4px) / 3); border-left: 1px solid #dadada; padding: 0 50px; box-sizing: border-box; }
#sec3 > ul:nth-of-type(2) li:last-of-type { border-right: 1px solid #dadada; }
#sec3 > ul:nth-of-type(2) li .img { align-items: center; height: 187px; margin: 0 auto; }
#sec3 > ul:nth-of-type(2) li dt { margin: 10px 0 20px; font-size: 25px; font-weight: 600; text-align: center;}
#sec3 > ul:nth-of-type(2) li dd p:not(.note) { font-size: 17px; line-height: 1.6; }
#sec3 > ul:nth-of-type(2) li dd .note { display: inline-block; margin-top: 10px; }
#sec3 > ul:nth-of-type(2) li dd a { text-decoration: underline; color: #3650db; }
#sec3 > ul:nth-of-type(2) li img { object-fit: contain; }

#sec3 #group_app{
	margin: 110px auto 0; padding: 15px 85px 0 55px; max-width: 1100px;
	background: #e3f7f9; box-sizing: border-box; border-radius: 10px;
	display: flex; align-items: center;
}
#sec3 #group_app .img{ margin-right: 5%; width: 260px;}
#sec3 #group_app .img img{ margin-bottom: -12px;}
#sec3 #group_app dl{ width: calc(95% - 260px);}
#sec3 #group_app dt{ margin-bottom: 15px; color: #009e99; font-size: 33px; font-weight: 600;}
#sec3 #group_app dd .note{ margin-top: 20px; font-size: 14px;}

@media screen and (hover: hover) {
	#sec3 > ul:nth-of-type(2) li dd a:hover { text-decoration: none; }
}

@media screen and (max-width: 1300px) {
	#sec3 > ul:nth-of-type(1) li { height: 328px; padding: 40px 30px; }
	#sec3 > ul:nth-of-type(1) li > p { right: 20px; }
	#sec3 .l_box { width: 55.5%; padding: 0; }
	#sec3 .tit_01 { font-size: 30px; }
	#sec3 .tit_01 + p { margin-top: 15px; font-size: 16px; }
	
	#sec3 > ul:nth-of-type(2) li { padding: 0 2%; }
	#sec3 > ul:nth-of-type(2) li dt { margin: 10px 0 15px; font-size: 22px; }
	#sec3 > ul:nth-of-type(2) li dd p:not(.note) { font-size: 16px; }
}
@media screen and (max-width: 600px) {
	#sec3 { padding-top: 40px; }
	#sec3 > ul { display: block; }
	#sec3 > ul:nth-of-type(1) li,
	#sec3 > ul:nth-of-type(2) li { width: 100%; }
	#sec3 > ul:nth-of-type(1) li { position: static; align-items: flex-start; justify-content: space-between; height: auto; margin-top: 15px; padding: 30px 20px; }
	#sec3 .l_box { padding-top: 20px; }
	#sec3 .l_box p:not(.note) { margin-top: 10px; font-size: 14px; line-height: 1.5; }
	#sec3 .l_box .note,
	#sec3 > ul:nth-of-type(2) li dd .note { margin-top: 5px; }
	#sec3 .tit_01 { font-size: 20px; }
	#sec3 > ul:nth-of-type(1) li > p { position: relative; right: 0; bottom: 0; width: 42%; }
	#sec3 > ul:nth-of-type(1) li:nth-of-type(1) .ico,
	#sec3 > ul:nth-of-type(1) li:nth-of-type(4) .ico { width: 100px; height: 100px; right: -20px; bottom: 0; }
	#sec3 > ul:nth-of-type(2) { margin-top: 30px; }
	#sec3 > ul:nth-of-type(2) li { flex-direction: initial; justify-content: space-between; padding: 20px 0; border-bottom: 1px solid #dadada; }
	#sec3 > ul:nth-of-type(2) li,
	#sec3 > ul:nth-of-type(2) li:last-of-type { border-left: none; border-right: none; }


	#sec3 > ul:nth-of-type(2) li .img { display: block; width: 75px; height: auto; margin: 0; }
	#sec3 > ul:nth-of-type(2) li img { max-height: 100px; width: 100px; }
	#sec3 > ul:nth-of-type(2) li dl { width: calc(100% - 90px); }
	#sec3 > ul:nth-of-type(2) li dt { margin: 0 0 5px; font-size: 16px; text-align: left; }
	#sec3 > ul:nth-of-type(2) li dd p:not(.note) { font-size: 14px; line-height: 1.5; }
	#sec3 > ul:nth-of-type(2) li dd .note { margin-top: 5px; }
	#sec3 #group_app{
		margin: 30px auto 0; padding: 30px 20px; max-width: 100%;
		flex-direction: column;
	}
	#sec3 #group_app .img{ margin: 0 auto 15px; width: 60%; text-align: center;}
	#sec3 #group_app .img img{ margin-bottom: 0; max-width: 100%; height: auto; object-fit: contain;}
	#sec3 #group_app dl{ width: 100%;}
	#sec3 #group_app dt{ font-size: 18px;}
}
@media screen and (max-width: 400px) {
	#sec3 .tit_01 { font-size: 18px; }
}


/* ---------------------------------------------------
	#sec4
------------------------------------------------------ */
#sec4 { margin-top: 110px; padding: 80px 0 90px; background: linear-gradient(90deg, rgba(113,124,228,0.3), rgba(101,215,203,0.3))fixed; }
#sec4 .inner_1400 > p { margin-top: 10px; font-size: 20px; text-align: center; }
#sec4 .inner_1400 > ol { display: flex; margin-top: 60px; justify-content: space-between; }
#sec4 .inner_1400 > ol li { position: relative; display: flex; flex-direction: column; align-items: center; list-style: none; width: calc(90% / 6); }
#sec4 .inner_1400 > ol li:not(:last-child) { padding-right: 2%; }
#sec4 .inner_1400 > ol li:not(:last-child)::after { position: absolute; top: 90px; right: 2%; content: ''; width: 0; height: 0; border-style: solid; border-width: 15px 0 15px 15px; border-color: transparent transparent transparent #8eb3ea; transform: translateY(-50%);}
#sec4 .inner_1400 > ol li > p { position: relative; display: flex; align-items: center; justify-content: center; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,0.7); }
#sec4 .inner_1400 > ol li:nth-of-type(1) > p img { padding-left: 20px; }
#sec4 .inner_1400 > ol dt { padding: 30px 0 20px; font-size: 27px; text-align: center; line-height: 1.3; }
#sec4 .inner_1400 > ol dd p:not(.note) { line-height: 1.6; }
#sec4 .inner_1400 > ol dd .note { margin-top: 5px; }

@media screen and (max-width: 1300px) {
	#sec4 .inner_1400 > ol li > p { width: 150px; height: 150px; }
	#sec4 .inner_1400 > ol dt { padding: 20px 0 15px; font-size: 21px; }
	#sec4 .inner_1400 > ol li:not(:last-child)::after { top: 75px; right: 1%; }
}
@media screen and (max-width: 600px) {
	#sec4 { margin-top: 60px; padding: 40px 0 60px; }
	#sec4 .inner_1400 > p { margin-top: 15px; font-size: 14px; }
	#sec4 .inner_1400 > ol { display: block; margin-top: 30px; }
	#sec4 .inner_1400 > ol li { align-items: flex-start; flex-direction: initial; justify-content: space-between; width: 100%; }
	#sec4 .inner_1400 > ol li:not(:last-child) { padding: 0 0 30px; }
	#sec4 .inner_1400 > ol li:not(:last-child)::after { z-index: 2; top: 75px; right: inherit; left: 32.5px; transform: rotate(90deg); border-width: 10px 0 10px 10px; }
	#sec4 .inner_1400 > ol li > p { width: 75px; height: 75px; }
	#sec4 .inner_1400 > ol li > p img { width: 58%; height: auto; }
	#sec4 .inner_1400 > ol li:nth-of-type(n+4) > p img { max-height: 42px; width: auto; }
	#sec4 .inner_1400 > ol li:nth-of-type(1) > p img { padding-left: 9px; }
	#sec4 .inner_1400 > ol dl { width: calc(100% - 90px); }
	#sec4 .inner_1400 > ol dt { padding: 0 0 5px; font-size: 16px; font-weight: 600; text-align: left; }
}


/* ---------------------------------------------------
	sec5
------------------------------------------------------ */
#sec5 { padding: 90px 0 100px; }
#sec5 .tit_03 { margin-bottom: 50px; }
#sec5 [id^="sec5_"]:not(#sec5_1) { margin-top: 50px; }
#sec5 [id^="sec5_"] h3 { margin-bottom: 20px; font-size: 22px; color: #8f8f8f; }
#sec5 dl { border-radius: 8px; background: #f5f5f6; }
#sec5 dl + dl { margin-top: 15px; }
#sec5 .acc_tit { position: relative; padding: 25px 35px 35px; font-size: 18px; font-weight: 600; line-height: 1; }
#sec5 dd { padding: 0 47px 35px 35px; }
#sec5 dd a { display: block; margin-top: 5px; text-decoration: underline; color: #3650db; }
#sec5 .acc_tit::before { content: 'Q.'; margin-right: 10px; font-size: 30px; font-weight: 400; }
#sec5 .acc_tit::after { position: absolute; right: 35px; top: 50%; content: ''; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 8px 6px 0 6px; border-color: rgba(0,0,0,0.4) transparent transparent transparent; transform: translateY(-50%);}
#sec5 .acc_tit.active::after { transform: translateY(-50%) rotate(180deg); }

@media screen and (hover: hover) {
	#sec5 dd a:hover { text-decoration: none; }
}
@media screen and (max-width: 600px) {
	#sec5 { padding: 40px 0 60px; }
	#sec5 .tit_03 { margin-bottom: 15px; }
	#sec5 [id^="sec5_"]:not(#sec5_1) { margin-top: 30px; }
	#sec5 [id^="sec5_"] h3 { margin-bottom: 10px; font-size: 16px; }
	#sec5 .acc_tit { display: flex; align-items: flex-start; padding: 20px 40px 20px 20px; font-size: 14px; line-height: 1.3; }
	#sec5 .acc_tit::before { font-size: 20px; font-weight: 500; line-height: 1; }
	#sec5 .acc_tit::after { right: 15px; border-width: 6px 4px 0 4px; }
	#sec5 dl + dl { margin-top: 10px; }
	#sec5 dd { padding: 0 24px 20px 20px; }
}


/* ---------------------------------------------------
	sec6
------------------------------------------------------ */
#sec6 { padding: 100px 0 110px; background: #f5f5f6; }
#sec6 .tit_03 { margin-bottom: 60px; }
#sec6 h3 { font-size: 20px; }

#sec6 .app_info{
	display: grid;
	grid-template-columns: 200px 2.7% 79%;
	grid-template-rows: auto auto auto;
}
#sec6 .app_info h3{
	grid-column: 1 / 2;
	grid-row: 1 / 4;
	display: flex; justify-content: center; align-items: center;
	text-align: center; border-radius: 10px;
}
#sec6 .app_info h3 span{ color: #fff; font-size: 22px; font-weight: 600;}
#sec6 .app_info h3 span span{ font-size: 18px; font-weight: 400;}
#sec6 .app_info .price{ grid-column: 3 / 4; grid-row: 1 / 2; }
#sec6 .app_info .app_price{	grid-column: 3 / 4; grid-row: 3 /4; }

#sec6 .price,
#sec6 .option,
#sec6 .option > div ul,
#sec6 .app_price { display: flex; }

#sec6 .price { justify-content: space-between;}
#sec6 .price li { width: calc((100% - 1px) / 2); text-align: center; }
#sec6 .price dt { padding: 7px 0; border-radius: 8px; }
#sec6 .price dd:not(.note) { font-weight: 600; }
#sec6 .price dd .num { letter-spacing: 0; }
#sec6 .price dd .tax { font-size: 18px; }
#sec6 .price li:first-child { padding-right: 40px; }
#sec6 .price li:last-child { padding-left: 40px; border-left: 1px solid #b2b2b2; }
#sec6 .price dt { font-size: 20px; }
#sec6 .price dd { margin-top: 10px; }
#sec6 .price dd { color: #364ddc; }
#sec6 .price dd .yen { font-size: 50px; }
#sec6 .price dd .num { font-size: 60px; }

#sec6 #single_app{ margin-bottom: 47px;}
#sec6 #single_app h3{ background: #6d7be8;}
#sec6 #single_app .price dt { background: #dfe2f7; }
#sec6 #single_app .price dd { color: #364ddc; }

#sec6 #group_app{ margin-bottom: 37px;}
#sec6 #group_app h3{ background: #43aaa5;}
#sec6 #group_app .price dt { background: #d4eae9; }
#sec6 #group_app .price dd { color: #009e99; }
#sec6 #group_app .price dd .sup{ display: block;}

#sec6 .app_price{
	margin-top: 25px; padding: 20px;
	align-items: center;
	background: #fff; border-radius: 10px;
}
#sec6 .app_price dt{ margin-right: 25px; font-size: 18px;}
#sec6 .app_price dd{ color: #717171; font-size: 14px;}
#sec6 .app_price dd li{ padding-left: 1em; text-indent: -1em;}
#sec6 .app_price li::before { content: '・'; margin-right: 0.5em; }

#sec6 .notice { margin-top: 10px; }
#sec6 .notice li { margin-top: 10px; padding-left: 2em; text-indent: -2em; }
#sec6 .notice li::before { content: '注)'; margin-right: 0.5em; }

#sec6 .option { margin-top: 70px; }
#sec6 .option h3 { position: relative; width: 400px; padding: 45px 15px 45px 140px; box-sizing: border-box; border-radius: 8px 0 0 8px; color: #fff; background: #7a7a7a; line-height: 1.6;}
#sec6 .option h3 span { border-bottom: 2px solid #fff600; }
#sec6 .option h3::before { position: absolute; top: 20px; left: -62px; content: ''; display: block; width: 179px; height: 152px; background: url(../img/services/489ban/app/sec6_01.png)no-repeat center; }
#sec6 .option > div { width: 700px; padding: 25px 40px 28px; box-sizing: border-box; border-radius: 0 8px 8px 0; background: #fff; }
#sec6 .option > div li { width: calc((100% - 1px) / 2); }
#sec6 .option > div li:first-child { padding-right: 25px; }
#sec6 .option > div li:last-child { padding-left: 25px; border-left: 1px solid #cbcbcb; }
#sec6 .option > div dt { border-radius: 8px; font-size: 18px; background: #ededed; }
#sec6 .option .price dd:not(.note) { color: #5e5e5e; }
#sec6 .option .price dd .yen { font-size: 40px; }
#sec6 .option .price dd .num { font-size: 50px; }
#sec6 .option .note { margin-top: 10px; }

@media screen and (max-width: 1300px) {
	#sec6 .option h3 { width: 36%; padding: 120px 23px 20px; font-size: 18px; }
	#sec6 .option h3::before { top: -46px; left: 50%; transform: translateX(-50%); }
	#sec6 .option h3 br { display: none; }
}
@media screen and (max-width: 600px) {
	#sec6 { padding: 50px 0 60px; }
	#sec6 .app_info{
		display: grid;
		grid-template-columns: 100%;
		grid-template-rows: auto auto auto;
	}
	#sec6 .app_info h3{
		margin-bottom: 20px; padding: 10px; line-height: 1.2;
		grid-column: 1 / 2; grid-row: 1 / 2;
	}
	#sec6 .app_info h3 span{ font-size: 18px; font-weight: 600;}
	#sec6 .app_info h3 span span{ font-size: 16px; font-weight: normal;}
	#sec6 .app_info .price{ grid-column: 1 / 2; grid-row: 2 / 3; }
	#sec6 .app_info .app_price{ grid-column: 1 / 2; grid-row: 3 /4; }
	#sec6 .tit_03 { margin-bottom: 30px; }
	#sec6 .price li { box-sizing: border-box; }
	#sec6 .price li:first-child,
	#sec6 .option > div li:first-child { padding-right: 4%; }
	#sec6 .price li:last-child,
	#sec6 .option > div li:last-child { padding-left: 4%; }
	#sec6 .price dt,
	#sec6 .option > div dt { padding: 3px 0; font-size: 14px; letter-spacing: 0; }
	#sec6 .price dd .yen,
	#sec6 .option .price dd .yen { font-size: 28px; }
	#sec6 .price dd .num,
	#sec6 .option .price dd .num { font-size: 28px; letter-spacing: 0; }
	#sec6 .price dd .tax { position: relative; bottom: 8px; display: block; line-height: 1; font-size: 14px; text-align: right; }
	#sec6 .price dd .note { margin-top: 10px; text-align: left; }
	#sec6 #single_app{ margin-bottom: 20px;}
	#sec6 #group_app{ margin-bottom: 20px;}
	#sec6 #group_app .price dd .sup { font-weight: normal; color: #717171;}
	
	#sec6 .app_price{ margin-top: 20px; padding: 10px 15px; flex-direction: column;}
	#sec6 .app_price dt{ margin: 0 0 5px; font-size: 16px;}
	#sec6 .notice { margin-top: 25px; }
	#sec6 .acting { display: block; margin-top: 30px; padding: 20px 4%; }
	#sec6 .acting h3,
	#sec6 .acting > p:nth-of-type(1),
	#sec6 .acting > p:nth-of-type(2) { width: 100%; }
	#sec6 .acting h3 { font-size: 16px; }
	#sec6 .acting > p { font-size: 14px; }
	#sec6 .acting > p:nth-of-type(1),
	#sec6 .acting > p:nth-of-type(2) { padding: 0; margin-top: 5px; }
	#sec6 .acting > p span { font-size: 20px; }
	#sec6 .acting .tax { font-size: 13px; }
	#sec6 .option { display: block; margin-top: 40px; }
	#sec6 .option h3 { width: 100%; padding: 20px 20px 20px 110px; border-radius: 8px 8px 0 0; }
	#sec6 .option h3::before { top: calc(50% - 41px); left: 8.5%; width: 100px; height: 82px; background-size: contain; }
	#sec6 .option > div { width: 100%; padding: 20px 4% 25px; border-radius: 0 0 8px 8px; }
}
@media screen and (max-width: 500px) {
	#sec6 .option h3 { padding: 20px 20px 20px 90px; font-size: 16px; }
	#sec6 .inner_1100 > .price dt,
	#sec6 .option > div dt { font-size: 14px; }
	#sec6 .inner_1100 > .price dd .yen,
	#sec6 .option .price dd .yen { font-size: 20px; }
	#sec6 .inner_1100 > .price dd .num,
	#sec6 .option .price dd .num { font-size: 28px; }
	#sec6 .price dd .tax { bottom: 4px; font-size: 12px; letter-spacing: 0; }
}


/* ---------------------------------------------------
	sec7
------------------------------------------------------ */
#sec7 { position: relative; /*margin-bottom: 20px;*/ background: url(../img/services/489ban/app/circle01.svg)no-repeat left -145px top -93px / 940px 940px, linear-gradient(90deg, #6b50eb 15%, #5adbcb 100%)fixed; background-size: 58.5%, 100%; overflow: hidden; }
#sec7 .inner_1400 { display: flex; height: 540px; }
#sec7 .l_box {  position: absolute; z-index: 2; width: 34%; min-width: 450px; padding: 130px 0 100px; color: #fff; }
#sec7 .tit_03 span { opacity: 0.5; }
#sec7 .tit_03 + p { padding: 35px 0; font-size: 18px; }
#sec7 .btn_link { width: 100%; max-width: 450px; height: 90px; border-radius: 45px; color: #4a46d5; background: #fff; }
#sec7 .btn_link span::after { content: none; }
#sec7 picture { position: absolute; z-index: 1; right: 0; width: 64%; height: 100%; }
#sec7 picture img { width: 100%; min-width: 1022px; height: 100%; }

@media screen and (hover: hover) {
	#sec7 .l_box a:hover { text-decoration: none; opacity: 0.75; }
}

@media screen and (min-width: 601px) {
	#sec7 .tit_03 { font-weight: 600; text-align: left; }
}
@media screen and (max-width: 1400px) {
	#sec7 { background-size: 940px, 100%; }
}
@media screen and (max-width: 600px) {
	#sec7 { background: linear-gradient(90deg, #6b50eb 15%, #5adbcb 100%); }
	#sec7 .inner_1400 { display: block; width: 100%; height: auto; }
	#sec7 .l_box { position: static; width: 92%; min-width: 0; margin: 0 auto; padding: 40px 0 0; }
	#sec7 .tit_03 { text-align: center; }
	#sec7 .tit_03 + p { padding: 20px 0; font-size: 14px; }
	#sec7 .btn_link span::after { content:''; }
	#sec7 p:last-child { text-align: center; }
	#sec7 picture { position: static; width: 100%; }
	#sec7 picture img { min-width: 0; }
}
@media screen and (max-width: 400px) {
	#sec7 .btn_link { position: relative; height: 80px; }
	#sec7 .btn_link span::after { position: absolute; right: 20px; }
}