@charset "UTF-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}

html{
overflow-y:scroll;
 overflow-y: scroll; -webkit-overflow-scrolling: touch
height:100%;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}


body {
color:#333;
text-align: center;
font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Arial,Helvetica,sans-serif;
font-size:92%;
line-height:155%;
margin:0;
}

div article{
text-align:center;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

input, textarea{
margin: 0;
padding: 0;
}

ol, ul{
list-style:none;
}

table{
border-collapse: collapse; 
border-spacing:0;
height: auto;
max-width: 100%;
width: auto;
}

th,td{
height: auto;
max-width: 100%;
width: auto;
}

caption, th{
text-align: left;
}
a{
    color: #7B8CBC;
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}

a:focus {
outline:none;
}

.clearfix:after {
content: "."; 
display: block;
clear: both;
height: 0;
visibility: hidden;
}

.clearfix {
min-height: 1px;
}

* html .clearfix {
height: 1px;
/*¥*//*/
height: auto;
overflow: hidden;
/**/
}

.br:before {
content: "\A" ;
white-space: pre ;
}

img {
height: auto;
max-width: 100%;
vertical-align: bottom;
width: auto;
}

h2 {
    margin-top:110px;
padding-top:15px;
padding-bottom: 5px;
font-size:270%;
line-height: 1;
font-weight: normal;
    background-color: #E7E7E5;
}

h3 {
padding-bottom: 15px;
font-size: 105%;
line-height: 1;
letter-spacing:0.1em;
font-weight:normal;
margin-bottom: 50px;
    background-color: #E7E7E5;
}
h4 {
margin-bottom: 10px;
font-size:150%;
line-height: 1;
font-weight:bold;
    text-align: left;
}
h5 {
margin-bottom: 14px;
font-size:150%;
line-height: 1;
font-family: "游明朝", "Yu Mincho", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-weight: 800;
    text-align:left;
}

p {
    margin:0;
}

.left-side{
float:left;
}
.right-side{
float:right;
}
#main {
margin:0 auto;
width: 100%;
}
/**#frame{
    margin-top:110px;
}**/
.sp {
  display: none;
}
@media (min-width: 898px) {
.br_pc{
display: none;
}
}
@media (max-width: 899px) {
.pc {
  display: none;
}
.br_sp{
display: none;
}
}
#header_pc {
height: 105px;
width: 100%;
box-shadow: 0 3px 5px rgba(0,0,0,0.1);
background: #fff;
}

.fixed {
position: fixed;
top: 0px;
z-index: 9999;
}
#header_pc .container {
width: 100%;
margin: 0 auto;
position: relative;
height: 70px;
}
@media only screen and (min-width:1501px) {
#header_pc .container {
width: 85%;
}
#main {
width: 80%;
}
}
#header_pc #logo {
position: absolute;
left: 40px;
top: 5px;
}
#header_pc #logo a:hover {
opacity: 0.6;
}
#header_pc #header_right{
    float:right;
    text-align: right;
    margin:45px 50px 0 0;
}
#header_pc .global_navi {
	text-align: left;
}
@media only screen and (max-width:1000px) {
#header_pc .global_navi {
}
}
#header_pc .global_navi li {
display: inline;
text-align: center;
font-size: 100%;
line-height: 1;
margin-left: 35px;
line-height:1.7;
}
#header_pc .global_navi a {
color: #333;
text-decoration: none;
}
#header_pc .global_navi a:hover {
color:#2F3F7A;
border-bottom: #2F3F7A dotted 1px;
}

#header_sp {
display:none;
}


.content{
        width:80%;
        margin:0 auto;
        max-width:1200px;
    }
.content img{
    width:100%;
}
#top {
text-align:center;
    margin-top:60px;
}

#top .title{
    font-size:160%;
    font-weight:bold;
}
#top ul {
margin:15px auto 35px auto;
text-align:center;
width:100%;
}

#top li {
width: 23%;
float:left;
}

#top li.left-side {
margin-right:2.66%;
}

#top .thumbnail img{
width:100%;
height:100%;
	margin-bottom: 5px;
}

#top .product_name{
margin-top:3px;
text-align:center;
    font-size:90%;
    line-height:145%;
}
    #top .about{
        width:100%;
        margin:40px auto 50px auto;
    }
    #top .about img{
        width:100%;
    }
