@charset "utf-8";

/* basic design */
.article,.header,.footer {
width:100%!important;
max-width:100%!important;
}

a {
transition:opacity .2s;
}
a.underbar {
text-decoration: underline;
}
a:hover {
opacity: .8;
}

body{
overflow-x: hidden;
background-color: #fff;
font-family: -apple-system, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Helvetica, '游ゴシック', Meiryo, sans-serif;
}
.min{
font-family: 'Noto Serif Japanese';
font-weight: 300;
}
.min.bold,
.min .bold{
font-weight: 600;
}
.bottom{
background-color:#fff;
min-height:6em;
}

/* background */
.back-dark{
background-color:#163F47;
padding: 3rem 0;
}
.back-light{
padding: 3rem 0;
}

/* text */
.text-yellow {color:#E9EB88;}
.text-green {color:#163F47;}
.text_pink {color: #ff4760;}



@font-face {
font-family: 'PlayfairDisplay-Regular';
font-style: normal;
font-weight: 400;
src: url('../font/PlayfairDisplay-Regular.woff') format('woff');
}
@font-face {
font-family: 'PlayfairDisplay-Bold';
font-style: bold;
font-weight: 700;
src: url('../font/PlayfairDisplay-Bold.woff') format('woff');
}

.movie-hd {
width: 100%;
position: relative;
padding-bottom: 56.25%;
}
.movie-sd {
width: 100%;
position: relative;
padding-bottom: 75%;
}

/* title hr btn basic-box 	strong */
.corner_title_en {
display: block;
text-align: center;
font-size:220%;
font-family: 'PlayfairDisplay-Regular',serif;
line-height: 1;
}
.corner_title_en:after {
content: "";
display: block;
margin: 25px auto 10px;
width: 40px;
height: 1px;
background:#000;
}
#feature .corner_title_en:after {
background:#fff;
}
#faq .corner_title_en,
#information .corner_title_en {
margin-bottom: 2rem;
}
.corner_title {
margin-bottom: 1.5rem;
font-size: 120%;
text-align: center;
line-height: 1.5;
}
.corner_title span {
display: block;
text-align: center;
}

#feature .corner_title > small.smaller {
display: block;
text-align: center;
font-size: 65%;
margin-top: 2rem;
}



.sub_title {
margin-bottom: 1rem;
font-size: 133%;
line-height: 1.5;
}
.sub-title-l {
font-size: 133%;
}
.sub-title-s {
font-size: 129%;
font-weight: 600;
/* color: #ff4760; */
}
.top-line-box {
border-top: 1px solid #b2b3b4;
padding-top: 1.5em;
text-align: center;
}

hr {/*colに入れて使うもの*/
height: 1px;
border: none;
border-top: 1px #808080 solid;
margin:1em auto;
}
hr.hr100 {
height: 1px;
border: none;
border-top: 1px #808080 solid;
margin:1em auto;
width:95.8318%;
}

/*link button*/
.link-btn a {
display: block;
padding: .5em;
background: #ff4760;
border-radius: 10px;
text-align: center;
color: #fff;
font-size: 140%;
font-weight: 600;
box-shadow: 0 6px #ddddde;
}
.link-btn a span,
.link-btn a img {
display: inline-block;
vertical-align: middle;
margin:0 .3em;
}
.link-btn a img {
width: 30px;
}


/*footer*/
.footer{
position: relative;
padding: 3rem 0 1rem;
max-width:100%;
background-color: #0f2029;
color: #fff;
}
.footer .footer-logo {
font-size: 1.8rem;
line-height: 1.5;
}
.footer-link-bottom {
font-size: 80%;
}
.footer-link-bottom hr {
padding-top: 0;
padding-bottom: 0;
}
.footer-link-bottom .col6 span{
display: block;
}
.footer-link-bottom .col6 a{
color: #FFF;
margin: 0 1em;
}
.footer-link-bottom .col6 a:first-child{
margin-left:0;
}
.footer-link-bottom .col5{
text-align: left;
}
.footer .btn-pagetop{
display: inline-block;
width: 40px;
height: 40px;
z-index: 999;
}

