@charset "utf-8";

/*====================================================================

top-en.css

====================================================================*/
#wrapper{


}



/*--------------------------------------------------------------------
01.head
--------------------------------------------------------------------*/




/*--------------------------------------------------------------------
02.contents
--------------------------------------------------------------------*/

#main {
	padding:0;
	margin-right:14px;
   	width: 636px;
   	height: 100%;
   	float:left;

}


#sidebar {
	margin:0;
	padding:0;
   	width: 300px;
   	height: 100%;
   	float:left;

}



/* ----- Common Content Blocks -----*/


/* ---- Main Blocks ----*/

.main-block {
	display:block;
   width: 636px;
	margin: 0 0 10px 0;
	padding: 0;
	background: url(../img/top/main-block-bg.gif) repeat-y left;
	border-bottom: solid 1px #e4e7eb;
}

.main-block-head {

	background: #fff url(../img/top/main-block-title.gif) no-repeat;
	height: 36px;
	padding-top:0;
	font-size: 11px;
}

.main-block-head h3 {

	padding:4px 13px 0 18px;
	font-weight:900;
	float:left;
	color:#2b4bb1;
	width:auto;

}


.main-block-head h4 {

	padding:0;
	padding-top:10px;
	float:left;
	width:auto;

}

.main-block-head a {

	display: block;
	float: right;
	padding: 10px 15px 10px 20px;
	background:url(../img/top/main-spritemap.png) no-repeat -605px 10px;
	width:auto;
}

.main-block-head a:hover {

	background:url(../img/top/main-spritemap.png) no-repeat -605px -26px;
}


.main-block-content {

	margin: 0px;
	padding-left:5px;
	padding-top:5px;
	background: url(../img/top/main-block-bg-top.gif) no-repeat top;
	width:auto;

}


/* -- Main > Sub Blocks --*/


.sub-block {

	float:left;
	margin:0;
	padding:0;
	width:auto;

}

.sub-block-content {
	float:left;
	padding:10px 6.5px 12px 14px;
	width:282px;
}

.sub-block h2 {
	margin: 10px 0;

}


/* ---- Sidebar Blocks ----*/

.sidebar-block {

	margin: 0 0 5px 0;
	width:300px;
}

.sidebar-block-head h3 {
	height:26px;
	display:block;
	padding:8.5px 0 0 36px;
	font-size:12px;
	color:#646464;
	}

.sidebar-block a:hover {
   display:block;
   background: #fff;
   opacity:0.3;
   filter: alpha(opacity=30);
}

/* ----- Specific Content Blocks -----*/

#guidebtn{
   width: 300px;
   background: url(../img/top/guide_btn_border.gif) repeat-x left top;
   margin-bottom: 5px;
   overflow: hidden;
}
#guidebtn ul,
#guidebtn ul li,
#guidebtn ul li a{
   display: block;
   width: 300px;
}
#guidebtn ul{
   padding-bottom: 6px;
   background: url(../img/top/guide_btn_border.gif) repeat-x left bottom;
}
#guidebtn ul:after{
   content: ".";
   display: block;
   clear: both;
   height: 0;
   visibility: hidden;
}
#guidebtn ul li,
#guidebtn ul li a{
   height: 60px;
}
#guidebtn ul li{
   margin-top: 6px;
}

#guidebtn ul li a{
   display: block;
   text-indent: -9999px;
   overflow: hidden;
}
#guidebtn ul li a:hover{
   background: #fff;
   opacity:0.2;
   filter: alpha(opacity=20);
}
#guidebtn ul li#gb1{
   background: url(../img/top/guide_btn_bg.gif) no-repeat left -6px;
}
#guidebtn ul li#gb2{
   background: url(../img/top/guide_btn_add.gif) no-repeat left top;
}
#guidebtn ul li#gb3{
   background: url(../img/top/guide_btn_session.gif) no-repeat left top;
}
#guidebtn ul li#gb4{
   background: url(../img/top/guide_btn_for_user.gif) no-repeat left top;
}
#guidebtn ul li#gb-tki{
   background: url(../img/top/guide_btn_tki_seminar2.gif) no-repeat left top;
}

.information-btns{
   overflow: hidden;
   zoom: 1;
   background: url(../img/top/guide_btn_border.gif) repeat-x left bottom;
   margin-bottom: 5px;
   padding-bottom: 5px;
}
.information-btns .item{
   position: relative;
   overflow: hidden;
   zoom: 1;
   margin-top: 5px;
   background: #f7f7f7;
   border: solid 1px #ddd;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   padding: 10px;
}
.information-btns .item *{
   line-height: 1;
   text-decoration: none;
}
.information-btns .item h4{
   color: #1c4693;
   font-size: 18px;
   font-weight: bold;
   border-bottom: solid 1px #ddd;
   padding-bottom: 7px;
}
.information-btns .item ul,
.information-btns .item ul li{
   display: block;
}
.information-btns .item ul li{
   margin-top: 10px;
}
.information-btns .item h5{
   font-size: 14px;
   margin-top: 7px;
}
.information-btns .item p{
   margin-top: 7px;
}


