@charset "utf-8";
@media only screen 
	and (min-device-width: 600px) 
	and (max-device-width: 1280px) 
	and (-webkit-min-device-pixel-ratio: 1) {

/* iPadのSafariだけで適用 
.mac.safari .CLASS{
	
}
*/
/* アンドロイドタブレットだけで適用 
.android .CLASS{
	
}
*/


/* ////////////////////////////////////////////
 *                 base & layout
 * //////////////////////////////////////////// */

/* Typography
------------------------------------------*/
html {
	font-size: 1.6vw;
}

/* Layout
------------------------------------------*/
body {
	min-width: unset;
}

.pc-parts{
	display: none;
}
.tab-parts{
	display: block;
}

#content-inner{
	padding: 0 2vw 8vw;
}


/* fixed
------------------------------------------*/
#fixed-btn {
    top: 18vw;
}

#fixed-btn ul {
    gap: .5vw;
}
#fixed-btn ul li a {
    font-size: 2vw;
    width: 7vw;
    height: 27vw;
    line-height: 7vw;
    -webkit-border-top-left-radius: .5vw;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -webkit-border-bottom-left-radius: .5vw;
    -moz-border-radius-topleft: .5vw;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-bottomleft: .5vw;
}
#fixed-btn ul li a i{
	width: 2vw;
	height: 2vw;
	line-height: 2vw;
	text-align: center;
    font-size: 2vw;
}


/* header
------------------------------------------*/

#header{
	padding: 0 2vw;
}
#header-inner {
}

#header-inner .site-description {
    position: absolute;
    top: 1em;
    left: 2vw;
    font-size: 1vw;
}

#header-inner .logo {
    height: 4vw;
    line-height: 4vw;
	font-size: 1.6vw;
}

#header-inner .logo img {
    height: 4vw;
	margin-right: .5vw;
}

#header-inner .nav {
	width: 80vw;
    gap: 2vw;
}
/* iPadのSafariだけで適用 */
.mac.safari #header-inner .mail a{
	width: 15vw;
}



/* gnav
------------------------------------------*/
.gnav{
}
.gnav ul {
    gap: 2vw;
}

.gnav>ul>li{
	line-height: 1.3;
}
.gnav>ul>li>a{
	height: 5vw;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	font-size: 1.35vw;
}
.gnav ul li ul {
    top: 100%;
    width: 200%;
}
.gnav ul li ul li a {
    padding: 1vw 2vw;
    font-size: 1.3vw;
}

.gnav ul a .en {
    font-size: 1.6vw;
}

.gnav ul a .ja {
    font-size: 1.1vw;
}

/* mainimage
------------------------------------------*/
#mainimage {
    margin: 0 auto 25vw;
}

#mainimage #mainimage-inner .slideshow .slick-arrow,
#mainimage #mainimage-inner .slideshow .slick-arrow::before {
    width: 1.8vw;
    height: 2.7vw;
}

#mainimage #mainimage-inner .slideshow .slick-arrow {
    margin-top: -1.35vw;
}

#mainimage #mainimage-inner .slideshow .slick-arrow.slick-prev {
    left: 4vw;
}

#mainimage #mainimage-inner .slideshow .slick-arrow.slick-next {
    right: 4vw;
}

#mainimage #mainimage-inner .slideshow .slick-dotted {
    margin-bottom: 4vw;
}

#mainimage #mainimage-inner .slideshow .slick-dots {
    bottom: -4vw;
}

#mainimage #mainimage-inner .slideshow .slick-dots li {
    margin: 0 1vw;
}

#mainimage #mainimage-inner .slideshow .slick-dots li button {
    width: 1vw;
    height: 1vw;
}

#mainimage #mainimage-inner .slideshow .slick-dots li button::before {
    color: var(--keyColorSub);
    width: 1vw;
    height: 1vw;
    font-size: 1vw;
}

#mainimage #mainimage-inner .slideshow .slick-dots li button:hover::before,
#mainimage #mainimage-inner .slideshow .slick-dots li button:focus::before,
#mainimage #mainimage-inner .slideshow .slick-dots li.slick-active button::before {
    color: var(--keyColor);
}

