/*=============================
.btn-trigger
=============================*/
.btn-trigger {
  position: relative;
  width: 50px;
  height: 44px;
  cursor: pointer;
}
.btn-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #fff;
  border-radius: 4px;
}
.btn-trigger, .btn-trigger span {
  display: inline-block;
  transition: all .5s;
  box-sizing: border-box;
}
.btn-trigger span:nth-of-type(1) {
  top: 0;
}
.btn-trigger span:nth-of-type(2) {
  top: 20px;
}
.btn-trigger span:nth-of-type(3) {
  bottom: 0;
}

/*=============================
#btn07
=============================*/
#btn07 span:nth-of-type(1) {
  -webkit-animation: btn07-bar01 .5s forwards;
  animation: btn07-bar01 .5s forwards;
}
@-webkit-keyframes btn07-bar01 {
  0% {
    -webkit-transform: translateY(20px) rotate(45deg);
  }
  50% {
    -webkit-transform: translateY(20px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(0) rotate(0);
  }
}
@keyframes btn07-bar01 {
  0% {
    transform: translateY(20px) rotate(45deg);
  }
  50% {
    transform: translateY(20px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
#btn07 span:nth-of-type(2) {
  transition: all .25s .25s;
  opacity: 1;
}
#btn07 span:nth-of-type(3) {
  -webkit-animation: btn07-bar03 .5s forwards;
  animation: btn07-bar03 .5s forwards;
}
@-webkit-keyframes btn07-bar03 {
  0% {
    -webkit-transform: translateY(-20px) rotate(-45deg);
  }
  50% {
    -webkit-transform: translateY(-20px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(0) rotate(0);
  }
}
@keyframes btn07-bar03 {
  0% {
    transform: translateY(-20px) rotate(-45deg);
  }
  50% {
    transform: translateY(-20px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
#btn07.active span:nth-of-type(1) {
  -webkit-animation: active-btn07-bar01 .5s forwards;
  animation: active-btn07-bar01 .5s forwards;
}
@-webkit-keyframes active-btn07-bar01 {
  0% {
    -webkit-transform: translateY(0) rotate(0);
  }
  50% {
    -webkit-transform: translateY(20px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(20px) rotate(45deg);
  }
}
@keyframes active-btn07-bar01 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(20px) rotate(0);
  }
  100% {
    transform: translateY(20px) rotate(45deg);
  }
}
#btn07.active span:nth-of-type(2) {
  opacity: 0;
}
#btn07.active span:nth-of-type(3) {
  -webkit-animation: active-btn07-bar03 .5s forwards;
  animation: active-btn07-bar03 .5s forwards;
}
@-webkit-keyframes active-btn07-bar03 {
  0% {
    -webkit-transform: translateY(0) rotate(0);
  }
  50% {
    -webkit-transform: translateY(-20px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(-20px) rotate(-45deg);
  }
}
@keyframes active-btn07-bar03 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-20px) rotate(0);
  }
  100% {
    transform: translateY(-20px) rotate(-45deg);
  }
}

#header{width: 100%;position: fixed;top:0;background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.50) 100%);align-items: stretch;z-index: 999;transition: 0.5s}
#header.is_fixed{background:linear-gradient(0deg,rgba(178,163,148, 0) 0%,rgba(178,163,148, 0.5) 20%, rgba(178,163,148, 0.8) 100%);}

.flex{flex-wrap: wrap;}

body{font-size: 4vw;overflow: hidden;letter-spacing: 0}
#nav{
opacity: 0;
visibility: hidden;
pointer-events: none;

position: fixed;
top:0;
left:0;
width: 100%;
height: 100vh;

background: rgba(178,163,148,0.9);

display: flex;

transition: opacity 0.5s ease, visibility 0.5s ease;
}

