@charset "utf-8";
/* init */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form, label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main,summary,time,mark,audio,video,a,input,textarea{ margin:0;padding:0; border:0; font-size:100%; background:transparent; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{ display:block;}
ul li{list-style:none;}
blockquote,q{ quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{ content:''; content:none;}
pre,code,kbd,samp{ font-family:monospace,monospace; font-size:inherit;}
table{ border-collapse:collapse; border-spacing:0;}
img{ border:0;}
address,caption,cite,code,dfn,em,th,var{ font-style:normal; font-weight:normal;}
caption,th{ text-align:left;}
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal}
sup{ vertical-align:text-top; font-size:75%;}
sub{ vertical-align:text-bottom; font-size:75%;}
input,textarea,select{ z-index:auto; font-family:inherit; font-size:inherit; font-weight:inherit; vertical-align:middle;}
a{outline:none;}
audio:not([controls]){ display:none;}
time{ display:inline;}
[hidden]{ display:none;}
input::-ms-clear,input::-ms-reveal,input:focus::-ms-clear,input:focus::-ms-reveal{visibility:hidden; display:none;}
button::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="file"]>input[type="button"]::-moz-focus-inner{ padding:0; border:0;}
input{outline:none;}
button,
input[type=submit],
input[type=button],
input[type=reset]{cursor:pointer;}
small{font-size:85%;}
i,em{font-weight:normal; font-style:normal;}