#mainimage .mv-contents {
	padding-left: 2vw;
}
#mainimage .mv-contents .main .mv-lead{
	width: 48vw;
}
#mainimage .mv-contents .main .mv-catch{
	font-size: 7vw;
}
#mainimage .mv-contents .main .mv-appeal ul li{
	width: 10vw;
	height: 9.8vw;
	font-size: 1.5vw;
}
#mainimage .mv-contents .main .mv-appeal ul li strong{
	font-size: 2vw;
}

#mainimage .mv-trial{
	position: absolute;
	bottom: -20vw;
	right: 0;
	left: 0;
}
#mainimage .mv-trial .main{
	width: 60vw;
	height: 28vw;
}
#mainimage .mv-trial .main .catch{
	margin-bottom: 2vw;
	font-size: 2vw;
}
#mainimage .mv-trial .main .catch:before,
#mainimage .mv-trial .main .catch:after{
	display: block;
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2vw
	height: 3vw;
}
#mainimage .mv-trial .main .catch:before{
	left: -3vw;
}
#mainimage .mv-trial .main .catch:after{
	right: -3vw;
	transform: scaleX(-1) translateY(-50%);
}
#mainimage .mv-trial .main .btns a{
	margin-bottom: 2vw;
	width: 40vw;
	height: 8vw;
	font-size: 3vw;
	padding-right: 4vw;
}
#mainimage .mv-trial .main .btns a:before{
	transform: translateY(-50%);
	left: 4vw;
	font-size: 1.5vw;
	width: 2vw;
	height: 2vw;
	line-height: 2vw;	
}
#mainimage .mv-trial .main .btns a span{
	font-size: 1.2vw;
}
#mainimage .mv-trial .main .header{
	font-size: 1.8vw;
	margin-bottom: 2vw;
	line-height: 1;
}
#mainimage .mv-trial .main .tel{
	font-size: 2vw;
}
#mainimage .mv-trial .main .tel a{
	font-size: 5vw;
}

/* content main
------------------------------------------*/


/* common */
.common{
	padding: 5vw 2vw;
}
.common-title .en {
    font-size: 2vw;
}

.common-title .ja {
    font-size: 4vw;
}
.common-title strong{
	font-size: 4.8vw;
}

.common-btn a {
    width: 20vw;
    height: 4vw;
    line-height: 4vw;
}

.common-btn a:before {
    right: 2vw;
}


/* main */
/* trouble */
.safari.mac .main-trouble{
	padding-bottom: 20vw;
}
.main-trouble .main ul{
    gap: 3vw;
}
.safari.mac .main-trouble .main .image{
	bottom: -15vw;
	width: 18vw;
}

.main-cause .common-title{
	background-position: 55% bottom;
	-webkit-background-size: 35vw auto;
	background-size: 35vw auto;
}
.main-cause .common-title strong{
	font-size: 4.2vw;
}
.main-cause .main{
	width: 94vw;
}
.main-cause .main h3{
	margin: 0 auto 5vw;
	width: 43.2vw;
	height: 6.5vw;
	line-height: 6.5vw;
	font-size: 3vw;
	background: url(/images/base/main-cause-h3-bg.png) no-repeat center center / cover;
}
.main-cause .main h3 strong{
	font-size: 4vw;
}

.ipad.safari .main-cause .main h3{
	font-size: 2.8vw;
}
.ipad.safari .main-cause .main h3 strong{
	font-size: 3.5vw;
}
.mac.safari .main-cause .main ul li h4{
	font-size: 2.5vw;
}
.main-cause .main ul li .text{
	font-size: 1.8vw;
}

.main-cause .but{
	position: relative;
	margin: 0 auto;
	height: 74px;
    max-width: 94vw;
}
.main-cause .but span{
	position: relative;
	display: block;
	z-index: 10;
	height: 74px;
	line-height: 74px;
}
.main-cause .but:before{
	display: block;
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
    border-style: solid;
    border-width: 74px 47vw 0 47vw;
    border-color: #716D6A transparent transparent transparent;
}
.main-cause .waste{
	max-width: 94vw;
}
.main-cause .waste .image{
	width: 22vw;
}
.main-cause .waste .text{
	width: calc(100% - 22vw);
	height: 306px;
	background: url(/images/base/main-couse-waste-bg.png) no-repeat center center;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
}
.main-cause .waste .text span{
	font-size: 3.5vw;
}