#nav.active{
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.sp{display:block}
.pc{display:none}
#header #logo {width: 25vw}
#header #logo img{width: 100%;}
#header #nav .flex{display: flex;flex-wrap: wrap;align-content: center;justify-content: center;}
#header #nav .flex li{width: 100%;margin: 0}
#header #nav a{padding: 2vh 0}
.btn-trigger{margin: 5vw 2.5vw 1vw}
 em{display: block;text-align: center;color:#fff;font-size: 3.5vw}
#mainview{font-size: 10px}
#mainview .scroll{display: none;}
#mainview div.box{bottom:3.5vw;right: 2.5vw;font-size: 120%}
#mainview div.box p{letter-spacing: 0;line-height: 140%;margin: 0 0 1.5vw}
#mainview div.box h2{line-height: 150%;letter-spacing: 0}
#mainview .sell{bottom: -5vw;width: 30vw}

#header #nav ul li:last-child img{width: 5vw ;height: 5vw}
#header #nav ul li:last-child .btn{width: 80%;margin: 0 auto;}

.block800{width: 96%;margin: 0 auto;}
.tl{margin: 0 0 7vw;font-size: 130%}
.pa{padding: 10vw 0}
.pab0{padding: 10vw 0 0}
.pat0{padding:  0 0 10vw}
#sns{display: none;}

.sec01 li{width: 80%;margin: 0 auto 5vw}
.sec01 li:last-child{margin-bottom: 0}
.sec01 li p{margin: -6vw 0 0}
.sec01 li h3{font-size: 120%}

.sec02 .tl{margin-bottom: 4vw}
.sec02{background: url(../img/sec02_bk.png) no-repeat -75vw center;background-size: cover;}
.sec02 .copy{line-height: 180%;letter-spacing: 0}
.sec02 .sec02_bk{background: url(../img/logo.png) no-repeat 2% 0;background-size: 15vw}
.sec02 .copy{font-size: 100%;}
.sec03 .ph{width: 50%;margin: 0 auto;}
.sec03 .copy{width: 100%;margin: 7vw 0 0;font-size: 100%;}
.sec03 .copy p{padding: 1vw 0;}
.sec03 .copy .copy2{padding: 6vw 0}
.tl_copy{margin: -3vw 0 5vw}
.sec05 .beginner{padding: 5vw;text-align: center;}
.sec05 .beginner .flex{display: inline-block;margin: 0 auto;border-bottom: dotted 1px rgba(178,163,148,1);}
.sec05 .beginner li{width: 100%;display: flex;text-align: left;border-right: none;border-top: dotted 1px rgba(178,163,148,1);padding: 5vw;align-items: center;}
.sec05 .beginner li img{width: 20%;margin: 0 5% 0 0 ;height: auto;vertical-align: middle;}
.sec05 .beginner h2{margin-bottom: 5vw}

#conversion .tl{margin-bottom: 5vw}
#conversion .btn a,
.btn a{width: 80%;}

#foot_area{padding: 10vw 5vw 20vw}
.news .flex li{width: 100%;margin: 0 0 5vw}
.news .flex li:last-child{margin-bottom: 0}
.news .flex li a{display: flex;justify-content: space-between;align-items: center;}
.news .flex li a img{width: 30%;height: auto;}
.news .flex li a div{width: 65%;line-height: 120%}
.news .flex li span{padding: 0 0 2vw}
.news .flex{margin: 0 0 8vw}
#foot_area .logo{width: 30vw;margin: 0 auto 5vw}
#foot_area .flex{text-align: center;}
#foot_area .btn{padding: 5vw 0 0 }
#foot_area .ft_nav{width: 100%;margin: 5vw 0 0 }
#foot_area .ft_nav a{padding: 2vw 0;display: block;}
.copyright{text-align: center;padding: 10vw 0 20vw}
#foot_area .ft_nav .flex li{margin:  0 3vw}
#foot_area .ft_nav .flex{justify-content: center;}

#second #mainview{width: 140vw;margin: 0 -20vw}
#second #mainview h1{font-size: 200%;letter-spacing: 0;margin: 16vw 0 0 }
#second #mainview h1 span{padding: 1vw 0 0;line-height: 100%;}

.f_sec01 .box{padding: 3vw 6vw}
.f_sec01 .box li{font-size: 100%;margin-left: 0 !important;margin:2vw}
.f_sec01 p{width: 35vw;right: -5vw}
.f_sec01 .box li{ padding-left: 5vw;background: url(../img/check.svg) no-repeat left 1vw;background-size: 4.3vw 3.6vw;line-height: 140%;width: 80%}

.f_sec02 .flex{align-items: flex-start;}
.f_sec02 .flex li h3{font-size: 120%;padding: 2.5vw 0 1vw;line-height: 130%;}
.f_sec02 .flex li p{line-height: 140%}
.f_sec02 .flex li p br{display: none;}
.f_sec03 li{padding: 3vw}
.f_sec03 li h3{margin-bottom: 1vw}

.m_sec03 .tl_copy{padding: 3vw 0 4vw;margin: -5vw 0 0}
.page_copy br {display: none;}

.m_sec01 table{display: block;border-top: solid 1px #918070;}
.m_sec01 table th,
.m_sec01 table td{display: block;width: 100%;border-bottom: none;border-top: none;padding:5vw 0 }
.m_sec01 table th{padding:5vw 0 2vw;}
.m_sec01 table td{padding:0 0 5vw;border-bottom: solid 1px #918070;}
.m_sec02 .beginner li{text-align: center;display: block;}
.sec04 .shampoo{display: block;width: 96%;margin: 5vw auto 0}
.sec04 .shampoo div h3{font-size: 120%;}
.sec04 .shampoo div{padding: 5vw }
.sec04 .shampoo div p{line-height: 140%}
.sec04 .shampoo div{width: 100%;}
.sec04 .shampoo .img{width: 100%;overflow: hidden;}
.s_sec01 .copy .box{padding: 10vw 5vw}
.s_sec01 .copy p{line-height: 140%}
.s_sec01 .copy .box dd{margin-bottom: 0.5vw;line-height: 140%;}
.s_sec01 .copy .box dl{margin: 2vw 0 2vw}
.n_sec #sidebar,
.n_sec .left{width: 100%;}
.blogsingle .entrybody h2 a{font-size: 120%;}
.blogsingle .entrybody .btn {padding: 2vw 0 0}
.blogsingle .entrybody .btn a {width: 100%;}
.c_sec01 .flex li{width: 100%;font-size: 120%;}

.c_sec02 strong{font-size: 10vw}
.c_sec02 strong img{width: 5vw;margin-right: 1vw}
.c_sec02 p{padding: 2vw 0 0}
.c_sec03 .tl_copy br{display: none;}

.c_sec03 table{display: block;border-top: solid 1px #918070;}
.c_sec03 table th,
.c_sec03 table td{display: block;width: 100%;border-bottom: none;border-top: none;padding:5vw 0 }
.c_sec03 table th{padding:5vw 0 2vw;}
.c_sec03 table td{padding:0 0 5vw;border-bottom: solid 1px #918070;}
.c_sec03 .btn input{width: 45%;margin-top: 5vw}

.single .n_sec .entrysingle h3{line-height: 140%}
.sec04 .flex{display: block;margin: 0 2%}
.sec04 li{width: 100%;}
.sec04 li:nth-child(2){margin: 2vw 0}
.sp_conv{position: fixed;bottom: 0;left: 2%;width: 96%;background: #fff;border: solid 1px #918070;border-bottom:none;border-radius: 5px 5px 0 0 }
.sp_conv p{text-align: center;padding: 2vw 0 1vw;color:#918070;}
.sp_conv ul{padding: 0 0.5vw}
.sp_conv li{width: 33.333%;text-align: center;}
.sp_conv li a{padding: 3vw 0;display: flex;color:#000;justify-content: center;align-items: center;background: rgba(178, 163, 148, 0.2);margin: 1vw 0.5vw;border-radius: 5px}
.sp_conv li a img{ height:6vw;width: auto;vertical-align: middle;margin: 0 1vw 0 0}
.sp_conv li a span{ line-height: 100%; }
#header #nav ul li:last-child {line-height: 100%;}
#header #nav ul li:last-child a:after{display: none;}
#header #nav ul li:last-child a{text-decoration: none;}
#header #nav ul li:last-child span{padding: 2vw 0 0 }
.c_sec03 td input, .c_sec03 td textarea{font-size: 120%;}