/* Social Button */
.footer-social {
text-align: center;
}
.social-button {
margin-top: 1em;
display: inline-block;
}
.social-button li {
margin-left:7px;
padding: 0;
display: inline-block;
vertical-align: middle;
}
.social-button li:first-child {
margin-left:0;
position: relative;
bottom: 3px;
}
.social-button li.fb {
position: relative;
top:-6px;
}
.social-button li div {
display: inline;
}
.social-button:before, .social-button:after {
content: " ";
display: table;
}
.social-button:after {
clear: both;
}
.social-button {
*zoom: 1;
}
.social-button iframe.twitter-share-button {
width: 90px !important;
}
.social-button li.tw {
width:72px;
}
.social-button li.gg {
overflow:hidden;
width:55px;
}

/* fv */
.fv {
text-align: center;
background-color: #eeeeef;
}
.fv .wrapper {
width: 100%;
}
.fv .col12 {
padding: 0;
margin: 0;
width: 100%;
}
.fv-sp .wrap_btn {
background: #d5d5d6;
padding: 12px;
}
.fv-sp .wrap_btn a {
display: block;
padding: .8rem;
text-align: center;
color: #fff;
font-size: 1.6rem;
background:#ff3d3d;
border-radius: 4px;
}
.fv-sp .wrap_btn a:after {
position: relative;
top:-3px;
display: inline-block;
margin-left: 10px;
content: "";
width: 10px;
height: 10px;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg);
}
.fv .fv-sp {
display: inline-block;
}
.fv .fv-tb {
display: none;
}
.fv-logo {
display: block;
position: absolute;
top:10px;
left:10px;
width: 100px;
z-index: 100;
cursor: pointer;
}




/* gnavi */
.gnav {
display: none;
padding: 1.2em 0;
background:#d5d5d6;
}
.gnav li {
display: inline-block;
width: 11.4%;
margin-right: 0.5%;
letter-spacing: normal;
}
.gnav li.contact {
margin-right: 0;
margin-left: 1.2%;
}
.gnav li a {
display: block;
padding: 1.5rem 0;
background: #fff;
border-radius: 6px;
text-align: center;
font-size: 1em;
font-weight: 600;
}
.gnav li.contact a {
background: #ff3d3d;
color: #fff;
}


/* opinion */
.opinion {
padding: 2rem 0 4rem;
background:#020202 url(../images/opinion_bg.jpg) no-repeat 50% 100%;
background-size: 100% auto;
}
.opinion h2 {
text-align: center;
}
.opinion h1 {
margin: 1.5rem 0 1rem;
font-size: 133%;
line-height: 1.5;
text-align: center;
}
.opinion h1 span {
position: relative;
display: block;
text-align: center;
padding: 1rem 0;
}
.opinion h1 span:before,
.opinion h1 span:after {
position: absolute;
content: "";
display: block;
width: 16px;
height: 21px;
}
.opinion h1 span:before {
top:0;
left:0;
border-top:1px solid #FFF;
border-left:1px solid #FFF;
}
.opinion h1 span:after {
bottom:0;
right:0;
border-bottom:1px solid #FFF;
border-right:1px solid #FFF;
}
.opinion .col7 h3,
.opinion .col7 figure {
display: inline-block;
margin-bottom:2rem;
width: 34%;
vertical-align: middle;
}
.opinion .col7 h3 {
width: 64%;
}
.opinion .col7 h3 strong {
display: block;
font-weight: 600;
font-size: 160%;
}


/* intro */
.intro h2 {
padding-bottom: 3rem;
font-size: 133%;
font-weight: 600;
line-height: 1.2;
background:url(../images/intro_title_trouble.svg) no-repeat 50% 100%;
background-size :100%;
}
.intro .wrap_trouble {
position: relative;
padding-top: 6rem;
}
.intro h1 {
position: absolute;
top:10px;
left:0;
right:0;
margin: auto;
text-align: center;
font-size: 140%;
line-height: 1.3;
}