/* colors */
.navy{color:#113557;}
.blue{color:#54c7dc;}
.link{color:#0066c0;}
.text{color:#0c1d27;}
.line{color:#e9e9e9;}

/* margin */
.mb-2-7em{
    margin-bottom: 2.7em;
}


/* general */
body{font-family:"メイリオ", "Meiryo","Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif; line-height:1.75; font-size:20px; color:#0c1d27;}
a:link{color:#0066c0; text-decoration:underline;}
a:hover{color:#0066c0; text-decoration:none;}
a:active{color:#0066c0; text-decoration:none;}
a:visited{color:#0066c0; text-decoration:underline;}
img{max-width:100%; height:auto;}

/* head container - header */
.headContainer{height:360px; background:linear-gradient(to bottom, #428fdc 1%,#55c7dc 100%); position:relative; margin-bottom:50px;}
.headContainer::before{content:''; display:block; width:100%; height:100%; background:url("../img/img_itspecialist/bg.png"); background-size:217px; opacity:.42; position:absolute; left:0; top:0;}
.pageHeader{max-width:1140px; height:360px; margin:0 auto; border-color:#113557; border-style:solid; border-width:0 10px; background:rgba(255,255,255,.42); position:relative;}
.pageHeader .siteLogo{
	width:340px;/*300px;*/ 
	height:300px;/*330px;*/ 
	position:absolute; 
	left:65px; 
	top:0; 
	background:#fff; 
	display:flex; 
	justify-content:center; 
	align-items:center;
}
.pageHeader .content{
	padding:80px 65px 25px 460px; /*450px; */
	color:#113557;
}
.pageHeader .content h2{font-size:40px; margin-bottom:1em; line-height:1.2;}
.pageHeader .content p{font-weight:bold; font-size:21px;}
.headContainer .odyssey-list{
    display: block;
    width: 220px;
    margin: 0 auto;
    padding: 10px 20px 13px;
    font-size: 12px;
    color: #fff;
	font-weight: bold;
    text-align: center;
    line-height: 1;
    text-decoration: none;
    background-color: #1B456B;
    border-radius: 0 0 10px 10px;
    position: absolute;
    top: 0;
    right: 100px;
	z-index: 100;
}
.headContainer .odyssey-list:hover{
    opacity: 0.85;
}
/* page body */
.pageBody{max-width:1180px; padding:0 20px; margin:0 auto;}
.pageBody section{padding:50px 0;}
.pageBody h2{font-size:35px; color:#113557; margin-bottom:60px; position:relative; text-align:center; letter-spacing:.05em; font-weight:bold;}
.pageBody h2::after{content:''; display:block; width:140px; height:5px; background:linear-gradient(to right, #113557 0%,#113557 50%,#54c7dc 50%,#54c7dc 100%); position:absolute; left:calc(50% - 70px); bottom:0;}
.pageBody h3{font-size:22px; font-weight:bold; margin-bottom:.25em; color:#113557; letter-spacing:.05em;}
.pageBody p{margin-bottom:1.5em;}
.pageBody ul,
.pageBody ol{margin:0 0 1.5em 1.5em;}
.pageBody ul li{list-style:disc;}

/* tables */
table.outline{line-height:1.5; margin-bottom:1.5em;}
table.outline th{padding:15px 20px 15px 0; color:#113557; font-weight:bold; border-bottom:2px #54c7dc solid; width:230px;}
table.outline td{padding:15px 120px 15px 30px; border-bottom:2px #e9e9e9 solid;}
table.outline th::before{content:''; width:0; height:70px; display:inline-block; vertical-align:middle;}
table.subject{line-height:1.5; margin-bottom:1.5em;}
table.subject th,table.subject td{padding:15px; border:4px #e9e9e9 solid;}
table.subject th{color:#113557; font-weight:bold;}
table.subject thead th{background:#54c7dc; text-align:center; padding:2px 8px;}
table.subject a{font-weight:bold;}
table p:last-child,
table ul:last-child,
table ol:last-child{margin-bottom:0;}

/* flow chart style */
dl.flow{position:relative;}
dl.flow::before{}
dl.flow dt{position:relative; padding-left:115px; font-size:22px; font-weight:bold; color:#113557;}
dl.flow dt b{width:90px; height:90px; background:#54c7dc; color:#113557; font-weight:normal; font-size:40px; text-align:center; line-height:90px; font-style:italic; display:block; border-radius:50%; position:absolute; left:0; top:0;}
dl.flow dd{padding-bottom:50px; margin-bottom:50px; border-bottom:1px #e9e9e9 solid; margin-left:115px; position:relative;}
dl.flow dd::after{width:0; height:calc(100% - 40px); position:absolute; left:-75px; top:70px; border-left:10px #abbebe dotted; content:''; display:block;}
dl.flow dd p{margin-bottom:1em;}
dl.flow dd p:last-child{margin-bottom:0;}

/* button ui */
ul.btns{display:flex; justify-content:space-between; align-items:stretch; margin-left:0;}
ul.btns li{width:auto; font-size:18px; letter-spacing:.1em; font-weight:bold; list-style:none;}
ul.btns li a{background:#113557; color:#fff; display:flex; justify-content:flex-start; align-items:center; text-decoration:none; padding:20px 40px 20px 20px; line-height:1.2; position:relative; border:1px #113557 solid; box-shadow: -1px -1px 0px 0px #ffff inset, 1px 1px 0px 0px #fff inset; transition:all .3s ease; height:100%;}
ul.btns li a::after{content:''; display:block; width:10px; height:10px; border:#fff solid; border-width:2px 2px 0 0; transform:rotate(45deg); position:absolute; right:18px; top:calc(50% - 5px);}
ul.btns li a:hover{background:#54c7dc; color:#113557;  border:1px #54c7dc solid;}
ul.btns li a:hover::after{border-color:#113557;}
ul.btns.quad li{width:calc(25% - 10px);}


/* notes */
ul.notes{margin-left:0;}
ul.notes li{list-style:none; padding-left:2em; text-indent:-2em; font-size:18px; line-height:1.5;}
ul.notes li b{width:2em; display:inline-block; text-indent:0; font-weight:normal;}

/* section internal block */
section > .inner{padding:0 115px;}

/* contact */
.fwbg{background:#f6f7f7;}
.contact{max-width:1180px; margin:0 auto; padding:70px 20px;}
.contact dl{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; margin-bottom:30px;}
.contact dl dt{font-size:20px; font-weight:bold; color:#113557; width:18em; margin-bottom:15px;}
.contact dl dd{width:calc(100% - 18em); margin-bottom:15px;}
.contact p{}

/* bottom area - footer */
.bottom{background:#113457; border-top:5px #55c7dc solid; color:#fff;}
.pageFooter{max-width:1180px; margin:0 auto; padding:40px 20px; position:relative;}
.pageFooter ul{display:flex; justify-content:flex-start;}
.pageFooter ul li{font-size:15px; font-weight:bold; padding:0 13px; position:relative;}
.pageFooter ul li::after{content:''; width:1px; height:15px; position:absolute; right:0; top:calc(50% - 8px); background:#fff;}
.pageFooter ul li:first-child{padding-left:0;}
.pageFooter ul li:last-child::after{content:none;}
.pageFooter ul li a{color:#fff; text-decoration:none;}
.pageFooter ul li a:hover{text-decoration:underline;}
.pageFooter ul{margin-bottom:5px;}
.pageFooter ul + ul{margin-bottom:40px;}
.pageFooter p{font-size:15px;}
.pageFooter p small{font-size:10px;}
.pageFooter .corp{width:170px; height:29px; position:absolute; right:20px; top:40px;}

/* SNS FUNCTIONS */
.socialFunctions{max-width:1180px; margin:0 auto; padding:20px 0; display:flex; justify-content:flex-end; align-items:flex-start; height:60px;}
.socialFunctions .fb-like,
.socialFunctions .twitter-share-button,
.socialFunctions .line-it-button, a.copySelfURI{vertical-align:top; margin-left:10px;}
.socialFunctions a.copySelfURI{display:block; color:#fff; height:20px; font-size:12px; padding:0 10px 0 24px; text-align:center; text-decoration:none; line-height:20px; border-radius:4px; background:url("../img/img_itspecialist/copy.png") no-repeat 8px center #bbb;}
.fb-like.fb_iframe_widget{height:20px;}
.fb-like.fb_iframe_widget > span{padding:0; height:20px !important; vertical-align:top !important;}
.fb-like.fb_iframe_widget > span iframe{height:20px !important;}

@media screen and (max-width: 1023px){
	.headContainer{height:300px;}
	.headContainer .odyssey-list{
		right: 40px;
	}
	.pageHeader{height:300px;}
	.pageHeader .siteLogo{width:200px; height:220px; left:30px; padding:0 20px;}
	.pageHeader .content{padding:60px 40px 20px 260px;}
	.pageHeader .content h2{font-size:36px; margin-bottom:25px;}
	.contact{display:block;}
	.contact h2{margin-bottom:20px;}
	.contact h2 + p{width:auto; margin-bottom:40px;}
}

@media screen and (max-width: 767px){
	/* general */
	body{font-size:14px; font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;}

	/* head container - header */
	.headContainer{height:275px; margin-bottom:25px;}
	.headContainer::before{background-size:108px;}
	.pageHeader{height:275px; background:transparent; border:none;}
	.pageHeader .siteLogo{
		width:86%; 
		height:110px;/*120px; */
		margin:0 auto; 
		position:static; 
		left:auto; top:auto; border-color:#113557; 
		border-style:solid; 
		border-width:0 5px; 
		background:rgba(255,255,255,.42);
}	
	.headContainer .odyssey-list{
    display: none;
}
	.pageHeader .siteLogo h1{
		display:flex; 
		justify-content:center; 
		align-items:center; 
		background:#fff; 
		width:150px; 
		height:110px;/*120px; */
		margin:0 auto;
}
	.pageHeader .siteLogo h1 img{width:100px; height:auto;}
	.pageHeader .content{padding:25px 45px 0;}
	.pageHeader .content h2{font-size:18px; text-align:center; font-weight:bold; margin-bottom:.75em;}
	.pageHeader .content p{font-size:13px; line-height:1.75;}

	/* page body */
	.pageBody{padding:0 10px;}
	.pageBody section{padding:15px 0;}
	.pageBody h2{font-size:18px; margin-bottom:20px;}
	.pageBody h2::after{width:70px; height:2px; left:calc(50% - 35px);}
	.pageBody h3{font-size:14px; margin-bottom:.25em;}
	
	/* tables */
	table.outline{line-height:1.4; font-size:13px;}
	table.outline th{padding:12px 10px 12px 0; border-bottom:1px #54c7dc solid; width:26%;}
	table.outline td{padding:12px 0 12px 10px; border-bottom:1px #e9e9e9 solid;}
	table.outline th::before{content:none;}
	table.subject{line-height:1.4; font-size:12px; width:100%; table-layout:fixed; word-break:break-word;}
	table.subject th,table.subject td{padding:8px; border:2px #e9e9e9 solid;}
	table.subject th{color:#113557; font-weight:bold;}
	table.subject thead th{background:#54c7dc; text-align:center; padding:2px 8px;}
	table.subject a{font-weight:bold;}

	/* flow chart style */
	dl.flow dt{padding-left:60px; font-size:14px;}
	dl.flow dt b{width:46px; height:46px; font-size:20px; line-height:46px;}
	dl.flow dd{padding-bottom:25px; margin-bottom:25px; margin-left:60px; line-height:1.4; font-size:12px;}
	dl.flow dd::after{height:calc(100% - 20px); left:-40px; top:36px; border-left:6px #abbebe dotted;}

	/* button ui */
	ul.btns{display:block; margin-bottom:0;}
	ul.btns li{width:auto; font-size:14px; margin-bottom:10px;}
	ul.btns li a{padding:15px 30px 15px 10px; border:0; box-shadow:none; border-radius:6px;}
	ul.btns li a::after{width:6px; height:6px; right:12px; top:calc(50% - 3px);}
	ul.btns li a:hover{border:0;}
	ul.btns li a:hover::after{border-color:#113557;}
	ul.btns li:last-child{margin-bottom:0;}
	ul.btns.quad li{width:auto;}
	
	/* notes */
	ul.notes li{font-size:12px; line-height:1.4;}

	/* section internal block */
	section > .inner{padding:0;}

	/* contact */
	.contact{padding:30px 10px;}
	.contact dl{display:block; margin-bottom:15px;}
	.contact dl dt{font-size:14px; width:auto; margin-bottom:0;}
	.contact dl dd{width:auto; margin-bottom:15px;}
	.contact p{font-size:12px;}

	/* bottom area - footer */
	.pageFooter{padding:20px 10px 10px;}
	.pageFooter ul{display:inline; margin:0;}
	.pageFooter ul li{font-size:12px; padding:4px 12px 4px 10px; display:inline-block;}
	.pageFooter ul li::after{height:12px; position:absolute; right:0; top:calc(50% - 6px);}
	.pageFooter ul li:first-child{padding-left:10px;}
	.pageFooter ul li:last-child::after{content:'';}
	.pageFooter ul + ul li:last-child::after{content:none;}
	.pageFooter ul{margin-bottom:5px;}
	.pageFooter ul + ul{margin-bottom:40px;}
	.pageFooter p{font-size:10px; margin-bottom:20px;}
	.pageFooter p small{font-size:10px; display:block; text-align:center;}
	.pageFooter .corp{width:auto; position:static; right:auto; top:auto; text-align:right; margin:20px 0;}
	.pageFooter .corp img{width:160px; height:28px;}
	
	/* SNS FUNCTIONS */
	.socialFunctions{max-width:none; justify-content:flex-start;}
	.socialFunctions .fb-like,
	.socialFunctions .twitter-share-button,
	.socialFunctions .line-it-button, a.copySelfURI{vertical-align:top; margin:0 1px;}
	.socialFunctions a.copySelfURI{font-size:10px; padding:0 5px 0 20px; background:url("../img/img_itspecialist/copy.png") no-repeat 4px center #bbb;}
	.fb-like.fb_iframe_widget{height:20px;}
	.fb-like.fb_iframe_widget > span{width:114px !important;}
	.fb-like.fb_iframe_widget > span iframe{height:20px !important;}
}