html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
} ins {
background-color:#ff9;
color:#000;
text-decoration:none;
} mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
} hr {
display:block;
height:1px;
border:0;  
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
} .cf:before,
.cf:after {
content:"";
display:table;
}
.mobile-show{
display: none;
}
a{
text-decoration: none;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
a:hover{
opacity: 0.7;
}
.cf:after {
clear:both;
} .cf {
zoom:1;
}
.mt-10{
margin-top: 10px;
}
.mt-20{
margin-top: 20px;
}
.mt-40{
margin-top: 40px;
}
.mb-10{
margin-bottom: 10px;
}
.mb-20{
margin-bottom: 20px;
}
.pr-20{
padding-right:20px;
}
img{
max-width: 100%;
}
body {
font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
font-weight: 300;
font-size: 14px;
color: #333;
overflow: scroll;
overflow-x: hidden;
}
.header{
}
main{
}
.section-top{
background: url(//entre-salon.com/wordpress/wp-content/themes/wp.vicuna/images/app-lp/app_top_bg.png);
background-size: 24px;
position: relative;
}
.top-container{
display: flex;
}
.item-left{
width: 30%;
position: relative;
padding-right: 20px;
}
.item-left h2{
margin-bottom: 100px;
margin-top: 20px;
}
.item-center{
width: 40%;
position: relative;
}
.item-right{
width: 30%;
position: relative;
padding-left: 20px;
}
.item-right h2{
margin-bottom: 20px;
margin-top: 20px;
}
.item-right h3{
margin-bottom: 10px;
}
.cta-iphone-container{
display: flex;
background: #F6AB00;
padding: 10px;
border-radius: 10px;
margin-bottom: 10px;
}
.cta-android-container{
display: flex;
background: #F093AE;
padding: 10px;
border-radius: 10px;
}
.item-dl{
width: 60%;
position: relative;
}
.item-dl h3{
margin-bottom: 7px;
}
.item-qr{
width: 40%;
position: relative;
margin-left: 10px;
}
.content-balloon-num{
width: 40px;
position: absolute;
z-index: 1;
top: -10px;
left: 5px;
}
.content-block-item1,
.content-block-item2,
.content-block-item3,
.content-block-item4{
padding: 10px;
position: relative;
}
.balloon-inner {
position: relative;
display: inline-block;
background: #fff;
padding: 15px;
margin-bottom: 20px;
width:100%;
}
.balloon-inner:before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -15px;
border: 15px solid transparent;
border-top: 15px solid #fff;
}
.balloon-inner h2{
margin-bottom: 15px;
padding-left: 10px;
padding-right: 10px;
}
.section-content{
background: #ED6C01;
position: relative;
margin-top: -176px;
}
.content-header-container{
display: flex;
justify-content: center; align-items: center; padding-top: 20px;
padding-bottom: 20px;
}
.content-header-item-img-left{
width: 20%;
}
.content-header-item-title{
width: 60%;
padding-left: 20px;
padding-right: 20px;
}
.content-header-item-img-right{
width: 20%;
}
.content-block-container{
display: flex;
}
.content-block-item1{
width: 25%;
background: #FCDCB1;
}
.content-block-item2{
width: 25%;
background: #FFF5B9;
}
.content-block-item3{
width: 25%;
background: #FCDCB1;
}
.content-block-item4{
width: 25%;
background: #FFF5B9;
}
.section-about{
background: #ED6C01;
padding-top: 20px;
padding-bottom: 20px;
}
.section-intro{
background: #ED6C01;
padding-bottom: 20px;
}
.section-intro .inner{
background: #FFFEEF;
border-radius: 20px;
padding: 20px;
}
.about-container{
display: flex;
}
.about-left{
width: 30%;
}
.about-right{
padding-left: 40px;
width: 70%;
}
.intro-header{
background: #EE7700;
border-radius: 64px;
text-align: center;
padding-left: 100px;
padding-right: 100px;
padding-top: 8px;
padding-bottom: 8px;
margin-bottom: 20px;
}
.intro-ex{
padding-left: 100px;
padding-right: 100px;
margin-bottom: 30px;
}
.intro-screen-container{
display: flex;
margin-bottom: 20px;
position: relative;
}
.intro-screen-left{
width:30%;
}
.intro-screen-left h3{
margin-bottom: 15px;
}
.intro-screen-right{
width:30%;
}
.intro-screen-right h3{
margin-bottom: 15px;
}
.intro-screen-center{
width:40%;
padding-left: 25px;
padding-right: 25px;
}
.intro-option-container{
display: flex;
}
.intro-option-left{
width: 50%;
margin-right: 10px;
}
.intro-option-left .intro-option-header{
background: #58B531;
padding-left: 10px;
padding-right: 10px;
padding-top: 20px;
padding-bottom: 10px;
}
.intro-option-left .intro-option-content{
border: 2px solid #58B531;
background: #fff;
padding: 10px;
position: relative;
}
.intro-option-left .intro-option-content h3{
width: 315px;
margin-bottom: 15px;
margin-top: 10px;
}
.intro-option-left .intro-option-content-inner{
background: #FFF9B0;
padding: 15px;
}
.intro-option-left .intro-option-content-inner img{
width: 300px;
}
.point-screen{
width: 112px;
position: absolute;
right: 10px;
top: 15px;
}
.intro-option-right{
width: 50%;
margin-left: 10px;
background: #FCC800;
}
.option-point-wrap{
padding: 10px;
}
.option-point-wrap h3{
margin-bottom: 5px;
}
.option-bottom-dl{
padding: 10px 10px;
background: #FFF352;
}
.detail-balloon-home{
position: absolute;
top: 0px;
width: 120px;
left: 260px;
}
.detail-balloon-num1{
position: absolute;
top: 24px;
width: 32px;
left: 520px;
}
.detail-balloon-num2{
position: absolute;
top: 24px;
width: 32px;
left: 604px;
}
.detail-balloon-num3{
position: absolute;
top: 440px;
width: 32px;
left: 302px;
}
.detail-balloon-num4{
position: absolute;
top: 440px;
width: 32px;
left: 604px;
}
.detail-balloon-num5{
position: absolute;
top: 480px;
width: 32px;
left: 302px;
}
.detail-balloon-menu{
position: absolute;
width: 340px;
bottom: 15px;
right: 0;
}
.first-txt{
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 10px;
}
.logo{
margin-bottom: 20px;
}
.section-cta-block{
display: flex;
}
.section-cta-block .cta-iphone-container{
width: 50%;
margin-right: 10px;
margin-bottom: 0px;
}
.section-cta-block .cta-android-container{
width: 50%;
margin-left: 10px;
}
.section-bottom-cta{
padding-top: 20px;
padding-bottom: 20px;
background: url(//entre-salon.com/wordpress/wp-content/themes/wp.vicuna/images/app-lp/app_top_bg.png);
background-size: 24px;
position: relative;
}
.inner{
width: 980px;
margin-left: auto;
margin-right: auto;
}
.footer{
padding-top: 20px;
padding-bottom: 20px;
background: #ED6C01;
}
.credit-container{
display: flex;
}
.credit-item{
width: 33.333%;
}
.credit-item-left{
padding-right:10px;
}
.credit-item-center{
padding-left:10px;
padding-right:10px;
}
.credit-item-right{
padding-left:10px;
}
.credit-item-right h3{
margin-top: 5px;
width: 280px;
}
.copyright{
text-align: center;
color: #fff;
font-size: 20px;
margin-top: 20px;
}
@media screen and (max-width: 480px) {
.mobile-hide{
display: none !important;
}
.mobile-show{
display: inline;
}
}