@charset "utf-8";

/* ---------------------------------------------------
   File: products.css
   Version: 1.0.0
   Update: 2018-02-02
   Author: http://flowlab.co.jp

   (c)2007-2018 Flowlab inc. All Rights Reserved.
--------------------------------------------------- */




/* ===========================================================================================================================================

   WIDE DESKTOP LAYOUT

=========================================================================================================================================== */

/* -------------------------------
		Grobal Navigation
------------------------------- */
#gnavi li:nth-child(1) a {
	color: #2280bb;
	border-bottom: 3px solid #2280bb;
}

/* -------------------------------
		Catch Copy
------------------------------- */
.catchCopy {
	padding-bottom: 80px;
}
.catchCopy.bold {
	font-size: 1.4em;
	padding: 60px 0 20px;
}

/* -------------------------------
		Txt
------------------------------- */
.grid_12 .txt {
	width: 80%;
	margin: 0 auto;
}



/* ====================================================
		Banner - Products
==================================================== */
#mainBnBox {
	padding-top: 0;
}
#mainBnBox p,
#mainBnBox a {
	display: block;
	margin: 0;
	padding: 0;
}
#mainBnBox p {
	font-weight: bold;
	/*font-size: 1.4em;*/
	font-size: 40px;
	position: relative;
	letter-spacing: 0.1em;
}
#mainBnBox p span {
	/*font-size: 0.5em;*/
	font-size: 12px;
	display: block;
	margin-top: 10px;
	letter-spacing: 0.1em;
}
#mainBnBox strong {
	text-shadow: 0 0 10px rgba(0,0,0,0.9);
	position: absolute;
	transform: translate(-50%,-50%);
	/*top: 140px;*/
	top: 250px;
	left: 50%;
}
#mainBnBox a {
	width: 100%;
	padding-top: 100px;
	/*height: 640px;*/
	height: 500px;
	color: #ffffff;
}

/* -------------------------------
		totonoelight
------------------------------- */
#mainBnBox #navi_totonoelight {
	height: 500px;
	background-image:url('../img/products/ph_slide_totonoelight.jpg');
	background-repeat: no-repeat;
	background-position-x: center!important;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

/* -------------------------------
		inti4
------------------------------- */
#mainBnBox #navi_inti4 {
	/*height: 640px;
	background-image:url('../products/images/ph_clock.jpg');*/
	height: 500px;
	background-image:url('../img/products/ph_slide_clock.jpg');
	background-repeat: no-repeat;
	background-position-x: center!important;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}


/* -------------------------------
		yokone2
------------------------------- */
#mainBnBox #navi_yokone2 {
	/*height: 640px;
	background-image:url('../products/images/ph_pillow.jpg');*/
	height: 500px;
	background-image:url('../img/products/ph_slide_yokone.jpg');
	background-repeat: no-repeat;
	background-position-x: center!important;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}


/* -------------------------------
		vibrato1
------------------------------- */
#mainBnBox #navi_vibrato1 {
	height: 500px;
	background-image:url('../img/products/ph_slide_mattress.jpg');
	background-repeat: no-repeat;
	background-position-x: center!important;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}


/* -------------------------------
		eyenight
------------------------------- */
#mainBnBox #navi_eyenight {
	height: 500px;
	background-image:url('../img/products/ph_slide_eyemask.jpg');
	background-repeat: no-repeat;
	background-position-x: center!important;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}


/* -------------------------------
		dr.wing
------------------------------- */
#mainBnBox #navi_drwing {
	height: 500px;
	background-image:url('../img/products/ph_slide_drwing.jpg');
	background-repeat: no-repeat;
	background-position-x: center!important;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}



/* ====================================================
		Background Style
==================================================== */

/* -------------------------------
		Background Img
------------------------------- */
.backgroundImg {
	height: 750px;
	padding-top: 40px;
}

/* Title */
.backgroundImg h3 {
	width: 40%;
	font-size: 2em;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.6em;
	position: absolute;
}
.backgroundImg section h4 {
	font-size: 1.6em;
	padding-top: 30px;
}
.backgroundImg section h4 span {
	font-size: 0.5em;
	display: block;
	margin-bottom: 10px;
}