.information-btns .session{

}
.information-btns .session ul li{
   font-size: 12px;
}
.information-btns .tki h4{
   font-size: 15px;
}
.information-btns .tki p{
   line-height: 1.4;
}
.information-btns .tki p strong{
   color: #1b6a6b;
}


/* ---- Specific Main Blocks ----*/

/* --- movie ---*/

#movie {
   width: 50%;
}

#movie p{
   font-weight: bold;
   font-size: 0.55rem;
   margin-top: 5px;
}

#youtube-area {
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}

.movie_inner {
   position: relative;
   width: 100%;
   height: 100%;
   z-index: 3;
   text-align: center;
}

.movie_thumb {
   position: relative;
   width: 100%;
   height: 100%;
}

.movie_thumb img{
   width: 100%;
   display: block;
}

.play_btn {
   position: absolute;
   width: 62px;
   height: 62px;
   top: 50%;
   left: 50%;
   transform: translateY(-50%) translateX(-50%);
   -webkit- transform: translateY(-50%) translateX(-50%);
   margin: auto;
   transition: .4s;
}

.play_btn a img{
  width: 100%;
}

.play_btn:hover {
   opacity: 0.5;
}

/*モーダル*/
.modaal-close:before,
.modaal-close:after {
   border-radius: 0px !important;
}


/* --- 1.Flash ---*/

#flash{
	position: relative;
   width: 636px;
   height: 100%;
   text-align: left;
  	margin:0;
   padding:0;
   margin-bottom: 5px;
}

#flash .add-link,
#flash .add-link a{
   width: 100%;
   height: 78px;
}
#flash .add-link{
   position: absolute;
   left: 0;
   bottom: 0;
}
#flash .add-link a{
   display: block;
   text-indent: -9999px;
   overflow: hidden;
}

#flash .banner-top {
   background: url(../img/top/banner_back.jpg);
   background-size: cover;
   box-sizing: border-box;
   height: 100%;
}

/* 最初のbanner-boxのみborderを除去 */
#flash .banner-box:first-child {
   border: none;
   padding: 0;
   margin-top: 2px;
   margin-bottom: 4px;
}

#flash .banner-box {
   background: url(../img/top/banner_back.jpg);
   background-size: cover;
   border: solid 3px #eee;
   box-sizing: border-box;
   height: 100%;
   padding: 10px;
   margin-top: -5px;
}



#flash .banner-box .banner-box-title{
   text-align: center;
   margin: 5px 0;
   width: 100%;
}

#flash .banner-box .banner-box-title img{
}


#flash .banner-box .banner-box-inner{
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 10px;
}

#flash .banner-box .banner-box-inner .banner-item{
   width: 50%;
}

#flash .banner-box .banner-box-inner .banner-item .banner-box-image:first-child{
  /* margin-bottom: 10px;*/
}

#flash .banner-box .banner-box-inner .banner-item img{
   width: 100%;
   display: block;
}


/* --- 2.News ---*/

#news {
	position: relative;
	height:auto;
}

#news a {

	text-decoration:none;
}

/* -- News Btn --*/
#news_btn,
#news_btn a{
   width: 81px;
   height: 16px;
}
#news_btn{
   position: absolute;
   left: 545px;
   top: 10px;
   background: url(../img/top/news_btn.gif) no-repeat;
}
#news_btn a{
   display: block;
   text-indent: -9999px;
   overflow: hidden;
}
#news_btn a:hover{
   background: #fff;
   opacity:0.2;
   filter: alpha(opacity=20);
}


/* -- News List --*/

dl.news {
	margin-top:10px;
	padding-bottom:10px;

	}

dt.news-header {

	float:left;
	display:inline;
	color:#7c7c7c;
	padding:5px 35px 5px 20px;
	width:auto;

	}

dd.news-content {

	padding:5px 20px;
	border-bottom:0.5px solid  #ececec;


	}



/* --- 3.Shopping ---*/

#shopping {
}
#shopping:after{
   content: ".";
   display: block;
   clear: both;
   height: 0;
   visibility: hidden;
}

#shopping div.main-block-head{
   height: 36px;
}
#shopping div.main-block-content{
   margin-top: 0;
   padding: 0;
}


/* -- Shopping List --*/

ul.shopping {
   display: block!important;
   width: 636px;
	/*margin-top:15px;*/
	text-align: left;
	padding: 15px 0!important;
	overflow: hidden;
	}

li.shopping-entry{

	margin: 0px;
	width: 127px;
	height: 200px;
	float:left;
	text-align: center;
   padding-bottom: 15px;
	}


li.shopping-entry a:hover img{

	/*border: 1px solid #b6d2ee;*/

	}

