/*ajaxのための記述*/
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
    .ui-tabs-hide {
        display: none;
    }
}

/*ajaxのための記述*/

#mainAreaPadder {
	margin: 0 auto;
	padding: 16px 0 0;
	width: 770px;
}

#mainAreaPadder * {
	box-sizing: content-box;
}

#mainAreaPadder:after {
	content: '';
	display: block;
	clear: both;
}

*{
margin:0;
padding:0;
}

p {
text-justify:inter-ideograph;
}

#wrapperPilotLibrary{
width:772px;
margin:0 auto;
text-align:left;
background:#fff url(../007/i/wrapperPilotLibrary_bg.gif) repeat-y left;
}

#pilotLibrary {
font-size:13px;
line-height:1.5em;
background-color:#FFF;
}

#pilotLibrary h2{
font-size:100%;
}

/* reset */
#mainArea ul {
	margin: 0;
	padding: 0;
}

#mainArea li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mainImg {
	width: 769px;
	height: 344px;
	background: url(i/mainback.png) left top;
	position: relative;
	overflow: hidden;
}

.mainImg .catch {
	width: 100%;
}

.mainImg .pen {
	position: absolute;
	right: 30px;
	top: 2px;
}

/*	過去記事
------------------------------*/

#pilotLibrary #backNumberWrap{
width:735px;
height:46px;
margin:15px 0 0 3px;
}

#backNumberWrap a {
display: block;
overflow: hidden;
text-indent: -9999px;
height: 46px;
}

.fixed #backNumberWrap {
	padding: 0 0 70px 0;
}

#backNumberWrap ul,#backNumberWrap * li {
margin:0;
list-style: none;
}

#backNumberWrap * li {
float:left;
/*text-indent:-9999px;*/
background-position:center;
background-repeat:no-repeat;
}

.p09{width:212px;margin-right:10px !important;}
.p09 a{background-image:url(i/backNumber09.gif);}
.p09 a:hover{background-image:url(i/backNumber09_over.gif);}

.p10{width:110px;margin-right:10px !important;}
.p10 a{background-image:url(i/backNumber10.gif);}
.p10 a:hover{background-image:url(i/backNumber10_over.gif);}

.p11{width:160px;margin-right:10px !important;}
.p11 a{background-image:url(i/backNumber11.gif);}
.p11 a:hover{background-image:url(i/backNumber11_over.gif);}

.p12{width:209px;}
.p12 a{background-image:url(i/backNumber12_over.gif);}
.p12 a:hover{background-image:url(i/backNumber12_over.gif);}

#mainArea{
	margin-top:0 !important;
	width:770px !important;
}

#mainArea #mainAreaPadder{
	margin-bottom:0 !important;
}

/*	コンテンツ
------------------------------*/
#pilotLibrary #contentsWrap{
width:770px;
overflow:hidden;
margin-left:-19px;
}
#pilotLibrary #contentsBox{
width:770px;
overflow:hidden;
}

#main_content {
	background-image: url(i/common-back.png);
	position: relative;
}

/* 個別 */

#gotop {
	position: fixed;
	bottom: -80px;
	right: 10px;
}

/* sect-nav */

.fixed #sect-nav {
	position: fixed;
	top: 0;
}

#sect-nav {
	z-index: 100;
	position: relative;
	padding: 0 0 5px 0;
	margin: 0 0 -5px 0;
	background-image: url(i/nav-shadow.png);
	background-position: bottom;
	background-repeat: no-repeat;
}

#sect-nav ul {
	overflow: hidden;
}

#sect-nav .nav-item {
	float: left;
	width: 154px;
}

#sect-nav .nav-item a {
	display: block;
	height: 55px;
	text-indent: -9999px;
	background-image: url(i/nav.png);
}

#sect-nav .nav-item span {
	display: block;
	height: 55px;
	background-image: url(i/nav.png);
}

#sect-nav .nav-synergy span {
	background-position: 0 0;
}

#sect-nav .nav-synergy a {
	background-position: 0 bottom;
}

#sect-nav .nav-gel span {
	background-position: -154px 0;
}

#sect-nav .nav-gel a {
	background-position: -154px bottom;
}

#sect-nav .nav-stylish {
	width: 179px;
}

#sect-nav .nav-stylish span {
	background-position: -308px 0;
}

#sect-nav .nav-stylish a {
	background-position: -308px bottom;
}

#sect-nav .nav-lineup {
	width: 142px;
}

#sect-nav .nav-lineup span {
	background-position: -487px 0;
}

#sect-nav .nav-lineup a {
	background-position: -487px bottom;
}

#sect-nav .nav-scene {
	width: 137px;
	/* width: 138px; */
}