/* Box */
.backgroundImg section {
	width: 40%;
	position: absolute;
}

/* Txt */
.backgroundImg .txt {
	width: 100%;
	padding: 0;
}



/* ====================================================
		Products Item
==================================================== */
.productsItem_wrap{max-width: 1400px;margin: 0 auto;}
.productsItem {
	padding-top: 100px;
	padding-bottom: 50px;
}
.productsItem .scrollme {
	width: 60%;
	margin: 0 auto;
}

/* -------------------------------
		Price Box
------------------------------- */
.priceBox {
	text-align: center;
}

/* Product Name*/
.priceBox h5 {
	font-size: 2em;
	font-weight: 700;
	padding-bottom: 20px;
	margin: 0!important;
}
.priceBox h5 span {
	font-size: 0.4em;
	font-weight: normal;
	display: block;
	margin-top: 10px;
	position: relative;
}
.priceBox h5 span:before {
	content: '';
	position: absolute;
	bottom: -22px;
	display: inline-block;
	width: 40px;
	height: 1px;
	left: 50%;
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color: black;
}

/* Price */
.priceBox .price {
	font-size: 1.4em;
	margin-bottom: 0;
}
.priceBox .price span {
	font-size: 0.8em;
}
.priceBox .price span.txt_xs {
	font-size: 0.4em;
}

/* Shipping */
.priceBox .shipping {
	font-size: 0.7em;
	margin: 0;
	padding-bottom: 20px;
}


/* -------------------------------
		Slider
------------------------------- */
ul.js-flickity {
	padding: 0;
}
.slide-content {
    opacity: 0.3;
    width: 75%;
    max-width: 700px;
    /*padding-right: 0.5rem;*/
    /*padding-left: 0.5rem;*/
		margin-right: 0.5rem;
    margin-left: 0.5rem;
    text-align: center;
    transition: opacity 0.15s ease-out;
}
.slide-content img {
	width: 100%;
	height: auto;
}

.flickity-slider > .is-selected {
    opacity: 1;
}
.flickity-button {
  position: absolute;
  background: hsla(0, 0%, 100%, 0);
  border: none;
  color: #8f8f8f;
}
.flickity-button:hover {
  background: rgba(0,0,0,0);
}

.flickity-button-icon {
  fill: #8f8f8f;
}
.flickity-prev-next-button {
  width: 60px;
  height: 60px;
}


/* ====================================================
		totonoelight
==================================================== */
#totonoelight #totonoelightMain {
	width: 100%;
	height: 0;
	padding-bottom: calc(100%*500/1240);
	background-image:url('../img/products/ph_totonoe1.jpg');
	background-repeat: no-repeat;
	background-position-x: center!important;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position-y: bottom !important;
}

/* -------------------------------
		Txt
------------------------------- */
#totonoelight .txt {
	padding-bottom: 50px;
}

/* -------------------------------
		totonoelight2
------------------------------- */
#totonoelight2 {
	background-image:url('../img/products/ph_totonoe2.jpg');
	background-position: center center!important;
}
/* Title */
#totonoelight2 div h3 {
	width: 100%;
	position: static;
	padding-bottom: 30px;
	text-shadow: 0px 1px 3px rgba(0,0,0,0.3);
}
/* Box */
#totonoelight2 div {
	width: 30%;
	position: absolute;
	top: 100px;
	right: 70px;
}
/* Text */
#totonoelight2.backgroundImg .txt {
	width: 100%;
	margin: 0;
	text-shadow: 0px 1px 2px rgba(0,0,0,0.9);
}



/* -------------------------------
		totonoelight3
------------------------------- */
#totonoelight3 {
	color: #ffffff;
	background-image:url('../img/products/ph_totonoe3.jpg');
	background-position: center center!important;
}
/* Title */
#totonoelight3 div h3 {
	width: 100%;
	position: static;
	padding-bottom: 30px;
}
/* Box */
#totonoelight3 div {
	position: absolute;
	top: 100px;
	left: 70px;
}
/* Text */
#totonoelight3.backgroundImg .txt {
	width: 40%;
	margin: 0;
	text-shadow: 0px 1px 2px rgba(0,0,0,0.9);
}