/* solution */
.solution {
position: relative;
color: #fff;
}
.solution .soluion_title {
position: relative;
z-index: 9;
color: #000;
}
.solution .soluion_title:before {
content: "";
position: absolute;
bottom:-30px;
left:0;
right:0;
margin:auto;
display: block;
width: 0;
height: 0;
border-top: 30px solid #fff;
border-right: 120px solid transparent;
border-left: 120px solid transparent;
z-index: 10;
}
.solution .soluion_title h1 {
position: relative;
padding: 0;
font-size: 120%;		
line-height: 1.3;
text-align: center;
z-index: 11;
}
.solution .soluion_title h1 strong {
display: block;
text-align: center;
font-size: 180%;
font-family: 'PlayfairDisplay-Regular',serif;
padding-top: 10px;
}
.solution .solution_contents {
padding: 5rem 0 4rem;
background:#3e4142;
}
.solution .solution_contents h2 {
padding: 2rem 0;
border-top: 1px solid #5e6162;
border-bottom: 1px solid #5e6162;
}
.solution .solution_contents h2 > strong,
.solution .solution_contents h2 span {
display: block;
text-align: center;
}
.solution .solution_contents h2 > span {
font-size: 110%;
}
.solution .solution_contents h2 > strong {
font-size: 130%;
line-height: 1.5;
}
.solution .solution_contents figure {
position: relative;
top:-10px;
}
.solution .solution_contents dl {
vertical-align: top;
}
.solution .solution_contents dt {
text-align: center;
}
.solution .solution_contents dd {
margin-top: 1.5rem;
font-weight: 600;
text-align: center;
line-height: 1.5;
}


/* point */
.point {
padding: 3rem 0 4rem;
border:10px solid #eeeeef;
}
.point h3 {
margin-bottom: .5rem;
font-weight: 600;
}
.point .num_title {
margin-bottom: 2rem;
}
.point .num_title strong,
.point .num_title span {
display: inline-block;
vertical-align: middle;
line-height: 1.2;
}
.point .num_title span {
padding-left: 1rem;
font-size: 140%;
font-weight: 600;
border-left:1px solid #FFF;
}
.point .num_title strong {
position: relative;
top:-8px;
padding-right: 1rem;
font-size: 360%;
font-family: 'PlayfairDisplay-Regular',serif;
}
.corner_title.sub{
margin:3rem 0 0 ;
padding-bottom: 10px;
}
table{
width: 100%;
background-color: #f6f6f7;
}
table th,table td{
padding: 5px 10px;
}
table th{
background-color: #ddddde;
}
table tr:nth-child(even) td{
background-color: #eeeeef;
}


/* feature */
.feature{
background:#3e4142;
color: #fff;
}
.feature .wrapper + .wrapper:before {
content: "";
display: block;
margin: 3rem auto 1rem;
width: 100%;
height: 10px;
border-top: 4px double #69B4BF;
}


/* voice */
.voice {
padding: 3rem 0;
color: #000;
background:url(../images/voice_bg.jpg);
background-size: cover;
background-position: bottom;
}
.voice .corner_title {
font-size: 120%;
}
.voice figcaption {
margin-top: 1rem;
margin-bottom: 1rem;
text-align: center;
font-weight: 600;
line-height: 1.5;
}
.voice figcaption strong {
font-size: 120%;
}
.voice dt {
margin-bottom: .5rem;
font-size: 120%;
font-weight: 600;
}
.voice dd + dt {
margin-top: 2rem;
}


/* faq */
.faq-list{
display: table;
width: 100%;
box-sizing: border-box;
}
.faq-list li{
display: table-row;
}
.faq-list li strong,
.faq-list li span {
display: table-cell;
border-top:1px solid #b2b3b4;
vertical-align: top;
}
.faq-list li strong {
padding: .6em .4em;
font-weight: 300;
font-size: 160%;
line-height: 1.0;
font-family: 'PlayfairDisplay-Regular',serif;
width:12px;
}
.faq-list li span {
padding: 1em 0;
}
.faq-list li:nth-child(odd) {
font-weight: 600;
cursor:pointer;
transition: all .3s;
}
.faq-list li:nth-child(odd):hover {
background-color: #f5f5f5;
}
.faq-list li:nth-child(even){
display:none;
}
.faq-list li:nth-child(even).open{
display:table-row;
}
.faq-list li:nth-child(even) strong,
.faq-list li:nth-child(even) span {
border-top:none;
border-top:1px solid #d8d9d9;
}