#sect-nav .nav-scene span {
	background-position: -629px 0;
	/* background-position: right 0; */
}

#sect-nav .nav-scene a {
	background-position: right bottom;
}
/* sect-top */

#sect-top {
	position: relative;
	background-image: url(i/top-back.png);
	background-position: left top;
	color: #fff;
}

#sect-top .sect-inner {
	overflow: hidden;
}

#sect-top .copy {
	width: 337px;
	padding: 32px 0 0 28px;
	float: left;
}

#sect-top .copy dt {
	font-size: 16px;
	font-weight: bold;
	line-height: 1.5em;
	margin: 0 0 18px 0;
}

#sect-top .copy dd {
	font-size: 14px;
	line-height: 1.5em;
}

#sect-top .aside {
	width: 349px;
	height: 366px;
	padding: 30px 19px 0 0;
	float: right;
}

#sect-top .img-box {
	margin: 0 0 24px 0;
}

#sect-top .btn-box {
	font-size: 12px;
}

#sect-top .btn-box .btn {
	display: block;
	text-indent: -9999px;
	background-image: url(i/top-btn-over.png);
	width: 350px;
	height: 77px;
}

#sect-top .btn-box .btn span {
	display: block;
	background-image: url(i/top-btn.png);
	width: 350px;
	height: 77px;
}

/*#sect-top .btn-box .btn:hover {
	background-image: url(i/top-btn-over.png);
}*/

#sect-top .nav {
	overflow: hidden;
}

#sect-top .nav-item {
	float: left;
	width: 256px;
}

#sect-top .nav-item a {
	display: block;
	height: 304px;
	text-indent: -9999px;
}

#sect-top .nav-item span {
	display: block;
	height: 304px;
}

#sect-top .nav-synergy span {
	background-image: url(i/top-nav-01.png);
}

#sect-top .nav-synergy a {
	background-image: url(i/top-nav-01-over.png);
}

#sect-top .nav-gel span {
	background-image: url(i/top-nav-02.png);
}

#sect-top .nav-gel a {
	background-image: url(i/top-nav-02-over.png);
}

#sect-top .nav-stylish {
	width: 257px;
}

#sect-top .nav-stylish span {
	background-image: url(i/top-nav-03.png);
}

#sect-top .nav-stylish a {
	background-image: url(i/top-nav-03-over.png);
}

/* sect-synergy */

#sect-synergy {
	background-image: url(i/synergy-back.png);
	background-repeat: no-repeat;
	height: 392px;
	position: relative;
}

#sect-synergy .box {
	position: absolute;
	width: 354px;
	height: 282px;
	right: 0;
	bottom: 0;
}

#sect-synergy h4 {
	background-color: #6bd3cc;
	color: #fff;
	font-size: 19px;
	font-weight: bold;
	padding: 7px 11px 3px 11px;
	margin: 0 0 17px 0;
	line-height: 1.5em;
}

#sect-synergy h4 span {
	font-size: 16px;
}

#sect-synergy .copy {
	padding: 0 11px;
	width: 304px;
	height: 125px;
	font-size: 14px;
	line-height: 1.5em;
}

#sect-synergy .btn-box {
	width: 125px;
	margin: 0 auto;
}

#sect-synergy .btn {
	display: block;
	width: 125px;
	height: 40px;
	background-image: url(i/synergy-btn-over.png);
	background-repeat: no-repeat;
	text-indent: -9999px;
}

#sect-synergy .btn span {
	display: block;
	height: 40px;
	background-image: url(i/synergy-btn.png);
	background-repeat: no-repeat;
}

/*#sect-synergy .btn:hover {
	background-image: url(i/synergy-btn-over.png);
}*/

/* sect-gel */

#sect-gel {
	background-image: url(i/gel-back.png);
	background-repeat: no-repeat;
	height: 360px;
	position: relative;
}

#sect-gel .box {
	background-image: url(i/gel-txt-back.png);
	position: absolute;
	width: 346px;
	height: 264px;
	top: 29px;
	left: 0;
}

#sect-gel h4 {
	background-color: #ff4f41;
	color: #fff;
	font-size: 19px;
	font-weight: bold;
	padding: 7px 0 3px 23px;
	margin: 0 0 11px 0;
	line-height: 1.5em;
	text-indent: 0.5em;
}

#sect-gel h4 span {
	font-size: 16px;
}

#sect-gel .copy {
	padding: 0 0 0 31px;
	width: 304px;
	height: 125px;
	font-size: 14px;
	line-height: 1.5em;
}

#sect-gel .btn-box {
	width: 125px;
	margin: 0 auto;
}