/* ====================================================
		inti4
==================================================== */
#inti4 #inti4Main {
	width: 100%;
	height: 0;
	/*height: 500px;*/
	padding-bottom: calc(100%*500/1240);
	background-image:url('../img/products/ph_main_clock.jpg');
	background-repeat: no-repeat;
	background-position-x: center!important;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
    background-position-y: bottom !important;
}

/* -------------------------------
		Txt
------------------------------- */
#inti4 .txt {
	padding-bottom: 50px;
}

/* -------------------------------
		Serotonin
------------------------------- */
#serotonin {
	background-image:url('../img/products/ph_clock_subA.jpg');
	min-height: 100%;
	background-size: cover;
	/*background-position: center center!important;*/
}
/* Title */
#serotonin h3 {
	right: 70px;
}
/* Box */
#serotonin section {
	top: 10em;
	right: 70px;
}

/* -------------------------------
		Melatonin
------------------------------- */
#melatonin {
	background-image:url('../img/products/ph_clock_subB.jpg');
	background-position: center center!important;
}
/* Box */
#melatonin section {
	top: 6em;
	left: 70px;
}

/* -------------------------------
		Detail
------------------------------- */
#detail {
	text-shadow: 0 0 10px rgba(0,0,0,0.9);
	background-image:url('../img/products/ph_clock_subC.jpg');
	background-position: center center!important;
}
/* Title */
#detail h3 {
	width: 100%;
	position: static;
	padding-bottom: 30px;
}
/* Box */
#detail section {
	bottom: 100px;
	left: 70px;
}




/* ====================================================
		yokone2
==================================================== */
#yokone2 #yokone2Main {
	width: 100%;
	height: 0;
	/*height: 500px;*/
	padding-bottom: calc(100%*500/1240);
	background-image:url('../img/products/ph_main_pillow2a.jpg');
	background-repeat: no-repeat;
	background-position-x: center!important;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position-y: bottom !important;
}

/* -------------------------------
		Txt
------------------------------- */
#yokone2 .txt {
	padding-bottom: 50px;
}

/* -------------------------------
		Posture
------------------------------- */
#posture {
	background-image:url('../img/products/ph_pillow_subAa.jpg');
	background-position: center center!important;
}
/* Title */
#posture div h3 {
	width: 100%;
	position: static;
	padding-bottom: 30px;
}
/* Box */
#posture div {
	width: 30%;
	position: absolute;
	top: 100px;
	right: 70px;
}
/* Text */
#posture.backgroundImg .txt {
	width: 100%;
	margin: 0;
}



/* -------------------------------
		Fashion
------------------------------- */
#fashion {
	color: #454445;
	background-image:url('../img/products/ph_pillow_subB.jpg');
	background-position: center center!important;
}
/* Title */
#fashion div h3 {
	width: 100%;
	position: static;
	padding-bottom: 30px;
}
/* Box */
#fashion div {
	position: absolute;
	top: 100px;
	left: 70px;
}
/* Text */
#fashion.backgroundImg .txt {
	width: 40%;
	margin: 0;
}

/* ====================================================
		Eye Night
==================================================== */
#eyenight #eyenightMain {
	width: 100%;
	height: 0;
	/*height: 500px;*/
	padding-bottom: calc(100%*500/1240);
	background-image:url('../img/products/ph_main_eyemask.jpg');
	background-repeat: no-repeat;
	background-position-x: center!important;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position-y: bottom !important;
}

/* -------------------------------
		Txt
------------------------------- */
#eyenight .txt {
	padding-bottom: 50px;
	text-align: center;
}

/* -------------------------------
		Quality
------------------------------- */
#quality {
	background-image:url('../img/products/ph_eyemask_subA.jpg');
	background-position: center center!important;
}
/* Title */
#quality div h3 {
	width: 100%;
	position: static;
	padding-bottom: 30px;
	color: #2280bb;
}
/* Box */
#quality div {
	width: 30%;
	position: absolute;
	top: 100px;
	right: 70px;
	color: #2280bb;
}
/* Text */
#quality.backgroundImg .txt {
	width: 100%;
	margin: 0;
	text-align: left;
}


