@charset "UTF-8";

a.underline { color:#0f74b6; text-decoration:none; }

/* システム導入部門の方へ */
#intro .lead_txt { color:#fff; text-shadow: 0.5px 0.866px 5px rgba(36, 50, 55, 0.68); background:url("../img/introduction/intro_lead_bg.jpg") center no-repeat; background-size:cover; }
#intro .pagelist > li { display:flex; justify-content:flex-start; padding-bottom:50px; border-bottom:1px solid  #d8dcde; }
#intro .pagelist > li + li { padding-top:50px; }
#intro .pagelist .icon { margin-right:40px; flex-shrink:0; }
#intro .pagelist .con_h3 { font-size:30px; }
#intro .pagelist .btn { margin-top:40px; }
.intro_subnav { display:flex; padding:0 20px; justify-content:space-between; }
.intro_subnav li { width:31%; text-align:center; box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.18); }
.intro_subnav a { display:block; height:100%; padding:30px 30px 50px; color:#0f74b6; background:#e0f2fb; }
.intro_subnav .btn_img { display:block; width:160px; height:160px; margin:0 auto 20px; background-position:0 0; background-repeat:no-repeat; background-size:160px auto; }
.intro_subnav .btn01 .btn_img { background-image:url("../img/introduction/btn01.png"); }
.intro_subnav .btn02 .btn_img { background-image:url("../img/introduction/btn02.png"); }
.intro_subnav .btn03 .btn_img { background-image:url("../img/introduction/btn03.png"); }
.intro_subnav h3 { font-size:24px; margin-bottom:20px; }
.intro_subnav .active a, .intro_subnav a:hover { background:#0f74b6; color:#fff; }
.intro_subnav .active .btn_img, .intro_subnav a:hover .btn_img { background-position:0 -160px; }

/* ご利用までの流れ */
.flow_list > li { display:flex; padding:0 20px; }
.flow_list .step { width:120px; margin-right:40px; flex-shrink:0; position:relative; }
.flow_list .step:before { content:""; display:block; width:10px; height:100%; background:#87b9da; position:absolute; top:0; left:50%; margin-left:-5px; z-index:0; }
.flow_list > li:last-child .step:before { height:70px; }
.flow_list .step img { z-index:1; position:relative; }
.flow_list .detail { width:calc(100% - 160px); display:flex; justify-content:space-between; padding-bottom:50px; border-bottom:1px solid #d8dcde; }
.flow_list .detail .img { width:40%; flex-shrink:0; }
.flow_list .detail .txt { width:56%; }
.flow_list .detail .con_h3 { font-size:30px; margin-top:-12px; }
.flow_list .detail .box { margin-top:40px; background:#fff; box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.18); }
.flow_list .detail .box h4 { padding:12px 30px; font-size:20px; color:#fff; background:#87b9da; }
.flow_list .detail .box .inner { padding:10px 30px 20px; font-size:14px; }
.flow_list .detail .box .con_tbl { width:100%; }
.flow_list .detail .box .con_tbl th,.flow_list .detail .box .con_tbl td { padding:5px 0; border:0; }
.flow_list .detail .box .con_tbl th { white-space:nowrap; padding-right:20px; }
.flow_list .detail a.underline { text-decoration:underline; }
.flow_list > li + li .step, .flow_list > li + li .detail { padding-top:50px; }

/* システム動作環境 */
.env_box { background:#fff; padding:50px; }
.env_box + .env_box { margin-top:60px; }
.env_box .con_tbl th, .env_box .con_tbl td { padding:20px; }
.env_box .con_tbl th { width:auto; }
.env_box .con_tbl td.num { color:#0f74b6; text-align:center; }
.env_box .con_tbl td .notice { color:#888; }
.env_box .con_tbl a.underline { text-decoration:underline; }

/* 連携製品 */
#option .main_img { text-align:center; margin-top:30px; }
#option .main_img .option_btn { display:flex; justify-content:flex-start; padding:0 5.5%; }
#option .main_img .option_btn li { width:33%; opacity:0; }
#option .main_img .img { max-width:960px; margin:auto;  }
#option .main_img .img p { margin-top:40px; }
#option .main_img .option_btn.bottom { margin-top:-55px; }
#option .main_img .option_btn_sp { display:none; }
#option .main_img a:hover img { opacity:1; -webkit-transform:translate(0,5px); transform:translate(0,5px); }
#option .main_img.show .option_btn.top li:nth-child(1) { animation:popAnimated forwards 1.5s ease-out 0.7s; }
#option .main_img.show .option_btn.top li:nth-child(2) { animation:popAnimated forwards 1.5s ease-out 1s; }
#option .main_img.show .option_btn.top li:nth-child(3) { animation:popAnimated forwards 1.5s ease-out 1.3s; }
#option .main_img.show .option_btn.bottom li { animation:popAnimated forwards 1.5s ease-out 1.6s; }

@keyframes popAnimated{ 100% { opacity:1; -webkit-transform:none; transform:none; } }

#option .con_title .con { padding:30px 20px; }
#option .con_title h2 { margin-left:50px; line-height:1.3; }
#option #option01 { background:url("../img/introduction/option/title_bg01.jpg") center no-repeat; background-size:cover; }
#option #option02 { background:url("../img/introduction/option/title_bg02.jpg") center no-repeat; background-size:cover; }
#option #option03 { background:url("../img/introduction/option/title_bg03.jpg") center no-repeat; background-size:cover; }
#option #option04 { background:url("../img/introduction/option/title_bg04.jpg") center no-repeat; background-size:cover; }
.option_list { display:flex; justify-content:flex-start; flex-wrap:wrap; margin:30px 0; }
.option_list li { width:24%; margin-right:1.3%; background:#fff; text-align:center; border-top:5px solid #0f74b6; position:relative; box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.18); }
.option_list li:nth-child(4n) { margin-right:0; }
.option_list li:nth-child(n+5) { margin-top:1.3%; }
/*.option_list li:after { content:""; display:block; width:1px; height:100%; background:#e0e0e0; position:absolute; bottom:0; right:0; }
.option_list li:nth-child(4n):after { content:none; }*/
.option_list li a { display:block; height:100%; padding:30px; }
.option_list .noimg a { display:flex; justify-content:center; align-items:center; }
.option_list li a:hover { background:#e7f1f8; color:#333; }
.option_list li a:hover img { opacity:1; }
.option_list li .txt { padding:12px 0; }
.option_list li h4 { color:#0f74b6; }
.option_list li p { font-size:14px; }
.option_list.inhouse { box-shadow:none; margin-bottom:50px; padding-bottom:50px; border-bottom:1px solid #d8dcde; }
.option_list.inhouse li { width:31%; margin-right:3.5%; box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.18); border-top:0; }
.option_list.inhouse li:after { content:none; }
.option_list.inhouse li:nth-child(3n) { margin-right:0; }
.option_list.inhouse li:nth-child(n+4) { margin-top:3.5%; }
.option_list.inhouse li a { padding:40px 30px; }
.option_list.inhouse li h4 { margin-bottom:25px; padding-bottom:25px; text-align:center; border-bottom:1px solid #9fa0a0; }
#option #denpyo { margin-top:50px; padding-top:50px; border-top:1px solid #d8dcde; }
#option #repotovas { border:0; }
#option #repotovas .con_h2 { margin-bottom:20px; }

.option_list li .logo{min-height: 84px;display: flex; align-items: center;}

.option_img { margin:40px 0; }
.option_img.pad img { padding:20px; background:#fff; }
.con_h3 + .point_list01, .con_h3 + .point_list02 { margin-top:30px; }
.spec + .btn { margin-top:50px; }
.spec .list + p { margin-top:20px; }
.notice_box { margin-top:40px; }

/* パートナー一覧 */
#partner .lead_txt { padding-bottom:0; }
#partner .partner_list { margin-top:30px; }
#partner .partner_list .noimg a { display:flex; justify-content:center; align-items:center; }
.partner_box { border:1px solid #ccc; padding:30px; display:flex; justify-content:space-between; align-items:center; background:#fff; }
.partner_box + .partner_box { margin-top:30px; }
.partner_box .img { width:30%; text-align:center; }
.partner_box .txt { width:65%; }
.partner_box .btn a { box-shadow:none; background:#999; }
.partner_box .btn a:hover { background:#0f74b6; }
#partner .partner_list .company{min-height:  105px;}
/* パートナー募集 */
#offer .lead_txt .list { display:inline-block; margin-bottom:40px; text-align:left; font-size:120%; }
.offer_img span { display:inline-block; padding:20px; background:#fff; }
.offer_list01 { display:block; }
.offer_list01 li { width:100%; margin-top:40px; margin-right:0; }
.offer_list02 .btn { margin-top:40px; }
.offer_list02 .btn a { box-shadow:none; }
.offer_list03 { display:flex; justify-content:space-between; margin-top:30px; position:relative; }
.offer_list03:after { display:inline-block; font-family:"Font Awesome 5 Free"; font-weight:900; content:"\f054\f054\f054"; font-size:20px; color:#0f74b6; position:absolute; top:50%; left:50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.offer_list03 > li { width:45%; padding:30px 40px 40px; background:#fff; border:1px solid #0f74b6; border-radius:15px; }

@media (min-width: 1201px) {
	#option .con_section .con { padding:0 20px; }
}
@media (max-width: 1200px) {
	.intro_subnav h3 { font-size:20px; }
	
	.flow_list > li { padding:0; }
	
	#option .main_img .option_btn { padding:0; }
}
@media (max-width: 1000px) {
	.flow_list .detail { flex-wrap:wrap; flex-direction:column-reverse; }
	.flow_list .detail .img, .flow_list .detail .txt { width:100%; }
	.flow_list .detail .img img { width:100%; max-width:600px; }
	.flow_list .detail .txt { margin-bottom:30px; }
	.flow_list .detail .box { margin-top:20px; }
	
	#option .lead_txt .con { padding:0 5%; }
	#option .main_img .img { padding:0 10px; }
	#option .main_img .img p { margin-top:20px; }
	#option .main_img .option_btn.bottom { margin-top:-35px; }
	#option .main_img a:hover img { -webkit-transform:none; transform:none; }
	#option .con_title .con { padding:30px 5%; }
	#option .con_title h2 { margin-left:30px; }
	#option .con_title .icon { width:100px; flex-shrink:0; }
	.option_list li a { padding:20px; }
	.option_list li .txt { padding:12px 0; }
}
@media (min-width: 801px) {
	#option .con_h3 { font-size:30px; }
	#option .series_box .title .txt { width:55%; }
	#option .series_box .title .img { width:41%; }
	#option #repotovas .series_box .title { align-items:flex-start; }
	#option #repotovas .series_box .title .img { padding-top:15px; }
	#option #repotovas .con_h2 { text-align:left; }
	#partner .partner_list .company{min-height:  140px;}
}
@media (max-width: 800px) {
	#intro .pagelist > li { padding-bottom:40px; }
	#intro .pagelist > li + li { padding-top:40px; }
	#intro .pagelist .icon { width:120px; margin-right:30px; }
	#intro .pagelist .con_h3 { font-size:24px; }
	#intro .pagelist .btn { margin-top:20px; }
	.intro_subnav .btn_img { width:100px; height:100px; margin-bottom:10px; background-size:100px auto; }
	.intro_subnav h3 { font-size:18px; }
	.intro_subnav .active .btn_img, .intro_subnav a:hover .btn_img { background-position:0 -100px; }
		
	.flow_list .detail .con_h3 { font-size:20px; }
	.flow_list .detail .box h4 { font-size:18px; padding:10px 20px; }
	.flow_list .detail .box .inner { padding:10px 20px; font-size:13px; }
	.flow_list .detail .box .con_tbl th, .flow_list .detail .box .con_tbl td { padding:2px 0; }
	.flow_list .detail .box .con_tbl th { padding-right:15px; }

	.env_box { padding:30px; }
	.env_box + .env_box { margin-top:40px; }
	.env_box .con_tbl th, .env_box .con_tbl td { padding:15px; }
	
	#option .main_img .option_btn { display:none; }
	#option .main_img .img p { margin-top:0; }
	#option .main_img .option_btn_sp { display:flex; justify-content:space-between; flex-wrap:wrap; margin-top:20px; }
	#option .main_img .option_btn_sp li { width:49%; text-align:left; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.18); }
	#option .main_img .option_btn_sp li:nth-child(n+3) { margin-top:2%; }
	#option .main_img .option_btn_sp li a { display:flex; align-items:center; position:relative; height:100%; padding:10px 15px; padding-right:40px; border:2px solid #999; border-radius:5px; background:#fff; }
	#option .main_img .option_btn_sp li a:after { display:block; font-family:"Font Awesome 5 Free"; font-weight:900; content:"\f13a"; color:#999; position:absolute; top:50%; right:15px; margin-top:-10px; }
	#option .main_img .option_btn_sp li:nth-child(1) a { color:#9898d4; border-color:#9898d4; }
	#option .main_img .option_btn_sp li:nth-child(1) a:after { color:#9898d4; }
	#option .main_img .option_btn_sp li:nth-child(2) a { color:#86c785; border-color:#86c785; }
	#option .main_img .option_btn_sp li:nth-child(2) a:after { color:#86c785; }
	#option .main_img .option_btn_sp li:nth-child(3) a { color:#40a6c2; border-color:#40a6c2; }
	#option .main_img .option_btn_sp li:nth-child(3) a:after { color:#40a6c2; }
	#option .main_img .option_btn_sp li:nth-child(4) a { color:#f3a20a; border-color:#f3a20a; }
	#option .main_img .option_btn_sp li:nth-child(4) a:after { color:#f3a20a; }
	#option .con_title .icon { width:80px; }
	.option_list { justify-content:space-between; }
	.option_list li { width:49%; margin-right:0; }
	.option_list li:nth-child(n+3) { margin-top:2%; }
	/*.option_list li:nth-child(2n):after { content:none; }*/
	.option_list li p { font-size:13px; }
	.option_list.inhouse { justify-content:space-between; }
	.option_list.inhouse li { width:48%; margin-right:0!important; }
	.option_list.inhouse li:nth-child(n+3) { margin-top:3.5%; }
	.option_list.inhouse li h4 { margin-bottom:15px; padding-bottom:15px; }

	.offer_list03 { display:block; }
	.offer_list03:after { content:none; }
	.offer_list03 > li { width:100%; padding:20px 30px 30px; position:relative; }
	.offer_list03 > li:first-child:after { display:block; font-family:"Font Awesome 5 Free"; font-weight:900; content:"\f078"; font-size:20px; text-align:center; color:#0f74b6; position:absolute; bottom:-37px; left:50%; margin-left:-8px; }
	.offer_list03 > li + li { margin-top:40px; }
	
}
@media (max-width: 600px) {
	#intro .pagelist .icon { width:100px; margin-right:20px; }
	#intro .pagelist .con_h3 { font-size:18px; }
	#intro .pagelist .btn a { width:100%; min-width:0; }
	.intro_subnav a { padding:20px 10px; }
	.intro_subnav h3 { font-size:16px; }
	
	.flow_list > li { display:block; }
	.flow_list .step { width:100%; margin:0 0 10px; text-align:center; }
	.flow_list .step:before { display:none; }
	.flow_list .step img { width:80px; }
	.flow_list .detail { width:100%; padding-bottom:30px; }
	.flow_list .detail .txt { margin-bottom:20px; }
	.flow_list .detail .con_h3 { font-size:18px; margin-top:0; }
	.flow_list .detail .box { margin-top:10px; }
	.flow_list .detail .box h4 { font-size:15px; padding:6px 20px; }
	.flow_list > li + li .step { padding-top:30px; }
	.flow_list > li + li .detail { padding-top:0; }
	
	.env_box { padding:20px; }
	.env_box + .env_box { margin-top:30px; }
	.env_box .con_tbl th, .env_box .con_tbl td { padding:10px; }
	.env_box .con_tbl tr:first-child { display:none; }
	.env_box .con_tbl td:nth-child(1),
	.env_box .con_tbl td:nth-child(2) { padding-bottom:0; border-bottom:0; }
	.env_box .con_tbl td:nth-child(2),
	.env_box .con_tbl td:nth-child(3) { padding-top:0; }
	.env_box .con_tbl td:nth-child(2) { font-weight:bold; }
	.env_box .con_tbl td:nth-child(3) { font-size:12px; }

	#option .con_title .icon { width:60px; }
	#option .con_title h2 { margin-left:20px; }
	.option_list li a { padding:10px; }
	.option_list.inhouse { margin-bottom:30px; padding-bottom:40px; }
	.option_list.inhouse li { width:100%; }
	.option_list.inhouse li:nth-child(n+2) { margin-top:3.5%; }
	.option_list.inhouse li a { padding:15px; }
	#option #denpyo { margin-top:40px; padding-top:30px; }
	.option_img { margin:20px 0; }
	.notice_box { margin-top:20px; }
	
	.partner_box { display:block; padding:20px; }
	.partner_box + .partner_box { margin-top:20px; }
	.partner_box .img { width:100%; }
	.partner_box .txt { width:100%; margin-top:15px; }
}
@media (max-width: 480px) {
	#intro .pagelist .icon { width:80px; }
	.intro_subnav { flex-wrap:wrap; }
	.intro_subnav a { padding:10px 10px 15px; }
	.intro_subnav li { width:100%; margin-right:0; }
	.intro_subnav li:nth-child(n+2) { margin-top:4%; }
	.intro_subnav .btn_img { width:70px; height:70px; background-size:70px auto; }
	.intro_subnav .active .btn_img, .intro_subnav a:hover .btn_img { background-position:0 -70px; }
	
	#option .main_img .option_btn_sp li { width:100%; }
	#option .main_img .option_btn_sp li:nth-child(n+2) { margin-top:3%; }	
}