/*=============================================================
  common.css
---------------------------------------------------------------

1. common layout
2. home
3. about & gallery common element [ photos ]
4. about
5. gallery
6. access
7. media query
8. helper

===============================================================
1. common layout
=============================================================*/
html,
body {
	width: 100%;
	height: 100%;
	color: #333;
	font-size: 12px;
	line-height: 1.6;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#contents {
	margin-top: 60px;
}
.inner {
	margin-bottom: 45px;
}
#inc-bg {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 60px;
	left: 0;
	z-index: -1;
}
#inc1,
#inc2,
#inc3,
#inc4 {
	position: absolute;
}
#inc1 {
	top: 0;
	left: 0;
}
#inc2 {
	top: 0;
	right: 0;
}
#inc3 {
	bottom: 0;
	left: 0;
}
#inc4 {
	bottom: 0;
	right: 0;
}


/*
* element
*/
p {
	margin: 0 0 15px 0;
	line-height: 1.8;
	font-size: 13px;
	color: #0C1A63;
	text-align: center;
}
a {
	color: #0C1A63;
	text-decoration: none;
}
.btn-ghost {
	display: block;
	width: 50%;
	padding: 5px 5px 9px 5px;
    padding: 5px;
    line-height: 2;
	border: solid 1px #0C1A63;
	margin: 0 auto;
	font-size: 16px;
	text-align: center;
}

/*
* header
*/
header {
	width: 100%;
	min-width: 100%;
	height: 60px;
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
}
header  > h1 {
	width: 130px;
	margin: 12px 0 0 15px;
	float: left;
}

/*
* menu-icon
*/
header #menu-icon {
	width: 60px;
	height: 60px;
	float: right;
	position: relative;
	transition: all ease 600ms;
	-webkit-transition: all ease 600ms;
	
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
header #first,
header #second,
header #third {
	width: 25px;
	height: 2px;
	background: #131d59;
	position: absolute;
	left: 18px;
	z-index: 1;
	transition: all ease 600ms;
	-webkit-transition: all ease 600ms;
}
header #first {
	top: 20px;
}
header #second {
	top: 28px;
}
header #third {
	top: 36px;
}
header.active #menu-icon {
	background: #131d59;
}
header.active #first,
header.active #second,
header.active #third {
	background: #fff;
}
header.active #first {
	top: 30px;
	transform: rotate(-225deg);
	-webkit-transform: rotate(-225deg);
}
header.active #second {
	top: 30px;
	transform: rotate(225deg);
	-webkit-transform: rotate(225deg);
}
header.active #third {
	opacity: 0;
	top: 30px;
	transform: rotate(-225deg);
	-webkit-transform: rotate(-225deg);
}

/*
* nav
*/
header nav {
	width: 0;
	height: 100%;
	border-top: solid 1px #fff;
	background: #131d59;
	opacity: 0;
	position: fixed;
	top: 60px;
	right: 0;
	overflow: hidden;
	transition: all ease 700ms;
}
header nav ul {
	width: 100%;
	padding: 0;
	margin: 0;
	margin-top: -60px;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
}
header nav ul li {
	margin-bottom: 16px;
	text-align: center;
}
header nav ul li a {
	display: block;
}
header nav ul li img {
	height: 20px;
}

header.active nav {
	width: 100%;
	border-top: solid 1px #eee;
	background: rgba( 255, 255, 255, 0.95 );
	opacity: 1;
}

/*
* footer
*/
#home footer {
	position: absolute;
	bottom: 0;
	z-index: 1;
}
footer {
	width: 100%;
	background: #eee;
	position: relative;
	z-index: 1;
	clear: both;
}
footer p,
footer p.tel a {
	heigth: 30px;
	margin: 0;
	line-height: 30px;
	font-size: 9px;
	text-align: center;
}
footer p.tel {
	padding: 0;
}
footer p.tel a {
	display: block;
	padding-top: 2px;
	background: #131d59;
	font-size: 11px;
	color: #fff;
}

/*
* basic structure
*/
#contents > h1,
#contents h1.other-visual {
	margin-bottom: 40px;
}
#contents .inner {
	padding: 0 15px;
}
.inner > section {
	margin-bottom: 40px;
}
.inner > section > h1,
.gallery-inner > section > h1,
.gallery-inner > h1 {
	text-align: center;
	margin-bottom: 30px;
}
.inner dl {
	width: 90%;
	margin: 0 auto;
	font-size: 15px;
	line-height: 1.6;
	color: #131d59;
}
.inner dl dt {
	width: 65%;
	margin-bottom: 25px;
	float: left;
	clear: both;
}
.inner dl dt span {
	font-size: 10px;
}
.inner dl dd{
	width: 35%;
	margin-left: 0;
	margin-bottom: 25px;
	float: right;
	text-align: right;
}