/* ====================================================
		Dr.Wing
==================================================== */
#drwing #drwingMain {
	width: 100%;
	height: 0;
	/*height: 500px;*/
	padding-bottom: calc(100%*500/1240);
	background-image:url('../img/products/ph_main_drwing.jpg');
	background-repeat: no-repeat;
	background-position-x: center!important;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position-y: bottom !important;
}

/* -------------------------------
		Txt
------------------------------- */
#drwing .txt {
	padding-bottom: 50px;
	text-align: center;
}


/* -------------------------------
		Size Fit
------------------------------- */
#sizefit {
	background-image:url('../img/products/ph_drwing_subA.jpg');
	background-position: center center!important;
}
/* Title */
#sizefit div h3 {
	width: 100%;
	position: static;
	padding-bottom: 30px;
	color: #2280bb;
}
/* Box */
#sizefit div {
	width: 30%;
	position: absolute;
	top: 100px;
	right: 70px;
	color: #2280bb;
}
/* Text */
#sizefit.backgroundImg .txt {
	width: 100%;
	margin: 0;
	text-align: left;
}

/* -------------------------------
		Hardness
------------------------------- */
#hardness {
	background-image:url('../img/products/ph_drwing_subB.jpg');
	background-position: center center!important;
}
/* Title */
#hardness div h3 {
	width: 100%;
	position: static;
	padding-bottom: 30px;
	color: #2280bb;
}
/* Box */
#hardness div {
	width: 30%;
	position: absolute;
	top: 100px;
	right: 70px;
	color: #2280bb;
}
/* Text */
#hardness.backgroundImg .txt {
	width: 100%;
	margin: 0;
	text-align: left;
}


/* -------------------------------
		Goose 01
------------------------------- */
#goose01 {
	background-image:url('../img/products/ph_drwing_subA.jpg');
	background-position: center center!important;
}
/* Title */
#goose01 div h3 {
	width: 100%;
	position: static;
	padding-bottom: 30px;
	color: #ff0000;
}
/* Box */
#goose01 div {
	width: 30%;
	position: absolute;
	top: 100px;
	right: 70px;
	color: #2280bb;
}
/* Text */
#goose01.backgroundImg .txt {
	width: 100%;
	margin: 0;
	text-align: left;
}


/* ====================================================
		Vibrato1
==================================================== */
#bn_vibrato {
	padding: 70px 0 100px;
	clear: both;
}




/* ===========================================================================================================================================

   TABLET - LARGE

============================================================================================================================================= */
@media screen and (min-width: 992px) and (max-width: 1199px) {

	
/* ====================================================
		Banner - Products
==================================================== */
#mainBnBox #navi_inti4,
#mainBnBox #navi_yokone2,
#mainBnBox #navi_vibrato1,
#mainBnBox #navi_inti4 a,
#mainBnBox #navi_yokone2 a,
#mainBnBox #navi_vibrato1 a {
	/*height: 640px;*/
	height: 500px;
}
	
/* ====================================================
		Background Style
==================================================== */
/* -------------------------------
		Background Img
------------------------------- */
/* Title */
.backgroundImg section h4 {
	font-size: 1.6em;
	margin-bottom: 20px;
}
.backgroundImg section h4 span {
	margin-bottom: 10px;
}
/* Box */
.backgroundImg section {
	width: 90%;
	position: relative;
}

	
	
/* ====================================================
		inti4
==================================================== */
	
/* -------------------------------
		Serotonin
------------------------------- */
/* Title */
#serotonin h3 {
	width: 100%;
	font-size: 1.8em;
	text-align: center;
	position: relative;
	right: auto;
}
	#serotonin h3 .pc {
		display: none;
	}
/* Box */
#serotonin section {
	right: auto;
}

/* -------------------------------
		Melatonin
------------------------------- */
/* Box */
#melatonin section {
	left: auto;
}
	
/* -------------------------------
		Detail
------------------------------- */
/* Title */
#detail h3 {
	width: 100%;
	font-size: 1.8em;
	text-align: center;
	position: relative;
	left: auto;
}
	#detail h3 .pc {
		display: none;
	}
