/* ==========================================================================
  header
========================================================================== */

@media screen and (max-width:1199px) {

#topContent {
	padding-top: 60px;
}

#navigation {
	height: 60px;
}

#navigation,
#navigation nav {
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

/*#navigation.navigation-open {
    background: #121318;
    border-bottom: 1px solid #c6b3a2;
    position: fixed;
}*/

.navbar-fixed-top nav {
	width: 100%;
	height: auto;
	background: none;
	margin: 0;
	border-bottom: none;
}

.container > #gnavi {
	margin-left: 0;
	margin-right: 0;
	position: fixed;
	overflow: hidden;
	top: 60px;
	left: 0;
	right: 0;
	max-height: none;
	height: 0;
	background: #121318;
}

.navbar-fixed-top nav ul {
	font-size: 28px;
	line-height: 50px;
	display: block;
	width: 100%;
	height: 0;
	padding: 0;
}

.container > #gnavi.gnavi-open {
	height: 600px;
}
.navbar-fixed-top nav.gnavi-open ul {
	height: auto;
}

/*.navbar-fixed-top nav.in ul {
	height: auto;
}*/

.navbar-fixed-top nav li {
	width: 100%;
	height: 50px;
	float: left;
	position: relative;
	text-align: center;
}

.navbar-fixed-top nav ul li a {
	width: 100%;
	height: 50px;
	float: left;
	line-height: 50px;
	position: relative;
	text-align: center;
	border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
	margin: 0;
}
.navbar-fixed-top nav ul li a strong {
	display: none;
}
.navbar-fixed-top nav ul li a span {
	font-size: 16px;
	font-weight: bold;
}
.navbar-fixed-top nav ul li a.last {
	border-bottom: none;
}

.responsive-logo {
	width: 120px;
	display: block;
	position: absolute;
	top: 20px;
	left: 50%;
	margin-left: -60px;
}

.logo-holder {
	display: none;
}

/* 400px Scroll */

#navigation.scroll400 {
	height: 60px;
}

/* Photodiary Archive */

.photodiary #diary {
	padding: 120px 0 70px;
}

}

@media only screen and (max-width:1199px) {

.navbar-fixed-top nav nav {
	border-bottom: 0;
}

.navbar-fixed-top nav nav ul {
	display: none;
	height: auto;
}

.pullcontainer {
	height: 100%;
	padding: 8px 15px;
	position: absolute;
	top: 0;
	right: 0;
}
.pullcontainer:before {
	content: " ";
	font-size: 0;
	display: block;
	width: 2px;
	height: 100%;
	position: absolute;
	top: 0;
	left: -1px;
	background: rgba(255,255,255,.2);
	border-left: rgba(0,0,0,1) solid 1px;
}
.pullcontainer button {
	display: block;
	width: 100%;
	color: #c6b3a2;
	text-align: right;
}

.telButton {
	height: 100%;
	padding: 8px 15px;
	position: absolute;
	top: 0;
	left: 0;
}
.telButton:after {
	content: " ";
	font-size: 0;
	display: block;
	width: 2px;
	height: 100%;
	position: absolute;
	top: 0;
	right: -1px;
	background: rgba(255,255,255,.2);
	border-left: rgba(0,0,0,1) solid 1px;
}
.telButton a {
	color: #FFF;
	font-size: 32px;
	line-height: 1;
	text-align: right;
	width: 100%;
	display: block;
}

/* hero image */
#topContent {
	height: auto;
}
.hero-content01 {
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
	overflow: hidden;
}
.hero-content01 img {
	width: 100%;
}

}

/* heder pick up banner */
.header_pickup-content01 {
    display: block;
    text-align: center;
    overflow: hidden;
    margin: 0 30px;
}
.header_pickup-content01 img {
	max-width:1160px;
	height:auto;
}

/*============================================================
	Wide Desktop
==============================================================*/

@media (min-width: 1200px) {

.container {
    width: 1230px;
}

.navbar-fixed-top nav {
	display: block;
	height: 85px !important;
}

}

/*============================================================
	For Small Desktop
==============================================================*/

@media (min-width: 980px) and (max-width: 1199px) {

/* slider */
.carousel-caption h3 {
  font-size: 45px;
}

/* profile */

#profile {
	width: 940px;
	height: 715px;
}

/* system */
#system {
	font-size: 12px;
}

/* team */

.cast-thumb {
  width: auto;
}

/* link */

.link-banner ul {
	text-align: center;
}

}


/*============================================================
	Tablet (Portrait) Design for a width of 768px
==============================================================*/

@media (min-width: 768px) and (max-width: 979px) {


/* slider */

.carousel-caption h2 {
  font-size: 55px;
}

.carousel-caption h3 {
  font-size: 36px;
}

/* notice */
.new-line {
	display: block;
}

/* profile */

#profile {
	width: 720px;
	height: 550px;
}

