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

01. common layout
02. header
03. footer
04. home
05. nail
06. harbarium
07. media query
08. helper

===============================================================
01. common layout
=============================================================*/
.preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    transition: none !important;
}
html,body {
	background-color: #fc0f9c;
}
img {
	display: inline-block;
	width: 100%;
	height: auto;
}
h1,
h2 {
	color: #fff;
	text-align: center;
}
p,
li {
	margin-bottom: 20px;
	color: #fff;
	font-size: 18px;
	line-height: 2;
	letter-spacing: 2px;
	text-align: center;
}
a.link-text-white{
    color: #fff;
    text-decoration: underline;
}
a.link-text-black {
    color: #000;
    text-decoration: underline;
}
.pc,
.pc-alt {
	display: inline-block;
}
.sp,
.sp-alt {
	display: none;
}
.central {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	-webkit-transform: translateX( -50% ) translateY( -50% );
	-moz-transform: translateX( -50% ) translateY( -50% );
	-ms-transform: translateX( -50% ) translateY( -50% );
	transform: translateX( -50% ) translateY( -50% );
}
.box-img {
    width: 100%;
    padding-top: 50%;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}
#loading {
	width: 100%;
	height: 100%;
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	transition: all ease 1000ms;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.loaded #loading {
	opacity: 0;
	visibility: hidden;
}
#bg {
	width: 100%;
	height: 100%;
	background: #fc0f9c url(/common/img/shared/bg-pattern.png?v1) 0 0 repeat;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
}
#bg img {
	width: 100%;
	height: 100%;
}
#visual {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	overflow: hidden;
}
#visual #visual-tit {
	top: 47%;
}
#visual #visual-tit img {
    width: auto;
    height: 90px;
}
#visual #icon-scroll {
	width: 100px;
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: 1;
	-webkit-transform: translateX( -50% );
	-moz-transform: translateX( -50% );
	-ms-transform: translateX( -50% );
	transform: translateX( -50% );
}
#visual #icon-scroll > img {
	display: block;
	margin-bottom: 15px;
}
#visual #icon-scroll div {
	width: 47%;
	height: 140px;
	margin: 0 auto;
	text-align: center;
	position: relative;
	overflow: hidden;
}
#visual #icon-scroll div::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 140px;
	background: #fc0f79;
}
#visual #icon-scroll div > img {
	display: block;
	background: rgba( 255,255,255,0.01 );
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	animation: leaf-rotate linear 4000ms infinite normal;
	overflow: hidden;
}
@keyframes leaf-rotate {
	0%{ opacity: 0; transform: rotateY( 90deg ); top: 0;  }
	15%{ opacity: 0.99; }
	100%{ opacity: 0.99; transform: rotateY( 720deg ); top: 140px;  }
}
#contents {
	padding-top: 80px;
	position: relative;
	z-index: 1;
	top: 0;
	left: 0;
}
.inner {
	width: 86%;
	margin: 0 auto;
}
.mass {
	margin-bottom: 80px;
}
.mass.last {
	margin-bottom: 0;
}
.tit-s {
	text-align: center;
	margin-bottom: 30px;
}
.tit-s img {
	width: auto;
	height: 40px;
}
.back-paper {
	padding: 80px 0;
	background: url( /common/img/shared/bg-paper.jpg?v1 ) center center no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
}
.back-paper p,
.back-paper li {
	color: #000;
}
.deco-mini {
	width: 140px;
	margin-bottom: 25px;
}
.zoom-shade {
    position: relative;
    margin-bottom: 30px;
    overflow: auto;
}
.zoom-shade img:nth-of-type(2) {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: all ease 500ms;
	transition-delay: 900ms;
}
.active .zoom-shade img:nth-of-type(2) {
	transform: scale( 1.12 );
	opacity: 0;
	visibility: hidden;
}
.deco-line-top,
.deco-line-bottom {
    height: 19px;
    background-repeat: repeat-x;
    -webkit-background-size: auto 18px;
    background-size: auto 18px;
}
.deco-line-top {
    background-image: url( /common/img/shared/deco-line-top.png );
    background-position: left top;
}
.deco-line-bottom {
    background-image: url( /common/img/shared/deco-line-bottom.png );
    background-position: left bottom;
}
.last .deco-line-bottom {
	display: none;
}
.with-header-deco {
    position: relative;
	overflow: hidden;
}
.with-header-deco .header-deco-left,
.with-header-deco .header-deco-right {
    width: 35%;
    position: absolute;
    top: 0;
    z-index: 1;
	transition: all ease 700ms;
	transition-delay: 500ms;
	opacity: 0;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.with-header-deco .header-deco-left {
    left: -5%;
}
.with-header-deco .header-deco-right {
    right: -5%;
}
.active .with-header-deco .header-deco-left,
.active .with-header-deco .header-deco-right {
	opacity: 0.99;
}
.active .with-header-deco .header-deco-left {
    left: 0;
}
.active .with-header-deco .header-deco-right {
    right: 0;
}

.with-header-deco .inner {
	position: relative;
	z-index: 1;
}

.list-with-line li {
	padding-bottom: 20px;
	position: relative;
}
.list-with-line li:last-of-type {
	margin-bottom: 0;
}
.list-with-line li::after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: url( /common/img/shared/line-long.jpg ) 0 0 no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
}