#detail section {
	left: auto;
}

	
/* ====================================================
		yokone2
==================================================== */
/* -------------------------------
		Posture
------------------------------- */
/* Title */
#posture div h3 {
	position: static;
	padding-bottom: 30px;
}
	#posture div h3 .pc {
		display: none;
	}
/* Box */
#posture div {
	width: 90%;
	position: relative;
	top: 0!important;
	right: auto;
	margin: 0 auto;
}
/* Text */
#posture.backgroundImg .txt {
	margin: 0;
}



/* -------------------------------
		Fashion
------------------------------- */
#fashion {
	text-shadow: 0 0 0 rgba(0,0,0,1);
	background-image:url('../img/products/ph_pillow_subB.jpg');
}
/* Title */
#fashion div h3 {
	position: static;
	padding-bottom: 30px;
}
	#fashion div h3 .pc {
		display: none;
	}
/* Box */
#fashion div {
	width: 90%;
	position: relative;
	top: 0!important;
	left: auto;
	margin: 0 auto;
}
/* Text */
#fashion.backgroundImg .txt {
	width: 100%;
	margin: 0;
}
	

/* ====================================================
		Eye Night
==================================================== */
/* -------------------------------
		Quality
------------------------------- */
/* Title */
#quality div h3 {
	position: static;
	padding-bottom: 30px;
}
	#quality div h3 .pc {
		display: none;
	}
/* Box */
#quality div {
	width: 90%;
	position: relative;
	top: 0!important;
	right: auto;
	margin: 0 auto;
}
/* Text */
#quality.backgroundImg .txt {
	margin: 0;
}

/* ====================================================
		Dr.Wing
==================================================== */
/* -------------------------------
		Size Fit
------------------------------- */
/* Title */
#sizefit div h3 {
	position: static;
	padding-bottom: 30px;
}
	#sizefit div h3 .pc {
		display: none;
	}
/* Box */
#sizefit div {
	width: 90%;
	position: relative;
	top: 0!important;
	right: auto;
	margin: 0 auto;
}
/* Text */
#sizefit.backgroundImg .txt {
	margin: 0;
}

/* -------------------------------
		Hardness
------------------------------- */
/* Title */
#hardness div h3 {
	position: static;
	padding-bottom: 30px;
}
	#hardness div h3 .pc {
		display: none;
	}
/* Box */
#hardness div {
	width: 90%;
	position: relative;
	top: 0!important;
	right: auto;
	margin: 0 auto;
}
/* Text */
#hardness.backgroundImg .txt {
	margin: 0;
}

}


/* ===========================================================================================================================================

   TABLET

============================================================================================================================================= */
@media screen and (min-width: 768px) and (max-width: 991px) {
	
	
/* ====================================================
		Banner - Products
==================================================== */
#mainBnBox #navi_totonoelight,	
#mainBnBox #navi_inti4,
#mainBnBox #navi_yokone2,
#mainBnBox #navi_vibrato1,
#mainBnBox #navi_eyenight,
#mainBnBox #navi_drwing,		
#mainBnBox #navi_totonoelight a,	
#mainBnBox #navi_inti4 a,
#mainBnBox #navi_yokone2 a,
#mainBnBox #navi_vibrato1 a,
#mainBnBox #navi_eyenight a,
#mainBnBox #navi_drwing a{
	height: 440px;
}


#mainBnBox strong {
	top: 220px; width: 100%;
}
	
	
/* ====================================================
		Background Style
==================================================== */
/* -------------------------------
		Background Img
------------------------------- */
/* Title */
.backgroundImg section h4 {
	font-size: 1.4em;
	margin-bottom: 20px;
	padding-top: 0;
}
.backgroundImg section h4 span {
	margin-bottom: 10px;
}
/* Box */
.backgroundImg section {
	width: 90%;
	position: relative;
	top: 0!important;
	margin: 0 auto;
}

/* Txt */
.backgroundImg .txt {
	width: 100%;
	padding: 0;
}

	
	