/* system */
#system {
	font-size: 12px;
}

/* services */

.service-item {
  margin: 0 auto 30px;
  text-align: center;
  /*width: 325px;*/
}

.service-icon {
  float: none;
  margin: 0 auto 15px;
  text-align: center;
  width: 50px;
}

.service-desc {
  margin-left: 0;
  position: relative;
  top: 0;
}

/* diary */

.diary-item {
  width: 33%;
}

/* cast */

.cast-thumb {
  margin: 0 auto;
}

.modal-dialog {
	width: 600px;
}

/* event */

.counters-item {
  margin-bottom: 30px;
}

.counters-item i {
  margin: 0 0 15px;
}

.counters-item strong {
  font-size: 45px;
}

/* link */

.link-banner ul {
	text-align: center;
}

/* footer */

.footer-single {
  margin-bottom: 30px;
}

}

@media (min-width: 768px) {

.modal-dialog {
	width: 1200px;
}

}

@media only screen and (max-width: 979px) {

/* event */

.event-box {
	display: block;
}

.event-box .leftBox {
	display: block;
	width: 100%;
	padding-right: 0;
	margin-bottom: 20px;
}

.event-box .rightBox {
	display: block;
	width: 100%;
}

}

/*============================================================
	Mobile (Portrait) Design for a width of 320px
==============================================================*/

@media only screen and (max-width: 767px) {

.sec-sub-title p {
  font-size: 14px;
}

/* header */
#topContent {
	height: auto;
}
/*
.hero-content {
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
	overflow: hidden;
}
.hero-content img {
	width: 140%;
	margin-left: -20%;
}
*/

/* slider */
.carousel-caption h2 {
  font-size: 35px;
}

.carousel-caption h3 {
  font-size: 22px;
}

.carousel-caption p {
  font-size: 14px;
}

.social-links {
  margin-top: 20%;
}

/* system */
#system {
	font-size: 10px;
}

.system .leftCol .service-item {
	height: 18.88em;
}

#system .leftCol .service-desc p {
	font-size: 6.5em;
}

.service-desc h3 {
    font-size: 3.5em;
}

#system .rightCol .system-fee span {
	font-size: 3em;
}

#system .rightCol .system-fee strong {
    font-size: 6em;
}

/* services */

.service-item {
	margin: 0 auto 30px;
	text-align: center;
	/*width: 280px;*/
	height: 45em;
}

.service-icon {
  float: none;
  margin: 0 auto 15px;
  text-align: center;
  width: 50px;
}

.service-desc {
  margin-left: 0;
  position: relative;
  top: 0;
}

/* diary */

.diary-item {
  left: 5% !important;
  width: 45%;
}

/* diary single */

.diarySingle-thumbs {
	text-align: center;
}
.diarySingle-thumbs h3 {
	display: block;
}

.diarySingle-text {
	padding-top: 30px;
}
.diarySingle-text h3 {
	display: none;
}

.diaryAuthor-thumbs {
	padding: 15px;
	text-align: center;
}

/* cast */

.cast-thumb {
  margin: 0 auto;
}

/* facts */

#facts {
background-position: center top !important;
}

.counters-item {
  margin-bottom: 30px;
}

/* link */

.link-banner {
	margin-top: 0;
}

.link-banner h3 strong {
	font-size: 38px;
}

.link-banner ul {
	text-align: center;
	margin: 20px 0 0;
}

.link-banner ul li {
	margin: 0;
}

.link-banner ul li p {
	height: auto;
	line-height: normal;
}

/* footer */

.footer-single {
	margin-bottom: 30px;
}

.footer-copy .text-left,
.footer-copy .text-right {
	text-align: center;
}

.footer-copy .text-right {
	margin-top: 10px;
}

}


/*============================================================
	Mobile (Landscape) Design for a width of 480px
==============================================================*/

@media screen and (max-width: 767px) {

/* hero image */

.hero-content01 {
	display: none;
}

.hero-content02 {
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
	overflow: hidden;
}
.hero-content02 img {
	width: 100%;
}

/* header pick up banner */

.header_pickup-content01 {
	display: none;
}

.header_pickup-content02 {
	display: block;
    text-align: center;
    overflow: hidden;
}
.header_pickup-content02 img {
	max-width:750px;
	height:auto;
}

/* section */

.sec-title h2 {
	font-size: 46px;
}

/* notice */
.new-line {
	display: none;
}

/* cast */

#cast {
	background-image: url(../img/cast/bg.jpg);
	background-repeat: repeat;
	background-attachment: fixed;
	-webkit-background-size: 1200px;
	background-size: 1200px;
}