/*
* gallery
*/
.gallery {
	margin-bottom: 40px;
}
.gallery .row {
	text-align: center;
}
.gallery .row .img-wrapper {
	display: inline-block;
	width: 25%;
	vertical-align: bottom;
}
.gallery .row .img-wrapper a {
	display: block;
	background: rgba( 255,255,255,0.001 );
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	overflow: hidden;
	
}
.gallery .row .img-wrapper a .img-screen {
	padding-top: 125%;
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	background-color: rgba( 255,255,255,0.001 );
	position: relative;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	overflow: hidden;
}
.gallery .row .img-wrapper .img-screen::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	background: #fff;
	transition: opacity ease 400ms;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	overflow: hidden;
	opacity: 0;
}
.gallery .row .img-wrapper:hover .img-screen::after {
	opacity: 0.35;
}

/*
* basic motion
*/
.motion-elem-01 {
	transition: all ease 700ms;
	transform: translateY( 50px );
	opacity: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
    overflow: hidden;
}
.active .motion-elem-01 {
	transform: translateY( 0 );
	opacity: 0.99;
}
.delay-01 {
	transition-delay: 300ms;
}
.delay-02 {
	transition-delay: 600ms;
}
.delay-03 {
	transition-delay: 900ms;
}
.delay-04 {
	transition-delay: 1200ms;
}
.delay-05 {
	transition-delay: 1500ms;
}

/*
* android default browser
*/
body.android-default-browser {
	background: #fc0f9c url(/common/img/shared/bg-pattern.png) 0 0 repeat;
}
.android-default-browser #visual #icon-scroll div > img,
#home.android-default-browser #visual #flowers-inner,
#home.android-default-browser #visual #flowers-01,
#home.android-default-browser #visual #flowers-02,
#home.android-default-browser #visual #flowers-03 {
	animation: none;
}
.android-default-browser #bg {
	display: none;
}
.android-default-browser #contents {
	padding-top: 70px;
}
.android-default-browser #main-header nav,
#main-header #icon-nav span {
	-webkit-transition: none;
	transition: none;
}
.android-default-browser .motion-elem-01,
.android-default-browser .zoom-shade img:nth-of-type(2),
.android-default-browser .with-header-deco .header-deco-left,
.android-default-browser .with-header-deco .header-deco-right,
#home.android-default-browser #visual #visual-logo img:nth-of-type(1),
#home.android-default-browser #visual #visual-logo img:nth-of-type(2) {
	-webkit-transition: none;
	transition: none;
	-webkit-transform: none;
	transform: none;
}
.android-default-browser .motion-elem-01,
.android-default-browser .with-header-deco .header-deco-left,
.android-default-browser .with-header-deco .header-deco-right,
#home.android-default-browser #visual #visual-logo img:nth-of-type(1),
#home.android-default-browser #visual #visual-logo img:nth-of-type(2) {
	opacity: 1;
}
.android-default-browser .zoom-shade img:nth-of-type(2) {
	display: none;
}
.android-default-browser .with-header-deco .header-deco-left {
	left: 0;
}
.android-default-browser .with-header-deco .header-deco-right {
	right: 0;
}

/*=============================================================
02. header
=============================================================*/
#main-header {
	width: 100%;
	height: 100px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
}
#main-header h1 {
	width: 600px;
	margin: 20px 0 0 15px;
}