/* bathing */
.main-bathing .main{
	max-width: 94vw;
}
.mac.safari .main-bathing .main{
	height: 75vw;
}
.main-bathing .main ul li {
    width: 17vw;
    height: 12.6vw;
    font-size: 20px;
}
.main-bathing .main ul li:nth-child(1){
	left: 15vw;
}
.main-bathing .main ul li:nth-child(2){
	right: 15vw;
}
.main-bathing .main ul li:nth-child(6){
	left: 25vw;
}
.main-bathing .main ul li:nth-child(7){
	right: 25vw;
}

.main-bathing .main .image{
	bottom: 8vw;
	width: 35vw;
}
.main-bathing .point{
	max-width: 94vw;
}
.main-bathing .point-main ul li h4{
	font-size: 2.1vw;
	margin: 1vw 0;
}
.main-bathing .point-main ul li .text{
	font-size: 1.5vw;
}

/* bathadditive */
.main-bathadditive h2 .ja{
	font-size: 2.8vw;
	height: 7vw;
	line-height: 7vw;
	margin-bottom: 2vw;
}
.main-bathadditive h2 .ja strong{
	font-size: 3.1vw;
}
.main-bathadditive h2 .ja:before,
.main-bathadditive h2 .ja:after{
	display: block;
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-45%);
	width: 3.4vw;
	height: 7vw;
	background: url(/images/base/main-bathadditive-title-bg.png) no-repeat center center / cover;
}
.main-bathadditive h2 .ja:before{
	left: -4vw;
}
.main-bathadditive h2 .ja:after{
	right: -4vw;
	transform: scaleX(-1)  translateY(-45%);
}
.main-bathadditive h2 .sub{
	margin: 0 auto 1vw;
	width: 17.2vw;
	height: 8vw;
	font-size: 3.1vw;
	padding-top: .3em;
}
.main-bathadditive .main .banner{
	max-width: 94vw;
	margin: 0 auto 1vw;
	padding: 1.5vw 2.5vw;
}
.main-bathadditive .main .banner a .image{
	width: 30vw;
}
.main-bathadditive .main .banner a .texts{
	width: calc(100% - 30vw);
}
.main-bathadditive .main .banner a .texts .header{
	font-size: 3vw;
}
.main-bathadditive .main .banner a .texts .header strong{
	font-size: 3.8vw;
}
.main-bathadditive .main .banner a .texts .name .ja{
	font-size: 10vw;
}
.main-bathadditive .main .banner a .texts .name .en{
	font-size: 2.5vw;
}
.main-bathadditive .main .remarks{
	font-size: 1.6vw;
	margin: 0 auto;
	width: 94vw;
}

/* about */
.main-about{
	padding-bottom: 25vw;
}

/* ginger */
.main-ginger {
	padding: 17vw 0 7vw;
}
.main-ginger .main{
	max-width: 94vw;
}
.main-ginger .main .image{
	width: 40vw;
}
.main-ginger .main .plus{
	width: 10vw;
	font-size: 8vw;
}
.main-ginger .main .texts{
	width: 50vw;
}
.main-ginger .main .texts .ginger{
	position: relative;
	width: 50vw;
	height: 16vw;
	padding: 1vw 14vw 2vw 2vw;
	margin-bottom: 3vw;
}
.main-ginger .main .texts .ginger:before{
	top: -2vw;
	right: .5vw;
	width: 12vw;
	height: 20vw;
}
.main-ginger .main .texts .ginger h2{
	margin-bottom: 1vw;
	padding-bottom: .5vw;
	font-size: 3.5vw;
}
.main-ginger .main .texts .ginger h3{
	position: absolute;
	top: -8vw;
	right: 6.3vw;
	width: 14.3vw;
	height: 9vw;
	font-size: 1.6vw;
}
.main-ginger .main .texts .ginger .text{
	font-size: 2.7vw;
}
.main-ginger .main .texts .ginger .text span{
	font-size: 2.3vw;
}
.main-ginger .main .texts .ginger .text strong{
	width: 14vw;
	height: 3.5vw;
	line-height: 3.5vw;
}
.main-ginger .main .texts .features ul{
	gap: 2vw;
}
.main-ginger .main .texts .features ul li{
	width: 15vw;
	height: 15vw;
}
.main-ginger .main .texts .features ul li .header{
	font-size: 1.4vw;
	height: 3vw;
}
.main-ginger .main .texts .features ul li .header strong{
	font-size: 1.8vw;
}
.main-ginger .main .texts .features ul li h4{
	font-size: 2.7vw;
}