/* information */
#information{
background-color: #eeeeef;
}
.spec-title {
padding:0 0 2rem;
font-size: 160%;
font-weight: 600;
line-height: 1.0;
}
.spec-list dl {
border-top:1px solid #d8d9d9;
padding: .5em 0;
font-size: 93.3%;
letter-spacing: -0.5em;
}
.spec-list dt,
.spec-list dd {
display: inline-block;
vertical-align: top;
letter-spacing: normal;
}
.spec-list dl:last-of-type {
border-bottom:1px solid #d8d9d9;
margin-bottom: 1em;
}
.spec-list dt {
width: 20%;
font-weight: 600;
}
.spec-list dd {
width: 80%;
}
.salonprice {
padding: .5rem 1rem;
font-size: 86.6%;
font-weight: 600;
text-align: center;
border:1px solid #d8d9d9;
}
.wrap_warranty {
margin-top: 3rem;
padding: 1.5rem 1rem 2rem;
text-align: center;
border-radius: 10px;
background-color: #fff;
}
.wrap_warranty p,
.wrap_warranty dl {
display: inline-block;
vertical-align: top;
box-sizing: border-box;
}
.wrap_warranty p {
text-align: right;
width: 25%;
padding-top: 10px;
padding-right: 10px;
}
.wrap_warranty dl {
width: 70%;
font-size: 86.6%;
}
.wrap_warranty dt {
margin-bottom: .5rem;
font-weight: 600;
font-size: 146%;
}



/* freetrial */
#freetrial{
background-color: #eeeeef;
padding-bottom: 6rem;
}
.wrap_freetrial {
background: #fff;
padding: 2rem;
border-radius: 20px;
text-align: center;
}
.wrap_freetrial h1 {
display: table;
}
.wrap_freetrial h1 span,
.wrap_freetrial h1 strong {
display: table-cell;
vertical-align: middle;
}
.wrap_freetrial h1 span {
padding-right: 10px;
width: 55px;
}
.wrap_freetrial h1 strong {
font-size: 160%;
font-weight: 600;
line-height: 1.5;
}
.wrap_freetrial h1 strong small {
display: block;
font-size: 60%;
font-weight: normal;
}
.wrap_freetrial .link-btn a {
margin-top: 1.5rem;
font-size: 146%;
}
.freetrial:before {
content: "";
display: block;
margin: 0 auto 3rem;
width: 100%;
height: 1px;
border-top: 1px solid #b2b3b4;
}










@media screen and (min-width:768px) {


/* background */
.back-dark{
padding: 5rem 0;
}
.back-light{
padding: 7rem 0;
}


/* title hr btn basic-box 	strong */

.corner_title_en {
padding-bottom: 10px;
font-size: 340%;
}
.corner_title_en:after {
margin: 40px auto 0;
}
#faq .corner_title_en,
#information .corner_title_en {
margin-bottom: 4rem;
}
.corner_title {
margin-bottom: 3rem;
font-size: 200%;
}
.sub-title-l {
font-size: 153%;
}

/*link button*/
.link-btn a {
padding: .8em .5em;
font-size: 166%;
}
.link-btn a img {
width: auto;
}




/*footer*/
.footer {
padding: 0;
}
.footer .footer-logo,
.footer-social {
padding-bottom: 10px;
}
.footer .footer-logo {
text-align: left;
}
.footer-top-btn{
display: inline-block;
}
.footer-social{
text-align: right!important;
}
.footer-link-bottom .col5{
text-align: right;
}
.footer .btn-pagetop{
/*display: inline-block;*/
}
.social-button li.fb {
top:-7px;
}


/* fv */
.fv .fv-sp {
display: none;
}
.fv .fv-tb {
display: inline-block;
}
.fv {
background:#eeeeef url(../images/fv_back_pc.svg) no-repeat center bottom;
}
.fv-logo {
top:20px;
left: 20px;
width: 126px;
}
.fv .wrapper {
padding:0 20px 260px;
background:url(../images/fv_bg.png) no-repeat 50% 100%;
background-size: 100%;
}
.fv-image{
padding-top: 60px;
}