/*
* icon nav
*/
#main-header #icon-nav {
	width: 110px;
	position: fixed;
	top: 15px;
	right: 15px;
	z-index: 1;
	cursor: pointer;
}
#main-header #icon-nav span {
	display: block;
	width: 22px;
	height: 1px;
	background: #bd9e47;
	position: absolute;
	left: 44px;
	z-index: 1;
	transition: all ease 250ms;
}
#main-header #icon-nav span:nth-of-type(1) {
	top: 46px;
}
#main-header #icon-nav span:nth-of-type(2) {
	top: 51px;
}
#main-header #icon-nav span:nth-of-type(3) {
	top: 56px;
}

#main-header #icon-nav:hover span:nth-of-type(1) {
	top: 42px;
}
#main-header #icon-nav:hover span:nth-of-type(3) {
	top: 60px;
}

/*
* global nav
*/
#main-header nav {
	width: 100%;
	height: 100%;
	background: #fff url( /common/img/shared/nav-bg.jpg ) center center no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	transition: all ease 700ms;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
#main-header nav #nav-close-layer {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
#main-header nav::before,
#main-header nav::after {
	display: block;
	content: "";
	width: 100%;
	height: 35px;
	background-repeat: repeat-x;
	-webkit-background-size: auto 35px;
	background-size: auto 35px;
	position: absolute;
	left: 0;
}
#main-header nav::before {
	background-image: url( /common/img/shared/nav-deco-top.png);
	background-position: left top;
	top: 0;
}
#main-header nav::after {
	background-image: url( /common/img/shared/nav-deco-bottom.png);
	background-position: left bottom;
	bottom: 0;
}
#main-header nav ul {
	width: 60%;
	max-width: 700px;
}
#main-header nav ul li a {
	display: block;
	padding: 40px 0;
}

/*
* nav active
*/
#main-header.active nav {
	opacity: 1;
	visibility: visible;
}
#main-header.active #icon-nav span:nth-of-type(1),
#main-header.active #icon-nav span:nth-of-type(3) {
	top: 51px;
}
#main-header.active #icon-nav span:nth-of-type(1) {
	transform: rotate( 45deg );
}
#main-header.active #icon-nav span:nth-of-type(2) {
	opacity: 0;
}
#main-header.active #icon-nav span:nth-of-type(3) {
	transform: rotate( 135deg );
}

/*=============================================================
03. footer
=============================================================*/
#main-footer {
	padding: 53px 0 50px;
	background: #fff url( /common/img/shared/footer-deco.png?v1) 0 0 repeat-x;
	-webkit-background-size: 26px auto;
	background-size: 26px auto;
	position: relative;
	top: 0;
	left: 0;
	z-index: 1;
}
#main-footer p {
	margin-bottom: 0;
	line-height: 1;
}
#main-footer img {
	width: 400px;
}

/*=============================================================
04. home
=============================================================*/
#home #main-header h1 {
	display: none;
}
#home #visual {
	background-image: url( /common/img/home/visual-bg.jpg );	
}
#home #visual #visual-logo {
	top: 45%;
	left: 52%;
	width: 29%;
	overflow: hidden;
}
#home #visual #visual-logo img {
	background: rgba( 255,255,255,0.001 );
	opacity: 0;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
#home #visual #visual-logo img:nth-of-type(1) {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	transition: all ease 1600ms;
	transition-delay: 300ms;
	transform: scale( 0.75 );
}

#home.loaded #visual #visual-logo img:nth-of-type(1) {
	opacity: 0.99;
	transform: scale( 1 );
}
#home #visual-logo img:nth-of-type(2) {
	position: relative;
	top: 0;
	left: 0;
	z-index: 1;
	transition: all ease 1700ms;
	transition-delay: 1200ms;
}
#home.loaded #visual #visual-logo img:nth-of-type(2) {
	opacity: 0.99;
}
#home #visual #flowers-wrapper {
	width: 100%;
	padding-top: 100%;
	position: absolute;
	top: 45%;
	left: 0;
	z-index: 1;
	-webkit-transform: translateY( -50% );
	-moz-transform: translateY( -50% );
	-ms-transform: translateY( -50% );
	transform: translateY( -50% );
}
#home #visual #flowers-inner {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	animation: rotate-motion 43000ms linear -2s infinite normal;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
#home #visual .flowers {
	width: 100%;
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	overflow: hidden;
}
#home #visual #flowers-01 {
	background-image: url( /common/img/home/flowers-01.png );
	animation: rotate-motion linear 16000ms infinite -2s normal;
}
#home #visual #flowers-02 {
	background-image: url( /common/img/home/flowers-02.png );
	animation: rotate-motion ease 19000ms infinite -2s normal;
}
#home #visual #flowers-03 {
	background-image: url( /common/img/home/flowers-03.png );
	animation: rotate-motion ease 23000ms infinite -2s normal;
}
@keyframes rotate-motion {
	0%{ transform: rotate( 0deg ); }
	100%{ transform: rotate( 360deg ); }
}