#sect-gel .btn {
	display: block;
	width: 125px;
	height: 40px;
	background-image: url(i/gel-btn-over.png);
	background-repeat: no-repeat;
	text-indent: -9999px;
}

#sect-gel .btn span {
	display: block;
	height: 40px;
	background-image: url(i/gel-btn.png);
	background-color: #fff;
}

/*#sect-gel .btn:hover {
	background-image: url(i/gel-btn-over.png);
}
*/
/* sect-stylish */

#sect-stylish {
	background-color: #181819;
	padding: 30px 0 0 0;
}

#sect-stylish h4 {
	background-color: #fbd04c;
	font-weight: bold;
	font-size: 19px;
	padding: 15px 0 11px 41px;
	background-image: url(i/stylish-icon.png);
	background-repeat: no-repeat;
	background-position: 20px center;
}

#sect-stylish .box {
	background-image: url(i/stylish-img-01.png);
	background-repeat: no-repeat;
	height: 455px;
	color: #fff;
}

#sect-stylish .copy {
	width: 340px;
	font-size: 14px;
	line-height: 1.5em;
	padding: 223px 0 0 32px;
}

/* sect-scene */

#sect-scene .box dl {
	width: 345px;
	height: 250px;
	float: left;
	background-color: #f2f2f2;
	padding: 0 20px 0 12px;
}

#sect-scene .box dt {
	font-size: 19px;
	font-weight: bold;
	line-height: 1.5em;
	padding: 33px 0 5px 0;
	margin: 0 0 9px 0;
}

#sect-scene .box dd {
	font-size: 14px;
	line-height: 1.5em;
}

#sect-scene .box .img-box {
	float: left;
}

#sect-scene .box-1 dl {
	border-left: 7px solid #6bd3cc;
}

#sect-scene .box-1 dt {
	border-bottom: 1px solid #6bd3cc;
}

#sect-scene .box-2 dl {
	border-left: 7px solid #ff4f41;
}

#sect-scene .box-2 dt {
	border-bottom: 1px solid #ff4f41;
}

/* sect-lineup */

#sect-lineup {
	margin: 0 0 21px 0;
	position: relative;
}

#sect-lineup .sect-inner {
	overflow: hidden;
	display: block;
}

#sect-lineup .lineup-item {
	display: block;
	height: 564px;
	float: left;
	color: #fff;
	font-size: 14px;
	line-height: 1.5em;
}

#sect-lineup .lineup-1 {
	width: 255px;
	background-image: url(i/lineup-img-01.png);
}

#sect-lineup .lineup-2 {
	width: 258px;
	background-image: url(i/lineup-img-02.png);
}

#sect-lineup .lineup-3 {
	width: 256px;
	background-image: url(i/lineup-img-03.png);
}

#sect-lineup .copy {
	display: block;
	margin: 460px 23px 0 23px;
/*	line-height: 1.7em;*/
}

#sect-lineup .btn-box {
	display: block;
	height: 35px;
	background-image: url(i/lineup-btn-over.png);
	text-indent: -9999px;
}

#sect-lineup .btn {
	display: block;
	height: 35px;
	background-image: url(i/lineup-btn.png);
}

/*#sect-lineup .btn:hover {
	background-image: url(i/lineup-btn-over.png);
}
*/
#sect-lineup .note {
	background-color: #000;
	color: #fff;
	text-align: right;
	padding: 12px 0;
	line-height: 1;
}

/* sect-black */

#sect-black {
	background-image: url(i/black-back.png);
	background-position: top center;
	background-repeat: no-repeat;
	color: #fff;
	height: 421px;
}

#sect-black .sect-inner {
	overflow: hidden;
	padding: 20px 0 0 20px;
}

#sect-black dl {
	margin: 0 0 32px 0;
}

#sect-black dt {
	font-size: 16px;
	font-weight: bold;
	line-height: 1.5em;
	margin: 0 0 8px 0;
}

#sect-black dd {
	width: 255px;
	font-size: 14px;
	line-height: 1.5em;
}

#sect-black .btn-box {
	width: 125px;
}

#sect-black .btn-box .btn {
	display: block;
	background-image: url(i/black-btn-over.png);
	height: 38px;
	text-indent: -9999px;
}

#sect-black .btn-box .btn span {
	display: block;
	background-image: url(i/black-btn.png);
	height: 38px;
}

/*#sect-black .btn-box .btn:hover {
	display: block;
	background-image: url(i/black-btn-over.png);
}
*/
.fl-box {
	width: 750px;
	background-color: #fff;
	text-align: left;
	display: none;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',MS-Gothic;
	position: fixed;
	top: 50%;
	left: 50%; 
	z-index: 1000;
	margin: 0 auto;
	margin-left: -393px;
}

