@charset "UTF-8";
/* CSS Document */

/* 共通 */
div:after, article:after, ul:after,dl:after, aside:after { content:""; display:block; clear:both;}
body { font-family:NotoSans, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
.all { height:100%; display: none;}
header { position: absolute; top: 0; left:0; right:0;}
header ul { text-align: right; padding-top: 20px}
header ul li { display: inline-block; padding:0 20px;}
header ul li a { color: white; font-size: 14px; font-weight: 500; position: relative;}
header ul li a:after { display: block; position: relative; top:0; bottom:0; left:0; right:0; content: "";  height: 2px; width:0%;  z-index: 2000; background: #f41021;-webkit-transition:all 0.3s; -moz-transition:all 0.3s; -ms-transition:all 0.3s; transition:all 0.3s; margin: 0 auto;}
header ul li a:hover:after { width:100%;  z-index: 2000; background: #f41021;}
header ul li.contact a {font-size: 12px; font-weight: 600; width: 100px; height: 30px; display: block; text-align: center; padding-top: 5px;  border-radius: 5px; letter-spacing: 1px; text-shadow:0px 1px 3px rgba(0,0,3,0.15); -moz-text-shadow:0px 1px 3px rgba(0,0,3,0.15); -webkit-text-shadow:0px 1px 3px rgba(0,0,3,0.15);  -ms-text-shadow:0px 1px 3px rgba(0,0,3,0.15);}
section {background: #fbfbfb}
.inr-width { width: 90%; max-width: 800px; margin: 0 auto; padding: 100px 0 110px; }
.titlearea { text-align: center; font-weight: 600; border-bottom: solid 3px #cbcbcb; position: relative; padding-bottom: 16px; line-height: 1; margin-bottom: 50px;}
#summary .titlearea, #lecturer .titlearea { border-bottom: solid 3px #fff;}
.titlearea:after { display: block; position: absolute; bottom:-3px; left:0; right:0; margin: 0 auto; content: "";  height: 3px; width:60px;  z-index: 200;}
.titlearea-title { font-size: 30px; margin-bottom: 19px; }
.titlearea-sub { font-size: 13px; font-weight: 300; opacity: 0.8}
.titlearea-sub,.mainvisal-scrollbtn {font-family: 'Karma', serif; font-weight:300; letter-spacing:0.5px;}
.btn-submit a { background:#da0916; color:white;}
.btn-submit a:hover { background:#f41021;}
#btn-contact { position: fixed; bottom: -200px; right: 15px; z-index: 1000}
#btn-contact a { width: 110px; height:110px;text-align: center; border-radius: 50%; padding-top: 35px; display:block; font-weight: 600; font-size: 15px; line-height: 1.3; letter-spacing: 0.5px;
	box-shadow:0px 1px 3px rgba(0,0,3,0.15); -moz-box-shadow:0px 1px 3px rgba(0,0,3,0.15); -webkit-box-shadow:0px 1px 3px rgba(0,0,3,0.15);  -ms-box-shadow:0px 1px 3px rgba(0,0,3,0.15);
	text-shadow:0px 1px 3px rgba(0,0,3,0.15); -moz-text-shadow:0px 1px 3px rgba(0,0,3,0.15); -webkit-text-shadow:0px 1px 3px rgba(0,0,3,0.15);  -ms-text-shadow:0px 1px 3px rgba(0,0,3,0.15);}
#btn-contact a:hover { text-decoration: none;}
#btn-contact i { position: absolute; right: 8px; font-size: 20px; top: 42%;}

@media screen and (max-width:768px){
	.inr-width { padding: 60px 0 72px; }
	header ul { text-align: center;}
	header ul li.contact { display:none;}	
	.titlearea { padding-bottom: 14px; margin-bottom: 36px;}
	.titlearea:after { bottom:-3px; height: 3px; width:60px;}
	.titlearea-title { font-size: 24px; margin-bottom: 14px; }
	.titlearea-sub { font-size: 11px; }
	#btn-contact { right: 12px;}
	#btn-contact a { width: 80px; height:80px; padding-top: 24px; font-size: 12px; }
	#btn-contact i { right: 5px; font-size: 16px; top: 40%;}
}
@media screen and (max-width:480px){
	.inr-width { padding: 48px 0 60px; }
	header ul li { padding: 0 12px 10px;}
	header ul li a { font-size: 11px; }
	.titlearea { padding-bottom: 12px; margin-bottom: 24px;}
	.titlearea:after { width:50px;}
	.titlearea-title { font-size: 22px; margin-bottom: 14px; }
	.titlearea-sub { font-size: 11px; }
	#btn-contact { right: 8px;}
	#btn-contact a { width: 60px; height:60px; padding-top: 19px; font-size: 9px; }
	#btn-contact i { right: 4px; font-size: 12px; top: 42%;}
}


/* top */
.mainvisual { position: relative; height: 100%; min-height:660px; }
.mainvisual .section-mainbg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 100;}
.mainvisual .mainvisual-inr { position: relative; display: table; z-index: 200; color: white; width: 100%; height: 100%;}
.mainvisual .mainvisal-box { display: table-cell; vertical-align: middle; text-align: center;}
.mainvisual-dayarea { position: relative; padding-bottom: 9px;}
.mainvisual-dayarea-day { font-size: 68px; font-weight: 700; display: inline-block;}
.mainvisual-dayarea .right { display: inline-block; padding-left: 8px; text-align: center;}
.mainvisual-dayarea-dayoftheweek { font-size: 22px; font-weight: 700; }
.mainvisual-dayarea-free { background:#faa800; width: 62px; font-size: 12px; font-weight: 600; height: 24px; padding-top: 6px; line-height: 1; margin:0 auto 4px; text-shadow:0px 1px 3px rgba(0,0,3,0.15); -moz-text-shadow:0px 1px 3px rgba(0,0,3,0.15); -webkit-text-shadow:0px 1px 3px rgba(0,0,3,0.15);  -ms-text-shadow:0px 1px 3px rgba(0,0,3,0.15);}
.mainvisual-titlearea { position: relative; padding:22px 0 0px;}
.mainvisual-titlearea:after { display: block; position: absolute; top: 0; left:0; right:0; margin: 0 auto; background: #fff; content: "";  height: 4px; width:100px;  z-index: 200}
.mainvisual-titlearea-title { font-size: 40px; font-weight: 700; line-height: 1.5}
.mainvisual-titlearea-sub { font-size: 30px; font-weight: 600; padding-top: 19px;}
.mainvisual-btnarea { padding-top: 78px;}
.mainvisual-btnarea .btn-submit a { display: block; width: 280px; height: 51px; border-radius: 7px; padding-top: 9px; margin: 0 auto; font-size: 19px; font-weight: 700; letter-spacing: 1px; 
	box-shadow:0px 1px 5px rgba(0,0,3,0.3); -moz-box-shadow:0px 1px 5px rgba(0,0,3,0.3); -webkit-box-shadow:0px 1px 5px rgba(0,0,3,0.3);  -ms-box-shadow:0px 1px 5px rgba(0,0,3,0.3);
	text-shadow:0px 1px 3px rgba(0,0,3,0.15); -moz-text-shadow:0px 1px 3px rgba(0,0,3,0.15); -webkit-text-shadow:0px 1px 3px rgba(0,0,3,0.15);  -ms-text-shadow:0px 1px 3px rgba(0,0,3,0.15);position: relative}
.mainvisual-btnarea .btn-submit a i { font-size:11px; padding-left: 5px; position: absolute; right: 7px; top: 22px;}
.mainvisual-btnarea-organizer { font-size: 12px; font-weight:200; padding-top: 16px}
.mainvisal-scrollbtn { position: absolute; bottom: 24px; text-align: center; color: white; z-index: 200; left: 0; right: 0; font-size: 16px; line-height: 1.2;}
.mainvisal-scrollbtn a { color:white; letter-spacing: 1px; cursor: pointer;}
.mainvisal-scrollbtn a:hover { opacity: 0.75;}
.mainvisal-scrollbtn i { display: block; font-size: 20px; position: absolute; left: 0; right: 0; bottom:-17px;}

@media screen and (max-width:768px){
	.mainvisual-dayarea { padding-bottom: 8px;}
	.mainvisual-dayarea-day { font-size: 48px; }
	.mainvisual-dayarea-dayoftheweek { font-size: 16px; }
	.mainvisual-dayarea-free { width: 54px; font-size: 11px; height: 20px; padding-top: 5px; margin:0 auto 2px;}
	.mainvisual-titlearea { padding:18px 3% 0px;}
	.mainvisual-titlearea:after { height: 4px; width:70px; }
	.mainvisual-titlearea-title { font-size: 30px; line-height: 1.5}
	.mainvisual-titlearea-sub { font-size: 15px; padding-top: 18px;}
	.mainvisual-btnarea { padding-top: 60px;}
	.mainvisual-btnarea .btn-submit a { width: 240px; height: 46px; padding-top: 8px; font-size: 17px; }
	.mainvisual-btnarea-organizer { font-size: 10px; padding-top: 12px}
	.mainvisal-scrollbtn { font-size: 14px; }
	.mainvisal-scrollbtn i { font-size: 18px; bottom:-15px;}
}
@media screen and (max-width:480px){
	.mainvisual { min-height:540px}
	.mainvisual-dayarea { padding-bottom: 5px; margin-top: 10px}
	.mainvisual-dayarea-day { font-size: 30px; padding-left: 5px}
	.mainvisual-dayarea .right { padding-left: 0px;}
	.mainvisual-dayarea-dayoftheweek { font-size: 18px; position: relative; left: -5px; top: -2px;}
	.mainvisual-dayarea-free { width: 52px; font-size: 10px; height: 19px; padding-top: 4px; margin:0 auto 4px; position: absolute; top:-20px; left: 0; right: 0;}
	.mainvisual-titlearea { padding:14px 5% 0px;}
	.mainvisual-titlearea:after { height: 3px; width:40px; }
	.mainvisual-titlearea-title { font-size: 20px; line-height: 1.4}
	.mainvisual-titlearea-sub { font-size: 11px; padding-top: 16px;}
	.mainvisual-btnarea { padding-top: 36px;}
	.mainvisual-btnarea .btn-submit a { width: 200px; height: 40px; padding-top: 8px; font-size: 14px; }
	.mainvisual-btnarea-organizer { font-size: 8px; padding-top: 8px}
}


/* セミナー概要 */
#overview { display:;}
.overview-inr { display:table;  padding: 130px 0 160px; }
.overview-article p { font-size: 16px; text-align: center; line-height: 2; font-weight: 400; padding-bottom: 20px;}

@media screen and (max-width:768px){
	.overview-inr { display:table;  padding: 80px 0 120px; }
	.overview-article p { font-size: 13px;}
}
@media screen and (max-width:480px){
	.overview-inr { padding: 48px 0 60px; }
	.overview-article p { font-size: 12px; padding-bottom: 14px;}
	.overview-article p br{ display: none}
}


/* 開催概要 */
#summary { display:;}
.summary-article dl { display: table; width: 100%; margin-bottom: 3px; box-shadow:0px 1px 3px rgba(0,0,3,0.15); -moz-box-shadow:0px 1px 3px rgba(0,0,3,0.15); -webkit-box-shadow:0px 1px 3px rgba(0,0,3,0.15);  -ms-box-shadow:0px 1px 3px rgba(0,0,3,0.15);}
.summary-article dl dt {font-size: 16px; font-weight: 500; text-align: center; width: 25%; display: table-cell; vertical-align: middle;}
.summary-article dl dd {font-size: 20px; font-weight: 600; background: white; width: 75%; display: table-cell; vertical-align: middle; padding: 24px 24px 24px;}
.summary-article dl dd .text-s{font-size: 13px; font-weight: 500;}
.summary-article .map iframe { width: 100%; padding-top: 22px}

@media screen and (max-width:768px){
	.summary-article dl { margin-bottom: 3px; }
	.summary-article dl dt { font-size: 13px; }
	.summary-article dl dd { font-size: 16px; padding: 16px 16px 16px;}
	.summary-article dl dd .text-s{ font-size: 11px;}
	.summary-article .map iframe { padding-top: 20px}
}
@media screen and (max-width:480px){
	.summary-article dl { margin-bottom: 3px; }
	.summary-article dl dt { font-size: 10px; }
	.summary-article dl dd { font-size: 13px; padding: 13px;}
	.summary-article dl dd .text-s{ font-size: 9px;}
	.summary-article .map iframe { padding-top: 20px; height: 300px;}
}


/* コンテンツ */
#contents { display:;}
.contents-article-item { padding-bottom: 30px;}
.contents-article-item:last-child {padding-bottom: 0px;}
.contents-article-item dt { border-radius: 5px 5px 0 0; padding: 12px 22px}
.contents-article-item dt h3 {font-size: 22px; font-weight: 600; line-height: 1.5}
.contents-article-item dt p {font-size: 13px; font-weight: 500; padding: 3px 0 2px;}
.contents-article-item dd { background: white; border: solid 2px #04263c; border-top: none; border-radius: 0 0 5px 5px; padding:25px 24px;box-shadow:0px 1px 3px rgba(0,0,3,0.15); -moz-box-shadow:0px 1px 3px rgba(0,0,3,0.15); -webkit-box-shadow:0px 1px 3px rgba(0,0,3,0.15);  -ms-box-shadow:0px 1px 3px rgba(0,0,3,0.15);}
.contents-article-item dd ul li{font-size: 17px; padding-bottom: 9px;}
.contents-article-item dd ul li:last-child {padding-bottom: 0px;}
.contents-article-item dd ul li i{ font-weight: 600; font-style: normal; padding-right: 3px;}

@media screen and (max-width:768px){
	.contents-article-item { padding-bottom: 22px;}
	.contents-article-item dt { padding: 10px 18px}
	.contents-article-item dt h3 { font-size: 17px; }
	.contents-article-item dt p { font-size: 10px; padding: 4px 0 2px;}
	.contents-article-item dd { padding:16px 20px 18px;}
	.contents-article-item dd ul li{font-size: 15px; padding-bottom: 6px;}
	.contents-article-item dd ul li i{ padding-right: 3px;}
}
@media screen and (max-width:480px){
	.contents-article-item { padding-bottom: 18px;}
	.contents-article-item dt { padding: 9px 16px; border-radius: 4px 4px 0 0;}
	.contents-article-item dt h3 { font-size: 12px; line-height: 1.4}
	.contents-article-item dt p { font-size: 8px; padding: 3px 0 0px;}
	.contents-article-item dd { padding:9px 16px 12px;border-radius: 0 0 4px 4px;}
	.contents-article-item dd ul li{font-size: 11px; padding-bottom: 2px;}
	.contents-article-item dd ul li i{ padding-right: 3px;}
}


/* 講師紹介 */
#lecturer { display:;}
.lecturer-profile:last-child { margin-bottom:0px;}
.lecturer-profile {background: white; margin-bottom: 30px; padding: 30px; 
	box-shadow:0px 1px 3px rgba(0,0,3,0.15); -moz-box-shadow:0px 1px 3px rgba(0,0,3,0.15); -webkit-box-shadow:0px 1px 3px rgba(0,0,3,0.15);  -ms-box-shadow:0px 1px 3px rgba(0,0,3,0.15); }
.lecturer-profile-photo { width: 25%; float: left}
.lecturer-profile-textarea {float: right; width: 71%;}
.lecturer-profile-name {font-size: 26px; font-weight: 600; line-height: 1; margin-bottom: 14px;}
.lecturer-profile-company {font-size: 13px; font-weight: 600; padding-bottom: 18px; border-bottom: solid 2px #e4e4e4; position: relative}
.lecturer-profile-company:after { position: absolute; display: block; bottom:-2px; left:0; content: "";  height: 2px; width:20px;  z-index: 200}
.lecturer-profile-text { margin: 15px 0 }
.lecturer-profile-text dt {font-size: 14px; font-weight: 700; }
.lecturer-profile-text dd {font-size: 13px; margin-top: 5px;}

@media screen and (max-width:768px){
	.lecturer-profile { margin-bottom: 22px; padding: 30px; }
	.lecturer-profile-photo { width: 25%; }
	.lecturer-profile-textarea { width: 71%;}
	.lecturer-profile-name { font-size: 22px; margin-bottom: 14px;}
	.lecturer-profile-company {font-size: 10px; padding-bottom: 14px; }
	.lecturer-profile-text { margin: 13px 0 }
	.lecturer-profile-text dt {font-size: 12px; }
	.lecturer-profile-text dd {font-size: 10px; margin-top: 5px;}
}
@media screen and (max-width:480px){
	.lecturer-profile { margin-bottom: 18px; padding: 30px; }
	.lecturer-profile-photo { width: 130px; margin: 0 auto; float: none; padding-bottom: 22px;}
	.lecturer-profile-textarea { width: 100%; float: none;}
	.lecturer-profile-name { font-size: 20px; margin-bottom: 14px; text-align: center;}
	.lecturer-profile-company {font-size: 10px; padding-bottom: 14px; text-align: center;}
	.lecturer-profile-company:after { right: 0; margin: 0 auto;}
	.lecturer-profile-text { margin: 13px 0 }
	.lecturer-profile-text dt {font-size: 12px; text-align: center}
	.lecturer-profile-text dd {font-size: 10px; margin-top: 5px;}
}


/* フッター */
footer { color: white; text-align: center; position: relative; padding: 60px 0 0px}
footer:after {  display: block; position: absolute; top:0; bottom:0; left:0; right:0; content: ""; z-index: 100; background: linear-gradient(180deg,rgba(0,0,0,0), rgba(0,0,4,0.06), rgba(0,0,4,0.20)); }
footer a { color: white;}
.footer-inr { z-index: 200; position: relative;}
.footer-title { font-size: 11px; font-weight: 600; width: 70px; height: 28px; margin: 0 auto; border: solid 1px white; border-radius: 20px; padding-top: 4px; margin-bottom: 15px;}
.footer-organizer-company { font-size: 28px; font-weight: 700; margin-bottom: 12px;}
.footer-organizer address { font-weight: 400; margin-bottom: 19px; font-size: 12px; letter-spacing: 1px;}
.footer-organizer-tel { font-size: 40px; font-weight: 600; line-height: 1; margin-bottom: 20px;}
.footer-organizer-tel a { pointer-events: none;}
.mobile .footer-organizer-tel a { pointer-events: auto;}
.footer-organizer-tel .fa { position :relative; left: -5px; font-size: 42px; top: 3px;}
.footer-organizer-mail { font-size: 14px; letter-spacing: 0.5px; font-weight: 200; line-height: 1;}
.footer-organizer-mail .fa {padding-right: 3px;}
.footer-organizer-mail a:hover { text-decoration:underline}
.footer-management { margin-top: 68px;}
.footer-management-title { font-size: 11px; }
.footer-management-logo { padding-top: 7px; position: relative; left: -6px;}
.footer-management-logo a { width: 140px; display: block; margin: 0 auto;}
.footer-management-logo a:hover { opacity: 0.75}
.footer-copyright { font-size: 9px; letter-spacing: 0.5px; color: rgba(255,255,255,0.90); margin-top: 24px; font-weight: 200; background: rgba(0,0,0,0.25); padding: 10px}
.btn-pagetop { background: white; position: absolute; top: -38px; right: 0; width: 100px;
box-shadow:0px -1px 3px rgba(0,0,3,0.15); -moz-box-shadow:0px -1px 3px rgba(0,0,3,0.15); -webkit-box-shadow:0px -1px 3px rgba(0,0,3,0.15);  -ms-box-shadow:0px -1px 3px rgba(0,0,3,0.15);}
.btn-pagetop a { font-size: 13px; font-weight:600; height: 38px; display: block; line-height: 1.35}
.btn-pagetop a:hover { color: #da0916!important}
.btn-pagetop i { display:block; font-size: 10px; padding-top: 5px;}

@media screen and (max-width:768px){
	footer { padding: 40px 0 0px}
	.footer-title { font-size: 10px; width: 60px; height: 27px; padding-top: 4px; margin-bottom: 12px;}
	.footer-organizer-company { font-size: 24px; margin-bottom: 10px;}
	.footer-organizer address { margin-bottom: 14px; font-size: 11px;}
	.footer-organizer-tel { font-size: 36px; margin-bottom: 19px;}
	.footer-organizer-tel .fa { left: -5px; font-size: 38px; top: 3px;}
	.footer-organizer-mail { font-size: 14px; }
	.footer-organizer-mail .fa {padding-right: 3px;}
	.footer-management { margin-top: 48px;}
	.footer-management-title { font-size: 10px; }
	.footer-management-logo { padding-top: 5px; left: -6px;}
	.footer-management-logo a { width: 120px; }
	.footer-copyright { font-size: 8px; margin-top: 20px;  padding: 8px}
	.btn-pagetop { top: -38px; width: 90px;}
	.btn-pagetop a { font-size: 13px; height: 38px;}
	.btn-pagetop i { font-size: 9px; padding-top: 6px;}
}
@media screen and (max-width:480px){
	footer { padding: 36px 0 0px}
	.footer-title { font-size: 9px; width: 52px; height: 24px; padding-top: 3px; margin-bottom: 12px;}
	.footer-organizer-company { font-size: 19px; margin-bottom: 10px;}
	.footer-organizer address { margin-bottom: 14px; font-size: 9px;}
	.footer-organizer-tel { font-size: 28px; margin-bottom: 16px;}
	.footer-organizer-tel .fa { left: -5px; font-size: 30px; top: 2px;}
	.footer-organizer-mail { font-size: 11px; }
	.footer-organizer-mail .fa {padding-right: 2px;}
	.footer-management { margin-top: 42px;}
	.footer-management-title { font-size: 9px; }
	.footer-management-logo { padding-top: 2px; left: -6px;}
	.footer-management-logo a { width: 110px; }
	.footer-copyright { font-size: 6px; margin-top: 14px;  padding: 6px}
	.btn-pagetop { top: -29px; width: 64px;}
	.btn-pagetop a { font-size: 10px; height: 29px;}
	.btn-pagetop i { font-size: 7px; padding-top: 4px;}
}


/* color-navy */
#colortype-navy .section-mainbg { background: rgba(12,17,28,0.80);}
#colortype-navy .titlearea:after, #colortype-navy #summary dl dt, #colortype-navy #contents dl dt,#colortype-navy .lecturer-profile-company:after, #colortype-navy footer { background:#04263c; color: white}
#colortype-navy .titlearea,#colortype-navy .btn-pagetop a { color:#04263c;}
#colortype-navy #summary, #colortype-navy #lecturer { background: url(../img/bg_navy.jpg) no-repeat; background-size: cover;}
#colortype-navy .contents-article-item dd { background: white; border: solid 2px #04263c; border-top: none;}

/* color-brown */
#colortype-brown .section-mainbg { background: rgba(18,13,11,0.75);}
#colortype-brown .titlearea:after, #colortype-brown #summary dl dt, #colortype-brown #contents dl dt, #colortype-brown .lecturer-profile-company:after, #colortype-brown footer { background:#362423; color: white}
#colortype-brown .titlearea,#colortype-brown .btn-pagetop a { color:#362423;}
#colortype-brown .titlearea { border-bottom: solid 3px #ddd!important;}
#colortype-brown #summary, #colortype-brown #lecturer { background: url(../img/bg_brown.jpg) no-repeat; background-size: cover;}
#colortype-brown .contents-article-item dd { background: white; border: solid 2px #362423; border-top: none;}

/* color-green */
#colortype-green .section-mainbg { background: rgba(13,28,23,0.75);}
#colortype-green .titlearea:after,  #colortype-green #summary dl dt, #colortype-green #contents dl dt, #colortype-green .lecturer-profile-company:after, #colortype-green footer { background:#233330; color: white}
#colortype-green .titlearea,#colortype-green .btn-pagetop a { color:#233330;}
#colortype-green #summary, #colortype-green #lecturer { background: url(../img/bg_green.jpg) no-repeat; background-size: cover;}
#colortype-green .contents-article-item dd { background: white; border: solid 2px #233330; border-top: none;}

/* color-blue */
#colortype-blue .section-mainbg { background: rgba(2,53,108,0.70);}
#colortype-blue .titlearea:after, #colortype-blue #summary dl dt, #colortype-blue #contents dl dt, #colortype-blue .lecturer-profile-company:after, #colortype-blue footer { background:#185799; color: white}
#colortype-blue .titlearea,#colortype-blue .btn-pagetop a { color:#185799;}
#colortype-blue #summary, #colortype-blue #lecturer { background: url(../img/bg_blue.jpg) no-repeat; background-size: cover;}
#colortype-blue .contents-article-item dd { background: white; border: solid 2px #185799; border-top: none;}

#loader { width: 100%; height: 100%; position: fixed;  top:0; bottom: 0; left: 0; right:0; text-align:center; z-index: 5100; }
.loader_bg { width: 100%; height: 100%; background-color:white; position: absolute; top: 0px; left: 0px; z-index: 5050;}
.loader_1 { height: 100%; display: table; vertical-align: middle; margin: 0 auto;}
.loader_2 { display:table-cell; vertical-align: middle;}
.loader_3 { color: #999; font-size: 8px; margin: 0 auto; width: 1em; height: 1em; border-radius: 50%; text-indent: -9999em; -webkit-animation: load4 1.3s infinite linear; animation: load4 1.3s infinite linear; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0);}
@-webkit-keyframes load4 {
  0%, 100% { box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0; }
  12.5% { box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; }
  25% { box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; }
  37.5% { box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; }
  50% { box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; }
  62.5% { box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; }
  75% { box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; }
  87.5% { box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; }
}
@keyframes load4 { 0%, 100% { box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0; }
  12.5% { box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; }
  25% { box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; }
  37.5% { box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; }
  50% { box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; }
  62.5% { box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; }
  75% { box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; }
  87.5% { box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; }
}


@font-face { font-family: NotoSans; font-weight: 200; src: url('font/NotoSansCJKjp-Light.woff') format('woff'), url('font/NotoSansCJKjp-Light.eot?') format('oldIE'); }
@font-face { font-family: NotoSans; font-weight: 300; src: url('font/NotoSansCJKjp-DemiLight.woff') format('woff'), url('font/NotoSansCJKjp-DemiLight.eot?') format('oldIE'); }
@font-face { font-family: NotoSans; font-weight: 400; src: url('font/NotoSansCJKjp-Regular.woff') format('woff'), url('font/NotoSansCJKjp-Regular.eot?') format('oldIE'); }
@font-face { font-family: NotoSans; font-weight: 500; src: url('font/NotoSansCJKjp-Medium.woff') format('woff'), url('font/NotoSansCJKjp-Medium.eot?') format('oldIE'); }
@font-face { font-family: NotoSans; font-weight: 600; src: url('font/NotoSansCJKjp-Bold.woff') format('woff'), url('font/NotoSansCJKjp-Bold.eot?') format('oldIE'); }
@font-face { font-family: NotoSans; font-weight: 700; src: url('font/NotoSansCJKjp-Black.woff') format('woff'), url('font/NotoSansCJKjp-Black.eot?') format('oldIE'); }