#home #part-01 {
	margin-bottom: 70px;
}
#home #part-01 p:last-of-type {
	margin-bottom: 0;
}

#home #part-02 {
	margin-bottom: 100px;
}
#home #part-02 .inner .row {
    margin-bottom: 40px;
	position: relative;
}

#home #part-02 .box-left {
	width: 48%;
	height: 100%;
	background: url( /common/img/home/profile.jpg?v3 ) top center no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
#home #part-02 .box-right {
	width: 48%;
	margin-left: 52%;
}
#home #part-02 .box-right .line-deco.line-top {
	margin-left: -3px;
	margin-bottom: 33px;
}
#home #part-02 .box-right h1,
#home #part-02 .box-right li {
	text-align: left;
}
#home #part-02 .box-right h2 {
	padding-bottom: 36px;
	margin-bottom: 28px;
	position: relative;
	color: #fff;
	font-size: 38px;
	text-align: left;
	letter-spacing: 2px;
	line-height: 0.8;
}
#home #part-02 .box-right h2::before,
#home #part-02 .box-right h2::after {
	content: "";
	display: block;
	width: 120px;
	height: 1px;
	background: url( /common/img/shared/line-short.png ) 0 0 no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	position: absolute;
	left: 0;
}
#home #part-02 .box-right h2 span {
	font-size: 14px;
	letter-spacing: 4px;
}
#home #part-02 .box-right h2::before {
	bottom: 4px;
}
#home #part-02 .box-right h2::after {
	bottom: 0;
}
#home #part-02 .box-right > ul {
	margin-bottom: 25px;
}
#home #part-02 .box-right > ul li {
	margin-bottom: 10px;
	margin-left: 42px;
	text-indent: -35px;
	line-height: 1.7;
}
#home #part-02 .box-right > ul li::before {
	content: "";
	display: inline-block;
	width: 26px;
	height: 24px;
	padding-right: 10px;
	background: url( /common/img/home/marker-01.png) 0 0 no-repeat;
	-webkit-background-size: 26px auto;
	background-size: 26px auto;
	position: relative;
	top: 5px;
}
#home #part-02 #himesora {
    background-image: url( /common/img/home/himesora.jpg );
    background-position: top center;
	margin-bottom: 30px;
}
#home #part-02 aside nav ul {
    width: 100%;
    text-align: center;
}
#home #part-02 aside nav ul li {
	display: inline-block;
}
#home #part-02 aside nav ul li.icon-sns {
    width: 6em;
    margin-bottom: 15px;
    font-size: 13px;
    line-height: 1.5;
}
#home #part-02 aside nav ul li.icon-sns img {
    padding: 0 20%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#home #part-02 aside nav ul li.line {
	width: 100%;
    margin-bottom: 0;
	vertical-align: baseline;
}
#home #part-02 aside nav ul li a {
    color: #fff;
    text-decoration: none;
    letter-spacing: 1px;
}
#home #part-03 {
	position: relative;
}
#home #part-03 .back-paper {
	padding-bottom: 150px;
}
#home #part-03 p:last-of-type {
	margin-bottom: 30px;
}
#home #part-03 #deco-flowers {
	width: 100%;
	height: 600px;
	background: url( /common/img/home/bg-rose.png) top center no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
}
#home #part-03 .inner {
	position: relative;
	z-index: 1;
}
#home #map-wrapper {
	width: 70%;
	margin: 0 auto;
	position: relative;
}
#home #map-inner {
	padding: 7px;
	background: #fff;
}
#home #map-wrapper::before,
#home #map-wrapper::after,
#home #map-inner::before,
#home #map-inner::after {
	content: "";
	display: block;
	background-position: 0 0;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	position: absolute;
	z-index: 1;
}
#home #map-wrapper::before,
#home #map-wrapper::after {
	width: 100%;
	height: 3px;
	background-image: url( /common/img/shared/line-long.jpg );
	left: 0;
}
#home #map-wrapper::before {
	top: 0;
}
#home #map-wrapper::after {
	bottom: 0;
}
#home #map-inner::before,
#home #map-inner::after {
	width: 3px;
	height: 100%;
	background-image: url( /common/img/shared/line-long-length.jpg);
	top: 0;
}
#home #map-inner::before {
	left: 0;
}
#home #map-inner::after {
	right: 0;
}
#home #map{
	width: 100%;
	height: 600px;
	vertical-align: bottom;
}