.fl-box .ttl-box {
	background-color: #000;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	padding: 18px 0 12px 30px;
	position: relative;
}

.fl-box .ttl-box .close-btn {
	position: absolute;
	right: 10px;
	top: 11px;
}

.fl-box .content {
	padding: 4px;
	font-size: 14px;
	line-height: 1.5em;
	background-color: #ffffff;
}

.fl-box .inner {
	border: 1px solid #aaa;
	overflow: hidden;
}

.fl-box .copy-box {
	float: left;
}

.fl-box .copy-box .copy {
	padding: 0 0 34px 0;
	margin: 0 0 25px 0;
	border-bottom: 1px solid #000;
}

.fl-box dt {
	font-size: 16px;
	font-weight: bold;
	margin: 0 0 12px 0;
}

.fl-box .side-box {
	float: right;
	padding: 7px 0 0 0;
}

/* popup synergy -----------*/
#fl-synergy {
	height: 590px;
	margin-top: -294px;
}

#fl-synergy .ttl-box {
	border-bottom: 3px solid #84ccc9;
}

#fl-synergy .inner {
	border: 1px solid #aaa;
	padding: 27px 30px 25px 26px;
	overflow: hidden;
}

#fl-synergy .copy-box {
	width: 390px;
}

#fl-synergy dt {
	text-indent: -0.5em;
}

#fl-synergy .side-box {
	width: 270px;
	float:right;
}

/* popup gel -----------*/
#fl-gel {
	height: 694px;
	margin-top: -294px;
}

#fl-gel .ttl-box {
	border-bottom: 3px solid #ff4f41;
}

#fl-gel .inner {
	padding: 27px 27px 36px 26px;
}

#fl-gel .copy-box {
	width: 330px;
}

#fl-gel .copy-box dl dt {
	letter-spacing: -1px;
}

#fl-gel .copy-box .small {
	font-size: 10px;
}

#fl-gel .copy-box .note {
	font-size: 12px;
	margin: 9px 0 0 0;
}

#fl-gel .side-box {
	width: 320px;
	float:right;

}

#gelimage {
	display: flex;
}

#fl-gel .img-box-1 {
	width: 150px;
	float:left

}

#fl-gel .img-box-1 .copy{
	margin-top: 6px;
}


#fl-gel .img-box-2 {
	width: 150px;
	float: right;
	margin-left: 20px;
}

#fl-gel .img-box-2 .copy{
	margin-top: 6px;
}


#fl-gel .img-box-3 {
	display: block;
	width: 320px;
	margin-top: 30px;
}

#fl-gel .img-box-3 img {
	width: 320px;
	height: 144px;
}

#fl-gel .img-box-3 .copy {
	margin-top: 6px;
	width: 320px;
}


.fl-cover {
	background-image: url(i/fl-back.png);
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 500;
	display: none;
}

/*ライブラリーのインデックスページへ戻る
------------------------------*/
#go-indexpage {
	display: block;
	width: 100%;
	text-align: right;
	margin: 0 auto;
	margin-top: 0px;
	height: 130px;
}

#adjust{
	display: block;
	border-top: 1px solid #999999;
}

#go-indexpage .go-indexpage_bt{
	display: block;
	float: right;
	width: 200px;
	height: 52px;
  margin-top: 20px;
}

#go-indexpage .go-indexpage_bt a{
	display: block;
	width: 200px;
	height: 52px;
	margin: 0 auto;
	background-image: url(i/common/button_indexpage.png) ;
	text-indent: 100%;
	white-space: nowrap;
  overflow: hidden;
}

#go-indexpage .go-indexpage_bt a:hover{
	background-image: url(i/common/button_indexpage_hover.png) ;
}

/* popup　スマホ&タブレット　デバイス縦向き 位置調整
------------------------------*/
@media (orientation: portrait){
	
	.fl-box {
		margin-left: -376px;
	}
}

/* popup　タブレット　横向き&画面サイズが1366px 以下
------------------------------*/
@media (orientation: landscape) and (max-device-width: 1366px){

	.fl-box {
		margin-left: -376px;
	}

	#fl-synergy {
		height: 540px;
		margin-top: -270px;
		overflow: scroll;
	}

	#fl-gel {
		height: 540px;
		margin-top: -270px;
		overflow: scroll;
	}

	}

	
/* popup　スマホ　デバイス横向き&画面サイズが899px以下の場合  
------------------------------*/
@media (orientation: landscape) and (max-device-width: 899px){
	
	.fl-box {
		margin-left: -376px;
	}

	#fl-synergy {
		height: 360px;
		margin-top: -23%;
		overflow: scroll;
	}

	#fl-gel {
		height: 360px;
		margin-top: -23%;
		overflow: scroll;
	}
}