.cm-title {
text-align: center;
}
.cm-title span {
display: block;
font-family: "Waterfall", cursive;
font-weight: 400;
font-style: normal;
font-size: 6.4rem;
color: #c4ae8a;
letter-spacing: 0;
line-height: 1;
}
.cm-title .main {
font-size: 1.2rem;
font-weight: 400;
}
.c-inner {
width: 86.6666%;
margin: 0 auto;
}

/*--------------------------------------------------------------------------
header
---------------------------------------------------------------------------*/

header {
padding: 15px 0;
}

header a {
display: block;
width: 45px;
margin: 0 auto;
}


/*--------------------------------------------------------------------------
hero
---------------------------------------------------------------------------*/
.hero {
position: relative;
}
.hero .dec img {
width: 55%;
position: absolute;
bottom: 0;
right: 0;
}


/*--------------------------------------------------------------------------
lead
---------------------------------------------------------------------------*/

.lead .icon {
display: block;
width: 45%;
margin: 0 auto;
}
.lead .title span {
font-size: 1.2rem;
line-height: 1.6;
}

.lead .title h1 {
font-weight: 600;
font-size: 2.4rem;
line-height: 1.5;
}
.lead .txt p {
margin-top: 20px;
line-height: 2;
}

.lead .vis {
width: 100%;
}

.lead .vis img {
border-radius: 10px;
}

.lead .vis .top {
display: flex;
position: relative;
}
.lead .vis .top .left {
width: 40%;
}
.lead .vis .top .left img {
width: 110%;
position: absolute;
}


.lead .vis .top .right {
width: 60%;
margin-top: 17%;
z-index: 10;
}
.lead .vis img {
box-shadow: 0px 0px 28px -5px #d1d1d1;
}


/*--------------------------------------------------------------------------
present
---------------------------------------------------------------------------*/

.present {
padding: 6% 0;
background: #f9f6f2;
position: relative;
}
.present .label {
display: block;
width: 40%;
max-width: 200px;
margin: 0 auto 15px;
}
.present .dec img {
width: 80px;
position: absolute;
top: -20px;
left: 20px;
}
.present .inner {
background: #fff;
padding: 40px 25px;
border-radius: 10px;
}
.present .inner h2 {
color: #e68d99;
font-size: 2rem;
font-weight: 600;
text-align: center;
}
.present .inner dl dt {
display: block;
color: #bfa881;
padding: 6px 0;
border-top: dotted 1px #bfa881;
border-bottom: dotted 1px #bfa881;
text-align: center;
font-size: 1.4rem;
font-weight: 400;
}
.present .inner dl dd {
font-size: 1.3rem;
}
.present .inner .note {
font-size: 1.1rem;
line-height: 1.5;
opacity: 0.5;
}

/*--------------------------------------------------------------------------
about
---------------------------------------------------------------------------*/
.about {
overflow: hidden;
}
.about .icon {
display: block;
width: 80px;
margin: 0 auto;
}
.about .lead h3 {
font-size: 1.8rem;
}
.about .lead p {
font-size: 1.3rem;
line-height: 1.7;
}
.about .label {
font-size: 1.2rem; 
}
.about .gallery-swiper  {
position: relative;
}
.about .gallery-swiper .swiper-pagination {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
z-index: 100;
text-align: center;
}
.about .gallery-swiper .swiper-pagination-bullet {
display: inline-block;
width: 8px;
height: 8px;
margin: 0 5px;
border-radius: 50%;
background: #fff;
}
.about .gallery-swiper .swiper-pagination-bullet-active {
background: #333;
}

/*--------------------------------------------------------------------------
flow
---------------------------------------------------------------------------*/
.flow {
padding: 6% 0;
background: #f9f6f2;
position: relative;
}
.flow .inner {
padding: 40px 25px 50px 25px;
background: #fff;
border-radius: 10px;
}
.flow .inner .title {
padding: 10px 20px;
color: #fff;
background: #8dc5bf;
font-size: 1.5rem;
font-weight: 600;
border-radius: 4px;
}
.flow .inner .cont b {
display: block;
margin-top: 25px;
font-size: 1.5rem;
}
.flow .inner .cont p {
margin-top: 7px;
font-size: 1.2rem;
}
.flow .dec {
display: block;
width: 80px;
position: absolute;
bottom: -10px;
right: 0;
}

/*--------------------------------------------------------------------------
access
---------------------------------------------------------------------------*/
.access .cont h4 {
font-weight: 600;
}
.access .cont .info {
margin-top: 3px;
}
.access .cont .info p {
margin-bottom: 15px;
font-size: 1.3rem;
line-height: 1.7;
}
.access .cont .info p:last-child {
margin-bottom: 0;
}
.access .cont ul.salon li {
width: 33%;
margin-top: 0.3333%;
}

/*--------------------------------------------------------------------------
information
---------------------------------------------------------------------------*/
.information {
padding: 6% 0;
background: #d1e5e1;
}
.information .inner .cont {
padding: 0 40px;
}
.information .inner .cont::after {
content: "";
display: block;
width: 100%;
margin: 40px auto 0;
border-bottom: solid 1px #d1e5e1;
}