#topix{
width:100%;
margin:20px auto;
}
#topix .left-side{
width:56%;
}
#topix .right-side{
width:42%;
}
#topix .title{
font-size:150%;
border-bottom:1px solid #000;
text-align:left;
margin-bottom:15px;
}
#topix dl {
flex-wrap: wrap;
height:120px;
overflow: auto;
font-size:95%;
}
#topix .left-side dl dt {
width: 98%;
text-align:left;
}
#topix .right-side dl dt {
width: 98%;
text-align:left;
}
#topix .left-side dl dd {
text-align:justify;
width: 98%;
    margin-bottom:7px;
}
#topix .right-side dl dd {
text-align:justify;
width: 98%;
}
    #topix .right-side dl dd p{
        width:70%;
        float:left;
    }
    #topix .right-side dl dd img{
        width:26%;
        float:right;
    }
    .part_img_left{
        margin:0 auto 60px auto;
    }
    .part_img_left .left-side{
        width:30%;
    }
   .part_img_left .right-side{
        width:68%;
        text-align:justify;
    }
    .part_img_right{
        margin:0 auto 60px auto;
    }
    .part_img_right .left-side{
        width:68%;
        text-align:justify;
    }
   .part_img_right .right-side{
        width:30%;
    }
    .part_img_right .left-side78{
        width:73%;
        text-align:justify;
    float: left;
    }
   .part_img_right .right-side20{
        width:25%;
       float: right;
    }
.part_img_left .right-side78{
        width:73%;
        text-align:justify;
       float: right;
    }
.part_img_left .left-side20{
        width:25%;
    float: left;
    }
    .part_img_right .left-side45{
        width:40%;
        text-align:justify;
    float: left;
    }
   .part_img_right .right-side53{
        width:58%;
       float: right;
    }
    .part,.part_center{
        margin:0 auto 60px auto;
    }
    .part h4{
        text-align:left;
    }
    .part p{
        text-align:justify;
        margin-bottom:15px;
    }
    .part_center h4{
        text-align:center;
  }
    .part_center p{
        text-align:center;
        margin:0 auto 15px auto;
        width:85%;
    }

.part p.small,.part_img_left p.small,.part_img_right p.small{
    font-size:80%;
    line-height:145%;
}
.index_cellista img{
    border-radius: 10px;
}
.index_cellista a img{
    border:1px solid #ccc;
}

.index_cellista a:hover img{
    border:1px solid #2E2E2E;
}
.block{
width:96%;
margin:0 auto 30px auto;
border:1px solid #776249;
padding:2%;
}
.block .box{
width:100%;
margin:0 auto;
}
.block p{
    font-size:92%;
    line-height: 155%;
}

.block .two div{
width:48%;
  position: relative;
  text-align:center;
}
.block .two .left-side{
margin-right:4%;
}
.block .two p{
text-align:justify;
}
.block .two div img{
}
.block figure{
width:36%;
    float:left;
    margin:0 12px 12px 0;
}
.block .three div{
width:31%;
  position: relative;
  text-align:center;
}
.block .three .left-side{
margin-right:3.5%;
}
.block .three p{
text-align:justify;
margin-bottom:10px;
}
.block .five div{
width:18%;
  position: relative;
  text-align:center;
}
.block .five .left-side{
margin-right:2.5%;
}
.block .five p{
text-align:justify;
margin-bottom:10px;
}
.block .box .title{
width:90%;
font-size:130%;
padding:7px 0 5px 12px;
text-align:left;
font-weight:bold;
margin-bottom:8px;
color:#fff;
}
.block .essence_text{
    margin-bottom:15px;
}
.block .two .title{
width:96.5%;
}
.block .three .title{
width:94.5%;
}

.block .three .title,.block .two .title{
background-color:#2F3F7A;
border-radius: 8px;
}
.block .five .title{
background-color:#7B8CBC;
border-radius: 8px;
}

.block .box .small{
font-size:90%;
}

.block .box p.last{
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
font-size:110%;
padding-top:15px;
padding-bottom:40px;
font-weight:600;
}

.block02{
width:100%;
margin:0 auto 30px auto;
}
.block02 .box{
width:100%;
margin:0 auto;
}
.block02 p{
    font-size:92%;
    line-height: 155%;
}
.block02 .three div{
width:31%;
  position: relative;
  text-align:center;
}
.block02 .three .left-side{
margin-right:3.5%;
}
.block02 .three p{
text-align:justify;
margin-bottom:10px;
}
.block02 .box .title{
width:100%;
font-size:130%;
text-align:center;
font-weight:bold;
margin-bottom:8px;
    border-top: 1px dashed #666;
    border-bottom: 1px dashed #666;
    padding:10px 0 8px 0;
}
.block02 .box img{
margin-top:12px;
}