/* ====================================================
		inti4
==================================================== */
	
	
/* -------------------------------
		Serotonin
------------------------------- */
/* Title */
#serotonin h3 {
	width: 100%;
	font-size: 1.6em;
	text-align: center;
	position: relative;
	right: auto;
}
	#serotonin h3 .pc {
		display: none;
	}
/* Box */
#serotonin section {
	right: auto;
}
	
/* -------------------------------
		Melatonin
------------------------------- */
/* Box */
#melatonin section {
	left: auto;
}
	
/* -------------------------------
		Detail
------------------------------- */
/* Title */
#detail h3 {
	width: 100%;
	font-size: 1.6em;
	text-align: center;
	position: relative;
	left: auto;
}
	#detail h3 .pc {
		display: none;
	}
/* Box */
#detail section {
	left: auto;
}
	
	
/* ====================================================
		yokone2
==================================================== */
/* -------------------------------
		Posture
------------------------------- */
/* Title */
#posture div h3 {
	font-size: 1.6em;
	text-align: center;
	position: static;
	padding-bottom: 30px;
}
	#posture div h3 .pc {
		display: none;
	}
/* Box */
#posture div {
	width: 90%;
	position: relative;
	top: 0!important;
	right: auto;
	margin: 0 auto;
}
/* Text */
#posture.backgroundImg .txt {
	margin: 0;
}


/* ====================================================
		Eye Night
==================================================== */
/* -------------------------------
		Quality
------------------------------- */
/* Title */
#quality div h3 {
	font-size: 1.6em;
	text-align: center;
	position: static;
	padding-bottom: 30px;
}
	#quality div h3 .pc {
		display: none;
	}
/* Box */
#quality div {
	width: 90%;
	position: relative;
	top: 0!important;
	right: auto;
	margin: 0 auto;
}
/* Text */
#quality.backgroundImg .txt {
	margin: 0;
}


/* -------------------------------
		Fashion
------------------------------- */
#fashion {
	text-shadow: 0 0 0 rgba(0,0,0,1);
	background-image:url('../img/products/ph_pillow_subB.jpg');
}
/* Title */
#fashion div h3 {
	font-size: 1.6em;
	text-align: center;
	position: static;
	padding-bottom: 30px;
}
	#fashion div h3 .pc {
		display: none;
	}
/* Box */
#fashion div {
	width: 90%;
	position: relative;
	top: 0!important;
	left: auto;
	margin: 0 auto;
}
/* Text */
#fashion.backgroundImg .txt {
	width: 100%;
	margin: 0;
}


/* ====================================================
		Dr.Wing
==================================================== */
/* -------------------------------
		Size Fit
------------------------------- */
/* Title */
#sizefit div h3 {
	font-size: 1.6em;
	text-align: center;
	position: static;
	padding-bottom: 30px;
}
	#sizefit div h3 .pc {
		display: none;
	}
/* Box */
#sizefit div {
	width: 90%;
	position: relative;
	top: 0!important;
	right: auto;
	margin: 0 auto;
}
/* Text */
#sizefit.backgroundImg .txt {
	margin: 0;
}

/* -------------------------------
		Hardness
------------------------------- */
/* Title */
#hardness div h3 {
	font-size: 1.6em;
	text-align: center;
	position: static;
	padding-bottom: 30px;
}
	#hardness div h3 .pc {
		display: none;
	}
/* Box */
#hardness div {
	width: 90%;
	position: relative;
	top: 0!important;
	right: auto;
	margin: 0 auto;
}
/* Text */
#hardness.backgroundImg .txt {
	margin: 0;
}

}




/* ===========================================================================================================================================

   MOBILE

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

/* -------------------------------
		Grobal Navigation
------------------------------- */
#gnavi li:nth-child(1) a {
	color: #2280bb;
	border-bottom: 1px solid #eee;
}
	
/* -------------------------------
		Catch Copy
------------------------------- */
.catchCopy {
	padding-bottom: 80px;
}
.catchCopy.bold {
	font-size: 1.2em;
	padding: 60px 0 10px;
}

/* -------------------------------
		Txt
------------------------------- */
.grid_12 .txt {
	width: 100%;
	padding: 0 6%;
}