li.shopping-entry img{

	}

li.shopping-entry span img{

	border: none;

	}


li.shopping-entry strong{
	margin:5px 0;
	display:block;
	font-size:12px;
	font-weight: normal;
	line-height: 115%;

	}
li.shopping-entry span{
   display: block;
   line-height: 1.1;
   font-size: 10px;
   color: #777;
}
li#info{
   width: 350px;
   display: block;
   float: left;
   text-align: center;
   padding: 35px 0px 35px;
}

li.clear{
   clear: left;
}


/* --- 4. Information ---*/

#information {
	width:100%;
	overflow:hidden;
	padding:0px 0;
	background: url(../img/top/information_bg.gif) repeat-y top;
	font-size:11px;
   border-top: solid 1px #e3e3e3;
   border-bottom: solid 1px #e3e3e3;
	}
#infobg1{
   padding-top: 9px;
   background: url(../img/top/information_bg2.gif) no-repeat top;
}
#infobg2{
   zoom: 1;
   padding-bottom: 9px;
   background: url(../img/top/information_bg3.gif) no-repeat bottom;
}
#infobg2:after{
   content: ".";
   display: block;
   clear: both;
   height: 0;
   visibility: hidden;
}

.sub-block{

}

/* -- JPP Information --*/


#jpp-information-container {

	height:100%;
	margin: auto 10px;
	width:302px
}

#jpp-information {

	float:left;
	width:auto;

}

#jpp-information h2 {
	height:58px;
	background:url(../img/top/info_title1.gif) no-repeat left;
	text-indent: -9999px;
}

/* -- mbti Information --*/

#mbti-information-container {

	height:100%;
	float:left;
	width:302px

}

#mbti-information {

	float:left;
	width:auto;
}


#mbti-information h2{
	height:58px;
	background:url(../img/top/info_title2.gif) no-repeat left;
	text-indent: -9999px;
}


/* ---- Side Content Blocks ----*/


/* --- 1. Banner ---*/

#sidebar-1 {

 	padding:0;
 	height:100px;
 	background:url(../img/top/login_01.gif) no-repeat;

}

/* --- 2. Banner ---*/

#sidebar-2 {

 	padding:0;
 	height:100px;
 	background:url(../img/top/login_02.gif) no-repeat;

}

#sidebar-tki {

   padding:0;
   height:100px;
   background:url(../img/top/login_tki.gif) no-repeat;

}

#sidebar-3 {
 	padding:0;
 	height:40px;
 	background:url(../img/top/side_btn.gif) no-repeat;

}

/* --- 3. Contents Menu ---*/

#sidemenu {

	background:#eff4f8 url(../img/top/side-spritemap.jpg) no-repeat 0px -266px;
	height:175px;

}

#sidemenu-content {
	padding-top:8px;

}


li.sidemenu-entry {
	margin-left:6px;
	height: 54px;
	width: 288px;

}

li.sidemenu-entry a {

	height: 54px;
	width: 284px;

}



/* ---- 4. Links ----*/

#links{
	width: 300px;
	background: url(../img/top/link_bg.gif) repeat-y left top;
	border-bottom: solid 1px #dbe3e9;
	padding-bottom: 7px;
}
#links h3{
   height: 35px;
   text-indent: -9999px;
   overflow: hidden;
   background: url(../img/top/link_title.gif) no-repeat;
}
#links ul{
   display: block;
   width: 284px;
   margin: 7px 0 0 8px;
   padding: 0;
}
#links ul li{
   display: block;
   margin: 1px;
   padding: 0;
}
#links ul li img{
   display: block;
   margin: 0;
}
#links ul li span{
   display: block;
   color: #053b38;
   font-size: 12px;
   text-indent: 4px;
   padding-bottom: 5px;
}


#links-content {
	padding-top:5px;

}


li.links-entry {
	margin-left:6px;
	height: 54px;
	width: 288px;

}

li.links-entry a {

	height: 54px;
	width: 284px;

}

#links-mbti{
	background:#eff4f8 url(../img/top/side-spritemap.jpg) no-repeat -6px -41px;
}

#links-apt{
	background:#eff4f8 url(../img/top/side-spritemap.jpg) no-repeat -6px -96px;
}

#links-pds{
	background:#eff4f8 url(../img/top/side-spritemap.jpg) no-repeat -6px -150px;
}

#links-cpp{
	background:#eff4f8 url(../img/top/side-spritemap.jpg) no-repeat -6px -204px;
}



/* ---- 5. Copyright Information ----*/

#copyright {

padding: 6px 6px 6px 6px;
margin:0;

}

#copyright p{

	margin:5px 0;
	color:#2b5286;
	font-size:9px;
	line-height: 115%;

}

.slider{
   position: relative;
   padding-bottom: 35px;
}
.slider .flex-control-nav{
   bottom: 5px;
}