.history h4{
    font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    font-size: 145%;
    line-height: 1.4;
}
.color01{
    color:#7B8CBC;
}
.color02{
    color:#2F3F7A;
}
.under{
    border-bottom: 1px dotted;
    padding-bottom:6px;
}
.history_back01{
    width:100%;
    background-image:url("../images/history_back01.png");
    background-repeat: no-repeat;
    padding: 0;
    margin-bottom: 60px;
    background-position: bottom;
}

.history_catch{
    width:100%;
    background-image:url("../images/history_back.jpg");
    background-repeat: no-repeat;
    padding: 20px 0;
    margin-bottom: 60px;
}
.history_catch p{
    margin:0 auto;
    text-align:center;
    font-size:160%;
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    line-height: 160%;
    letter-spacing: 0.1em;
}
img.mechanism05{
    width:80%;
    margin:20px auto;
}
@media (max-width: 899px) {
img.mechanism05{
width:90%;
}
}
   
#products .part{
    margin-bottom:60px;
}
#products .title01{
    font-size:140%;
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    margin-bottom:8px;
}
#products .title02{
    font-size:175%;
    line-height:1.2;
    letter-spacing: 0.06em;
}
#products img{
    margin:0 auto;
    width:70%;
}
#products .name{
    font-size:130%;
    font-weight:bold;
    margin:0 auto 10px auto;
    width:85%;
}
#products .detail01{
    text-align:justify;
    margin:0 auto 25px auto;
    width:85%;
}
#products .detail02{
    text-align:justify;
    width:85%;
    margin:0 auto;
}
#products hr{
    margin-bottom:60px;
    display: block;
    width: 100%;
    height: 1px;
    background-color: #2F3F7A;
    border: 0;
}
#howtouse .part{
}
#howtouse .part_movie{
    margin:0 auto 60px auto;
}
#howtouse .part_movie h4{
    font-size:130%;
}
#howtouse .part .title{
    text-align:justify;
    font-size:110%;
    margin-bottom: 10px;
    font-weight:600;
} 
#howtouse .part .title .number{
    background-color:#7B8CBC;
    color: #fff;
    padding: 2px 8px 0 8px;
    margin-right:5px;
}

#howtouse .part .left-side{
    width:40%;
}
#howtouse .part .right-side{
    width:58%;
}
#voice .part{
}
#voice h4{
    background-image: url("../images/voice_back.jpg");
    padding:12px 0 10px 8px;
    color:#fff;
}
#voice .part .part_img_left{
    width:100%;
    margin:0 auto;
}
#voice .part .part_img_left .left-side{
    width:16%;
}
#voice .part .part_img_left .right-side{
    width:82%;
}


#voice .part .voice_left{
    float: left;
    width:48%;
}
#voice .part .voice_right{
    float: right;
    width:48%;
}
#voice .part .voice_left .left-side,#voice .part .voice_right .left-side{
    width:32%;
}
#voice .part img{
    border-radius: 8px;;
}

#voice .part .voice_left .right-side,#voice .part .voice_right .right-side{
    width:64%;
}

#beforeafter .part{
background-color: #DFEFFE;
border-radius: 15px;
}
#beforeafter .part .part_img_left{
    width:94%;
    margin:0 auto;
    padding:3%;
}
#beforeafter .part .part_img_left .left-side{
    width:44%;
}
#beforeafter .part .part_img_left .right-side{
    width:54%;
}
#beforeafter .part .part_img_left .right-side .name{
    font-size: 110%;
    margin-bottom:10px;
    background-color: #7B8CBC;
    padding:7px 7px 3px 10px;
    color: #fff;
}
#beforeafter .part .part_img_left .right-side .title{
    font-size: 110%;
    margin-bottom:4px;
    font-weight: bold;
    padding:0 5px;
}
#beforeafter .part .part_img_left .right-side p{
    padding:0 5px;
}

#shoplist p,#voice p{
    font-size:110%;
    border-top:1px dotted #000;
    border-bottom:1px dotted #000;
    padding:8px 0 4px 0;
    margin-bottom:50px;
}
#shoplist .part .left-side{
    text-align:left;
    width:46%;
    padding-right:4%;
    padding-left:2%;
}
#shoplist .part .right-side{
    text-align:left;
    width:46%;
    padding-left:2%;
}
#shoplist .part ul {
}
#shoplist .part li{
    font-size:105%;
    margin-bottom: 25px;
}
#shoplist .part li:before{
    content:"■";
    color:#7B8CBC;
}
#shoplist .part li a{
    color:#000;
}

#shoplist .part li a:hover{
    color:#7B8CBC;
}

#contact {
text-align:center;
width:100%;
margin:0 auto 50px auto;
}
#contact p{
    margin-bottom:30px;
}