/*=============================================================
2. home
=============================================================*/
/*
* intro
*/
#intro {
	width: 100%;
	height: 100%;
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	overflow: hidden;
}
#intro-inner {
	width: 244px;
	height: 84px;
	margin-top: -50px;
	margin-left: -122px;
	position: fixed;
	top: 50%;
	left: 50%;
}
#intro-logo {
	position: relative;
	top: -5px;
	left: 30px;
	opacity: 0;
}
#copy {
	position: relative;
	top: 5px;
	left: 40px;
	opacity: 0;
}

/*
* contents
*/
#home,
#home #wrapper {
	width: 100%;
	height: 100%;
}
#home #contents {
	width: 100%;
	height: 100%;
	margin-top: 0;
	background: url('/sp/common/img/home/visual.jpg?v2') center top no-repeat;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

/* for access
#access section a.pin_icon {
	font-size: 13px;
	color: #033b73;
	text-decoration: none;
	padding-top: 2px;
	padding-left: 20px;
	padding-bottom: 5px;
	background: url(../img/home/pin_icon.png) 1px 0 no-repeat;
	background-size: 14px auto;
}
*/

/*=============================================================
3. about & gallery common element [ photos ]
=============================================================*/
.gallery-inner {
	margin-bottom: 100px;
}
.gallery-inner a {
	display: block;
	width: 100%;
	height: 100%;
}
.gallery-inner .column1,
.gallery-inner .column2,
.gallery-inner .column3 {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	float: left;
	-webkit-perspective: 500;
}
.gallery-inner .column1 {
	width: 33.3%;
	height: 300px;
	padding-left: 15px;
	padding-right: 5px;
}
.gallery-inner .column2 {
	width: 33.3%;
	height: 300px;
	padding-left: 5px;
	padding-right: 5px;
}
.gallery-inner .column3 {
	width: 33.3%;
	height: 300px;
	padding-left: 5px;
	padding-right: 15px;
}
.gallery-inner .img1,
.gallery-inner .img2,
.gallery-inner .img3,
.gallery-inner .img4,
.gallery-inner .img5,
.gallery-inner .img6,
.gallery-inner .img7,
.gallery-inner .img8 {
	box-shadow: 0 0 30px rgba( 0, 0, 0, 0.1 );
	transition: all 1800ms ease;
	-webkit-transition: all 1800ms ease;
	transform: rotateY(-180deg);
	-webkit-transform: rotateY(-180deg);
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
}
.gallery-inner .active .img1,
.gallery-inner .active .img2,
.gallery-inner .active .img3,
.gallery-inner .active .img4,
.gallery-inner .active .img5,
.gallery-inner .active .img6,
.gallery-inner .active .img7,
.gallery-inner .active .img8 {
	transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
}


#eyelash-menu .gallery-inner {
    padding: 0 15px;
    margin-bottom: 40px;
}

#eyelash-menu .column1 {
    width: 100%;
    height: auto;
    padding: 0;
}

#eyelash-menu .column1 > div {
    width: 23%;
    float: left;
    margin: 0 1%;
}

#eyelash-menu .column1 > div:nth-child( odd ) {
    margin-top: 25px;
}

#eyelash-menu .column1 > div img {
    width: 100%;
}

#eyelash-menu .column1 > div a {
    line-height: 0;
    font-size: 0;
}