.information .inner .cont dt {
margin-bottom: 3px;
font-size: 1.4rem;
}
.information .inner .cont dd {
margin-bottom: 25px;
font-size: 1.3rem;
}

.information .inner .container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}

.information .inner .half-circle {
width: 100%;
height: 200px;
background-color: #fff;
}

.information .inner .half-circle.top {
border-top-left-radius: 100vw;
border-top-right-radius: 100vw;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
position: relative;
}

.information .inner .half-circle.top::before {
content: "";
display: block;
width: calc(100% - 80px);
height: 1px;
margin: 0 auto;
background: #d1e5e1;
position: absolute;
bottom: 35px;
left: 0;
right: 0;
}
.information .inner .half-circle.top .cm-title {
margin-top: -15px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
}

.information .inner .half-circle.bottom {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 100vw;
border-bottom-right-radius: 100vw;
position: relative;
}
.information .inner .half-circle.bottom img {
display: block;
width: 60%;
margin: 0 auto;
position: absolute;
top: 40%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
}


.information .inner .square {
width: 100%;
background-color: #fff;
}

.information .check.privacy {
position: relative;
text-align: center;
}

.information .check.privacy a {
text-decoration: underline;
color: #3b907f;
}

.information .check.privacy input[type="checkbox"] {
visibility: hidden;
-webkit-appearance: auto;
-moz-appearance: auto;
appearance: auto;
}

.information .check.privacy label {
margin-left: -17px;
padding-left: 32px;
line-height: 1.5;
font-size: 1.4rem;
display: inline-block;
position: relative;
cursor: pointer;
}
.information .check.privacy input[type=checkbox]:checked+.checkbox::before {
opacity: 1;
}

.information .check.privacy .checkbox label {
margin-left: -17px;
padding-left: 32px;
font-size: 1.4rem;
display: inline-block;
position: relative;
cursor: pointer;
}
.information .check.privacy .checkbox::before {
-webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
position: absolute;
top: 50%;
left: 8px;
display: block;
margin-top: -5px;
width: 5px;
height: 9px;
border-right: 2px solid #262626;
border-bottom: 2px solid #262626;
content: '';
opacity: 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 10;
}
.information .check.privacy .checkbox::after {
margin-top: 0.075em;
-webkit-transition: border-color .2s linear;
transition: border-color .2s linear;
position: absolute;
top: 50%;
left: 0;
display: block;
width: 20px;
height: 20px;
border: 1px solid rgba(0,0,0,.5);
border-radius: 3px;
content: "";
background: #fff;
z-index: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.information .check.privacy input {
margin: 0;
padding: 0;
background: none;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
letter-spacing: .1em;
color: #262626;
font-family: inherit;
font-size: 16px;
-webkit-transition: all .3s;
transition: all .3s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}


.information .btn {
width: 80%;
max-width: 300px;
margin: 0 auto;
box-shadow: 0 0 0 1px #8dc5bf inset;
text-align: center;
border-radius: 5px;
background: #8dc5bf;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.information .btn a {
display: block;
padding: 15px 0;
color: #fff;
font-size: 1.4rem;
font-weight: bold;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}

.information .btn[disabled] {
pointer-events: none;
background: #bababa;
box-shadow: 0 0 0 1px #bababa inset;
}
.information .btn[disabled] a {
color: #fff;
}



/*--------------------------------------------------------------------------
links
---------------------------------------------------------------------------*/
.links .banner {
width: 80%;
margin: 0 auto;
border: solid 1px #d3d3d3;
border-radius: 5px;
overflow: hidden;
} 
.links .banner .cover {
width: 120px;
} 
.links .banner .info {
width: calc(100% - 120px);
padding: 0 25px;
font-size: 1.2rem;
} 
.links .icon {
text-align: center;

} 
.links .icon a {
display: inline-block;
margin: 0 auto;
padding-bottom: 7px;
font-weight: 600;
border-bottom: solid 1px #5a5a5a;
}
.links .icon img {
width: 27px;
padding-right: 7px;
vertical-align: middle;
} 

/*--------------------------------------------------------------------------
fix-contact
---------------------------------------------------------------------------*/
#fix-contact { 
display: none;
}

#fix-contact * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#fix-contact {
width: 100%;
position: fixed;
display: block;
bottom: -80px;
left: 0;
z-index: 100;
opacity: 0;
background: #8dc5bf;
}

#fix-contact.active {
bottom: 0;
opacity: 1;
}

#fix-contact {
text-align: center;
}
#fix-contact a {
display: block;
padding: 15px 0;
color: #fff;
font-size: 1.5rem;
font-weight: bold;
letter-spacing: 0.1em;
}

/*--------------------------------------------------------------------------
footer
---------------------------------------------------------------------------*/
footer {
background: #fafafa;
text-align: center;
}

footer .logo {
width: 80px;
margin: 0 auto;
}
footer .copy {
font-size: 1.3rem;
}
footer .copyright {
margin-bottom: 40px;
font-size: 1rem;
opacity: 0.7;
}