/*=============================================================
 05. nail
 =============================================================*/
#nail #visual {
    background-image: url( /common/img/nail/visual.jpg );
}
#nail #visual #visual-tit img {
    height: 120px;
}
#nail #part-01 {
    margin-bottom: 20px;
}
#nail #part-02 h2 {
	margin-bottom: 15px;
	font-size: 30px;
	line-height: 1.7;
}
#nail #part-06 {
	margin-bottom: 65px;
}

/*=============================================================
 06. harbarium
 =============================================================*/
#harbarium #visual {
    background-image: url( /common/img/harbarium/visual.jpg?v01 );
}
#harbarium #part-02 h2 {
	margin-bottom: 15px;
	font-size: 30px;
	line-height: 1.7;
}
#harbarium #part-03 .list-with-line {
	margin-bottom: 40px;
}
#harbarium #part-03 .banner {
	text-align: center;
}
#harbarium #part-03 .banner nav a {
	display: inline-block;
	width: 30%;
	color: #000;
	text-decoration: none;
}
#harbarium #part-03 .banner nav a img {
	width: 60%;
	max-width: 250px;
	margin-bottom: 15px;
}
#harbarium #part-03 .banner nav a p {
	margin-bottom: 0;
	font-size: 13px;
}
#harbarium #part-04 .list-with-line {
	margin-bottom: 20px;
}
#harbarium #part-04 p:last-of-type {
	margin-bottom: 0;
}
#harbarium #part-05 {
	margin-bottom: 65px;
}
#harbarium #part-05 .inner > p:last-of-type {
	margin-bottom: 37px;
}

/*
* gallery
*/
#harbarium #part-03 .gallery .row .img-wrapper:nth-of-type(1) a .img-screen {
	background-image: url( /common/img/harbarium/lesson-img/01.jpg );
}
#harbarium #part-03 .gallery .row .img-wrapper:nth-of-type(2) a .img-screen {
	background-image: url( /common/img/harbarium/lesson-img/02.jpg?v1 );
}
#harbarium #part-03 .gallery .row .img-wrapper:nth-of-type(3) a .img-screen {
	background-image: url( /common/img/harbarium/lesson-img/03.jpg );
}
#harbarium #part-03 .gallery .row .img-wrapper:nth-of-type(4) a .img-screen {
	background-image: url( /common/img/harbarium/lesson-img/04.jpg );
}
#harbarium #part-03 .gallery .row .img-wrapper:nth-of-type(5) a .img-screen {
	background-image: url( /common/img/harbarium/lesson-img/05.jpg );
}
#harbarium #part-03 .gallery .row .img-wrapper:nth-of-type(6) a .img-screen {
	background-image: url( /common/img/harbarium/lesson-img/06.jpg );
}
#harbarium #part-03 .gallery .row .img-wrapper:nth-of-type(7) a .img-screen {
	background-image: url( /common/img/harbarium/lesson-img/07.jpg );
}
#harbarium #part-03 .gallery .row .img-wrapper:nth-of-type(8) a .img-screen {
	background-image: url( /common/img/harbarium/lesson-img/08.jpg );
}