.castList {
    padding: 0 10px;
}

.cast-thumb .overlay {
	padding: 10px;
}
.cast-thumb .overlay h3 {
	font-size: 38px;
}
.cast-thumb .overlay p {
	font-size: 14px;
}

.cast-name {
	display: block;
}

/* profile */

.profile-data {
	padding: 10px;
}

#cboxClose {
	top: 10px;
	right: 10px;
}

#profile {
	width: 100%;
	height: 100%;
	overflow: auto;
}

#profile > .inner {
	height: auto;
}

.profile-diary {
	margin: 20px auto 40px;
}

.profile-image,
.profile-data {
	width: 100%;
	height: auto;
	float: none;
}

/* system */

#system {
	/*background-image: url(../img/system/bg.jpg);
	background-repeat: repeat;
	background-position: center center;
	-webkit-background-size: 1200px;
	background-size: 1200px;*/
}

/* photodiary */

#diary {
	background-image: url(../img/diary/bg.jpg);
	background-repeat: repeat;
	background-attachment: fixed;
	background-position: center center;
	-webkit-background-size: 960px;
	background-size: 960px;
}

.diary-item {
  left: inherit !important;
  width: 50%;
}

.diaryPickupBanner a::after {
	font-size: 24px;
}

	
/* news */

#news {
	background-image: url(../img/news/bg.jpg);
	background-repeat: repeat;
	background-position: center -120px;
	-webkit-background-size: 960px;
	background-size: 960px;
}
	
/* event */

#event {
	background-image: url(../img/event/bg.jpg);
	background-repeat: repeat;
	background-position: center center;
	-webkit-background-size: 960px;
	background-size: 960px;
}

/* instagram */

#instagram {
	background-image: url(../img/common/gold_line.jpg),url(../img/instagram/bg_01.jpg);
    background-repeat: repeat-x,repeat;
    background-position: center 3px,center top;
	-webkit-background-size:  auto, 1280px;
	background-size: auto, 1280px;
}

/* gallery */

#gallery {
	background-image: url(../img/gallery/bg.jpg);
	background-repeat: repeat;
	background-attachment: fixed;
	background-position: center center;
	-webkit-background-size: 1200px;
	background-size: 1200px;
}

.gallery-slide {
	width: 85%;
}

/* access */

#access {
	ackground-image: url(../img/common/gold_line.jpg), url(../img/access/bg.jpg);
	background-repeat: repeat-x, no-repeat;
	background-position: center 3px,center center;
	
}

.access-address address strong {
	font-size: 18px;
}

.access-address address span {
	font-size: 16px;
}
#map_canvas {
	padding-bottom: 56.25%;
}

/* link */

#link {
	background-image: url(../img/link/bg.jpg);
	background-repeat: repeat;
	background-attachment: fixed;
	background-position: center center;
	-webkit-background-size: 1200px;
	background-size: 1200px;
}
	

.link-banner {
	display: none;
}
.link-princess h3 strong {
	font-size: 39px;
	letter-spacing: 0.01em;
}
/* services */

.service-item {
  text-align: center;
  margin: 0 auto 30px;
  /*width: 325px;*/
}

.service-icon {
  float: none;
  margin: 0 auto 15px;
  text-align: center;
  width: 50px;
}

.service-desc {
  margin-left: 0;
  position: relative;
  top: 0;
}

/* modal */

.modalConfirm {
	width: 300px;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

#modal-logo {
	height: 64px;
}

#lazylogo,
#shoplogo {
	width: 225px;
	height: 64px;
}

#modal-button {
	padding-top: 20px;
}

/* advertise */

.modalConfirm.ontheAD {
	height: 480px;
}

.modalConfirm.ontheAD #modal-button {
	padding-top: 10px;
}

/* footer */

.footer-info {
	max-width: 100%;
}

nav.footer-nav {
	padding: 0;
}

.footer-nav a {
	font-size: 14px;
}

.footer-nav ul {
	text-align: left;
	border-bottom: #c6b3a2 1px solid;
}

.footer-nav ul li {
	width: 49.9%;
	margin: 0;
	border-bottom: #c6b3a2 1px solid;
}

.footer-nav ul li:nth-child(odd) {
	border-right: #c6b3a2 1px solid;
}

.footer-nav ul li:last-child {
	border-bottom: none;
}

.footer-nav ul li a {
	padding: 10px 0 10px 25px;
	position: relative;
}

.footer-nav ul li a:after {    
	color: #ba976c;
	font-size: 16px;
	font-family: 'FontAwesome';
	content: "\f0da";
	position: absolute;
	top: 50%;
	right: 15px;
	margin-top: -12px;
}

.footer-pr {
	padding: 20px;
}

}