@charset "UTF-8";
@font-face { font-family: 'Optima'; font-style: normal; font-weight: normal; src: local('Optima'), url('fonts/OPTIMA.woff') format('woff'); }
@font-face { font-family: 'Optima Italic'; font-style: normal; font-weight: normal; src: local('Optima Italic'), url('fonts/Optima_Italic.woff') format('woff'); }
@font-face { font-family: 'Optima Medium'; font-style: normal; font-weight: normal; src: local('Optima Medium'), url('fonts/Optima_Medium.woff') format('woff'); }
@font-face { font-family: 'Optima Bold'; font-style: normal; font-weight: normal; src: local('Optima Bold'), url('fonts/OPTIMA_B.woff') format('woff'); }

/* リセット分(共通)
------------------------------------------------------ */
html     { overflow-y: auto; }
body     { color: #271d13; background: #fff; font-size: 14px; line-height: 1.5; font-family: 'Hiragino Kaku Gothic Pro', Meiryo, 'YuGothic','Yu Gothic', sans-serif; }
h2,h3    { text-align: center; font-family: 'Optima Medium'; letter-spacing: .01em; }
p        { word-wrap: break-word; overflow-wrap: break-word; }
p + p    { margin-top: 1em; }
sub,sup  { font-size: 75%; font-weight: normal; }
.caption,
.small   { font-size: 80%; }
.caption { padding-left: 1.25em; text-indent: -1.25em; margin: 2em 0; }

/* header */
#header        { width: 100%; position: relative; background-color: #2e2018; background-image: url(../img/top_bg.png); background-size: contain; background-position: center; background-repeat: no-repeat; }
#header h1     { margin: 0; padding: 40px 0; position: relative; transition: all .5s ease; }
#header h1 img { margin: 0 auto; max-width: 40%; max-height: 150px; }
#sc_txt        { color: #ccc; display: block; transform: rotate(90deg) translate(50%,0%); }

#header.is-animation        { width: 100%; height: 80px; background: #2e2018; z-index: 999; position: fixed; top: 0; box-shadow: 0px 10px 10px rgba(0, 0, 0, .2); }
#header.is-animation h1     { width: 100%; padding: 10px 0; }
#header.is-animation h1 img { margin: 0 auto; width:auto; height: 60px; }

.contents         { margin: 5em auto; max-width: 1000px; margin-top: 200px; }
.contents h2      { margin-bottom: 1em; font-size: 2.5em; color: #664c33; }
.contents h3      { margin-bottom: 1em; font-size: 1.2em; margin-bottom: 0; }
.contents article { padding: 5em 0 0 0; }
@media only screen and (max-width: 640px){
 .contents { margin: 5em auto 1em auto; }
}

/* about */
.col_full      { margin: 2em 0; padding: 0 1em; max-width: 1000px; display: flex; }
.col_full.rev  { flex-direction: row-reverse; }
.shop_img      { width: 45%; margin-bottom: 45%; position: relative; }
.shop_img img  { width: 100%; position: absolute; top: 0; }
.chair_img     { width: 45%; margin-bottom: 45%; position: relative; }
.chair_img img { width: 100%; position: absolute; top: 0; }
.kids_img      { width: 45%; margin-bottom: 45%; position: relative; }
.kids_img img  { width: 100%; position: absolute; top: 0; }

.col_full .intro       { width: 55%; position: relative; }
.col_full .intro p     { position: absolute; padding-left: 1em; top: 50%; transform: translateY(-50%); }
.col_full.rev .intro p { padding-left: 0!important; padding-right: 1em; }
@media only screen and (max-width: 640px){
 .col_full .intro p { font-size: 3.3vw; }
}

/* service */
.service      { margin: 0 auto; padding: 0 2em; max-width: 768px; }
.service h3   { padding: .25em 0; color: #fff; background: #664c33; border-radius: .15em; }
.service h4   { padding: 1.5em 0 .5em 0; text-align: left; border-bottom: solid 1px #664c33; }
.service_copy { margin: 2em 0; }
.nail_img     { display: block; position: relative; }
.nail_img img { margin: 1em auto; width: 30%; position: relative; }
@media only screen and (max-width: 640px){
 .service      { padding: 0 0; }
 .service h3   { margin-top: 2.5em; padding: .5em 1em; }
 .service_copy { padding: 0 1em; font-size: 3.3vw; }
 .nail_img img { width: 50%; }
}

table.menu    { margin-bottom: 2em; width: 100%; border-collapse: collapse; background: rgba(255,255,255,.5); }
table.menu tr { border-bottom: solid 1px #664c33; }
table.menu th { font-weight: normal; padding: .5em; }
table.menu td { font-weight: normal; padding: .5em; }
table.menu th { width: *; text-align: left; }
table.menu td { width: 7em; text-align: center; white-space: pre; }

@media only screen and (max-width: 640px){
.hair,.nail,.este { padding: 0 1em; }
}
/* staff */
.staff ul        { list-style: none; margin: 0; padding: 0 1em; }
.staff ul li     { width: 50%; float: left; margin-bottom: 2em; }
.staff ul li div { position: relative; }
.staff ul li img { width: 50%; }
.staff ul li p   { margin-left: 50%; padding: 0 1em; color: #664c33; line-height: 2; position: absolute; top: 50%; transform: translateY(-50%); }
.staff ul li p span        { font-weight: bold; font-size: 1.1em; }
.staff ul li p span::after { content: '\A'; white-space: pre; }
.staff ul li:nth-child(3) img,
.staff ul li:nth-child(4) img { margin-left: 50%; }
.staff ul li:nth-child(3) p,
.staff ul li:nth-child(4) p   { width: 50%; margin-left: 0; text-align: right; }
@media only screen and (max-width: 640px){
.staff ul li     { padding-top: 0; width: 100%; float: none; position: relative; }
.staff ul li img { position: relative; }
.staff ul li:nth-child(even) img { margin-left: 50%; }
.staff ul li:nth-child(odd) img  { margin-left: 0; }
.staff ul li p                   { margin-left: 0; width: 50%; font-size: 3.3vw; position: absolute; top: 50%; left: 50%; padding-left: 1em; transform: translateY(-50%); }
.staff ul li:nth-child(odd) p    { width: 50%; margin-left: 0; text-align: left; }
.staff ul li:nth-child(even) p   { width: 50%; text-align: right; position: absolute; left: 0; }
}
/* contact */
.contact dl            { display: flex; flex-flow: row wrap; width: 100%; padding: 0 1em 1em  1em; }
.contact dt            { flex-basis: 22%; padding: 1em 0; font-weight: bold; }
.contact dd            { flex-basis: 78%; padding: 1em 0 0 1em; }
.contact .g_map        { height: 0; overflow: hidden; padding-bottom: 56.25%; position: relative; border: 1px solid #fff; margin-top: 1em; }
.contact .g_map iframe { position: absolute; left: 0; top: 0; height: 100%; width: 100%; }
@media only screen and (max-width: 768px){
.contact dl { padding: 0 1em; }
}
/* SNS */
.contents article#sns { padding: 4em 0 0 0; text-align: center; }
#sns .insta a         { color: #664c33; font-size: 2em; line-height: 1; }

/* footer */
footer .copyright { padding: 3em 0; font-weight: 300; font-size: 70%; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, sans-serif; text-align: center; color: #664c33; border-top: solid 1px #664c33; }

/* scrollするとfade in */
.fadeIn             { transition: 3s; opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); }
.fadeIn.animated    { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }

/* scroller */
#scroller           { width: 40px; height: 40px; position: fixed; right: 1em; bottom: 1em; opacity: 0.7; }
#scroller a         { position: relative; display: block; width: 40px; height: 40px; text-decoration: none; background: #664c33; border-radius: 5px; }
#scroller a::before { font-family: 'Font Awesome 5 Free'; font-weight: 900; content: '\f102'; font-size: 25px; color: #fff; position: absolute; top: 0; bottom: 0; right: 0; left: 0; text-align: center; line-height: 40px; }