/* gnavi */
.gnav {
display: block;
}


/* opinion */
.opinion {
padding: 6rem 0;
background:none;
}
.opinion h1 {
margin: 2rem 0 0;
font-size: 206%;
}
.opinion h1 span {
display: inline-block;
padding: 1rem 3rem;
}
.opinion .col7 h3 {
display: block;
width: auto;
}


/* intro */
.intro {
padding-bottom: 2rem;
}
.intro h2 {
padding-bottom: 4.5rem;
font-size: 146%;
}
.intro .wrap_trouble {
padding-top: 80px;
}
.intro h1 {
font-size: 240%;
}

/* solution */
.solution .soluion_title {
}
.solution .soluion_title:before {
bottom: -80px;
border-top: 80px solid #fff;
border-right: 360px solid transparent;
border-left: 360px solid transparent;
}
.solution .soluion_title h1 {
top:4rem;
font-size: 160%;
}
.solution .solution_contents {
position: relative;
padding: 150px 0 5rem;
}
.solution .solution_contents h2 {
padding: 3rem 0;
}
.solution .solution_contents h2 > strong,
.solution .solution_contents h2 span {
text-align: left;
}
.solution .solution_contents h2 > span {
margin-bottom: .3rem;
font-size: 160%;
}
.solution .solution_contents h2 > strong {
font-size: 220%;
line-height: 1.4;
}
.solution .solution_contents figure {
position: absolute;
top:auto;
bottom: -3px;
right: 20px;
width: 50%;
}
.solution .solution_contents dd {
font-size: 120%;
}


/* point */
.point {
padding: 5rem 0;
border-width:30px;
}
.point h3 {
font-size: 120%;
}

/* feature */
.feature .wrapper + .wrapper:before {
margin: 6rem auto 3rem;
width: calc(100% - 40px);
}


/* voice */
.voice {
padding: 5rem 0;
background-attachment: fixed;
}
.voice .corner_title {
font-size: 166%;
}
.voice figcaption {
margin-top: 3rem;
}
.voice .col7 {
padding-right: 8.3333%;
}

/* information */
.wrap_warranty {
margin-top: 3rem;
padding: 3rem 1rem;
}
.wrap_warranty p,
.wrap_warranty dl {
vertical-align: middle;
}
.wrap_warranty p {
padding-top: 0;
padding-right: 40px;
}
.wrap_warranty dl {
width: 68%;
}
.spec-title {
font-size: 200%;
}


/* faq */
.faq-list li strong {
padding: .35em .5em;
}
.faq-list li span {
font-size: 106%;
}
.faq-list li:nth-child(odd) span {
font-size: 120%;
}
.faq-list li strong {
padding: .4em .5em;
font-size: 213%;
width:15px;
}


/* freetrial */
.wrap_freetrial {
padding: 40px 20px 40px 0;
}
.wrap_freetrial figure,
.wrap_freetrial > div {
display: inline-block;
width: 43%;
vertical-align: middle;
}
.wrap_freetrial h1 {
width: 100%;
margin-bottom: 1.5rem;
}
.wrap_freetrial h1 span {
width: 87px;
}
.wrap_freetrial h1 strong {
font-size: 240%;
line-height: 1.4;
}
.wrap_freetrial figure {
text-align: right;
padding-right: 20px;
}
.wrap_freetrial > div {
padding-left: 20px;
}

.freetrial:before {
margin: 0 auto 5rem;
}

}/* min-width:768px; */









@media screen and (min-width:1080px) {


.gnav li a {
font-size: 1.1em;
}
.footer .footer-logo {
font-size: 1.6rem;
padding-left: 0;
}
.footer-link-bottom .col6{
padding-left: 0;
}
.footer-link-bottom .col6 span{
text-align: right;
}

.intro h1 {
font-size: 266%;
}
.solution .solution_contents h2 {
padding-left: 5%;
}



}/* min-width:1080px; */







@media screen and (max-width:768px) {
table{
display: block;
overflow-x: scroll;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
margin: 20px 0;
}
table td,table th{
white-space: nowrap;
}

}