@charset "utf-8";

@keyframes bg-loop {
0% { background-position: 0 0;}
100% { background-position: 192px 192px;}
}
html {
font-size: 62.5%; overflow: auto;
}
body{
font-family: 'YakuHanJP', 'Roboto', 'Noto Sans JP', sans-serif;
font-weight: 400;
font-size: 1.6rem;
line-height: 1.6;
background: url(https://entre-salon.com/wordpress/wp-content/themes/wp.vicuna/images/supple/supple_bg_simple_colors.png);
animation: bg-loop 5s linear infinite;
background-attachment: fixed;
background-color: rgba(255,255,255,0.4);
color:#3e3e3e; } .cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
} .cf {
zoom:1;
}
.mb-16{
margin-bottom: 1.6rem;
}
.mobile-show{
display: none;
}
.fc-red{
color: #EB0000;
font-weight: 800;
}
.fc-big{
font-size: 2.1rem;
}
.fc-sub-big{
font-size: 1.8rem;
font-weight: 800;
}
.supple-title{margin-top: 3.2rem;text-align: center;margin-bottom: 4.8rem;}
.supple-title h1{
margin-bottom: 2.4rem;
filter: drop-shadow(0px 0px 2px #fff);
line-height: 1;
}
.supple-title h1 img{
width: 520px;
}
.supple-title h1 strong{
font-weight:100;
}
.title-part1{ background: #ff6600;
color: #ffffff;
width: 280px;
height: 140px;
line-height:140px;
display:inline-block;
font-size: 8.4rem;
border-top-left-radius: 70px;
border-bottom-left-radius: 70px;
letter-spacing: 0.2em;
border: 5px solid #ff6600;
border-right: none;
}
.title-part2{
color: #ff6600;  background: #fff;
width: 280px;
height:140px;
line-height:140px;
font-size:7.8rem;
display:inline-block;
border-top-right-radius: 70px;
border-bottom-right-radius: 70px;
letter-spacing: 0.06em;
border: 5px solid #ff6600;
}
.title-part1 strong{
margin-left: 3.2rem;
}
.title-part2 strong{
margin-right: 0.8rem;
}
.supple-title h2{
color:#f60; font-size: 2.8rem; font-weight: 800; filter: drop-shadow(0px 0px 2px #fff);
line-height: 1;
}
.supple-front-message{ background: #fff;
color: #3e3e3e;
width: 800px;
margin-left: auto;
margin-right: auto;
padding: 3.8rem 3.2rem 3.2rem 3.2rem;
font-size: 2.2rem;
border-radius: 2.4rem;
font-weight: 600;
position: relative;
line-height: 1.4;
border: 5px solid #cecece;
margin-bottom: 2.4rem;
}
.supple-front-message h2{
background: #ffbb00;
color: #fff;
line-height: 1;
display: inline-block;
padding: 1.0rem 2.8rem;
font-weight: 800;
border-radius: 48px;
letter-spacing: 0.06em;
position: absolute;
top: -3.0rem;
left: 2.4rem;
transform: rotate(-3deg);
font-size: 2.4rem;
border: 5px solid #fff;
}
.supple-start-btn{
text-align: center;
background-size: auto auto;
display: block;
margin-left: auto;
margin-right: auto;
width: 360px;
font-size: 3.2rem;
line-height: 1;
font-weight: 800;
position: relative;
}
.supple-start-btn a{
color: #fff;
text-decoration: none;
display: block;
width: 360px;
padding-top: 1.8rem;
padding-bottom: 1.8rem;
border-radius: 64px;
background-color: #00af0b;
background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, #3ece48 10px, #3ece48 20px );
box-shadow: 0px 5px 0px 0px #009209;
border: 5px solid #00af0b; position: relative;
cursor: pointer;
}
.supple-start-btn a span{
filter: drop-shadow(0px -2px 0px #00af0b);
}
.supple-start-btn a:hover{
opacity: 0.8;
}
.supple-start-btn a:active{
top:5px;
box-shadow: none;
box-shadow: 0px 2px 0px 0px #009209
}
.supple-start-btn.js-fadein a{
top:5px;
box-shadow: none;
box-shadow: 0px 2px 0px 0px #009209
}
.text-q{
color: #ffffff;
font-size: 3.6rem;
margin: 0.4rem;
font-weight: 800;
background: #0080FF;
border-radius: 100%;
display: inline-block;
width: 50px;
text-align: center;
line-height: 50px;
height: 50px;
}
.text-yes{
color: #00af0b;
font-size: 3.0rem;
margin: 0.2rem;
font-weight: 800;
}
.text-no{
color: #EB0000;
font-size: 3.0rem;
margin: 0.2rem;
font-weight: 800;
}
.supple-question{ color: #371600;
width: 914px;
margin-left: auto;
margin-right: auto; font-size: 2.2rem;
border-radius: 2.4rem;
font-weight: 600;
position: relative;
line-height: 1.4;  margin-bottom: 2.4rem;
display: none;
opacity: 0;
}
input[type=radio] {
display: none;
}
.question-box {
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding: 14px 0px 14px 34px;
position: relative;
width: auto;
margin-right: 0.8rem;
line-height: 30px;
user-select: none;
}
.question-box::before { background: #fff;
border: 4px solid #cecece;
border-radius: 3px;
content: '';
display: block;
height: 16px;
left: 5px;
margin-top: -4px;
position: absolute;
top: calc(50% - 8px);
width: 16px;
} .question-box::after {  content: '';
display: block;
height: 20px;
left: 10px;
margin-top: -18px;
opacity: 0;
position: absolute;
top: 50%;
transform: rotate(45deg) translate3d(0,2px,0) scale3d(.7,.7,1);
transition: transform .1s ease-in-out, opacity .1s ease-in-out;
width: 9px;
z-index: 100;
}
.question-box:hover{ }
input[type=radio]:checked + .question-box::before {
border-color: #cecece;
}
input[type=radio]:checked + .question-box::after {
opacity: 1;
transform: rotate(45deg) scale3d(1,1,1);
}
.question-box.checked-yes::after{
border-right: 8px solid #00af0b;
border-bottom: 4px solid #00af0b;
filter: drop-shadow(1px 1px 0px #fff);
}
.question-box.checked-no::after{
border-right: 8px solid #eb0000;
border-bottom: 4px solid #eb0000;
filter: drop-shadow(1px 1px 0px #fff);
}
.question-txt{
color: #0080FF;
display: inline-block;   }
.checked-yes{
color: #00af0b;
transition: all 0.1s;
}
.checked-yes:hover{
transform: scale(1.1);
}
.checked-no{
color: #eb0000;
transition: all 0.1s;
}
.checked-no:hover {
transform: scale(1.1);
}
.supple-question table{
width: 100%; margin-bottom: 2.4rem;
border-collapse: separate;
}
.supple-question table th{
text-align: left;
padding: 1.6rem 1.6rem;  vertical-align: middle;
background: #fff;
}
.supple-question table td{ padding: 1.6rem; vertical-align: middle;
background: #fff;
}
.question-cell-no{
border-left: 5px solid #cecece;
border-top: 5px solid #cecece; width: 61px;
padding-right: 0 !important;
}
.question-cell-no h3{width: 50px;height: 50px;text-align: center;background: #0080ff;color: #ffffff;border-radius: 100%;display: table-cell;vertical-align: middle;padding: 0.4rem;letter-spacing: -0.02em;font-size: 2.4rem; }
.question-cell-txt{
border-top: 5px solid #cecece; padding-left: 0.8rem !important; }
.question-cell-ans{
border-top: 5px solid #cecece; border-right: 5px solid #cecece;
width: 200px;
}
.supple-question table tr:nth-child(even) th,
.supple-question table tr:nth-child(even) td{
background-color: #f7f7f7; }
.supple-question table tr:hover th,
.supple-question table tr:hover td{
background: #fffced; } .js-fadein {
opacity: 0; 
visibility: hidden;
transform: translateY(24px);
transition: all 0.4s;
}
.js-is-show {
opacity: 1;
visibility: visible;
transform: translateY(0px);
transition: all 0.4s;
}
.supple-result-btn{
text-align: center;
background-size: auto auto;
display: block;
margin-left: auto;
margin-right: auto;
width: 360px;
font-size: 3.2rem;
line-height: 1;
font-weight: 800;
position: relative;
}
.supple-result-btn a{
color: #fff;
text-decoration: none;
display: block;
width: 360px;
padding-top: 1.8rem;
padding-bottom: 1.8rem;
border-radius: 64px;
background-color: #00af0b;
background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, #3ece48 10px, #3ece48 20px );
box-shadow: 0px 5px 0px 0px #009209;
border: 5px solid #00af0b; position: relative;
cursor: pointer;
user-select: none;
}
.supple-result-btn a span{
filter: drop-shadow(0px -2px 0px #00af0b);
}
.supple-result-btn a:hover{
opacity: 0.8;
}
.supple-result-btn a:active{
top:5px;
box-shadow: none;
box-shadow: 0px 2px 0px 0px #009209
}
.supple-result-btn.supple-result-btn-disable a:hover{
opacity: 1 !important;
}
.supple-result-btn.supple-result-btn-disable a:active{
top:inherit !important;
box-shadow: 0px 5px 0px 0px #808080 !important;
}
.supple-result-btn.js-fadein a{
top:5px;
box-shadow: none;
box-shadow: 0px 2px 0px 0px #009209
}
.supple-result-btn.supple-result-btn-disable a{
background-color: #afafaf;
background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, #cecece 10px, #cecece 20px );
box-shadow: 0px 5px 0px 0px #808080;
border: 5px solid #afafaf;
color: #eaeaea;
}
.supple-result-btn.supple-result-btn-disable a span{
filter: drop-shadow(0px -2px 0px #808080);
}
.supple-result {
width: 932px;
margin-left: auto;
margin-right: auto;
display: none; }
.result-container{
position: relative;
display: flex;
flex-wrap: wrap;
margin-top: 4.8rem;
}
.result-container > .result-item {  } .result-item{
position: relative;
order: 1;   margin-bottom: 4.8rem;
border-radius: 2.4rem;
font-size: 1.8rem; display: none;
width: 100%;
}
.result-item a{
text-decoration: none;
color: #3e3e3e;
padding: 2.4rem;
display: block; border-radius: 2.4rem; background: #fff;
position: relative;
border: 5px solid #f60;
box-shadow: 0px 5px 0px 0px #d65600;
}
.result-item a:hover{  }
.result-item a:active{
margin-top:5px;
margin-bottom: -5px;
box-shadow: none;
box-shadow: 0px 2px 0px 0px #d65600;
position: inherit;
}
.inline-link{ background: none !important; box-shadow: none !important; display: inline-block !important;
color: #f60 !important;
border: 2px solid #f60 !important;
padding: 0.8rem 1.6rem !important;
line-height: 1 !important;
border-radius: 32px !important;
transition: all 0.2s;
}
.inline-link:hover{
opacity: 0.7;
}
.inline-link:active{
margin-top: 0px !important;
margin-bottom: 0px !important;
box-shadow: none !important;
}
.inner-link-container{ display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
}
.inner-link-container p{
margin-right: 10px;
}
.inner-link-container p:last-of-type{
margin-right: 0;
} .result-item .not-link{
text-decoration: none;
color: #3e3e3e;
padding: 2.4rem;
display: block;
border-radius: 2.4rem;
background: #fff;
position: relative;
border: 5px solid #f60;
box-shadow: 0px 5px 0px 0px #d65600;
}
.result-item h2 { position: relative;   color: #0080FF;
font-size: 2.4rem;  text-align: center;  line-height: 64px;
}
.result-item h2 span{
background: #0080ff;
color: #fff;
padding: 0;
width: 64px;
height: 64px;
border-radius: 100%;
letter-spacing: -0.02em;
margin-right: 0.4em;
} .result-item h3{
text-align: center;
font-size: 4.0rem;
line-height: 1.2;
margin-bottom: 2.4rem;
font-weight: 800;
color: #f60;
}
.result-item span{
display: inline;
padding-left: 0.8rem;
padding-right: 0.8rem;
}
.result-item img{
float: left;
margin-right: 1.6rem;
border-radius: 1.6rem;
width: 160px;
}
.result-item p{
font-size: 2.0rem;
font-weight: 500;
letter-spacing: -0.02em;
}
.link-btn{
text-align: right;
position: absolute;
right: 25px;
bottom: 27px; transition: all 0.2s;
}
.link-btn strong{
background: #f60;
color: #fff;
text-decoration: none;
font-size: 1.9rem;
font-weight: 700;
padding: 0.8rem 1.6rem;
line-height: 32px;
border-radius: 32px;
}
.link-btn strong .material-icons{
font-size: 1.8rem;
}
.marker{
background: linear-gradient(rgba(255, 255, 255, 0) 70%, #ffff00 70%);
}
.supple-footer{
margin-top:4.8rem;
margin-bottom:4.8rem;
text-align:center;
}
.question-lead{
text-align: center;
font-size: 2.8rem;
line-height: 1.3;
margin-bottom: 2.4rem;
font-weight: 600;
color: #3e3e3e;
filter: drop-shadow(0px 0px 2px #fff);
margin-top: -2.4rem;
}
.result-lead{
text-align: center;
font-size: 2.8rem;
line-height: 1.3;
margin-bottom: 2.4rem;
font-weight: 600;
color: #3e3e3e;
filter: drop-shadow(0px 0px 2px #fff);
margin-top: -2.4rem;
}
.section-freedial{ }
.section-freedial .inner{ background: #fff;
position: relative;
padding: 3.2rem;
width: auto;
border: 5px solid #cecece;
border-radius: 24px;
}
.section-freedial h3{
font-size: 3.2rem;
text-align: center;
margin-bottom: 1.6rem;
font-weight: 900;
line-height: 1;
}
.freedial-img{
text-align: center;
line-height: 1;
}
.freedial-img a{
display: inline-block;
}
.freedial-model{
position: absolute;
right: 16px;
bottom: 0;
width: auto;
}
.freedial-hour{
text-align: center;
font-size: 2.0rem;
font-weight: bold;
line-height: 1;
margin-top: 1.2rem;
margin-bottom: 0;
}
.freedial-hour strong{
border-top: 1px solid #bbbbbb;
border-bottom: 1px solid #bbbbbb;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
display: inline-block;
padding-left: 1.0rem;
padding-right: 1.0rem;
}
.result-lead a{
color:#f60;
}
.result-question-balloon{
position: relative;
background: #0080FF;
padding: 0.8rem 2.4rem;
text-align: center;
color: #fff;
border-radius: 64px;
max-width: 100%;
display: table;
margin-left: auto;
margin-right: auto;
margin-top: -5.0rem;
margin-bottom: 3.2rem;
filter: drop-shadow(-5px 0px 0px #fff) drop-shadow(5px 0px 0px #fff);
font-weight: 600;
line-height: 32px;
font-size: 2.0rem;
}
.result-question-balloon:after{
content: "";
position: absolute;
right: 0;
bottom: -16px;
left: 0;
width: 0px;
height: 0px;
margin: auto;
border-style: solid;
border-color: #0080FF transparent transparent transparent;
border-width: 16px 16px 1px 16px;
}
.result-question-balloon span{
padding-right: 0;
}
.fuwafuwa {
animation: fuwafuwa 1s linear infinite;
transform-origin: 50% 50%;
}
.result-item a:hover .fuwafuwa {
animation: none;
}
.not-link:hover .fuwafuwa {
animation: none;
}
.supple-return-btn{
text-align: center;
background-size: auto auto;
display: block;
margin-left: auto;
margin-right: auto;
width: 360px;
font-size: 3.2rem;
line-height: 1;
font-weight: 800;
position: relative;
margin-bottom: 4.8rem;
margin-top: -2.2rem;
}
.supple-return-btn a {
color: #f60;
text-decoration: none;
display: block;
width: 360px;
padding-top: 1.8rem;
padding-bottom: 1.8rem;
border-radius: 64px;
background: #fff;
background-image: none;
box-shadow: 0px 5px 0px 0px #d65600;
border: 5px solid #ff6600;
position: relative;
cursor: pointer;
user-select: none;
}
.supple-return-btn a:hover{
opacity: 0.8;
}
.supple-return-btn a:active{
top:5px;
box-shadow: none;
box-shadow: 0px 2px 0px 0px #d65600;
}
@keyframes fuwafuwa {
0% { transform: translateY(0px) }
25% { transform: translateY(4px) }
50% { transform: translateY(0px) }
75% { transform: translateY(-2px) }
100% { transform: translateY(0px) }
} @media screen and (max-width: 768px) {
.mobile-hide{
display: none;
}
.mobile-show{
display: inherit;
}
body{
padding-left: 1.6rem;
padding-right: 1.6rem;
}
.supple-title{
margin-top: 2.4rem;
}
.supple-title h1 img{
width: auto;
max-width: 100%;
}
.supple-front-message{
width: auto;
}
.supple-front-message p{
letter-spacing: -0.03em;
}
.supple-title h2{
line-height: 1.26;
font-size: 2.2rem;
}
.supple-start-btn{
width: auto;
font-size: 2.6rem;
}
.supple-start-btn a{
width: auto;
}
.supple-question{
width: auto;
}
.question-cell-no{
display: block;
width: auto;
text-align: center !important;
border-radius: 24px 24px 0px 0px !important;
border-right: 5px solid #cecece;
border-left: 5px solid #cecece;
padding: 1.6rem 1.6rem 0rem 1.6rem !important;
}
.question-txt{
text-align: center;
display: inline;
}
.question-cell-txt{
display: block;
width: auto;
border-top: none;
border-right: 5px solid #cecece;
border-left: 5px solid #cecece;
border-radius: 0 !important;
padding: 1.6rem 1.6rem 0rem 1.6rem !important;
}
.question-cell-ans{
display: block;
width: auto;
border-top:none;
border-right: 5px solid #cecece;
border-left: 5px solid #cecece;
border-bottom: 5px solid #cecece;
border-radius: 0 !important;
border-radius: 0px 0px 24px 24px !important;
}
.question-cell-no h3{
display: inline-block;
line-height: 48px;
}
.supple-question table{
margin-bottom: 0.8rem;
}
.supple-question table th{
text-align: center;
}
.supple-question table td{
text-align: center;
}
.supple-question table tr{
display: block;
margin-bottom: 1.6rem;
}
.supple-question table tr:nth-child(even) th,
.supple-question table tr:nth-child(even) td{
background-color: #fff;
}
.supple-question table tr:hover th,
.supple-question table tr:hover td{
background-color: #fff;
}
.supple-result-btn{
width: auto;
font-size: 2.6rem;
}
.supple-result-btn a{
width: auto;
user-select: none;
}
.supple-question table tr:last-of-type .question-cell-no{
border-bottom: none !important;
}
.supple-question table tr:last-of-type .question-cell-txt{
border-bottom: none !important;
}
.supple-question table tr:last-of-type .question-cell-ans{
}
.supple-result{
width: auto;
}
.result-item a{
padding: 1.6rem;
}
.result-item h3{
margin-bottom: 1.6rem;
}
.result-item img {
display: block;
max-width: 100%;
float: none;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-bottom: 1.6rem; }
.link-btn{
text-align: center;
position: relative;
right: inherit;
bottom: inherit;
width: 100%;
display: block;
margin-top: 1.6rem;
}
.link-btn strong{
display: block;
}
.result-question-balloon{
line-height: 24px;
padding: 0.8rem 1.6rem;
}
.section-freedial .inner{
padding:1.6rem;
width: auto;
}
.section-freedial h3 {
font-size: 2.4rem;
}
.section-freedial{
}
.freedial-model{
display: none;
}
.freedial-img img{
max-width: 100%;
width: auto;
}
.freedial-hour strong{
border-bottom: none;
padding-bottom: 0;
border-top: none;
padding-top: 0;
line-height: 1.1;
padding-left: 0;
padding-right: 0;
}
.question-lead{
text-align: left;
font-size: 2.1rem;
}
.result-lead{
text-align: left;
font-size: 2.1rem;
}
.supple-return-btn{
width: auto;
}
.supple-return-btn a{
width: auto;
}
}