/*navbar*/
#main-navbar, #main-navbar.fixed-top a.navbar-brand {transition: all .2s ease;}
#main-navbar.fixed-top {box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, .2); padding-top:0; padding-bottom:0 }
#main-navbar.fixed-top a.navbar-brand { padding-top: 5px; padding-bottom: 5px; }

/*section*/
#section1, #section2{ position:relative }
#section1:after {content:''; position:absolute; bottom:-28px; left:50%; display: block; color:#fff; margin-left:-30px;width: 0;height: 0;border-top: 30px dashed;border-right: 30px solid transparent;border-left: 30px solid transparent;z-index:2}
#section1 .main-btn > div:hover {box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset; background: rgba(85, 172, 238, .75); transition: box-shadow 0.3s linear 0s, background-color 0.3s linear 0s;}

#section2 { color: #fff; background-attachment : fixed; background-size:cover }
#section2:before {content:''; position:absolute; top:0; bottom:0; left:0; right:0; background-color:rgba(0,0,0,.6); z-index:1}
#section2 >div {position:relative; z-index:2 }
section hr, .footer hr { border-top: 1px solid #000; box-shadow: 0 1px #2A2A2A; }
@media screen and (max-width:767px){	hr { margin-left:15px; margin-right:15px }}

/*h3 title*/
h3.title {margin-bottom: 0.5rem !important;}
h3.title:after {content: ""; position: absolute;display: block; width: 200px; height: 2px; background-color: rgba(255, 255, 255, .3); left: 50%; margin-left: -100px; bottom: 15px }
#section1 h2.title:after, #section3 h2.title::after { background: rgba(255, 255, 255, .2) !important }
h3.title small{ color:inherit }
.sub-title { padding-bottom: 8px; margin: 0 0 3rem; border-bottom: 1px solid #777;}
.sub-title h4 {margin-top:0}

/*popup zone*/
.popup-title { position: absolute; background-color:rgba(0,0,0,.5); color:#fff; margin-top:10px; padding: 0 10px;  border:1px solid rgba(0,0,0,1); border-radius: 3px; z-index: 7}
.popup-title button { padding: 0; font-size:16px; vertical-align: baseline; }
.popup-title #ptotal {min-width:25px; display: inline-block;}

#popup-zone .loading { left: 50%;  padding-top: 200px;padding-bottom: 200px; margin-left:-1.5rem }
#popup-zone .carousel-inner { height: 450px; }
#popup-zone .carousel-inner .ratio {padding-bottom: 450px; background-color: #eee; box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset;}
#popup-zone .carousel-control-prev, #popup-zone .carousel-control-next { width:30px; top:50%; bottom:auto; margin-top:-15px}
#popup-zone .carousel-control-prev {  margin-left:15px}
#popup-zone .carousel-control-next {  margin-right:15px}
#popup-zone .carousel-caption {left:15px; right:15px; bottom:0;padding-bottom: 50px;}

/*accordion*/
#main-accordion .card {background-color: transparent/*#0c1a1e;*/}
#main-accordion .card, #main-accordion .card .card-header {border-color:rgba(0, 0, 0, 0.9);}
#main-accordion .btn:focus, .btn.focus {  box-shadow: none }

/*nav-tab custom*/
.main-tablist { border-bottom: 1px solid rgba(0, 0, 0, 0.9);  }
.main-tablist > a { line-height: 1.2; text-align: center; color:#fff }
.main-tablist > a.active, .main-tablist  > a.active:hover, .main-tablist  > a.active:focus {border-color: rgba(0, 0, 0, 0.9) !important; border-bottom-color: rgba(0, 0, 0, 0.9) !important; background-color: rgba(0,0,0,.5) !important; border-radius: 0; color: #fff !important; line-height: 1.2; text-align: center;height: 100%;}
.main-tablist > a:not(active):hover, .main-tablist > a:not(active):focus {border-radius: 0; border: 1px solid transparent !important; background-color:transparent; }
.main-tablist > a.more {font-size: 1.2rem;}
@media (max-width: 768px) { .main-tablist  > a { padding:10px} }

/*footer*/
.footer .sns { margin:0; text-align:left }
.footer .sns > li  {text-align:center; margin-bottom: 1rem;}
.footer .sns a { margin:0; color: #d5d5d5; font-size: 13px; }
.footer .sns a i { margin-top:0; border-radius: 50%; filter: gray; -webkit-filter: grayscale(100%);  filter: grayscale(100%);  box-shadow:none }
.footer .sns a:hover i, .footer .sns a:focus i {-webkit-filter: grayscale(0%);  filter: grayscale(0%);}
.footer #family-site, .footer #fam-move { background-color:#000; color:#fff; border-color:#3f3f3f; }

/**/
@media screen and (min-width:767px){
	.affix-top #main-navbar-menu > li > .dropdown-menu:before, #main-navbar-menu > li > .dropdown-menu:after{ display:block; content:""; position:absolute;width:0; height:0; background:transparent;-webkit-transition:border-left-color .3s ease-out; transition:border-left-color .3s ease-out }
	.affix-top #main-navbar-menu > li > .dropdown-menu:before {top:-20px; left:30px;  border:10px solid transparent; border-bottom:10px solid rgba(0,0,0,.15);  }
	.affix-top #main-navbar-menu > li > .dropdown-menu:after { top:-16px; left:32px;  border:8px solid transparent; border-bottom:8px solid #fff;}
	.affix #main-navbar-menu > li > .dropdown-menu {border-top:none}
}

a:hover {  transition: color 0.2s linear 0s;}
.btn-none:focus, .btn-none.focus, .btn-none:hover { box-shadow: none;	color: inherit;text-decoration: none;}