@charset "utf-8";

html {height:100%;box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, 
pre, code, form, fieldset, legend, input, textarea, 
p, blockquote, th, td{margin:0;padding:0;}
a {outline: none; color:#0055AC;text-decoration: none;}
img { border:none }
h1,h2,h3,h4,h5,h6 {	font-size:100%;	font-weight:normal;}
body{
	width:100%;
	height:100%;
	font-family: 'Open Sans', sans-serif;
	font-size:15px;
	line-height: 1.6;
	color:#222;
	background: #f6f6f6;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
	word-wrap:
	break-word;
}
/* Clearfix */
.clearfix:after {
	content: "";
	clear: both;
	display: block;
}
#wrapper{
    width:100%;
    height:100%;
	margin:0;
}
/* =======================================================================
	ログイン
======================================================================= */
#wrapper .login-box{
	text-align:center;
	display:block;
	position: absolute;
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.login-box .login-logo{
	text-align: center;
	margin-bottom: 35px;
}
.login-box .login-body {
	width: 400px;
	background: #222;
	border-radius: 8px;
	padding: 40px 40px 20px 40px;
	margin:0px auto 20px auto;
}
.login-body .form-control{
	width:100%;
	height: auto;
	font-size: 12px;
	line-height: 20px;
    color: #12161B;
    background: #FFF;
    box-shadow: none;
    display: block;
    border: 0;
    border-radius: 4px;
    padding: 10px 15px;
    outline:none;
    -webkit-appearance: none;
}
.login-body .form-group {margin-bottom: 15px;}
.login-body input.btn-login{
	width:100%;
	font-size: 17px;
    line-height: 1.0;
    color: #fff;
    cursor: pointer;
    border-radius: 4px;
	background: #15D200;
    padding: 15px 0;
    margin-bottom: 15px;
}
.login-body input.btn-login:hover{background:#17EC00;}
.login-body p.forgotpass a{color:#FFF;}
.login-body p.forgotpass a:hover{text-decoration: underline;}
.login-footer {
    font-size: 13px;
    line-height: 1.9;
}

.login-body input.btn-login:disabled{
	cursor: not-allowed;
	opacity: .65;
}

/* =======================================================================
	フライト一覧
======================================================================= */
#wrapper header{
	width:100%;
	height:66px;
	background:#FFF;
	box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
}
header .header-inner{padding:13px 15px;}
.header-inner p.header-logo{float:left;margin-left:5px;}
.header-inner p.header-btn{float:right;}
p.header-btn .logout{
	width:110px;
	font-size: 14px;
    text-align:center;
    color: #fff;
    cursor: pointer;
    border-radius: 4px;
	display:block;
	background: #222;
	padding:8px 0 7px 0;
	margin-top:1px;
}
p.header-btn .logout:hover{opacity:0.85;}

p.header-manual {
	float: right; 
	margin-right: 15px;
} 
p.header-manual .manual {
	display: block;
	padding: 8px 0 7px 0;
	text-decoration: underline;
}

#wrapper main{width:100%;}
main .search-area{
	position:relative;
	padding:50px 50px 40px 50px;
}

/* SEARCH FORM */
.search-area form.search-form{}
.search-form .search-form-inner{
	width:350px;
	position:relative;
}
.search-form-inner #sform{
	width:100%;
	font-size:14px;
	height:35px;
	background:#FFF;
	border:none;
	border-radius:100px;
	outline:0;
	box-shadow: 0 1px 2px rgba(0,0,0,0.6) inset;
	padding:0 45px 0 18px; 
	position:absolute; 
	top:0; 
	left:0;
}
.search-form-inner #sform-btn{
	width:24px;
	height:24px;
	cursor: pointer;
	background:url(../img/search_icon.png) right center no-repeat;
	border:none;
	position:absolute;
	outline:0;
	top:6px;
	right:12px;
}
/* ANALYSIS INFO */
.search-area .analysis-info{
	font-size:18px;
	position:absolute;
	top:55px;
	left:440px;
}
.analysis-info span{
	font-weight:bold;
	margin-left:15px;
}

main .list-area{padding:15px 35px 40px 35px;}
.list-area .list-box{
	float:left;
	display:block;
	position:relative;
	background:#FFF;
	border-radius: 3px;
	box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1);
	margin:1%;
}
.list-area .list-box a{
    width: 100%;
    height: 100%;
	display: block;
    position: absolute;
    top: 0;
    left: 0;
}
.list-box:hover{
	opacity:0.9;
	border:#39E026 1px solid;
}
.list-box p.flight-thumbnail{
	width:100%;
	max-height:250px;
}
p.flight-thumbnail img{
	width:100%;
	height:250px;
	object-fit: cover;
}
.list-box p.flight-name{
	font-size:17px;
	font-weight:bold;
	line-height:1.5;
	margin:20px 0 15px 0;
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
	overflow: hidden;
}
.list-box p.flight-date{font-size:14px;}

.error {
	padding: 30px 35px 40px 45px;
	font-size: 20px;
}
.error:empty {
	padding: 0;
}
.error-title {
	padding: 30px 35px 0px 30px;
	font-size: 30px;
	font-weight: bolder;
}
.login-error {
    color: red;
}

@media screen and (min-width:1401px){
	.list-area .list-box{width:23%;height:400px;padding:1%;}
}
@media screen and (min-width:1024px) and ( max-width:1400px) {
	.list-area .list-box{width:31.333%;height:400px;padding:1.5%;}
}
@media screen and (min-width:681px) and ( max-width:1023px) {
	.list-area .list-box{width:48%;height:400px;padding:2%;}
}
@media screen and (max-width:680px){
	.header-logo img{width:auto;height:35px;}
	main .search-area{padding:30px;}
	main .list-area{padding:30px 20px 40px 20px;}
	.search-form .search-form-inner{width:240px;}
	.search-area .analysis-info{font-size:16px;top:38px;left:290px;}
	.list-area .list-box{width:48%;height:290px;padding:2.5%;}
	.list-box p.flight-thumbnail{max-height:150px;}
	p.flight-thumbnail img{height:150px;}
}