/* different */
.main-different{
	max-width: 94vw;
}
.main-different h2{
	width: 60vw;
	height: 20vw;
	font-size: 4.8vw;
}

/* trial */
.main-trial{
	margin: 0 auto 10vw;
	width: 60vw;
	height: 28vw;
}
.main-trial .catch{
	margin-bottom: 2vw;
	font-size: 2vw;
}
.main-trial .catch:before,
.main-trial .catch:after{
	display: block;
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2vw;
	height: 3vw;
}
.main-trial .catch:before{
	left: -3vw;
}
.main-trial .catch:after{
	right: -3vw;
	transform: scaleX(-1) translateY(-50%);
}
.main-trial .btns a{
	margin-bottom: 2vw;
	width: 40vw;
	height: 8vw;
	font-size: 3vw;
	padding-right: 4vw;
}
.main-trial .btns a:before{
	transform: translateY(-50%);
	left: 4vw;
	font-size: 1.5vw;
	width: 2vw;
	height: 2vw;
	line-height: 2vw;	
}
.main-trial .btns a span{
	font-size: 1.2vw;
}
.main-trial .header{
	font-size: 1.8vw;
	margin-bottom: 2vw;
	line-height: 1;
}
.main-trial .tel{
	font-size: 2vw;
}
.main-trial .tel a{
	font-size: 5vw;
}

/* adviser */
.main-adviser {
}
.main-adviser .main {
    max-width: 94vw;
}

.main-adviser .main .image {
    max-width: 40%;
}

.main-adviser .main .texts {
    max-width: 55%;
}

.main-adviser .main .texts .catch{
	margin: 0 0 -10px 20vw;
	width: 13.5vw;
	height: 8.9vw;
	font-size: 2vw;
}
.main-adviser .main .texts h3 {
    font-size: 4.5vw;
}
.main-adviser .main .texts h3 span{
	font-size: 2.5vw;
}
.main-adviser .main .texts .text {
    font-size: 1.5vw;
	line-height: 1.8;
}
.main-adviser .main .texts .text h4{
    font-size: 1.8vw;
	width: 7.7vw;
	height: 3.6vw;
	line-height: 3.6vw;
}

/* voice */
.main-voice{
	background: url(/images/base/main-voice-bg.png) no-repeat center 0 / cover;
}
.main-voice .main{
    max-width: 94vw;
}
.main-voice .main ul{
	gap: 10vw 5vw;
}

/* gift */
.main-gift h2{
	width: 71vw;
	height: 13vw;
	font-size: 3vw;
}

.main-gift .main>ul>li{
	padding: 2vw 3vw;
}
.main-gift .main>ul>li .label{
	top: -15px;
	left: 20px;
	width: 8.5vw;
	height: 7vw;
	line-height: 7vw;
	font-size: 1.7vw;
}
.main-gift .main>ul>li .label strong{
	font-size: 2vw;
}
.main-gift .main>ul>li .image{
	width: 40vw;
}



/* footer
------------------------------------------*/
#footer .main {
	padding: 2vw 2vw 1vw;
}

#footer .main .company {
	margin-bottom: 2vw;
}
#footer .main .company .logo a{
	margin-bottom: 1vw;
}
#footer .main .company .company-main .map,
#footer .main .company .company-main .googlemap iframe{
	width: 40vw;
}
#footer .main .company .company-main .fabout{
	width: 50vw;
}


.pagetop-btn-wrap {
	bottom: 15vw;
	right: 3vw;
	width: 5vw;
	height: 5vw;
	line-height: 5vw;
	font-size: 2vw;
}


/* Lower
------------------------------------------*/
/* heading */
.page-title-area-main{
	height: 15vw;
}
.page-title {
	font-size: 3vw;
}
.entry-title, .entry-content h2:not([class]) {
	font-size: 2vw;
}
.h3, .entry-content h3:not([class]) {
	font-size: 1.8vw;
}
.h4, .entry-content h4:not([class]) {
	font-size: 1.6vw;
}










































}