/* ====================================================
		Banner - Products
==================================================== */
#mainBnBox p {
	font-size: 7vw;
	line-height: 1.5em;
}
#mainBnBox p span {
	font-size: 3vw;
	margin-top: 5px;
	line-height: 1.5em;
}
#mainBnBox strong {
	position: absolute;
	/*transform: translate(-50%,-50%);*/
	/*transform: translate( auto,-50%);*/
	transform: translate(auto,auto);
	top: 50%;
	/*left: 50%;*/
	left: auto;
	margin: 0 auto;
	width: 100%;
	text-align: center;
	line-height: 1em;
}
/* IE10〜11 */
_:-ms-input-placeholder, :root #mainBnBox strong {
	top: 40%;
  transform: translate(0,0);
}
/* Edge12〜14 */
@supports (-ms-ime-align: auto) and (not (-webkit-text-stroke: initial)) {
  #mainBnBox strong {
	top: 40%;
    transform: translate(0,0);
  }
}

#mainBnBox #navi_totonoelight,
#mainBnBox #navi_inti4,
#mainBnBox #navi_yokone2,
#mainBnBox #navi_vibrato1,
#mainBnBox #navi_eyenight,
#mainBnBox #navi_drwing {
	/*height: 240px;*/
	height: 60vw;
}
#mainBnBox #navi_totonoelight a,	
#mainBnBox #navi_inti4 a,
#mainBnBox #navi_yokone2 a,
#mainBnBox #navi_vibrato1 a,
#mainBnBox #navi_eyenight a,
#mainBnBox #navi_drwing a {
	/*height: 240px;*/
	padding-top: 42%;
	height: 60vw;
}


/* ====================================================
		Background Style
==================================================== */
/* -------------------------------
		Background Img
------------------------------- */
/* Title */
.backgroundImg h3 {
	padding-bottom: 0;
}
.backgroundImg section h4 {
    font-size: 1.2em;
    text-align: center;
    margin-bottom: 20px;
    padding-top: 0;
}

/* Box */
.backgroundImg section {
	width: 90%;
	position: relative;
	top: 0!important;
	right: auto;
	margin: 0 auto;
}
/* Txt */
.backgroundImg .txt {
	padding: 0;
}


/* -------------------------------
		Slider
------------------------------- */
.flickity-prev-next-button.previous { left: -4vw; }
.flickity-prev-next-button.next { right: -4vw; }

	
/* ====================================================
		totonoelight
==================================================== */
#totonoelight #totonoelightMain {
	height: 40vh;
	background-size: auto 100%;
}
	
/* -------------------------------
		totonoelight2
------------------------------- */
#totonoelight2 {background-position: -80px center!important;}	
/* Title */
#totonoelight2 div h3 {
	font-size: 1.4em;
	text-align: center;
	position: static;
	padding-bottom: 30px;
}
	#totonoelight2 div h3 .pc {
		display: none;
	}
/* Box */
#totonoelight2 div {
	width: 90%;
	position: relative;
	top: 0!important;
	right: auto;
	margin: 0 auto;
}
/* Text */
#totonoelight2.backgroundImg .txt {
	margin: 0;
}



/* -------------------------------
		totonoelight3
------------------------------- */
#totonoelight3 {
	text-shadow: 0 0 0 rgba(0,0,0,1);
	background-position: -170px center!important;
}
/* Title */
#totonoelight3 div h3 {
	font-size: 1.4em;
	text-align: center;
	position: static;
	padding-bottom: 30px;
}
	#totonoelight3 div h3 .pc {
		display: none;
	}
/* Box */
#totonoelight3 div {
	width: 90%;
	position: relative;
	top: 0!important;
	left: auto;
	margin: 0 auto;
}
/* Text */
#totonoelight3.backgroundImg .txt {
	width: 100%;
	margin: 0;
}
	
/* ====================================================
		inti4
==================================================== */
#inti4 #inti4Main {
	height: 40vh;
	background-size: auto 100%;
}
	
/* -------------------------------
		Serotonin
------------------------------- */
/* Title */
#serotonin h3 {
	width: 90%;
	font-size: 1.4em;
	text-align: center;
	position: relative;
	right: auto;
	margin: 0 auto;
}
	#serotonin h3 .pc {
		display: none;
	}
