@charset "UTF-8";
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

.clearfix:after{
    content: ".";
    display: block;
    height: 0;
    font-size:0;
    clear: both;
visibility:hidden;
}
.clearfix{ display: inline-block; }
/* Hides from IE Mac */
* html .clearfix{ height: 1%; }
.clearfix{ display:block; }

/* ---------- 初期 ---------- */
body { letter-spacing: 0.01em; font-family: 'M PLUS 1p', sans-serif; -webkit-text-size-adjust: 100%; font-size: 400; color: #221714;}
img { max-width: 100%;}
a { text-decoration: none;}
strong { font-weight: bold;}
/* ---------- /共通部分 ---------- */
#jougetyuou { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); margin: auto;}
#kadomaru { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;}
#resbtn { -webkit-appearance: none;}
#gurade { background: -moz-linear-gradient(開始位置, 開始色, 終了色); 
background: -webkit-linear-gradient(開始位置, 開始色, 終了色); 
background: linear-gradient(to 方向, 開始色, 終了色); }
.ancr { position: relative; transition: 0.5s;}
.anca { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 10; cursor: pointer;}
.ancr:hover { transition: 0.5s; cursor: pointer;}
/* ---------- /参考タグ部分 ---------- */

/* PC */
@media all{
	
.wrap { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;}


/* ページ */
main { display: block}

.pagehead { width: 98%; max-width: 1320px; margin: 0 auto;}
.pagehead img { width: 100%; height: auto; display: block;}
.pagebody { padding: 55px 0;}

/* パンくず */
.pankuzu { width: 98%; max-width: 1320px; margin: 0 auto; font-size: 17px; letter-spacing: 0.05em; margin-top: 18px;}
.pankuzu a { color: #000;}
.pankuzu .txt { line-height: 1.66em;}

/* システムサポート契約者様専用メニュー */
#suserlistbody { width: 70%; max-width: 1320px; margin: 0 auto;}
.suserlist_ttl { text-align: center; color: #fff; font-weight: 500; font-size: 25px; background: #1D3156; letter-spacing: 0.075em; padding: 20px 0; margin-bottom: 26px;}
	.pagelink { display: block; padding-top: 50px; margin-top: -50px;}
.suserlist_inner { width: 80%; max-width: 1100px; margin: 0 auto 48px; font-size: 0; text-align: left;}
.suserlist_inner .suserlist_box { box-sizing: border-box; border: solid 1px #231815; width: 31.4%; display: inline-block; vertical-align: top; margin-right: 2%; padding: 10px 0 20px; margin-bottom: 40px;}
.suserlist_inner .suserlist_box:nth-child(3n) { margin-right: 0;}
.suserlist_inner .suserlist_box .txt { width: 82%; margin: 0 auto; font-size: 17px; line-height: 1.4em; min-height: 3em;}
.suserlist_inner .suserlist_box .suserlist_box_img1 { width: 92%; margin: 0 auto; height: 150px; overflow: hidden;}
.suserlist_inner .suserlist_box .suserlist_box_img1 img { width: 100%; height: auto;}
.suserlist_inner .suserlist_box .suserlist_box_img1 img:hover { opacity: 0.5; cursor: pointer;}
.suserlist_inner .suserlist_box .suserlist_box_img2 { width: 92%; margin: 0 auto; height: 150px; overflow: hidden;}
.suserlist_inner .suserlist_box .suserlist_box_img2 img { width: 100%; height: auto;}
.suserlist_inner .suserlist_box .suserlist_box_btn01 { font-size: 14px; width: 70%; margin: 15px auto 0; text-align: center;}
.suserlist_inner .suserlist_box .suserlist_box_btn01 a { color: #231815; display: inline-block; border: solid 1px #231815; padding: 8px 40px 8px 40px; position: relative;}
.suserlist_inner .suserlist_box .suserlist_box_btn01 a::before { position: absolute; width: 50px; height: 13px; background: url("images/icon_arr_01.png") no-repeat center; background-size: contain; right: -27px; top: 7px; content: '';}
.suserlist_inner .suserlist_box .suserlist_box_btn01 a:hover { background-color: #CEEAFC; cursor: pointer;}
#suserlistbody table { width: 950px; margin: 0 auto; text-align: left;}
#suserlistbody table th { font-size: 18px; font-weight: 500; line-height: 1.2em; width: 83%; padding: 15px 0;}
#suserlistbody table th a { color: #231815;}
#suserlistbody table th a:hover { text-decoration: underline;}
#suserlistbody table td { width: 17%; font-size: 14px; padding: 13px 0;}
#suserlistbody table td a { color: #231815; display: inline-block; border: solid 1px #231815; padding: 8px 35px 8px 13px; position: relative;}
#suserlistbody table td a::before { position: absolute; width: 50px; height: 13px; background: url("images/icon_arr_01.png") no-repeat center; background-size: contain; right: -27px; top: 7px; content: '';}
#suserlistbody table td a:hover { background: #CEEAFC; cursor: pointer;}
.suser_contact { width: 98%; max-width: 1320px; margin: 0 auto;}
.suser_contact h2 { text-align: center; color: #fff; font-weight: 500; font-size: 25px; background: #1D3156; letter-spacing: 0.075em; padding: 10px 0; margin-bottom: 50px;}
.suser_contact .txt1 { font-size: 22px; line-height: 1.5em; text-align: center; margin-bottom: 30px;}
.suser_contact .txt2 { font-size: 26px; line-height: 1.5em; font-weight: 500; text-align: center; margin-bottom: 30px;}
.suser_contact .txt3 { font-size: 18px; line-height: 1.5em; text-align: left; margin: 10px 10px 10px 300px;}
.suser_contact dl { text-align: left; margin: 30px 0 30px 300px ;}
.suser_contact dl dt.img { width: 20%; float: left;}
.suser_contact dl dt.img img { width: 100%; height: auto;}
.suser_contact dl dd.big { font-size: 24px; line-height: 2.5em; font-weight: 500;}

/* 製品プログラムダウンロード一覧 */
#pdownloadlistbody { width: 98%; max-width: 1320px; margin: 0 auto;}
.pdownloadlist_ttl1 { text-align: center; font-size: 36px; letter-spacing: 0.05em; font-weight: 600 !important; margin-bottom: 50px; line-height: 1.4em;}
.pdownloadlist_ttl2 { text-align: center; font-size: 28px; letter-spacing: 0.05em; font-weight: 400 !important; margin-bottom: 30px; line-height: 1.4em;}
.pdownloadlist_ttl3 { text-align: left; font-size: 18px; letter-spacing: 0.05em; font-weight: 500 !important; color: #FF0000; line-height: 1.4em; width: 70%; margin: 0 auto 30px; border: solid 3px #FF0000; padding: 10px 15px;}
.pdownloadlist_list01 { font-size: 0; text-align: center; padding-bottom: 60px;}
.pdownloadlist_list01 li { text-align: center; display: inline-block; width: 40%; margin-right: 2%; font-size: 17px; vertical-align: top; line-height: 1.4em; margin-bottom: 10px;}
.pdownloadlist_list01 li a { display: block; background: url("images/download_icon_01.png") no-repeat #EFEFEF; background-size: 19px; background-position: 98% 50%; padding: 20px 22px; color: #231815; box-sizing: border-box;}
.pdownloadlist_list01 li a:hover { background: #006FAB; color: #fff;}
.pdownloadlist_sub { text-align: center; color: #fff; font-weight: 500; font-size: 25px; background: #1D3156; letter-spacing: 0.075em; padding: 10px 0; margin-bottom: 26px;}
	.pagelink { display: block; padding-top: 50px; margin-top: -50px;}
#pdownloadlistbody table { width: 1000px; margin: 0 auto 68px; text-align: left;}
#pdownloadlistbody table th { font-size: 20px; line-height: 1.5em; width: 78%; padding: 15px 0;}
#pdownloadlistbody table th a { color: #231815;}
#pdownloadlistbody table th a:hover { text-decoration: underline;}
#pdownloadlistbody table td { width: 22%; font-size: 14px; padding: 13px 0;}
#pdownloadlistbody table td a { color: #231815; display: inline-block; border: solid 1px #231815; padding: 8px 35px 8px 13px; position: relative;}
#pdownloadlistbody table td a::before { position: absolute; width: 50px; height: 13px; background: url("images/download_arr.png") no-repeat center; background-size: contain; right: -27px; top: 7px; content: '';}
#pdownloadlistbody table td a:hover { background: #CEEAFC; cursor: pointer;}
.pdownloadlist_all { text-align: center;}
.pdownloadlist_all a { display: inline-block; box-sizing: border-box; border: solid 1px #000; width: 550px; font-size: 20px; letter-spacing: 0.05em; color: #000; position: relative; padding: 8px 0;}
.pdownloadlist_all a::before { background: url("images/icon_arr_01.png") no-repeat center; width: 77px; height: 17px; content: ''; position: absolute; top: 50%; left: 100%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); margin: auto; background-size: contain;}
.pdownloadlist_all a:hover { background: #006FAB; color: #fff;}

/* 製品プログラムダウンロード詳細 */
#pdownloadbody { width: 98%; max-width: 1320px; margin: 0 auto;}
.pdownloadbody_ttl { text-align: center; font-size: 36px; letter-spacing: 0.05em; font-weight: 600 !important; margin-bottom: 30px; line-height: 1.4em;}
.pdownload_inner { width: 98%; max-width: 1320px; margin: 85px auto 85px;}
.pdownload_inner .pdownload_inner-img { width: 19%;}
.pdownload_inner .pdownload_inner-img img { width: 100%; height: auto; display: block;}
.pdownload_inner .pdownload_inner-txt { width: 78%;}
.pdownload_inner .pdownload_inner-txt .txt { font-size: 18px; letter-spacing: 0.05em; line-height: 1.4em; margin: 13px 0 14px;}
.pdownload_inner .pdownload_inner-txt .link01 { box-sizing: border-box; display: block; border: solid 1px #000; color: #000; padding: 20px 22px; background: url("images/icon_arr_01.png") no-repeat; background-size: 68px; background-position: 95% 50%; transition: 0.3s;}
.pdownload_inner .pdownload_inner-txt .link01 span { font-size: 15px; font-weight: 400; font-family: 'M PLUS 1p', sans-serif;}
.pdownload_inner .pdownload_inner-txt .link01 img { width: 110px; height: auto; display: inline-block; vertical-align: middle; margin-right: 20px;}
.pdownload_inner .pdownload_inner-txt .link01:hover { background-position: 92% 50%; transition: 0.3s; background-color: #CEEAFC;}
.pdownload_inner .pdownload_inner-txt ul { margin-bottom: 10px;}
.pdownload_inner .pdownload_inner-txt ul li { position: relative; font-size: 18px; line-height: 1.4em; margin-bottom: 2px; padding-left: 20px;}
.pdownload_inner .pdownload_inner-txt ul li::before { position: absolute; left: 0; top: 3px; content: ''; background: url("images/icon_circle_02.png") no-repeat center; width: 18px; height: 18px; background-size: contain;}
.pdownload_inner .pdownload_inner-txt ul p { font-size: 18px; line-height: 1.4em; margin-bottom: 2px; padding-left: 20px;}
.pdownload_inner .pdownload_inner-txt .link02 { box-sizing: border-box; display: block; border: solid 1px #000; color: #000; padding: 6px 22px 5px; background: url("images/icon_arr_01.png") no-repeat; background-size: 68px; background-position: 95% 50%; transition: 0.3s; font-size: 16px; margin-bottom: 10px;}
.pdownload_inner .pdownload_inner-txt .link02:hover { background-position: 92% 50%; transition: 0.3s; background-color: #CEEAFC;}
.pdownload_inner .pdownload_inner-txt .link02 span { display: inline-block; padding: 18px 0 18px 80px; background: url("images/icon_pdf.svg") no-repeat; background-size: 38px; background-position: 30px 1px;}
.pdownload_inner .pdownload_inner-left { width: 48%;}
.pdownload_inner .pdownload_inner-right { width: 48%;}
.pdownload_all { text-align: center;}
.pdownload_all a { display: inline-block; box-sizing: border-box; border: solid 1px #000; width: 550px; font-size: 20px; letter-spacing: 0.05em; color: #000; position: relative; padding: 8px 0;}
.pdownload_all a::before { background: url("images/icon_arr_01.png") no-repeat center; width: 77px; height: 17px; content: ''; position: absolute; top: 50%; left: 100%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); margin: auto; background-size: contain;}
.pdownload_all a:hover { background: #006FAB; color: #fff;}

/* Webラーニング一覧 */
#weblearninglistbody { width: 98%; max-width: 1320px; margin: 0 auto;}
.weblearninglist_ttl1 { text-align: center; font-size: 36px; letter-spacing: 0.05em; font-weight: 600 !important; margin-bottom: 50px; line-height: 1.4em;}
.weblearninglist_ttl2 { text-align: center; font-size: 28px; letter-spacing: 0.05em; font-weight: 400 !important; margin-bottom: 30px; line-height: 1.4em;}
.weblearninglist_list01 { font-size: 0; text-align: center; padding-bottom: 60px;}
.weblearninglist_list01 li { text-align: center; display: inline-block; width: 30%; margin-right: 2%; font-size: 17px; vertical-align: top; line-height: 1.4em; margin-bottom: 10px;}
.weblearninglist_list01 li a { display: block; background: url("images/download_icon_01.png") no-repeat #EFEFEF; background-size: 19px; background-position: 98% 50%; padding: 20px 22px; color: #231815; box-sizing: border-box;}
.weblearninglist_list01 li a:hover { background: #006FAB; color: #fff;}
.weblearninglist_list02 { width: 98%; max-width: 1000px; margin: 0 auto; font-size: 0; text-align: center; padding-bottom: 60px;}
.weblearninglist_list02 li { text-align: center; display: inline-block; width: 40%; margin-right: 2%; font-size: 17px; vertical-align: top; line-height: 1.4em; margin-bottom: 10px;}
.weblearninglist_list02 li a { display: block; background: url("images/download_icon_01.png") no-repeat #EFEFEF; background-size: 19px; background-position: 98% 50%; padding: 20px 22px; color: #231815; box-sizing: border-box;}
.weblearninglist_list02 li a:hover { background: #006FAB; color: #fff;}
.weblearninglist_sub { text-align: center; color: #fff; font-weight: 500; font-size: 25px; background: #1D3156; letter-spacing: 0.075em; padding: 10px 0; margin-bottom: 26px;}
	.pagelink { display: block; padding-top: 50px; margin-top: -50px;}
#weblearninglistbody table { width: 1000px; margin: 0 auto 68px; text-align: left;}
#weblearninglistbody table th { font-size: 20px; line-height: 1.5em; width: 78%; padding: 15px 0;}
#weblearninglistbody table th a { color: #231815;}
#weblearninglistbody table td { width: 22%; font-size: 14px; padding: 13px 0;}
#weblearninglistbody table th a:hover { text-decoration: underline;}
#weblearninglistbody table td a { color: #231815; display: inline-block; border: solid 1px #231815; padding: 8px 35px 8px 13px; position: relative;}
#weblearninglistbody table td a::before { position: absolute; width: 50px; height: 13px; background: url("images/download_arr.png") no-repeat center; background-size: contain; right: -27px; top: 7px; content: '';}
#weblearninglistbody table td a:hover { background: #CEEAFC; cursor: pointer;}
.weblearninglist_all { text-align: center;}
.weblearninglist_all a { display: inline-block; box-sizing: border-box; border: solid 1px #000; width: 550px; font-size: 20px; letter-spacing: 0.05em; color: #000; position: relative; padding: 8px 0;}
.weblearninglist_all a::before { background: url("images/icon_arr_01.png") no-repeat center; width: 77px; height: 17px; content: ''; position: absolute; top: 50%; left: 100%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); margin: auto; background-size: contain;}
.weblearninglist_all a:hover { background: #006FAB; color: #fff;}

/* Webラーニング詳細 */
#weblearningbody { width: 98%; max-width: 1320px; margin: 0 auto;}
.weblearningbody_ttl { text-align: center; font-size: 36px; letter-spacing: 0.05em; font-weight: 600 !important; margin-bottom: 80px; line-height: 1.4em;}
.weblearningbody_list01 { font-size: 0; text-align: center; padding-bottom: 60px;}
.weblearningbody_list01 li { text-align: center; display: inline-block; width: 20%; margin-right: 2%; font-size: 17px; vertical-align: top; line-height: 1.4em; margin-bottom: 10px;}
.weblearningbody_list01 li a { display: block; background: url("images/download_icon_01.png") no-repeat #EFEFEF; background-size: 19px; background-position: 98% 50%; padding: 20px 22px; color: #231815; box-sizing: border-box;}
.weblearningbody_list01 li a:hover { background: #006FAB; color: #fff;}
.weblearning_movie { width: 98%; max-width: 1320px; margin: 0 auto 80px;}
.weblearning_movie .txt { text-align: center; font-size: 24px; font-weight: 500; margin-bottom: 20px;}
.weblearning_movie iframe { width: 70%; max-width: 800px; margin: 0 auto; display: block; height: 440px;}
.weblearning_guidance { width: 98%; max-width: 1320px; margin: 0 auto 60px;}
.weblearning_guidance .txt { text-align: center; font-size: 24px; font-weight: 500; margin-bottom: 20px;}
.weblearning_guidance iframe { width: 70%; max-width: 800px; margin: 0 auto; display: block; height: 440px;}
.weblearning_guidance .box { box-sizing: border-box; border: solid 1px #231815; width: 23%; display: inline-block; vertical-align: top; padding: 10px 0 10px; margin-left: 1%; margin-bottom: 20px;}
.weblearning_guidance .box:nth-child(4n) { margin-right: 0;}
.weblearning_guidance .box_txt { width: 82%; margin: 15px auto 5px; font-size: 17px; text-align: center; line-height: 0.4em; min-height: 1em;}
.weblearning_guidance .box_img1 { width: 92%; margin: 0 auto; height: 75px; overflow: hidden;}
.weblearning_guidance .box_img1 img { width: 100%; height: auto;}
.weblearning_guidance .box_img1 img:hover { opacity: 0.5; cursor: pointer;}
.weblearning_guidance .box_img2 { width: 92%; margin: 0 auto; height: 107px; overflow: hidden;}
.weblearning_guidance .box_img2 img { width: 100%; height: auto;}
.weblearning_guidance .box_btn01 { font-size: 14px; width: 70%; margin: 0 auto 0; text-align: center;}
.weblearning_guidance .box_btn01 a { color: #231815; display: inline-block; border: solid 1px #231815; padding: 8px 40px 8px 40px; position: relative;}
.weblearning_guidance .box_btn01 a::before { position: absolute; width: 50px; height: 13px; background: url("images/icon_arr_01.png") no-repeat center; background-size: contain; right: -27px; top: 7px; content: '';}
.weblearning_guidance .box_btn01 a:hover { background-color: #CEEAFC; cursor: pointer;}
.weblearning_inner { width: 98%; max-width: 1320px; margin: 0 auto 85px;}
.weblearning_inner .weblearning_inner-img { width: 19%;}
.weblearning_inner .weblearning_inner-img img { width: 100%; height: auto; display: block;}
.weblearning_inner .weblearning_inner-txt { width: 78%;}
.weblearning_inner .weblearning_inner-txt .txt { font-size: 18px; letter-spacing: 0.05em; line-height: 1.4em; margin: 0 0 14px;}
.weblearning_inner .weblearning_inner-txt .link01 { box-sizing: border-box; display: block; border: solid 1px #000; color: #000; padding: 20px 22px; background: url("images/icon_arr_01.png") no-repeat; background-size: 68px; background-position: 95% 50%; transition: 0.3s;}
.weblearning_inner .weblearning_inner-txt .link01 span { font-size: 15px; font-weight: 400; font-family: 'M PLUS 1p', sans-serif;}
.weblearning_inner .weblearning_inner-txt .link01 img { width: 110px; height: auto; display: inline-block; vertical-align: middle; margin-right: 20px;}
.weblearning_inner .weblearning_inner-txt .link01:hover { background-position: 92% 50%; transition: 0.3s; background-color: #CEEAFC;}
.weblearning_inner .weblearning_inner-txt ul { margin-bottom: 10px;}
.weblearning_inner .weblearning_inner-txt ul li { position: relative; font-size: 18px; line-height: 1.4em; margin-bottom: 2px; padding-left: 20px;}
.weblearning_inner .weblearning_inner-txt ul li::before { position: absolute; left: 0; top: 3px; content: ''; background: url("images/icon_circle_02.png") no-repeat center; width: 18px; height: 18px; background-size: contain;}
.weblearning_inner .weblearning_inner-txt ul p { font-size: 18px; line-height: 1.4em; margin-bottom: 2px; padding-left: 20px;}
.weblearning_inner .weblearning_inner-txt .link02 { box-sizing: border-box; display: block; border: solid 1px #000; color: #000; padding: 6px 22px 5px; background: url("images/icon_arr_01.png") no-repeat; background-size: 68px; background-position: 95% 50%; transition: 0.3s; font-size: 16px; margin-bottom: 10px;}
.weblearning_inner .weblearning_inner-txt .link02:hover { background-position: 92% 50%; transition: 0.3s; background-color: #CEEAFC;}
.weblearning_inner .weblearning_inner-txt .link02 span { display: inline-block; padding: 18px 0 18px 80px; background: url("images/icon_pdf.svg") no-repeat; background-size: 38px; background-position: 30px 1px;}
.weblearning_inner .weblearning_inner-left { width: 48%;}
.weblearning_inner .weblearning_inner-right { width: 48%;}
.weblearning_all { text-align: center;}
.weblearning_all a { display: inline-block; box-sizing: border-box; border: solid 1px #000; width: 650px; font-size: 20px; letter-spacing: 0.05em; color: #000; position: relative; padding: 8px 0;}
.weblearning_all a::before { background: url("images/icon_arr_01.png") no-repeat center; width: 77px; height: 17px; content: ''; position: absolute; top: 50%; left: 100%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); margin: auto; background-size: contain;}
.weblearning_all a:hover { background: #006FAB; color: #fff;}
		
}