#harbarium #part-05 .gallery .row .img-wrapper:nth-of-type(1) a .img-screen {
	background-image: url( /common/img/harbarium/order-img/01.jpg );
}
#harbarium #part-05 .gallery .row .img-wrapper:nth-of-type(2) a .img-screen {
	background-image: url( /common/img/harbarium/order-img/02.jpg?v1 );
}
#harbarium #part-05 .gallery .row .img-wrapper:nth-of-type(3) a .img-screen {
	background-image: url( /common/img/harbarium/order-img/03.jpg );
}
#harbarium #part-05 .gallery .row .img-wrapper:nth-of-type(4) a .img-screen {
	background-image: url( /common/img/harbarium/order-img/04.jpg );
}
#harbarium #part-05 .gallery .row .img-wrapper:nth-of-type(5) a .img-screen {
	background-image: url( /common/img/harbarium/order-img/05.jpg );
}
#harbarium #part-05 .gallery .row .img-wrapper:nth-of-type(6) a .img-screen {
	background-image: url( /common/img/harbarium/order-img/06.jpg );
}
#harbarium #part-05 .gallery .row .img-wrapper:nth-of-type(7) a .img-screen {
	background-image: url( /common/img/harbarium/order-img/07.jpg );
}
#harbarium #part-05 .gallery .row .img-wrapper:nth-of-type(8) a .img-screen {
	background-image: url( /common/img/harbarium/order-img/08.jpg );
}
#harbarium #part-05 .gallery .row .img-wrapper:nth-of-type(9) a .img-screen {
	background-image: url( /common/img/harbarium/order-img/09.jpg );
}
#harbarium #part-05 .gallery .row .img-wrapper:nth-of-type(10) a .img-screen {
	background-image: url( /common/img/harbarium/order-img/10.jpg );
}
#harbarium #part-05 .gallery .row .img-wrapper:nth-of-type(11) a .img-screen {
	background-image: url( /common/img/harbarium/order-img/11.jpg );
}
#harbarium #part-05 .gallery .row .img-wrapper:nth-of-type(12) a .img-screen {
	background-image: url( /common/img/harbarium/order-img/12.jpg );
}
#harbarium #part-05 .gallery .row .img-wrapper:nth-of-type(13) a .img-screen {
	background-image: url( /common/img/harbarium/order-img/13.jpg );
}

