/* reset-----------------------------------------------------------*/
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, address, big, code, em, font, img,  small, strong,
ol, ul, li, form, label, table,  tr, th, td, dl, dd, dt,
article, aside, footer, header, menu, nav, section, summary, textarea,main,
figure,figcaption
{margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}
i{font-style:normal;}
.clx:after {clear: both;content: ' ';display: block;font-size: 0;line-height: 0;visibility: hidden;width: 0;height: 0;}
.clx { display: block; }
* html .clx { height: 1%; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
html {-webkit-text-size-adjust:none;-webkit-touch-callout: none;}
a {outline:none;text-decoration:none;}
iframe {border:none;}
ul, ol { list-style: none;}
img { border: none; vertical-align:bottom;max-width: 100%;height: auto;width /***/:auto;}
:focus { outline: 0;}
table { border-collapse: collapse;border-spacing:0;font-size:inherit;font:100%;}
h1, h2, h3, h4, h5, h6 {line-height:1.4;}
html {height: 100%;}
/* base -----------------------------------------------------------*/
body {
font: 1.0rem/1.231 "Sawarabi Mincho","Helvetica Neue","helvetica","Hiragino Kaku Gothic Pro","Verdana","Meiryo","Osaka","MS PGothic",sans-serif;
color:#000;
height: 100%;
overflow-x: hidden;
position: relative;
background:#FFF;
text-align:center;
letter-spacing:0.05rem;
}
::selection {}
::-moz-selection {}

a {color:#000;}
a:hover{ opacity:0.6;}

input, select, textarea{ font-family:"Sawarabi Mincho","Helvetica Neue","helvetica","Hiragino Kaku Gothic Pro","Verdana","Meiryo","Osaka","MS PGothic",sans-serif;}

/* module
-----------------------------------------------------------*/
.flt_l { float:left; }
.flt_r { float:right; }
.clear { clear:both; }
.txt_al { text-align:left; }
.txt_ar { text-align:right; }
.txt_ac, .center{ text-align:center !important; }

.txt_s{ font-size:2.2vw!important; }
.txt_b{ font-size:5vw!important; }

.mb10{ margin-bottom:10px!important; }
.mb15{ margin-bottom:15px!important; }
.mb20{ margin-bottom:20px!important; }
.mb25{ margin-bottom:25px!important; }
.mb35{ margin-bottom:35px!important; }
.mb40{ margin-bottom:40px!important; }
.mb45{ margin-bottom:45px!important; }
.mb50{ margin-bottom:50px!important; }
.mb60{ margin-bottom:60px!important; }
.mb80{ margin-bottom:80px!important; }

.w60{ width:60%;}

.p_mb p{ margin-bottom:20px;}

/* header
-------------------------------------*/
#header {width:100%; height:75px; text-align:left; position:relative; position:fixed;background:#FFF;transition: .3s;}
#header h1 img{ height:75px;transition: .3s;}

#menu_btn{width:60px;height:75px; position:relative; position:absolute; right:0; top:0; z-index:9999;}

#menu_btn_icon{ display: block; position: absolute; top:34px; left: 15px; width: 28px; height: 4px; background: #000; opacity: 1; transition: .2s;}
#menu_btn_icon:before, #menu_btn_icon:after{ display: block; content: ""; position: absolute; left: 0; width: 28px; height: 4px; transition: .3s; top: 50%; background: #000;}
#menu_btn_icon:before{margin-top: -14px;}
#menu_btn_icon:after{ margin-top: 10px;}

#menu_btn.close{position:fixed;}
#menu_btn.close #menu_btn_icon{background: transparent;}
#menu_btn.close #menu_btn_icon:before, #menu_btn.close #menu_btn_icon:after{ margin-top: 0;width: 30px;}
#menu_btn.close #menu_btn_icon:before{ -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
#menu_btn.close #menu_btn_icon:after{ transform: rotate(-135deg); -webkit-transform: rotate(-135deg);}

#tel_btn{width:60px;height:75px; position:relative; position:absolute; right:60px; top:0; display:table;}
#tel_btn p{ display:table-cell; text-align:center; vertical-align:middle;width:60px;height:75px; }
#tel_btn a{ padding:0.7rem 0.55rem; line-height:1.3rem; font-size:1.3rem;border:1px solid #000; border-radius:5rem; letter-spacing:0; display:inline-block;}

@media screen and (max-width: 360px) {
#header {height:60px;}
#header h1 img{ height:60px;}

#menu_btn{width:55px;height:60px; position:relative; position:absolute; right:0; top:0; z-index:9999;}

#menu_btn_icon{ top:28px; height: 3px;width: 25px;}
#menu_btn_icon:before, #menu_btn_icon:after{ height: 3px; width: 25px;}
#menu_btn_icon:before{margin-top: -12px;}
#menu_btn_icon:after{ margin-top: 8px;}

#tel_btn{width:60px;height:60px; position:relative; position:absolute; right:50px; top:0; display:table;}
#tel_btn p{ display:table-cell; text-align:center; vertical-align:middle;width:60px;height:60px; }
#tel_btn a{ padding:0.7rem 0.58rem; line-height:1.1rem; font-size:1.1rem;border:1px solid #000; border-radius:5rem; letter-spacing:0; display:inline-block;}
}

#wrap {display: none; position:fixed; top:0; left:0; background:#d3d3d4; border:1px solid #fff; box-sizing:border-box; height:100vh; width:100vw; z-index:8888;}

#nav{font-size:3.7vw;padding:40px 0 0;}
#nav ul{ width:80%; margin:auto;}
#nav li{ text-align:center; border-bottom:1px dotted #000;}
#nav li a{ display:block; padding:12px 0;}

/* footer
-------------------------------------*/
#footer { font-size:0.75rem; padding:2rem 0;}
#footer img{ width:75%;}
#footer p{}

/* common
-------------------------------------*/
.inner{padding:1rem;}
.btn_list li{ width:30%; padding:1rem 0.3rem; box-sizing:border-box; display:inline-block;} 
hr{ height:1px; width:100%; border:none; background:#000;}

#main{ font-size:3.8vw; line-height:4vh; padding-top:75px;}
@media screen and (max-width: 360px) {
#main{ padding-top:60px;}
}
/* top
-------------------------------------*/
#news_area{ padding:1.2rem;}
#news_area p{ padding:0.7rem 0 0; text-align:center; font-size:0.75rem;}

/* about
-------------------------------------*/
#movie_area h3{ border:1px solid #000; padding:0.8rem 0; margin:0 0 1rem;}

#method_area { text-align:left;}
#method_area ul{text-align:center;}
#method_area ul li{ width:49%; padding:0.7rem 0.1rem;text-align:center; box-sizing:border-box; display:inline-block; vertical-align:top;font-size:3.2vw; line-height:3.5vh;} 
#method_area ul li:last-child{ width:100%;}
#method_area ul li:last-child img{ display:inline-block; width:30%;}
#method_area ul li:last-child p{ display:inline-block; width:50%; text-align:left;}
#method_area .inner{padding:0.6rem;font-size:3.2vw; line-height:3.5vh;}

/* company
-------------------------------------*/
#text_area{ text-align:left;font-size:3.2vw; line-height:3.5vh;}
#text_area .profile dl{ margin:0 0 10px; font-size:3vw; line-height:3.1vh; letter-spacing:0;}
#text_area .profile dl dt{ display:inline-block; width:22vw; border-right:1px solid #000; vertical-align:top;}
#text_area .profile dl dd{ display:inline-block; width:60vw;  padding:0 10px;vertical-align:top;}
#text_area .list{ list-style:decimal; padding:0 0 0 1rem;}

.btn_blc a{ background:#000; padding:0.7rem 2rem; display:inline-block; color:#fff;font-size:3.5vw;} 

/* contact
-------------------------------------*/
.tel_area{ border-top:1px solid #000; border-bottom:1px solid #000; padding:0.4rem; font-size:3vw;}
.tel_area span{font-size:5vw; vertical-align:middle; padding:0 0.3rem;}
#contact_area p{font-size:3.2vw; line-height:3.5vh;}
#contact_area dl{ text-align:left; font-size:3.2vw; line-height:3.5vh; padding:0 0 1rem;}
#contact_area dl dt{ display:inline-block; width:25vw; vertical-align:top; text-align:right;}
#contact_area dl dt span{ display:block; color:#d4145a;font-size:2vw; line-height:1.5vh;}
#contact_area dl dd{ display:inline-block; width:62vw; vertical-align:top;}
#contact_area dl dd input[type=text]{ width:100%; padding:0.4rem;-webkit-appearance: none;border-radius: 0;border:1px solid #a9a9a9;}
#contact_area dl dd input[type=number]#zip{ width:16vw; padding:0.3rem; -webkit-appearance: none;border-radius: 0;border:1px solid #a9a9a9;}
#contact_area dl dd select{padding:0.4rem 4rem 0.4rem 0.4rem;-webkit-appearance: none;-moz-appearance: none;appearance: none;border-radius: 0;border:1px solid #a9a9a9;background:url(../img/arrow.png) right center no-repeat; text-indent: 0.01px;text-overflow: '';}
select::-ms-expand { display: none;}
#contact_area dl dd textarea{padding:0.4rem; border:1px solid #a9a9a9;width:100%;-webkit-appearance: none;border-radius: 0;}
#contact_area dl dd #btn{ background:#ccc; border:none; padding:0.5rem 0.3rem; margin:0 0 0 0.3rem; cursor:pointer;font-size:3vw; vertical-align:top;-webkit-appearance: none;border-radius: 0;}
#contact_area input[type=submit]{ background:#000; border:none; padding:0.7rem ; color:#fff; cursor:pointer; display:block; width:100%;-webkit-appearance: none;
   border-radius: 0;}
#contact_area input[type=checkbox], #contact_area  input[type=radio]{ display:none;}
[class*="check_"] {
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
  position: relative;
  display: inline-block;
  padding: 0 0 0 42px;
  vertical-align: middle;
  cursor: pointer;
}
.check_radio,
.check_checkbox{ padding: 0 0 0 42px;}

[class*="check_"]:after {
  -webkit-transition: border-color 0.2s linear;
  transition: border-color 0.2s linear;
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  border: 1px solid #a9a9a9;
  content: '';
}
.check_radio:after,
.check_checkbox:after{margin-top: -16px;width: 2rem;height: 2rem;}

[class*="check_"]:before {
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  position: absolute;
  top: 50%;
  display: block;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  content: '';
  opacity: 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.check_radio:before,
.check_checkbox:before{left: 12px;margin-top: -9px; width: 8px; height: 14px;}
input[type=radio]:checked + [class*="check_"]:before,
input[type=checkbox]:checked + [class*="check_"]:before{
  opacity: 1;
}
#contact_area input[type=checkbox]:checked, #contact #text_area input[type=radio]:checked{background:url(../img/check.png) center center no-repeat;}
#contact_area input[type=checkbox],
#contact_area input[type=radio]{ width:32px; height:32px; vertical-align:middle;}

.guide{ border-top:1px solid #000; border-bottom:1px solid #000; padding:2rem 2.2rem;font-size:3vw; line-height:3.2vh;}
.guide p{ font-size:2.7vw !important; line-height:2.3vh !important; }

/* fun
-------------------------------------*/
#efficacy_area{font-size:3.1vw; line-height:3.5vh; }
#efficacy_area  h3{ font-size:3.9vw;line-height:4vh; border-bottom:1px solid #000; margin:0 0 0.7rem;}

#make_area h2{ border:2px solid #000; width:45vw; display:inline-block; padding:1.2rem 0;}
#make_area ul { padding:0 1rem; width:100%; box-sizing:border-box;}
#make_area ul li{ display:inline-block; padding:0 0.5rem 3rem; text-align:left; width:47%; box-sizing:border-box; vertical-align:top;}
#make_area ul li img{ margin:0 0 0.5rem;}
#make_area ul li p{font-size:3vw; line-height:3vh;  display:block;}

#lifestyle_area h2{ border:2px solid #000; width:80vw; display:inline-block; padding:1.2rem 0;}

/* product
-------------------------------------*/
#main_area .cap{ padding:1rem 0.7rem;}
#main_area .cap img{ float:left; width:18vw;}
#main_area .cap p{ float:right; width:73vw; text-align:left;font-size:3.1vw; line-height:3.5vh; }
#main_area .btn a{border-top:1px solid #777; border-bottom:1px solid #777; padding:0.7rem 0;font-size:3.4vw; line-height:3.2vh; display:block;}

#list_area .block{ margin:0 0 3rem;}
#list_area .block .clx{ padding:0 0.8rem 1.5rem;}
#list_area .block .flt_l{ width:40vw;}
#list_area .block .flt_r{ width:48vw; text-align:left;}
#list_area .block .flt_r h3{ margin:0 0 0.8rem;}
#list_area .block .flt_r p{font-size:3vw; line-height:2.8vh;}
#list_area p a{ display:block; border-bottom:1px solid #777; padding:0.5rem 0;}


/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/*
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxContent{margin-top:32px; overflow:visible; background:none;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{}
        #cboxLoadingGraphic{background:url(../img/loading.gif) no-repeat center center;}
        #cboxLoadingOverlay{background:#000;}
        #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow { display:none;}
        #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(../img/controls.png) no-repeat 0 0;}

        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxPrevious{background-position:0px 0px; right:44px;}
        #cboxPrevious:hover{background-position:0px -25px;}
        #cboxNext{background-position:-25px 0px; right:22px;}
        #cboxNext:hover{background-position:-25px -25px;}
        #cboxClose{background-position:-50px 0px; right:0;}
        #cboxClose:hover{background-position:-50px -25px;}
        .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
        .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
        .cboxSlideshow_on #cboxSlideshow:hover{background-position:-100px -25px;}
        .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
        .cboxSlideshow_off #cboxSlideshow:hover{background-position:-75px -25px;}

/* modal
-------------------------------------*/

body#slide{ width:100vw; height:auto; max-width:750px; text-align:center; background:#000;}
body#slide .frame{ position:relative;width:100%; height:100%; }
body#slide .frame .txt{ position:relative; position:absolute; z-index:100; left:0; top:0; height:100%; width:100%;box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; padding:20px 20px;background:#ffffec;} 

body#slide .frame h2{ font-size:4vw; padding:0 0 10px; border-bottom:1px solid #000; margin:0 0 20px; letter-spacing:0.1em;}
body#slide .frame p{font-size:3.2vw; padding:0 0 15px; line-height:3.7vh;letter-spacing:0em;}
body#slide .frame .big{font-size:4vw; padding:0 0 15px; line-height:3.6vh;}
body#slide .frame .btn{font-size:2.4vw;position:absolute; bottom:25px; left:0; width:100%;}
body#slide .frame .btn .next{ padding:6px 10px; border:1px solid #000; display:inline-block;}
body#slide .frame .btn:after{ content:url(../img/arrow_modal.png); padding:0 0 0 10px;}

body#slide .frame .btn02{font-size:2.4vw;position:absolute; bottom:25px; right:10px;}
body#slide .frame .btn02 .close{ padding:6px 10px; border:1px solid #000; display:inline-block;}

body#slide .frame .img01{ width:30vw; margin:0 auto;}
body#slide .frame .img02{ width:50vw;margin:0 auto;}

body#slide .movie-wrap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
body#slide .movie-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80%;
}