/*=============================================================
4. about
=============================================================*/
#about .inner p {
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 2;
	color: #131d59;
}
#about .gallery-inner {
	margin-bottom: 130px;
}
#about .column1 .img1 {
	width: 100%;
	height: 60%;
	margin-bottom: 20px;
	background: url( /sp/common/img/about/1.jpg?v3 ) center center no-repeat; 
	background-size: cover;
}
#about .column1 .img2 {
	width: 80%;
	height: 20%;
	margin: 0 auto 20px;
	background: url( /sp/common/img/about/2.jpg?v3 ) center center no-repeat;
	background-size: cover;
}
#about .column1 .img3 {
	width: 100%;
	height: 30%;
	background: url( /sp/common/img/about/3.jpg?v3 ) center center no-repeat;
	background-size: cover;
}
#about .column2 .img4 {
	width: 100%;
	height: 40%;
	margin: 30px auto 20px;
	background: url( /sp/common/img/about/4.jpg?v3 ) center center no-repeat;
	background-size: cover;
}
#about .column2 .img5 {
	width: 80%;
	height: 55%;
	margin: 20px auto 20px;
	background: url( /sp/common/img/about/5.jpg?v3 ) center center no-repeat;
	background-size: cover;
}
#about .column3 .img6 {
	width: 100%;
	height: 35%;
	margin-bottom: 10px;
	background: url( /sp/common/img/about/6.jpg?v3 ) center center no-repeat;
	background-size: cover;
}
#about .column3 .img7 {
	width: 70%;
	height: 25%;
	margin: 20px auto 20px;
	background: url( /sp/common/img/about/7.jpg?v3 ) center center no-repeat;
	background-size: cover;
}
#about .column3 .img8 {
	width: 100%;
	height: 50%;
	background: url( /sp/common/img/about/8.jpg?v3 ) center center no-repeat;
	background-size: cover;
}

/*=============================================================
5. gallery
=============================================================*/
#gallery .column1 .img1 {
	width: 100%;
	height: 40%;
	margin-bottom: 20px;
	background: url( /sp/common/img/gallery/1.jpg ) center center no-repeat; 
	background-size: cover;
}
#gallery .column1 .img2 {
	width: 80%;
	height: 20%;
	margin: 0 auto 20px;
	background: url( /sp/common/img/gallery/2.jpg ) center center no-repeat;
	background-size: cover;
}
#gallery .column1 .img3 {
	width: 100%;
	height: 25%;
	background: url( /sp/common/img/gallery/3.jpg ) center center no-repeat;
	background-size: cover;
}
#gallery .column2 .img4 {
	width: 70%;
	height: 40%;
	margin: 30px auto 20px;
	background: url( /sp/common/img/gallery/4.jpg ) center center no-repeat;
	background-size: cover;
}
#gallery .column2 .img5 {
	width: 100%;
	height: 60%;
	background: url( /sp/common/img/gallery/5.jpg ) center center no-repeat;
	background-size: cover;
}
#gallery .column3 .img6 {
	width: 100%;
	height: 100%;
	background: url( /sp/common/img/gallery/6.jpg ) center center no-repeat;
	background-size: cover;
}

/*=============================================================
6. access
=============================================================*/
#access .btn-ghost {
    padding-bottom: 9px;
}
#access .btn-ghost img {
	position: relative;
	top: -6px;
}

/*
* slideshow
*/
.slide_wrapper {
	width: 100%;
	overflow: hidden;
	position: relative;
}
ul.slide_with_num {
	width: 900%;
	position: relative;
	/* float: left; */
	margin-bottom: 0;
}
ul.slide_with_num li {
	width: 11.11%;
	float: left;
	position: relative;
}
ul.slide_with_num li img {
	width: 100%;
	margin-bottom: 15px;
	vertical-align: bottom;
}
ul.slide_with_num li p {
	margin: 0;
}

/*
* indicator
*/
.indicator_wrapper {
	display: inline-block;
	width: 100%;
	height: 34px;
	margin-bottom: 30px;
	position: relative;
	clear: both;
}
.indicator_wrapper ul.indicator {
	text-align: center;
	font-size: 12px;
}
.indicator_wrapper ul.indicator li {
	display: inline-block;
	width: 20px;
	height: 20px;
	padding: 6px;
	margin: 0 6px;
	line-height: 20px;
	font-weight: bold;
	border-radius: 50%;
}
.indicator_wrapper ul.indicator li.current {
	background: #131F64;
	color: #fff;
}
p.next,
p.prev {
	width: 23px;
	height: 44px;
	margin: -22px 0 0 0;
	background: transparent;
	position: absolute;
	top: 45%;
	z-index: 10;
	cursor: pointer;
}
p.prev {
	left: 10px;
}
p.next {
	right: 10px;
}

/*=============================================================
7. media query
=============================================================*/

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

    header nav ul li {
        margin-bottom: 13px;
    }

    header nav ul li img {
        height: 17px;
    }

}

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

    header nav ul li {
        margin-bottom: 8px;
    }

}

/*=============================================================
8. helper
=============================================================*/
.footnote {
	color: #033b73;
	font-size: 12px;
}

/* clearfix */
.cf:before,
.cf:after {
	content:".";
	display: block;
	height: 0;
	overflow: hidden;
}
.cf:after {
	clear: both;
}
.cf {
	*zoom: 1;
}