#contact form{
width:70%;
margin:0 auto;
}

#contact .frame {
padding: 30px;
width:80%;
margin:0 auto;
background-color:#f8eff2;
}

#contact table{
margin:0 auto 20px auto;
width:100%;
border-top:#666666 1px dotted;
border-left:#666666 1px dotted;
border-right:#666666 1px dotted;
background-color:#FFFFFF;
}

#contact table th{
text-align:center;
width:25%;
}

#contact table td{
text-align:left;
width:75%
}

#contact table th,#contact table td{
padding:20px;
border-bottom:#666666 1px dotted;
font-size:86%;
vertical-align:middle;
}

#contact table td .answer{
background:#EDEDED none repeat scroll 0 0;
border:#CCC 1px solid;
padding: 6px 4px;
height: auto;
max-width: 100%;
width:90%;
}

#contact table td .answer01{
width:90%;
}

#contact table td .answer02{
width:40%;
}

#contact table td .answer03{
width:25%;
}

#contact .submit {
width: 100%;
margin:0px;
}
#contact .submit input{
background-color: #7B8CBC;
font-size:110%;
font-weight:bold;
color:#fff;
border:0;
padding:20px;
}
#contact .submit input:hover{
background-color: #ccc;
color:#7B8CBC;
}

#company table{
margin:60px auto 40px auto;
border-spacing:5px;
border-collapse:separate;
width:100%;
}
#company th,.company td{
padding:20px 40px;
}
#company th{
background-color:#7B8CBC;
border: 1px solid #7B8CBC;
color:#fff;
    text-align:center;
}
#company td{
border: 1px solid #7B8CBC;
}
#company p{
    background-color: #E3E3E3;
text-align: justify;
    padding:20px;
    margin:50px auto 80px auto;
    border-radius: 8px;
}
#privacy p{
    text-align:justify;
    margin-bottom:35px;
}
#privacy .title{
    font-size:105%;
    font-weight:bold;
    margin-bottom:5px;
    text-align:left;
}
#privacy .title:before{
    content: "■";
}
#faq{
    margin-bottom:80px;
}
#faq .title{
    font-size:120%;
    font-weight:bold;
    margin-bottom:20px;
    background-color: #7B8CBC;
    padding:10px 0 5px 0;
    color:#fff;
}
#faq dl dt{
  margin: 0 0 9px 0;
    font-size:115%;
    text-align: left;
    border-bottom: 2px dotted #7B8CBC;
    padding:0 5px 5px;
}
#faq dl dd{
  margin: 0 0 35px 0;
    text-align: justify;
    padding:0 5px;
}
#faq dl dt:before,#faq dl dd:before{
  margin-right: 5px;
  color: #fff;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.3;
  text-align: center;
  display: inline-block;
  border-radius: 1em;
    font-family:"Comic Sans MS", "cursive";
}
#faq dl dt:before{
  font-size: 130%;
content: "Q";
  background: #94A9DC;
}
#faq dl dd:before{
  font-size: 145%;
content: "A";
  background: #CE93B1;
}
.howtouse{
margin-top:30px;
padding:40px;
text-align:center;
}

.howtouse div{
position: relative;
height: 0;
padding-bottom: 45.1%;
text-align:center;
width:100%;
}
.howtouse div iframe {
    position: absolute;
top:0;
left: 10%;
    width: 80.1%;
    height: 100%;
    margin: 0 auto;
}
#top .howtouse{
margin-bottom:60px;
}

@media (max-width: 899px) {
.howtouse{
padding:0;
background-color:none;
}
.howtouse div{
padding-bottom: 56.5%;
}
.howtouse div iframe {
left: 0;
    width: 100%;
    height: 99.55%;
}
}


#footer {
padding: 30px 0 10px 0;
background-color: #666;
text-align: center;
font-size: 	90%;
color: #fff;
    width:100%;
}
#footer a:hover {
color: #CCC;
    }
#footer a{
    color: #fff;
    text-decoration: none;
}

#footer #footer_navi {
	display: flex;
    margin:0 auto 20px auto;
    justify-content: center;
}
#footer #footer_navi li {
	display: block;
    padding:0 10px;
}

.manual_{
width:100%;
text-align:center;
}

.manual_inner{
width:96%;
padding:2%;
margin:0 auto;
max-width:1100px;
}
.manual_inner .part_movie{
margin:0 auto;
width:90%;
}
.manual_inner .part_movie .howtouse{
margin:0;
}


@media (max-width: 899px) {
#main {
width:100%;
margin-top:40px;
}
    .content{
        width:95%;
    }
#header_pc {
display:none;
}