/*=============================================================
. media query
=============================================================*/
@media screen and (max-width: 1024px) {
	p,
	li {
		font-size: 17px;
		letter-spacing: 2px;
	}
}
@media screen and (max-width: 1000px) {
	#harbarium #visual-tit img {
		height: 70px;
	}
}
@media screen and (max-width: 800px) {
	p,
	li {
		font-size: 16px;
	}
	.pc {
		display: none;
	}
	.sp {
		display: inline-block;
	}
	#contents {
		padding-top: 45px;
	}
	.mass {
		margin-bottom: 45px;
	}
	.inner {
		width: 80%;
	}
	.tit-s {
		margin-bottom: 20px;
	}
	.tit-s img {
		height: 30px;
	}
	.back-paper {
		padding: 45px 0;
	}
	.mobile-align-left,
	.notion p {
		text-align: left;
	}
	#visual #icon-scroll {
		width: 70px;
	}
	#visual #icon-scroll div {
		height: 80px;
	}
	#visual #icon-scroll div > img {
		animation: leaf-mobile-motion 9000ms ease infinite normal;
		animation-delay: 3400ms;
		top: 22px;
	}
	@keyframes leaf-mobile-motion {
		0%{ transform: rotateY( 0 ); top: 22px; }
		20%{ transform: rotateY( 360deg ); top: 42px; }
		40%{ transform: rotateY( 0 ); top: 22px; }
		100%{ transform: rotateY( 0 ); top: 22px; }
	}
	.gallery .row .img-wrapper {
		width: 33.3%;
	}
	.gallery .row .img-wrapper a .img-screen {
		padding-top: 135%;
	}
	
	/*
	* header
	*/
	#main-header h1 {
		width: 214px;
        margin: 14px 0 0 12px;
	}
	#main-header #icon-nav {
		width: 80px;
		top: 10px;
		right: 10px;
	}
	#main-header #icon-nav span {
		width: 21px;
		left: 30px;
	}
	#main-header #icon-nav span:nth-of-type(1),
	#main-header #icon-nav:hover span:nth-of-type(1){
		top: 32px;
	}
	#main-header #icon-nav span:nth-of-type(2) {
		top: 37px;
	}
	#main-header #icon-nav span:nth-of-type(3),
	#main-header #icon-nav:hover span:nth-of-type(3) {
		top: 42px;
	}
	#main-header.active #icon-nav span:nth-of-type(1),
	#main-header.active #icon-nav span:nth-of-type(3) {
		top: 38px;
	}
	#main-header nav ul {
		width: 80%;
	}
	#main-header nav ul li a {
		padding: 16px 0;
	}
	#main-header nav::before,
	#main-header nav::after {
		-webkit-background-size: auto 25px;
		background-size: auto 25px;
	}
	/*
	* footer
	*/
	#main-footer img {
		width: 40%;
	}
	
	/*
	* home
	*/
	#home #visual #visual-logo {
		width: 72%;
		top: 46%;
		left: 54%;
	}
	#home #visual #flowers-wrapper {
		width: 240%;
		padding-top: 240%;
		top: 46%;
		left: 50%;
		-webkit-transform: translateY( -50% ) translateX(-50%) translate3d( 0,0,0 );
		-moz-transform: translateY( -50% ) translateX(-50%) translate3d( 0,0,0 );
		-ms-transform: translateY( -50% ) translateX(-50%) translate3d( 0,0,0 );
		transform: translateY( -50% ) translateX(-50%) translate3d( 0,0,0 );
		overflow: hidden;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}
	#home #visual #flowers-inner {
		overflow: hidden;
		-webkit-transform: translate3d( 0,0,0 );
		transform: translate3d( 0,0,0 );
	}
	#home #visual .flowers {
		background-color: rgba( 255,255,255,0.001 );
		overflow: hidden;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-transform: translate3d( 0,0,1px );
		transform: translate3d( 0,0,1px );
	}
	#home #part-01 {
		margin-bottom: 30px;
	}
	#home #part-02 {
		margin-bottom: 45px;
	}
    #home #part-02 .inner .row {
        margin-bottom: 30px;
    }
	#home #part-02 .box-left {
		width: 100%;
		height: auto;
		padding-top: 100%;
		margin-bottom: 40px;
        background-image: url( /common/img/home/profile-sp.jpg?v01 );
		position: relative;
	}
	#home #part-02 .box-right {
		width: 100%;
		margin-left: 0;
	}
	#home #part-02 .box-right h1,
	#home #part-02 .box-right h2 {
		text-align: center;
	}
	#home #part-02 .box-right h2 {
		font-size: 30px;
		line-height: 1.3;
	}
	#home #part-02 .box-right h2 span {
		font-size: 15px;
		letter-spacing: 5px;
	}
	#home #part-02 .box-right h2::before,
	#home #part-02 .box-right h2::after {
		width: 100%;
		background: url( /common/img/shared/line-long.jpg ) 0 0 no-repeat;
		-webkit-background-size: cover;
		background-size: cover;
	}
    #home #part-02 #himesora {
        padding-top: 70%;
    }
	#home #part-02 aside nav ul li {
	}
	#home #part-03 .back-paper {
		padding-bottom: 45px;
	}
	#home #part-03 #deco-flowers {
		height: 400px;
	}
	#home #map-wrapper {
		width: 100%;
	}
	#home #map {
		height: 400px;
	}
	
	/*
	* harbarium
	*/
    #harbarium #visual {
        background-image: url( /common/img/harbarium/visual-sp.jpg?v01 );
    }
	#harbarium #visual-tit {
		width: 100%;
		text-align: center;
	}
	#harbarium #visual-tit img {
		width: 86%;
		height: auto;
	}
	#harbarium #part-03 .banner nav a {
		width: 100%;
	}
	#harbarium #part-03 .banner nav a img {
		width: 40%;
	}
	#harbarium #part-05 {
		margin-bottom: 40px;
	}
	#harbarium #part-05 .gallery {
		margin-bottom: 15px;
	}

	/*
	* nail
	*/
	#nail #visual {
		background-image: url( /common/img/nail/visual-mobile.jpg);
	}
	#nail #visual-tit {
		width: 100%;
		text-align: center;
	}
	#nail #visual #visual-tit img {
		width: 60%;
		height: auto;
	}
	#nail #part-06 {
		margin-bottom: 40px;
	}
}

@media screen and (max-width: 600px) {
	.pc-alt {
		display: none;
	}
	.sp-alt {
		display: inline-block;
	}
	.with-header-deco .header-deco-left,
	.with-header-deco .header-deco-right {
		width: 45%;
	}
	#main-footer img {
		width: 80%;
	}
}

/*=============================================================
. helper
=============================================================*/
.clr {
	clear: both;
}

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