/* Box */
#serotonin section {
	right: auto;
}
	
/* -------------------------------
		Melatonin
------------------------------- */
/* Box */
#melatonin section {
	left: auto;
}
	
/* -------------------------------
		Detail
------------------------------- */
/* Title */
#detail h3 {
	width: 90%;
	font-size: 1.4em;
	text-align: center;
	position: relative;
	left: auto;
	margin: 0 auto;
}
	#detail h3 .pc {
		display: none;
	}
/* Box */
#detail section {
	left: auto;
}
/* Text */
#detail {
	color: #454445;
	text-shadow: 0 0 10px rgba(255,255,255,1);
}
	
/* ====================================================
		yokone2
==================================================== */
#yokone2 #yokone2Main {
	height: 40vh;
	background-size: auto 100%;
}
	
/* -------------------------------
		Posture
------------------------------- */
/* Title */
#posture div h3 {
	font-size: 1.4em;
	text-align: center;
	position: static;
	padding-bottom: 30px;
}
	#posture div h3 .pc {
		display: none;
	}
/* Box */
#posture div {
	width: 90%;
	position: relative;
	top: 0!important;
	right: auto;
	margin: 0 auto;
}
/* Text */
#posture.backgroundImg .txt {
	margin: 0;
}



/* -------------------------------
		Fashion
------------------------------- */
#fashion {
	text-shadow: 0 0 0 rgba(0,0,0,1);
}
/* Title */
#fashion div h3 {
	font-size: 1.4em;
	text-align: center;
	position: static;
	padding-bottom: 30px;
}
	#fashion div h3 .pc {
		display: none;
	}
/* Box */
#fashion div {
	width: 90%;
	position: relative;
	top: 0!important;
	left: auto;
	margin: 0 auto;
}
/* Text */
#fashion.backgroundImg .txt {
	width: 100%;
	margin: 0;
}
	

/* ====================================================
		Eye Night
==================================================== */
#eyenight #eyenightMain {
	height: 40vh;
	background-size: auto 100%;
}
	
/* -------------------------------
		Quality
------------------------------- */
/* Title */
#quality div h3 {
	font-size: 1.4em;
	text-align: center;
	position: static;
	padding-bottom: 30px;
}
	#quality div h3 .pc {
		display: none;
	}
/* Box */
#quality div {
	width: 90%;
	position: relative;
	top: 0!important;
	right: auto;
	margin: 0 auto;
}
/* Text */
#quality.backgroundImg .txt {
	margin: 0;
	text-align: left;
}


/* ====================================================
		Dr.Wing
==================================================== */
#drwing #drwingMain {
	height: 40vh;
	background-size: auto 100%;
}

/* -------------------------------
		Size Fit
------------------------------- */
/* Title */
#sizefit div h3 {
	font-size: 1.4em;
	text-align: center;
	position: static;
	padding-bottom: 30px;
}
	#sizefit div h3 .pc {
		display: none;
	}
/* Box */
#sizefit div {
	width: 90%;
	position: relative;
	top: 0!important;
	right: auto;
	margin: 0 auto;
}
/* Text */
#sizefit.backgroundImg .txt {
	margin: 0;
	text-align: left;
}

/* -------------------------------
		Hardness
------------------------------- */
/* Title */
#hardness div h3 {
	font-size: 1.4em;
	text-align: center;
	position: static;
	padding-bottom: 30px;
}
	#hardness div h3 .pc {
		display: none;
	}
/* Box */
#hardness div {
	width: 90%;
	position: relative;
	top: 0!important;
	right: auto;
	margin: 0 auto;
}
/* Text */
#hardness.backgroundImg .txt {
	margin: 0;
	text-align: left;
}

/* ====================================================
		Vibrato1
==================================================== */
#bn_vibrato {
	padding: 40px 0 60px;
}

}

@media screen and (max-width: 1300px){
#inti4 #inti4Main,#yokone2 #yokone2Main,#totonoelight #totonoelightMain {background-position: top center !important;}
}