#header_sp {
margin: 0 auto;
width:100%;
    display:block;
}
    #top,#concept{
        width:95%;
    }

#contact {
width:100%;
margin:0 auto;
padding-top: 30px;
}
#contact section {
}

#contact table{
margin:0 auto 15px auto;
width:90%;
border-top:#666666 1px dotted;
border-left:#666666 1px dotted;
border-right:#666666 1px dotted;
}

#contact table th{
text-align:center;
width:25%;
}

#contact table td{
text-align:left;
width:75%
}


#contact table th,#contact table td{
padding:10px 7px;
border-bottom:#666666 1px dotted;
font-size:86%;
vertical-align:middle;
}


#contact table td .answer{
background:#EDEDED none repeat scroll 0 0;
border:#CCC 1px solid;
padding: 5px 0;
height: auto;
max-width: 100%;
width:90%;
}

#contact table td .answer01{
width:90%;
}

#contact table td .answer02{
width:40%;
}

#contact table td .answer03{
width:25%;
}

#contact .submit {
　　-webkit-appearance: none;
width: 100%;
margin:0px;
}
#contact .submit input{
background-color: #eb6d82;
font-weight:bold;
color:#fff;
border:0;
padding:10px;
}
#contact .submit input:hover{
background-color: #ccc;
color:#eb6d82;
}

#footer {
background-color: #666;
text-align: center;
font-size: 	96%;
color: #fff;
margin-top:20px;
}



h2{
margin-top:65px;}

.paradeiser {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 40px;
background: rgba(255, 255, 255, 0.95);
-webkit-transition: top 0.4s ease;
transition: top 0.4s ease;
-webkit-backdrop-filter: blur(10px) saturate(100%);
backdrop-filter: blur(10px) saturate(100%);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding:5px;
}
.paradeiser.headroom--pinned {
top: 0;
}
.paradeiser.headroom--unpinned {
top: -40px;
}
.paradeiser a, .paradeiser .paradeiser_dropdown {
position: relative;
z-index: 5;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin: 0;
padding: 0;
color: #9b9b9b;
text-align: center;
text-decoration: none;
font-weight: 400;
font-size: 10px;
font-family: -apple-system, -apple-system-body, "Roboto", "Helvetica Neue", "Segoe UI", "Arial", sans-serif;
cursor: pointer;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 5;
-webkit-flex-grow: 5;
-ms-flex-positive: 5;
flex-grow: 5;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}

.paradeiser a.active, .paradeiser a:hover, .paradeiser .paradeiser_dropdown.active, .paradeiser .paradeiser_dropdown:hover {
}
.paradeiser span {
font-size: 13px;
}.paradeiser span.large {
font-size: 20px;
}

.paradeiser span.paradeiser_dropdown {
margin-right: 10px;
text-align:right;
}
.paradeiser span.paradeiser_dropdown a {
}
.paradeiser .paradeiser_logo {
max-height:40px;
/*height:100%;*/
}

.paradeiser_container{
width:100%;
}

.left{
float:left;
}
.right{
float:right;
}
.paradeiser ul {
position: fixed;
top: 40px;
bottom: 0;
left: 0;
z-index: 998;
visibility: hidden;
margin: 0;
padding: 0;
width: 100%;
height: auto;
text-align: center;
opacity: 0;
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
pointer-events: none;
}
.paradeiser ul:target, .paradeiser ul.open {
visibility: visible;
opacity: 1;
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
pointer-events: auto;
}
.paradeiser ul li {
display: inline-block;
width: 100%;
background: #7B8CBC;
text-align: center;
}
.paradeiser ul li a {
display: inline-block;
padding: 10px 0;
width: 100%;
color: #fff;
font-size: 110%;
}
.paradeiser ul li a:hover, .paradeiser ul li span:hover {
background: #5F6F93;
color: #fff;
}
.paradeiser ul li:last-child {
height: 100%;
background: transparent;
}
.paradeiser ul li:last-child a {
display: block;
height: 100%;
backdrop-filter: blur(10px) saturate(100%);
}
#top li.left-side {
margin-right:0;
}
#top li {
width: 44%;
float:left;
margin-left:3%;
margin-right:3%;
}
#shoplist .part .left-side{
    width:98%;
    padding-right:0;
}
#shoplist .part .right-side{
    width:98%;
}
#topix .left-side{
width:100%;
margin-bottom:30px;
}
#topix .right-side{
width:100%;
}
#topix .left-side dl {
height:240px;
}

#footer #footer_navi {
	display: block;
    margin:0 auto 20px auto;
    justify-content: center;
}
#footer #footer_navi li {
	display: block;
    width:95%;
}


}