@charset "UTF-8"; @import url("https://fonts.googleapis.com/css?family=Cormorant+Garamond:300,300i,400,400i,500,500i,600,600i,700,700i|Cormorant:300,300i,400,400i,500,500i,600,600i,700,700i|Sacramento|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Didact+Gothic|Montserrat|Oswald:200,300,400,500,600,700|Playfair+Display:400,700,900"); @font-face { font-display: swap; } /* .example{ @include widthPercent(960, 300); } */ /* .example{ @include heightPercent(500, 300); } */ /* .example{ @include marginPercent(500, 20, 5, 20, 5); } */ /* .example{ @include paddingPercent(500, 20, 5, 20, 5); } */ /* .example{ position: absolute; @include posiLeftPercent(500, 50); @include posiTopPercent(300, 50); @include posiRightPercent(500, 50); @include posiBtmPercent(300, 50); } */ /* reset ------------------------------------------------------------------*/ #header, #spMenu, #spMenuBg, #spMenuBtn, #pcContactBtn, #comicBtn, #headerSalonList, #footer { font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Noto Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 300; -webkit-text-size-adjust: 100%; /* HTML5 display-role reset for older browsers */ } #header div, #header span, #header applet, #header object, #header iframe, #header h1, #header h2, #header h3, #header h4, #header h5, #header h6, #header p, #header blockquote, #header pre, #header a, #header abbr, #header acronym, #header address, #header big, #header cite, #header code, #header del, #header dfn, #header em, #header img, #header ins, #header kbd, #header q, #header s, #header samp, #header small, #header strike, #header strong, #header sub, #header sup, #header tt, #header var, #header b, #header u, #header i, #header center, #header dl, #header dt, #header dd, #header ol, #header ul, #header li, #header fieldset, #header form, #header label, #header legend, #header table, #header caption, #header tbody, #header tfoot, #header thead, #header tr, #header th, #header td, #header article, #header aside, #header canvas, #header details, #header embed, #header figure, #header figcaption, #header footer, #header header, #header hgroup, #header menu, #header nav, #header output, #header ruby, #header section, #header summary, #header time, #header mark, #header audio, #header video, #spMenu div, #spMenu span, #spMenu applet, #spMenu object, #spMenu iframe, #spMenu h1, #spMenu h2, #spMenu h3, #spMenu h4, #spMenu h5, #spMenu h6, #spMenu p, #spMenu blockquote, #spMenu pre, #spMenu a, #spMenu abbr, #spMenu acronym, #spMenu address, #spMenu big, #spMenu cite, #spMenu code, #spMenu del, #spMenu dfn, #spMenu em, #spMenu img, #spMenu ins, #spMenu kbd, #spMenu q, #spMenu s, #spMenu samp, #spMenu small, #spMenu strike, #spMenu strong, #spMenu sub, #spMenu sup, #spMenu tt, #spMenu var, #spMenu b, #spMenu u, #spMenu i, #spMenu center, #spMenu dl, #spMenu dt, #spMenu dd, #spMenu ol, #spMenu ul, #spMenu li, #spMenu fieldset, #spMenu form, #spMenu label, #spMenu legend, #spMenu table, #spMenu caption, #spMenu tbody, #spMenu tfoot, #spMenu thead, #spMenu tr, #spMenu th, #spMenu td, #spMenu article, #spMenu aside, #spMenu canvas, #spMenu details, #spMenu embed, #spMenu figure, #spMenu figcaption, #spMenu footer, #spMenu header, #spMenu hgroup, #spMenu menu, #spMenu nav, #spMenu output, #spMenu ruby, #spMenu section, #spMenu summary, #spMenu time, #spMenu mark, #spMenu audio, #spMenu video, #spMenuBg div, #spMenuBg span, #spMenuBg applet, #spMenuBg object, #spMenuBg iframe, #spMenuBg h1, #spMenuBg h2, #spMenuBg h3, #spMenuBg h4, #spMenuBg h5, #spMenuBg h6, #spMenuBg p, #spMenuBg blockquote, #spMenuBg pre, #spMenuBg a, #spMenuBg abbr, #spMenuBg acronym, #spMenuBg address, #spMenuBg big, #spMenuBg cite, #spMenuBg code, #spMenuBg del, #spMenuBg dfn, #spMenuBg em, #spMenuBg img, #spMenuBg ins, #spMenuBg kbd, #spMenuBg q, #spMenuBg s, #spMenuBg samp, #spMenuBg small, #spMenuBg strike, #spMenuBg strong, #spMenuBg sub, #spMenuBg sup, #spMenuBg tt, #spMenuBg var, #spMenuBg b, #spMenuBg u, #spMenuBg i, #spMenuBg center, #spMenuBg dl, #spMenuBg dt, #spMenuBg dd, #spMenuBg ol, #spMenuBg ul, #spMenuBg li, #spMenuBg fieldset, #spMenuBg form, #spMenuBg label, #spMenuBg legend, #spMenuBg table, #spMenuBg caption, #spMenuBg tbody, #spMenuBg tfoot, #spMenuBg thead, #spMenuBg tr, #spMenuBg th, #spMenuBg td, #spMenuBg article, #spMenuBg aside, #spMenuBg canvas, #spMenuBg details, #spMenuBg embed, #spMenuBg figure, #spMenuBg figcaption, #spMenuBg footer, #spMenuBg header, #spMenuBg hgroup, #spMenuBg menu, #spMenuBg nav, #spMenuBg output, #spMenuBg ruby, #spMenuBg section, #spMenuBg summary, #spMenuBg time, #spMenuBg mark, #spMenuBg audio, #spMenuBg video, #spMenuBtn div, #spMenuBtn span, #spMenuBtn applet, #spMenuBtn object, #spMenuBtn iframe, #spMenuBtn h1, #spMenuBtn h2, #spMenuBtn h3, #spMenuBtn h4, #spMenuBtn h5, #spMenuBtn h6, #spMenuBtn p, #spMenuBtn blockquote, #spMenuBtn pre, #spMenuBtn a, #spMenuBtn abbr, #spMenuBtn acronym, #spMenuBtn address, #spMenuBtn big, #spMenuBtn cite, #spMenuBtn code, #spMenuBtn del, #spMenuBtn dfn, #spMenuBtn em, #spMenuBtn img, #spMenuBtn ins, #spMenuBtn kbd, #spMenuBtn q, #spMenuBtn s, #spMenuBtn samp, #spMenuBtn small, #spMenuBtn strike, #spMenuBtn strong, #spMenuBtn sub, #spMenuBtn sup, #spMenuBtn tt, #spMenuBtn var, #spMenuBtn b, #spMenuBtn u, #spMenuBtn i, #spMenuBtn center, #spMenuBtn dl, #spMenuBtn dt, #spMenuBtn dd, #spMenuBtn ol, #spMenuBtn ul, #spMenuBtn li, #spMenuBtn fieldset, #spMenuBtn form, #spMenuBtn label, #spMenuBtn legend, #spMenuBtn table, #spMenuBtn caption, #spMenuBtn tbody, #spMenuBtn tfoot, #spMenuBtn thead, #spMenuBtn tr, #spMenuBtn th, #spMenuBtn td, #spMenuBtn article, #spMenuBtn aside, #spMenuBtn canvas, #spMenuBtn details, #spMenuBtn embed, #spMenuBtn figure, #spMenuBtn figcaption, #spMenuBtn footer, #spMenuBtn header, #spMenuBtn hgroup, #spMenuBtn menu, #spMenuBtn nav, #spMenuBtn output, #spMenuBtn ruby, #spMenuBtn section, #spMenuBtn summary, #spMenuBtn time, #spMenuBtn mark, #spMenuBtn audio, #spMenuBtn video, #pcContactBtn div, #pcContactBtn span, #pcContactBtn applet, #pcContactBtn object, #pcContactBtn iframe, #pcContactBtn h1, #pcContactBtn h2, #pcContactBtn h3, #pcContactBtn h4, #pcContactBtn h5, #pcContactBtn h6, #pcContactBtn p, #pcContactBtn blockquote, #pcContactBtn pre, #pcContactBtn a, #pcContactBtn abbr, #pcContactBtn acronym, #pcContactBtn address, #pcContactBtn big, #pcContactBtn cite, #pcContactBtn code, #pcContactBtn del, #pcContactBtn dfn, #pcContactBtn em, #pcContactBtn img, #pcContactBtn ins, #pcContactBtn kbd, #pcContactBtn q, #pcContactBtn s, #pcContactBtn samp, #pcContactBtn small, #pcContactBtn strike, #pcContactBtn strong, #pcContactBtn sub, #pcContactBtn sup, #pcContactBtn tt, #pcContactBtn var, #pcContactBtn b, #pcContactBtn u, #pcContactBtn i, #pcContactBtn center, #pcContactBtn dl, #pcContactBtn dt, #pcContactBtn dd, #pcContactBtn ol, #pcContactBtn ul, #pcContactBtn li, #pcContactBtn fieldset, #pcContactBtn form, #pcContactBtn label, #pcContactBtn legend, #pcContactBtn table, #pcContactBtn caption, #pcContactBtn tbody, #pcContactBtn tfoot, #pcContactBtn thead, #pcContactBtn tr, #pcContactBtn th, #pcContactBtn td, #pcContactBtn article, #pcContactBtn aside, #pcContactBtn canvas, #pcContactBtn details, #pcContactBtn embed, #pcContactBtn figure, #pcContactBtn figcaption, #pcContactBtn footer, #pcContactBtn header, #pcContactBtn hgroup, #pcContactBtn menu, #pcContactBtn nav, #pcContactBtn output, #pcContactBtn ruby, #pcContactBtn section, #pcContactBtn summary, #pcContactBtn time, #pcContactBtn mark, #pcContactBtn audio, #pcContactBtn video, #comicBtn div, #comicBtn span, #comicBtn applet, #comicBtn object, #comicBtn iframe, #comicBtn h1, #comicBtn h2, #comicBtn h3, #comicBtn h4, #comicBtn h5, #comicBtn h6, #comicBtn p, #comicBtn blockquote, #comicBtn pre, #comicBtn a, #comicBtn abbr, #comicBtn acronym, #comicBtn address, #comicBtn big, #comicBtn cite, #comicBtn code, #comicBtn del, #comicBtn dfn, #comicBtn em, #comicBtn img, #comicBtn ins, #comicBtn kbd, #comicBtn q, #comicBtn s, #comicBtn samp, #comicBtn small, #comicBtn strike, #comicBtn strong, #comicBtn sub, #comicBtn sup, #comicBtn tt, #comicBtn var, #comicBtn b, #comicBtn u, #comicBtn i, #comicBtn center, #comicBtn dl, #comicBtn dt, #comicBtn dd, #comicBtn ol, #comicBtn ul, #comicBtn li, #comicBtn fieldset, #comicBtn form, #comicBtn label, #comicBtn legend, #comicBtn table, #comicBtn caption, #comicBtn tbody, #comicBtn tfoot, #comicBtn thead, #comicBtn tr, #comicBtn th, #comicBtn td, #comicBtn article, #comicBtn aside, #comicBtn canvas, #comicBtn details, #comicBtn embed, #comicBtn figure, #comicBtn figcaption, #comicBtn footer, #comicBtn header, #comicBtn hgroup, #comicBtn menu, #comicBtn nav, #comicBtn output, #comicBtn ruby, #comicBtn section, #comicBtn summary, #comicBtn time, #comicBtn mark, #comicBtn audio, #comicBtn video, #headerSalonList div, #headerSalonList span, #headerSalonList applet, #headerSalonList object, #headerSalonList iframe, #headerSalonList h1, #headerSalonList h2, #headerSalonList h3, #headerSalonList h4, #headerSalonList h5, #headerSalonList h6, #headerSalonList p, #headerSalonList blockquote, #headerSalonList pre, #headerSalonList a, #headerSalonList abbr, #headerSalonList acronym, #headerSalonList address, #headerSalonList big, #headerSalonList cite, #headerSalonList code, #headerSalonList del, #headerSalonList dfn, #headerSalonList em, #headerSalonList img, #headerSalonList ins, #headerSalonList kbd, #headerSalonList q, #headerSalonList s, #headerSalonList samp, #headerSalonList small, #headerSalonList strike, #headerSalonList strong, #headerSalonList sub, #headerSalonList sup, #headerSalonList tt, #headerSalonList var, #headerSalonList b, #headerSalonList u, #headerSalonList i, #headerSalonList center, #headerSalonList dl, #headerSalonList dt, #headerSalonList dd, #headerSalonList ol, #headerSalonList ul, #headerSalonList li, #headerSalonList fieldset, #headerSalonList form, #headerSalonList label, #headerSalonList legend, #headerSalonList table, #headerSalonList caption, #headerSalonList tbody, #headerSalonList tfoot, #headerSalonList thead, #headerSalonList tr, #headerSalonList th, #headerSalonList td, #headerSalonList article, #headerSalonList aside, #headerSalonList canvas, #headerSalonList details, #headerSalonList embed, #headerSalonList figure, #headerSalonList figcaption, #headerSalonList footer, #headerSalonList header, #headerSalonList hgroup, #headerSalonList menu, #headerSalonList nav, #headerSalonList output, #headerSalonList ruby, #headerSalonList section, #headerSalonList summary, #headerSalonList time, #headerSalonList mark, #headerSalonList audio, #headerSalonList video, #footer div, #footer span, #footer applet, #footer object, #footer iframe, #footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6, #footer p, #footer blockquote, #footer pre, #footer a, #footer abbr, #footer acronym, #footer address, #footer big, #footer cite, #footer code, #footer del, #footer dfn, #footer em, #footer img, #footer ins, #footer kbd, #footer q, #footer s, #footer samp, #footer small, #footer strike, #footer strong, #footer sub, #footer sup, #footer tt, #footer var, #footer b, #footer u, #footer i, #footer center, #footer dl, #footer dt, #footer dd, #footer ol, #footer ul, #footer li, #footer fieldset, #footer form, #footer label, #footer legend, #footer table, #footer caption, #footer tbody, #footer tfoot, #footer thead, #footer tr, #footer th, #footer td, #footer article, #footer aside, #footer canvas, #footer details, #footer embed, #footer figure, #footer figcaption, #footer footer, #footer header, #footer hgroup, #footer menu, #footer nav, #footer output, #footer ruby, #footer section, #footer summary, #footer time, #footer mark, #footer audio, #footer video { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; -webkit-box-sizing: border-box; box-sizing: border-box; color: inherit; } #header article, #header aside, #header details, #header figcaption, #header figure, #header footer, #header header, #header hgroup, #header menu, #header nav, #header section, #spMenu article, #spMenu aside, #spMenu details, #spMenu figcaption, #spMenu figure, #spMenu footer, #spMenu header, #spMenu hgroup, #spMenu menu, #spMenu nav, #spMenu section, #spMenuBg article, #spMenuBg aside, #spMenuBg details, #spMenuBg figcaption, #spMenuBg figure, #spMenuBg footer, #spMenuBg header, #spMenuBg hgroup, #spMenuBg menu, #spMenuBg nav, #spMenuBg section, #spMenuBtn article, #spMenuBtn aside, #spMenuBtn details, #spMenuBtn figcaption, #spMenuBtn figure, #spMenuBtn footer, #spMenuBtn header, #spMenuBtn hgroup, #spMenuBtn menu, #spMenuBtn nav, #spMenuBtn section, #pcContactBtn article, #pcContactBtn aside, #pcContactBtn details, #pcContactBtn figcaption, #pcContactBtn figure, #pcContactBtn footer, #pcContactBtn header, #pcContactBtn hgroup, #pcContactBtn menu, #pcContactBtn nav, #pcContactBtn section, #comicBtn article, #comicBtn aside, #comicBtn details, #comicBtn figcaption, #comicBtn figure, #comicBtn footer, #comicBtn header, #comicBtn hgroup, #comicBtn menu, #comicBtn nav, #comicBtn section, #headerSalonList article, #headerSalonList aside, #headerSalonList details, #headerSalonList figcaption, #headerSalonList figure, #headerSalonList footer, #headerSalonList header, #headerSalonList hgroup, #headerSalonList menu, #headerSalonList nav, #headerSalonList section, #footer article, #footer aside, #footer details, #footer figcaption, #footer figure, #footer footer, #footer header, #footer hgroup, #footer menu, #footer nav, #footer section { display: block; } #header body, #spMenu body, #spMenuBg body, #spMenuBtn body, #pcContactBtn body, #comicBtn body, #headerSalonList body, #footer body { line-height: 1; } #header ol, #header ul, #spMenu ol, #spMenu ul, #spMenuBg ol, #spMenuBg ul, #spMenuBtn ol, #spMenuBtn ul, #pcContactBtn ol, #pcContactBtn ul, #comicBtn ol, #comicBtn ul, #headerSalonList ol, #headerSalonList ul, #footer ol, #footer ul { list-style: none; } #header blockquote, #header q, #spMenu blockquote, #spMenu q, #spMenuBg blockquote, #spMenuBg q, #spMenuBtn blockquote, #spMenuBtn q, #pcContactBtn blockquote, #pcContactBtn q, #comicBtn blockquote, #comicBtn q, #headerSalonList blockquote, #headerSalonList q, #footer blockquote, #footer q { quotes: none; } #header blockquote:before, #header blockquote:after, #header q:before, #header q:after, #spMenu blockquote:before, #spMenu blockquote:after, #spMenu q:before, #spMenu q:after, #spMenuBg blockquote:before, #spMenuBg blockquote:after, #spMenuBg q:before, #spMenuBg q:after, #spMenuBtn blockquote:before, #spMenuBtn blockquote:after, #spMenuBtn q:before, #spMenuBtn q:after, #pcContactBtn blockquote:before, #pcContactBtn blockquote:after, #pcContactBtn q:before, #pcContactBtn q:after, #comicBtn blockquote:before, #comicBtn blockquote:after, #comicBtn q:before, #comicBtn q:after, #headerSalonList blockquote:before, #headerSalonList blockquote:after, #headerSalonList q:before, #headerSalonList q:after, #footer blockquote:before, #footer blockquote:after, #footer q:before, #footer q:after { content: ""; content: none; } #header table, #spMenu table, #spMenuBg table, #spMenuBtn table, #pcContactBtn table, #comicBtn table, #headerSalonList table, #footer table { border-collapse: collapse; border-spacing: 0; } #header input, #header select, #header button, #spMenu input, #spMenu select, #spMenu button, #spMenuBg input, #spMenuBg select, #spMenuBg button, #spMenuBtn input, #spMenuBtn select, #spMenuBtn button, #pcContactBtn input, #pcContactBtn select, #pcContactBtn button, #comicBtn input, #comicBtn select, #comicBtn button, #headerSalonList input, #headerSalonList select, #headerSalonList button, #footer input, #footer select, #footer button { font: inherit; } #header img, #spMenu img, #spMenuBg img, #spMenuBtn img, #pcContactBtn img, #comicBtn img, #headerSalonList img, #footer img { vertical-align: bottom; } #header label, #spMenu label, #spMenuBg label, #spMenuBtn label, #pcContactBtn label, #comicBtn label, #headerSalonList label, #footer label { cursor: pointer; } #header button, #spMenu button, #spMenuBg button, #spMenuBtn button, #pcContactBtn button, #comicBtn button, #headerSalonList button, #footer button { -webkit-appearance: none; -moz-appearance: none; border: none; padding: 0; background: transparent; cursor: pointer; line-height: 1; outline: none; } #header a, #spMenu a, #spMenuBg a, #spMenuBtn a, #pcContactBtn a, #comicBtn a, #headerSalonList a, #footer a { color: inherit; text-decoration: none; outline: none; } #header a:hover, #spMenu a:hover, #spMenuBg a:hover, #spMenuBtn a:hover, #pcContactBtn a:hover, #comicBtn a:hover, #headerSalonList a:hover, #footer a:hover { text-decoration: none; } #header select, #header textarea, #header input[type=text], #header input[type=email], #header input[type=number], #header input[type=tel], #spMenu select, #spMenu textarea, #spMenu input[type=text], #spMenu input[type=email], #spMenu input[type=number], #spMenu input[type=tel], #spMenuBg select, #spMenuBg textarea, #spMenuBg input[type=text], #spMenuBg input[type=email], #spMenuBg input[type=number], #spMenuBg input[type=tel], #spMenuBtn select, #spMenuBtn textarea, #spMenuBtn input[type=text], #spMenuBtn input[type=email], #spMenuBtn input[type=number], #spMenuBtn input[type=tel], #pcContactBtn select, #pcContactBtn textarea, #pcContactBtn input[type=text], #pcContactBtn input[type=email], #pcContactBtn input[type=number], #pcContactBtn input[type=tel], #comicBtn select, #comicBtn textarea, #comicBtn input[type=text], #comicBtn input[type=email], #comicBtn input[type=number], #comicBtn input[type=tel], #headerSalonList select, #headerSalonList textarea, #headerSalonList input[type=text], #headerSalonList input[type=email], #headerSalonList input[type=number], #headerSalonList input[type=tel], #footer select, #footer textarea, #footer input[type=text], #footer input[type=email], #footer input[type=number], #footer input[type=tel] { -webkit-appearance: none; -moz-appearance: none; line-height: 1; -webkit-box-sizing: border-box; box-sizing: border-box; outline: none; border-radius: 0; border: none; background: inherit; } #header input[type=number], #spMenu input[type=number], #spMenuBg input[type=number], #spMenuBtn input[type=number], #pcContactBtn input[type=number], #comicBtn input[type=number], #headerSalonList input[type=number], #footer input[type=number] { -moz-appearance: textfield; } #header input[type=number]::-webkit-inner-spin-button, #header input[type=number]::-webkit-outer-spin-button, #spMenu input[type=number]::-webkit-inner-spin-button, #spMenu input[type=number]::-webkit-outer-spin-button, #spMenuBg input[type=number]::-webkit-inner-spin-button, #spMenuBg input[type=number]::-webkit-outer-spin-button, #spMenuBtn input[type=number]::-webkit-inner-spin-button, #spMenuBtn input[type=number]::-webkit-outer-spin-button, #pcContactBtn input[type=number]::-webkit-inner-spin-button, #pcContactBtn input[type=number]::-webkit-outer-spin-button, #comicBtn input[type=number]::-webkit-inner-spin-button, #comicBtn input[type=number]::-webkit-outer-spin-button, #headerSalonList input[type=number]::-webkit-inner-spin-button, #headerSalonList input[type=number]::-webkit-outer-spin-button, #footer input[type=number]::-webkit-inner-spin-button, #footer input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } #header select, #spMenu select, #spMenuBg select, #spMenuBtn select, #pcContactBtn select, #comicBtn select, #headerSalonList select, #footer select { -webkit-appearance: none; -moz-appearance: none; border-radius: 0; line-height: 1; cursor: pointer; } #header textarea, #spMenu textarea, #spMenuBg textarea, #spMenuBtn textarea, #pcContactBtn textarea, #comicBtn textarea, #headerSalonList textarea, #footer textarea { resize: none; width: 100%; line-height: 1.5; } #header input[type=button], #header input[type=submit], #spMenu input[type=button], #spMenu input[type=submit], #spMenuBg input[type=button], #spMenuBg input[type=submit], #spMenuBtn input[type=button], #spMenuBtn input[type=submit], #pcContactBtn input[type=button], #pcContactBtn input[type=submit], #comicBtn input[type=button], #comicBtn input[type=submit], #headerSalonList input[type=button], #headerSalonList input[type=submit], #footer input[type=button], #footer input[type=submit] { -webkit-appearance: none; -moz-appearance: none; border: none; line-height: 1; cursor: pointer; } #header ::-webkit-input-placeholder, #spMenu ::-webkit-input-placeholder, #spMenuBg ::-webkit-input-placeholder, #spMenuBtn ::-webkit-input-placeholder, #pcContactBtn ::-webkit-input-placeholder, #comicBtn ::-webkit-input-placeholder, #headerSalonList ::-webkit-input-placeholder, #footer ::-webkit-input-placeholder { color: #c0c0c0; } #header :-moz-placeholder, #spMenu :-moz-placeholder, #spMenuBg :-moz-placeholder, #spMenuBtn :-moz-placeholder, #pcContactBtn :-moz-placeholder, #comicBtn :-moz-placeholder, #headerSalonList :-moz-placeholder, #footer :-moz-placeholder { color: #c0c0c0; opacity: 1; } #header ::-moz-placeholder, #spMenu ::-moz-placeholder, #spMenuBg ::-moz-placeholder, #spMenuBtn ::-moz-placeholder, #pcContactBtn ::-moz-placeholder, #comicBtn ::-moz-placeholder, #headerSalonList ::-moz-placeholder, #footer ::-moz-placeholder { color: #c0c0c0; opacity: 1; } #header :-ms-input-placeholder, #spMenu :-ms-input-placeholder, #spMenuBg :-ms-input-placeholder, #spMenuBtn :-ms-input-placeholder, #pcContactBtn :-ms-input-placeholder, #comicBtn :-ms-input-placeholder, #headerSalonList :-ms-input-placeholder, #footer :-ms-input-placeholder { color: #c0c0c0; } #header .clearfix:after, #spMenu .clearfix:after, #spMenuBg .clearfix:after, #spMenuBtn .clearfix:after, #pcContactBtn .clearfix:after, #comicBtn .clearfix:after, #headerSalonList .clearfix:after, #footer .clearfix:after { content: ""; display: block; clear: both; height: 0; } #header *, #spMenu *, #spMenuBg *, #spMenuBtn *, #pcContactBtn *, #comicBtn *, #headerSalonList *, #footer * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } #header img, #spMenu img, #spMenuBg img, #spMenuBtn img, #pcContactBtn img, #comicBtn img, #headerSalonList img, #footer img { width: 100%; height: auto; } #header svg, #spMenu svg, #spMenuBg svg, #spMenuBtn svg, #pcContactBtn svg, #comicBtn svg, #headerSalonList svg, #footer svg { display: block; } html.fixed { position: fixed !important; width: 100%; height: 100% !important; } body > img { display: none !important; } /* .reservationBtn.sp ------------------------------------------------------------------*/ .reservationBtn.sp { position: fixed; display: -webkit-box; display: -ms-flexbox; display: flex; right: 105px; bottom: 30px; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; z-index: 200; } @media print, screen and (min-width: 751px) { .reservationBtn.sp ._btn { display: none; } } .reservationBtn.sp ._btn { width: 133px; height: auto; -webkit-backface-visibility: hidden; } .reservationBtn.sp ._btn._2 a { display: block; } .reservationBtn.sp.hide { -webkit-transform: translateY(60vw); -ms-transform: translateY(60vw); transform: translateY(60vw); } /* #spMenu ------------------------------------------------------------------*/ #spMenu { position: fixed; top: 0; width: 100%; height: 100%; z-index: 5000; line-height: 1; visibility: hidden; opacity: 0; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; will-change: transform, opacity; } #spMenu #spMenuInner { height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; padding: 15px 0; } @media print, screen and (min-width: 751px) { #spMenu #spMenuInner { padding: 0; } } #spMenu #spMenuInner #spScroll { display: table; width: 100%; height: 100%; } #spMenu #spMenuInner #spScroll #spScrollInner { display: table-cell; vertical-align: middle; position: relative; } @media print, screen and (min-width: 751px) { #spMenu #spMenuInner #spScroll #spScrollInner { overflow: hidden; } } #spMenu #spMenuInner .spMenuLogo { margin: 0 0 0 12px; opacity: 0; -webkit-transform: translateY(40px); -ms-transform: translateY(40px); transform: translateY(40px); -webkit-transition-duration: 1s; transition-duration: 1s; will-change: transform, opacity; } @media print, screen and (min-width: 751px) { #spMenu #spMenuInner .spMenuLogo { margin: 0; position: absolute; top: 0.46rem; left: 1.5rem; } } #spMenu #spMenuInner .spMenuLogo svg { width: 110px; height: 40px; fill: #0f3475; } @media screen and (max-width: 750px) { #spMenu #spMenuInner .spMenuLogo svg { position: relative; top: 6px; } } @media print, screen and (min-width: 751px) { #spMenu #spMenuInner .spMenuLogo svg { width: 1.4rem; height: 0.4rem; } } #spMenu #spMenuInner .spMenuHome { font-size: 20px; color: #9f9f9f; font-family: "Cormorant Garamond"; font-weight: 600; text-align: center; padding: 0 0 0; margin: -23px auto 4px; line-height: 1; opacity: 0; -webkit-transform: translateY(40px); -ms-transform: translateY(40px); transform: translateY(40px); -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; will-change: transform, opacity; } @media screen and (max-width: 750px) { #spMenu #spMenuInner .spMenuHome img { width: auto; margin-bottom: 4px; } } @media print, screen and (min-width: 751px) { #spMenu #spMenuInner .spMenuHome { padding: 0; margin: 0; position: absolute; top: 0.51rem; left: 3.2rem; font-size: 0.3rem; -webkit-transition-delay: 0s; transition-delay: 0s; } } #spMenu #spMenuInner .spMenuList { margin: 10px auto; width: 320px; height: 420px; position: relative; } @media print, screen and (min-width: 751px) { #spMenu #spMenuInner .spMenuList { width: 3.3rem; height: 3.3rem !important; margin: 0 auto; } } #spMenu #spMenuInner .spMenuList:before { content: ""; width: 185px; height: 235px; position: absolute; top: 0; right: 0; background: #dbe8f4; display: block; opacity: 0; -webkit-transform: translateY(60px); -ms-transform: translateY(60px); transform: translateY(60px); -webkit-transition-duration: 1.2s; transition-duration: 1.2s; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; will-change: transform, opacity; } @media print, screen and (min-width: 751px) { #spMenu #spMenuInner .spMenuList:before { width: 100vw !important; height: 1rem !important; right: calc(-100vw + 0.4rem) !important; top: -1.4rem !important; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } #spMenu #spMenuInner .spMenuList:after { content: ""; width: 222px; height: 235px; position: absolute; bottom: 0; left: 14px; background: #f2f2f2; display: block; opacity: 0; -webkit-transform: translateY(60px); -ms-transform: translateY(60px); transform: translateY(60px); -webkit-transition-duration: 1.2s; transition-duration: 1.2s; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; will-change: transform, opacity; } @media print, screen and (min-width: 751px) { #spMenu #spMenuInner .spMenuList:after { width: 100vw !important; height: 1rem !important; left: calc(-100vw + 0.4rem) !important; bottom: -1.4rem !important; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } #spMenu #spMenuInner .spMenuList li { position: absolute; opacity: 0; border-radius: 50%; -webkit-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.13); box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.13); -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition-duration: 1s; transition-duration: 1s; will-change: transform, opacity; } @media print, screen and (min-width: 751px) { #spMenu #spMenuInner .spMenuList li { box-shadow: none; -webkit-box-shadow: none; } } #spMenu #spMenuInner .spMenuList li:before { content: ""; width: 100%; height: 100%; border-radius: 50%; position: absolute; top: 0; left: 0; z-index: 1; } #spMenu #spMenuInner .spMenuList li a { display: table; color: #fff; width: 100%; height: 100%; font-size: 12px; line-height: 1.3; letter-spacing: 0.05em; font-weight: bold; text-align: center; position: relative; z-index: 2; } @media print, screen and (min-width: 751px) { #spMenu #spMenuInner .spMenuList li a { font-size: 0.18rem; font-weight: 500; } } #spMenu #spMenuInner .spMenuList li a div { display: table-cell; height: 100%; vertical-align: middle; } #spMenu #spMenuInner .spMenuList li a div svg { margin: 0 auto 15px; fill: #fff; stroke: #fff; } @media print, screen and (min-width: 751px) { #spMenu #spMenuInner .spMenuList li a div svg { margin: 0 auto 0.2rem; } } #spMenu #spMenuInner .spMenuList li a div ._month { display: inline-block; margin-top: 0; margin-right: -1px; } #spMenu #spMenuInner .spMenuList .spMenuPolicy { width: 157px; height: 157px; top: 23px; left: 21px; z-index: 3; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } @media print, screen and (min-width: 751px) { #spMenu #spMenuInner .spMenuList .spMenuPolicy { width: 2.35rem !important; height: 2.35rem !important; top: -2.4rem !important; left: -0.8rem !important; } } #spMenu #spMenuInner .spMenuList .spMenuPolicy:before { background: #f0ae9d; } #spMenu #spMenuInner .spMenuList .spMenuPolicy svg { width: 27px; height: 27px; } @media print, screen and (min-width: 751px) { #spMenu #spMenuInner .spMenuList .spMenuPolicy svg { width: 0.45rem; height: 0.45rem; } } #spMenu #spMenuInner .spMenuList .spMenuFlow { width: 140px; height: 140px; top: 70px; left: 166px; z-index: 2; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } @media print, screen and (min-width: 751px) { #spMenu #spMenuInner .spMenuList .spMenuFlow { width: 2.35rem !important; height: 2.35rem !important; top: -2rem !important; left: 2.36rem !important; } } #spMenu #spMenuInner .spMenuList .spMenuFlow:before { background: #a1d1c2; } #spMenu #spMenuInner .spMenuList .spMenuFlow svg { width: 26px; height: 29px; } @media print, screen and (min-width: 751px) { #spMenu #spMenuInner .spMenuList .spMenuFlow svg { width: 0.4375rem; height: 0.4875rem; } } #spMenu #spMenuInner .spMenuList .spMenuSalon { width: 116px; height: 116px; top: 159px; left: -7px; z-index: 7; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } @media print, screen and (min-width: 751px) { #spMenu #spMenuInner .spMenuList .spMenuSalon { width: 2.35rem !important; height: 2.35rem !important; top: -0.15rem !important; left: -2.6rem !important; } } #spMenu #spMenuInner .spMenuList .spMenuSalon:before { background: #5682a6; } #spMenu #spMenuInner .spMenuList .spMenuSalon svg { width: 24px; height: 24px; } @media print, screen and (min-width: 751px) { #spMenu #spMenuInner .spMenuList .spMenuSalon svg { width: 0.5rem; height: 0.5rem; } } #spMenu #spMenuInner .spMenuList .spMenuPrice { width: 141px; height: 141px; top: 159px; left: 91px; z-index: 4; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } #spMenu #spMenuInner .spMenuList .spMenuPrice:before { background: #b09879; } #spMenu #spMenuInner .spMenuList .spMenuPrice svg { width: 33px; height: 18px; } @media print, screen and (min-width: 751px) { #spMenu #spMenuInner .spMenuList .spMenuPrice svg { width: 0.44rem; height: 0.26rem; } } #spMenu #spMenuInner .spMenuList .spMenuFaq { width: 112px; height: 112px; top: 198px; left: 216px; z-index: 1; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } @media print, screen and (min-width: 751px) { #spMenu #spMenuInner .spMenuList .spMenuFaq { width: 2rem !important; height: 2rem !important; top: 1.2rem !important; left: 3.6rem !important; } } #spMenu #spMenuInner .spMenuList .spMenuFaq:before { background: #5682a6; } #spMenu #spMenuInner .spMenuList .spMenuFaq svg { width: 12px; height: 23px; } @media print, screen and (min-width: 751px) { #spMenu #spMenuInner .spMenuList .spMenuFaq svg { width: 0.225rem; height: 0.4rem; } } #spMenu #spMenuInner .spMenuList .spMenuVoice { width: 122px; height: 122px; top: 263px; left: 33px; z-index: 6; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } @media print, screen and (min-width: 751px) { #spMenu #spMenuInner .spMenuList .spMenuVoice { width: 2rem !important; height: 2rem !important; top: 3rem !important; left: -1.2rem !important; } } #spMenu #spMenuInner .spMenuList .spMenuVoice:before { background: #a1d1c2; } #spMenu #spMenuInner .spMenuList .spMenuVoice svg { width: 29px; height: 26px; } @media print, screen and (min-width: 751px) { #spMenu #spMenuInner .spMenuList .spMenuVoice svg { width: 0.475rem; height: 0.425rem; } } #spMenu #spMenuInner .spMenuList .spMenuGallery { width: 121px; height: 121px; top: 283px; left: 146px; z-index: 5; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } @media print, screen and (min-width: 751px) { #spMenu #spMenuInner .spMenuList .spMenuGallery { width: 2rem !important; height: 2rem !important; top: 3.3rem !important; left: 2rem !important; } } #spMenu #spMenuInner .spMenuList .spMenuGallery:before { background: #f0ae9d; } #spMenu #spMenuInner .spMenuList .spMenuGallery svg { width: 28px; height: 23px; } @media print, screen and (min-width: 751px) { #spMenu #spMenuInner .spMenuList .spMenuGallery svg { width: 0.475rem; height: 0.4rem; } } @media print, screen and (min-width: 751px) { #spMenu #spMenuInner .pcMenuDoctor { z-index: 6; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; width: 1.7rem !important; height: 1.7rem !important; top: -0.15rem !important; left: 3.4rem !important; } #spMenu #spMenuInner .pcMenuDoctor:before { background: #f0ae9d; } #spMenu #spMenuInner .pcMenuDoctor svg { width: 0.3rem; height: 0.38rem; } } @media print, screen and (min-width: 751px) { #spMenu #spMenuInner .pcMenuStaff { z-index: 6; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; width: 2rem !important; height: 2rem !important; top: 2rem !important; left: 3.5rem !important; } #spMenu #spMenuInner .pcMenuStaff:before { background: #5682a6; } #spMenu #spMenuInner .pcMenuStaff svg { width: 0.5rem; height: 0.32rem; fill: none !important; stroke-width: 2px; } } #spMenu #spMenuInner .spMenuMail { width: 240px; background: #f9f3e6; margin: 0 0 0 40px; opacity: 0; -webkit-transform: translateY(80px); -ms-transform: translateY(80px); transform: translateY(80px); -webkit-transition-duration: 1.2s; transition-duration: 1.2s; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; will-change: transform, opacity; } @media print, screen and (min-width: 751px) { #spMenu #spMenuInner .spMenuMail { width: 3.3rem; margin: 0; position: absolute; right: 1.6rem; bottom: 1.8rem; } } #spMenu #spMenuInner .spMenuMail a { display: block; height: 60px; } @media print, screen and (min-width: 751px) { #spMenu #spMenuInner .spMenuMail a { height: 0.9rem; } } #spMenu #spMenuInner .spMenuMail a i { width: 45px; height: 60px; background: #e0c382; padding: 15px 0 0; display: block; float: left; } @media print, screen and (min-width: 751px) { #spMenu #spMenuInner .spMenuMail a i { width: 0.64rem; height: 0.9rem; padding: 0; } } #spMenu #spMenuInner .spMenuMail a i svg { width: 33px; height: 29px; margin: 0 auto; fill: #fff; stroke: #fff; } @media print, screen and (min-width: 751px) { #spMenu #spMenuInner .spMenuMail a i svg { width: 0.46rem; height: 0.9rem; } } #spMenu #spMenuInner .spMenuMail a div { margin: 0 0 0 45px; padding: 13px 0 0; text-align: center; font-size: 13px; color: #c4973a; font-weight: 600; } @media print, screen and (min-width: 751px) { #spMenu #spMenuInner .spMenuMail a div { margin: 0 0 0 0.64rem; padding: 0.2rem 0 0; font-size: 0.16rem; } } #spMenu #spMenuInner .spMenuMail a div b { display: block; font-size: 14px; color: #595959; margin: 0 0 8px; font-weight: 500; } @media print, screen and (min-width: 751px) { #spMenu #spMenuInner .spMenuMail a div b { padding: 0 0 0.11rem; margin: 0; font-size: 0.18rem; } } #spMenu #spMenuInner .spMenuMail a div span { margin-left: -2px; } #spMenu.active { visibility: visible; opacity: 1; } #spMenu.active #spMenuInner .spMenuLogo { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } #spMenu.active #spMenuInner .spMenuHome { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } #spMenu.active #spMenuInner .spMenuList:before { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } #spMenu.active #spMenuInner .spMenuList:after { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } #spMenu.active #spMenuInner .spMenuList li { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } @media print, screen and (min-width: 751px) { #spMenu.active #spMenuInner .spMenuList li:before { -webkit-transition-duration: 0.4s; transition-duration: 0.4s; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } #spMenu.active #spMenuInner .spMenuList li:hover:before { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); } } @media screen and (max-width: 750px) { #spMenu.active #spMenuInner .spMenuList li.pc { display: none; } } #spMenu.active #spMenuInner .spMenuList li.loadingAnime { z-index: 9999; -webkit-transition-delay: 0s; transition-delay: 0s; /*top: 50%; left: 50%; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transform: scale(1) translate(-50%,-50%); -ms-transform: scale(1) translate(-50%,-50%); transform: scale(1) translate(-50%,-50%);*/ } #spMenu.active #spMenuInner .spMenuList li.loadingAnime:before { -webkit-transform: scale(20); -ms-transform: scale(20); transform: scale(20); -webkit-transition-duration: 2s; transition-duration: 2s; -webkit-transition-timing-function: cubic-bezier(0.015, -0.12, 0.17, 0.64); transition-timing-function: cubic-bezier(0.015, -0.12, 0.17, 0.64); } @media print, screen and (min-width: 751px) { #spMenu.active #spMenuInner .spMenuList li.loadingAnime:before { -webkit-transform: scale(100); -ms-transform: scale(100); transform: scale(100); -webkit-transition-duration: 4s; transition-duration: 4s; } } #spMenu.active #spMenuInner .spMenuList li.loadingAnime a { opacity: 0; } #spMenu.active #spMenuInner .spMenuMail { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } #spMenuBg { position: fixed; right: 20px; bottom: 25px; width: 55px; height: 55px; z-index: 4000; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; will-change: transform; } @media print, screen and (min-width: 751px) { #spMenuBg { width: 1rem; height: 1rem; right: 0.5rem; bottom: 0.5rem; } } #spMenuBg.hide { -webkit-transform: translateY(60vw); -ms-transform: translateY(60vw); transform: translateY(60vw); } @media print, screen and (min-width: 751px) { #spMenuBg.hide { -webkit-transform: translateY(2rem); -ms-transform: translateY(2rem); transform: translateY(2rem); } } #spMenuBg div { display: block; position: absolute; top: 50%; left: 50%; width: 1800px; height: 1600px; border-radius: 50%; background: #fff; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); -webkit-transition-delay: 0.15s; transition-delay: 0.15s; -webkit-transition-duration: 0.7s; transition-duration: 0.7s; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @media print, screen and (min-width: 751px) { #spMenuBg div { width: 400vw; height: 400vw; } } #spMenuBg.active div { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); -webkit-transition-duration: 0.7s; transition-duration: 0.7s; } .salonDetail #spMenuBg { bottom: 108px; } .salonDetail #spMenuBg.hide { -webkit-transform: translateY(60vw); -ms-transform: translateY(60vw); transform: translateY(60vw); } #spMenuBtn { display: none; position: fixed; right: 17.8vw; bottom: 65px; /* right: 19vw; bottom: 31.5vw;*/ width: 2vw; height: 2vw; z-index: 6000; cursor: pointer; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; will-change: transform; } @media screen and (max-width: 1080px) { #spMenuBtn { display: block; } } @media print, screen and (min-width: 751px) { #spMenuBtn { width: 1rem; height: 1rem; right: 0.5rem; top: 2.4rem; } } @media print, screen and (min-width: 751px) { #spMenuBtn.-pedia { top: 3.4rem; } } @media screen and (max-width: 750px) { #spMenuBtn.hide { -webkit-transform: translateY(60vw); -ms-transform: translateY(60vw); transform: translateY(60vw); } } @media print, screen and (min-width: 751px) { #spMenuBtn.hide { -webkit-transform: translateX(2rem); -ms-transform: translateX(2rem); transform: translateX(2rem); } } #spMenuBtn.hide02 { visibility: hidden; opacity: 0; } #spMenuBtn .open { padding: 20px 0 0; -webkit-transition-duration: 1s; transition-duration: 1s; width: 55px; height: 55px; position: absolute; top: 0; left: 0; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } @media print, screen and (min-width: 751px) { #spMenuBtn .open { padding: 0.34rem 0 0; width: 1rem; height: 1rem; } } #spMenuBtn .open:before { content: ""; position: absolute; top: 0; left: 0; display: block; background: #e0c382; width: 100%; height: 100%; border-radius: 50%; -webkit-box-shadow: 0 3px 15px 0px rgba(0, 0, 0, 0.3); box-shadow: 0 3px 15px 0px rgba(0, 0, 0, 0.3); } @media print, screen and (min-width: 751px) { #spMenuBtn .open:before { background-image: -webkit-gradient(linear, left top, right top, from(#b2cbf0), to(#f9cfee)); background-image: linear-gradient(90deg, #b2cbf0, #f9cfee); } } #spMenuBtn .open div { position: relative; width: 20px; height: 15px; margin: 0 auto; -webkit-transition: 0.2s; transition: 0.2s; } @media print, screen and (min-width: 751px) { #spMenuBtn .open div { width: 0.4rem; height: 0.32rem; } } #spMenuBtn .open div span { position: absolute; left: 0; width: 100%; height: 1px; background-color: #fff; } @media print, screen and (min-width: 751px) { #spMenuBtn .open div span { height: 2px; } } #spMenuBtn .open div span:nth-of-type(1) { top: 0; } #spMenuBtn .open div span:nth-of-type(2) { top: 7px; opacity: 1; } @media print, screen and (min-width: 751px) { #spMenuBtn .open div span:nth-of-type(2) { top: 0.15rem; } } #spMenuBtn .open div span:nth-of-type(3) { bottom: 0; } #spMenuBtn .close { padding: 14px 0 0; margin: 8px; -webkit-transition-duration: 1s; transition-duration: 1s; width: 40px; height: 40px; position: absolute; top: 0; left: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition-delay: 0s; transition-delay: 0s; } @media print, screen and (min-width: 751px) { #spMenuBtn .close { margin: 0.2rem; width: 0.6rem; height: 0.6rem; padding: 0.22rem 0 0; background: url(/sp/images_re/icon_menu_close.svg) no-repeat center/0.6rem 0.6rem; } } #spMenuBtn .close:before { content: ""; position: absolute; top: 0; left: 0; display: block; background: #fff; border: 2px solid #1f4b9e; width: 36px; height: 36px; border-radius: 50%; -webkit-box-sizing: content-box; box-sizing: content-box; } @media print, screen and (min-width: 751px) { #spMenuBtn .close:before { display: none; } } #spMenuBtn .close div { position: relative; width: 12px; height: 12px; margin: 0 auto; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } @media print, screen and (min-width: 751px) { #spMenuBtn .close div { display: none; } } #spMenuBtn .close div span { position: absolute; background-color: #1f4b9e; } #spMenuBtn .close div span:nth-of-type(1) { top: 5px; left: 0; width: 100%; height: 2px; } @media print, screen and (min-width: 751px) { #spMenuBtn .close div span:nth-of-type(1) { top: 3px; } } #spMenuBtn .close div span:nth-of-type(2) { top: 0; left: 5px; width: 2px; height: 100%; } @media print, screen and (min-width: 751px) { #spMenuBtn .close div span:nth-of-type(2) { top: -2px; } } #spMenuBtn.active .open { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition-delay: 0s; transition-delay: 0s; } #spMenuBtn.active .close { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } @media screen and (max-width: 750px) { .salonDetail #spMenuBtn { bottom: 135px; } .salonDetail #spMenuBtn.hide { -webkit-transform: translateY(60vw); -ms-transform: translateY(60vw); transform: translateY(60vw); } } /* #footer ------------------------------------------------------------------*/ @media screen and (max-width: 750px) { #footer { clear: both; color: #fff; text-align: center; line-height: 1; font-family: "Cormorant Garamond", serif; font-weight: 500; } #footer a { color: #fff; } #footer > .pc { display: none !important; } #footer .footerInquiry { background: #72654f; padding: 25px 20px; } #footer .footerInquiry dl dt { font-size: 26px; margin: 0 0 20px; } #footer .footerInquiry dl dd ul { font-size: 0; } #footer .footerInquiry dl dd ul li { display: inline-block; width: 48%; position: relative; } #footer .footerInquiry dl dd ul li + li { margin: 0 0 0 4%; } #footer .footerInquiry dl dd ul li a { display: block; background: #655944; position: relative; } #footer .footerInquiry dl dd ul li a span { height: 60px; line-height: 60px; font-size: 16px; display: inline-block; position: relative; } #footer .footerInquiry dl dd ul li a span svg { fill: #fff; stroke: #fff; display: block; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } #footer .footerInquiry dl dd ul li a b { width: 100px; padding: 5px 0; position: absolute; bottom: -10px; left: 50%; background: #ef845d; border-radius: 2px; color: #fff; font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif", "游明朝", YuMincho, serif; font-size: 1.1rem; font-weight: 400; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } #footer .footerInquiry dl dd ul li.tel a span { padding: 0 0 0 30px; } #footer .footerInquiry dl dd ul li.tel a span svg { width: 14px; height: 24px; } #footer .footerInquiry dl dd ul li.mail a span { padding: 0 0 0 40px; } #footer .footerInquiry dl dd ul li.mail a span svg { width: 22px; height: 15px; } #footer .footerInquiry dl dd p { font-size: 14px; margin: 24px 0 0; } .salonDetail #footer .footerInquiry { display: none; } #footer .footerLink { background: #493b27; padding: 30px 20px 15px; } #footer .footerLink .logo { font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif", "游明朝", YuMincho, serif; font-size: 1.2rem; font-weight: 400; color: #dab35b; margin: 0 auto 25px; width: 210px; } #footer .footerLink ul { font-size: 0; } #footer .footerLink ul li { display: inline-block; } #footer .footerLink ul li a { font-size: 11px; font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Noto Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 300; } #footer .footerLink ul li + li { margin: 0 0 0 10px; } #footer .footerLink small { display: block; opacity: 0.5; font-size: 10px; font-weight: 400; margin: 20px 0 0; } } @media print, screen and (min-width: 751px) { #footer { background: #694d28; padding: 1.2rem 0.6rem; position: relative; z-index: 10; } #footer #pagetop { position: absolute; width: 0.76rem; height: 0.74rem; background: url(/sp/images_re/pagetop.svg) no-repeat center/0.76rem 0.74rem; top: -1.8rem; left: calc(50% - 0.38rem); font-size: 0; cursor: pointer; -webkit-transition: all 0.4s; transition: all 0.4s; } #footer #pagetop:hover { opacity: 0.7; } #footer .inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; max-width: 17.8rem; margin: 0 auto; } #footer .logoArea .logo { line-height: 0; width: auto; } #footer .logoArea .logo svg { fill: #fff; width: 1.8rem; height: 0.64rem; } #footer .logoArea .footerTtl { color: #fff; font-size: 0.16rem; font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif", "游明朝", YuMincho, serif; font-weight: 400; padding: 0.2rem 0 0; width: 4.4rem; } #footer .logoArea .footerTtl .line { display: inline-block; -webkit-transform: scaleX(1.5); -ms-transform: scaleX(1.5); transform: scaleX(1.5); margin: 0 0.5em; } #footer .logoArea .footerTtl .since { font-size: 0.22rem; font-family: "Cormorant Garamond", serif; } #footer .logoArea small { font-size: 0.16rem; font-family: "Cormorant Garamond", serif; color: #fff; display: block; margin-top: 0.16rem; } #footer nav .home { color: #fff; font-size: 0.14rem; margin: 0.2rem 0 0.48rem; } #footer nav a:hover { text-decoration: underline; } #footer nav dl { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } #footer nav dl div { width: 100%; } } @media print and (-ms-high-contrast: none), screen and (min-width: 751px) and (-ms-high-contrast: active), screen and (min-width: 751px) and (-ms-high-contrast: none) { #footer nav dl div { max-width: 3rem; } } @media print, screen and (min-width: 751px) { #footer nav dl div.column2 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } #footer nav dl div.column2 dd { width: 50%; } #footer nav dl div.column2 dd.-area { width: 100%; } #footer nav dl div.column2 dd a { display: block; } #footer nav dl div.column2 dd a.-area { display: inline-block; } #footer nav dl div.column2 + div { margin-left: 0.4rem; } #footer nav dl dt { color: #fff; font-weight: bold; font-size: 0.14rem; padding-left: 0.6rem; margin-bottom: 0.4rem; word-break: keep-all; position: relative; } #footer nav dl dt:before { content: ""; width: 0.5rem; height: 1px; background: #d8a94d; position: absolute; top: 50%; left: 0; } #footer nav dl dd { color: #fff; font-size: 0.14rem; margin-bottom: 0.2rem; word-break: keep-all; } #footer nav dl dd + dt { margin-top: 0.8rem; } } #footerSalonListBg { position: fixed; left: -15px; bottom: -15px; width: 15px; height: 15px; z-index: 4000; /*-webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);*/ -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } @media print, screen and (min-width: 751px) { #footerSalonListBg { width: 1rem; height: 1rem; left: -0.5rem; bottom: -0.5rem; } } #footerSalonListBg div { display: block; position: absolute; top: 50%; left: 50%; width: 1800px; height: 1600px; border-radius: 50%; background: #72654f; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); -webkit-transition-delay: 0.15s; transition-delay: 0.15s; -webkit-transition-duration: 0.7s; transition-duration: 0.7s; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @media print, screen and (min-width: 751px) { #footerSalonListBg div { width: 400vw; height: 400vw; } } #footerSalonListBg.active div { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); -webkit-transition-duration: 0.7s; transition-duration: 0.7s; } #footerSalonList { visibility: hidden; position: fixed; left: 0; top: 0; z-index: 21001; width: 100%; height: 100%; text-align: left; font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Noto Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 300; padding: 0 !important; } #footerSalonList .footerSalonListInner { background: #72654f; height: 100%; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); opacity: 0; } #footerSalonList .footerSalonListBlock { height: 100%; margin: 0 -10px; overflow: auto; -webkit-box-sizing: border-box; box-sizing: border-box; color: #fff; -webkit-overflow-scrolling: touch; } #footerSalonList .footerSalonListBlock ::-webkit-scrollbar { display: none; -webkit-appearance: none; } #footerSalonList .footerSalonListBlock .adjustment { padding: 25px 30px; } #footerSalonList .footerSalonListBlock .mCSB_scrollTools .mCSB_draggerRail { background-color: #dac695; } #footerSalonList .footerSalonListBlock .ttl { font-size: 28px; font-family: "Cormorant Garamond", serif; font-weight: 400; z-index: 2; position: relative; line-height: 1; } #footerSalonList .footerSalonListBlock .ttl svg { width: 110px; height: 40px; fill: #fff; display: inline-block; position: relative; top: 3px; margin: 0 10px 8px 0; vertical-align: middle; } #footerSalonList .footerSalonListBlock .ttl + p { margin: 5px 0 0; z-index: 2; position: relative; font-size: 12px; font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Noto Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 300; letter-spacing: 0.05em; } @media print, screen and (min-width: 751px) { #footerSalonList .footerSalonListBlock .ttl + p { display: none; } } #footerSalonList .footerSalonListBlock .area { clear: both; margin: 30px 0 0; } #footerSalonList .footerSalonListBlock .area .areaTtl { text-align: center; font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif", "游明朝", YuMincho, serif; font-weight: 500; font-size: 17px; margin: 0 0 20px; } #footerSalonList .footerSalonListBlock .area ul { margin: -20px 0 0 0; font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Noto Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 300; font-size: 1.4rem; } #footerSalonList .footerSalonListBlock .area ul li { width: 50%; float: left; margin: 20px 0 0 0; } #footerSalonList .footerSalonListBlock .area ul li span { display: block; margin: 10px 0 0; padding: 1px 0 0 16px; min-height: 17px; position: relative; } #footerSalonList .footerSalonListBlock .area ul li span svg { width: 10px; height: 17px; stroke: #fff; fill: #fff; display: inline-block; position: absolute; top: 0; left: 0; } @media print, screen and (min-width: 751px) { #footerSalonList .footerSalonListBlock .area ul li { width: 25%; font-size: 14px; } } #footerSalonList .scrollbar { position: absolute; top: 10px; right: 5px; bottom: 10px; z-index: 10; width: 4px; background-color: #ece1e3; height: calc(100% - 20px); overflow: hidden; } #footerSalonList .scrollbar-thumb { min-height: 50px; background-color: #dac695; } #footerSalonList .close { position: fixed; right: 20px; top: 20px; width: 32px; height: 32px; z-index: 3; cursor: pointer; background: #fff; border-radius: 50%; } #footerSalonList .close div { position: relative; top: 6px; width: 19px; height: 19px; margin: 0 auto; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } #footerSalonList .close div span { position: absolute; background-color: #72654f; } #footerSalonList .close div span:nth-of-type(1) { top: 9px; left: 0; width: 100%; height: 1px; } #footerSalonList .close div span:nth-of-type(2) { top: 0; left: 9px; width: 1px; height: 100%; } #footerSalonList.active { visibility: visible; } #footerSalonList.active .footerSalonListInner { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; } /* #footerContact ------------------------------------------------------------------*/ #footerContact { position: fixed; left: 0; bottom: 0; z-index: 3000; width: 100%; height: 74px; padding: 0; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } #footerContact ul { max-width: 375px; margin: 0 auto; } #footerContact ul li { width: 50%; float: left; } #footerContact ul li a { display: block; /*position: relative; background: #fff; height: 48px; line-height: 48px; padding: 0 20px 0 32px; font-size: 1.4rem; font-family: $font_serif; font-weight: 500;*/ /*img { position: absolute; top: -4px; right: 5px; width: 92px; height: 16px; z-index: 2; }*/ } #footerContact ul li a span { display: block; width: 26px; height: 100%; background: #81cde0; position: absolute; top: 0; left: 0; } #footerContact ul li a span svg { fill: #fff; stroke: #fff; display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #footerContact ul li a i { display: block; width: 18px; height: 100%; background: #f4e8cd; position: absolute; top: 0; right: 0; } #footerContact ul li a i:before { content: ""; width: 1px; height: 11px; display: block; background: #dab35b; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #footerContact ul li a i:after { content: ""; width: 11px; height: 1px; display: block; background: #dab35b; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #footerContact ul .tel a span svg { width: 10px; height: 18px; } #footerContact ul .mail a span svg { width: 14px; height: 10px; } #footerContact.hide { -webkit-transform: translateY(60vw); -ms-transform: translateY(60vw); transform: translateY(60vw); } /* #header ------------------------------------------------------------------*/ #header { display: none; position: fixed; bottom: inherit !important; top: 0; right: 0; left: 0; width: 100%; z-index: 3000; background: rgba(36, 23, 0, 0.95); height: 50px; line-height: 1; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } #header.hide { -webkit-transform: translateY(-60px); -ms-transform: translateY(-60px); transform: translateY(-60px); } #header .inner { position: relative; } #header .logo { text-align: center; padding: 17px 0 0; width: 72px; margin: 0 auto; } #header .logo a { display: block; } #header .logo a svg { width: 72px; height: 17px; fill: #bab097; } #header .mail { position: absolute; top: 0; left: 0; } #header .mail a { display: block; width: 60px; height: 50px; position: relative; } #header .mail a svg { width: 20px; height: 16px; stroke: #f2e5cf; stroke-width: 0.5px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #header .salon { position: absolute; top: 0; right: 0; } #header .salon a { display: block; height: 50px; padding: 0 45px 0 0; position: relative; line-height: 50px; font-size: 12px; color: #f2e5cf; font-family: "Didact Gothic", sans-serif; } #header .salon a svg { width: 20px; height: 20px; stroke: #f2e5cf; stroke-width: 0.5px; position: absolute; top: 50%; right: 15px; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transform: translate(0, -50%) scale(1); -ms-transform: translate(0, -50%) scale(1); transform: translate(0, -50%) scale(1); } #header .salon a.hide svg { -webkit-transform: translate(0, -50%) scale(0); -ms-transform: translate(0, -50%) scale(0); transform: translate(0, -50%) scale(0); } #headerSalonListBtn { position: fixed; /* right: 19vw; bottom: 50vw;*/ right: 18.4vw; bottom: 126px; z-index: 6000; cursor: pointer; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } @media print, screen and (min-width: 751px) { #headerSalonListBtn { display: none !important; } } #headerSalonListBtn.hide { -webkit-transform: translateY(60vw); -ms-transform: translateY(60vw); transform: translateY(60vw); } @media print, screen and (min-width: 751px) { #headerSalonListBtn.hide { -webkit-transform: translateY(2rem); -ms-transform: translateY(2rem); transform: translateY(2rem); } } #headerSalonListBtn.hide02 { visibility: hidden; opacity: 0; } #headerSalonListBtn .open { padding: 20px 0 0; -webkit-transition-duration: 1s; transition-duration: 1s; width: 43px; height: 43px; position: absolute; top: 0; left: 0; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } #headerSalonListBtn .open:before { content: ""; position: absolute; top: 0; left: 0; display: block; background: url(/sp/images_re/bg_headerSalonListBtn.png) no-repeat; background-size: cover; width: 100%; height: 100%; border-radius: 50%; /*-webkit-box-shadow: 0 3px 15px 0px rgba(0, 0, 0, 0.3); box-shadow: 0 3px 15px 0px rgba(0, 0, 0, 0.3);*/ } #headerSalonListBtn .open svg { width: 27px; height: 27px; stroke: #fff; z-index: 2; position: relative; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; opacity: 0.75; } #headerSalonListBtn .close { padding: 12px 0 0; -webkit-transition-duration: 1s; transition-duration: 1s; width: 44px; height: 44px; position: absolute; top: 0; left: 0; opacity: 0.75; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition-delay: 0s; transition-delay: 0s; } #headerSalonListBtn .close:before { content: ""; position: absolute; top: 0; left: 0; display: block; background: rgba(255, 255, 255, 0.8); border: 3px solid #6ca1b4; width: 38px; height: 38px; border-radius: 50%; -webkit-box-sizing: content-box; box-sizing: content-box; -webkit-box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.1); box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.1); } #headerSalonListBtn .close div { position: relative; width: 20px; height: 20px; margin: 0 auto; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } #headerSalonListBtn .close div span { position: absolute; background-color: #6ca1b4; } #headerSalonListBtn .close div span:nth-of-type(1) { top: 9px; left: 0; width: 100%; height: 2px; } #headerSalonListBtn .close div span:nth-of-type(2) { top: 0; left: 9px; width: 2px; height: 100%; } #headerSalonListBtn.active .open { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition-delay: 0s; transition-delay: 0s; } #headerSalonListBtn.active .close { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } .salonDetail #headerSalonListBtn { bottom: 195px; } .salonDetail #headerSalonListBtn.hide { -webkit-transform: translateY(60vw); -ms-transform: translateY(60vw); transform: translateY(60vw); } #headerSalonListBg { position: fixed; right: 26px; bottom: 95px; width: 43px; height: 43px; z-index: 4000; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @media print, screen and (min-width: 751px) { #headerSalonListBg { display: none !important; } } #headerSalonListBg.hide { -webkit-transform: translateY(60vw); -ms-transform: translateY(60vw); transform: translateY(60vw); } @media print, screen and (min-width: 751px) { #headerSalonListBg.hide { -webkit-transform: translateY(2rem); -ms-transform: translateY(2rem); transform: translateY(2rem); } } #headerSalonListBg div { display: block; position: absolute; top: 50%; left: 50%; width: 1800px; height: 1600px; border-radius: 50%; background: #fff; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); -webkit-transition-delay: 0.15s; transition-delay: 0.15s; -webkit-transition-duration: 0.7s; transition-duration: 0.7s; will-change: transform; } #headerSalonListBg.active div { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); -webkit-transition-duration: 0.7s; transition-duration: 0.7s; } .salonDetail #headerSalonListBg { bottom: 173px; } .salonDetail #headerSalonListBg.hide { -webkit-transform: translateY(60vw); -ms-transform: translateY(60vw); transform: translateY(60vw); } #headerSalonList { visibility: hidden; position: fixed; left: 0; top: 0; z-index: 5000; width: 100%; height: 100%; text-align: left; font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Noto Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 300; /*.close { position: fixed; right: 20px; top: 20px; width: 25px; height: 25px; z-index: 3; cursor: pointer; div { position: relative; width: 25px; height: 25px; margin: 0 auto; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); span { position: absolute; background-color: #4b4b4b; &:nth-of-type(1) { top: 12px; left: 0; width: 100%; height: 1px; } &:nth-of-type(2) { top: 0; left: 12px; width: 1px; height: 100%; } } } }*/ } @media print, screen and (min-width: 751px) { #headerSalonList { display: none !important; } } #headerSalonList .headerSalonListInner { position: relative; height: 100%; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); opacity: 0; background: #fff; will-change: transform, opacity; } #headerSalonList .headerSalonListBlock { height: 100%; margin: 0 -10px 0 0; overflow: auto; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; -webkit-overflow-scrolling: touch; } #headerSalonList .headerSalonListBlock ::-webkit-scrollbar { display: none; -webkit-appearance: none; } #headerSalonList .headerSalonListBlock:before { content: ""; display: block; width: 100%; height: 50%; background: url(/sp/images_re/bg_headerSalonList.jpg) no-repeat center top; background-size: 100% auto; position: absolute; top: 0; left: 0; } #headerSalonList .headerSalonListBlock .adjustment { padding: 15px 0 45px 20px; } #headerSalonList .headerSalonListBlock .mCSB_scrollTools .mCSB_draggerRail { background-color: #b5d1dd; } #headerSalonList .headerSalonListBlock .ttl { font-size: 30px; font-family: "Cormorant Garamond", serif; font-weight: 300; z-index: 2; position: relative; line-height: 1; color: #fff; text-shadow: 0px 2px 5px rgb(255, 255, 255); } #headerSalonList .headerSalonListBlock .ttl span { margin: 0 0 8px; display: block; font-size: 12px; font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif", "游明朝", YuMincho, serif; color: #fff; font-weight: bold; text-shadow: 0px 2px 5px rgb(255, 255, 255); -webkit-filter: drop-shadow(0px, 0px, 1px white); filter: drop-shadow(0px, 0px, 1px white); } #headerSalonList .headerSalonListBlock .ttl span b { letter-spacing: -0.15em; margin-right: 0.15em; } #headerSalonList .headerSalonListBlock .ttl svg { width: 82px; height: 22px; fill: #fff; display: inline-block; margin: 0 4px 0 0; position: relative; top: 2px; /*-webkit-filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.2)); filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.2));*/ } #headerSalonList .headerSalonListBlock .ttl img { width: 174px; vertical-align: top; margin: -1px 0 0 -10px; } #headerSalonList .headerSalonListBlock .ttl + p { margin: 5px 0 0; z-index: 2; position: relative; color: #4b4b4b; font-size: 12px; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); } #headerSalonList .headerSalonListBlock .area { clear: both; z-index: 2; position: relative; margin: 30px 0 0; } #headerSalonList .headerSalonListBlock .area + .area { margin: 30px 0 0; } #headerSalonList .headerSalonListBlock .area .areaTtl { font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif", "游明朝", YuMincho, serif; font-weight: 500; font-size: 15px; margin: 0 0 20px; padding: 0 0 0 20px; position: relative; } #headerSalonList .headerSalonListBlock .area .areaTtl:before { content: ""; display: block; width: 30px; height: 14px; background: url(/sp/images_re/bg_ttl_headerSalonList.jpg) no-repeat; background-size: 30px 14px; position: absolute; top: 0.1em; left: -20px; } #headerSalonList .headerSalonListBlock .area .areaTtl a { font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif", "游明朝", YuMincho, serif; } #headerSalonList .headerSalonListBlock .area ul { margin: -20px 0 0 0; font-size: 12px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } #headerSalonList .headerSalonListBlock .area ul li { width: 33.3%; margin: 20px 0 0 0; } #headerSalonList .scrollbar { position: absolute; top: 10px; right: 5px; bottom: 10px; z-index: 10; width: 4px; background-color: #ece1e3; height: calc(100% - 20px); overflow: hidden; } #headerSalonList .scrollbar-thumb { min-height: 50px; background-color: #b5d1dd; } #headerSalonList.active { visibility: visible; -webkit-transition: 0.5s; transition: 0.5s; } #headerSalonList.active.jump { -webkit-transform: translateY(-150px); -ms-transform: translateY(-150px); transform: translateY(-150px); opacity: 0; } #headerSalonList.active .headerSalonListInner { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } @media print, screen and (min-width: 751px) { #anchorPager { position: fixed; top: 0; right: 0; height: 100vh; z-index: 5; opacity: 0; -webkit-transition: 0.5s ease; transition: 0.5s ease; } #anchorPager.show { opacity: 1; } #anchorPager:after { content: ""; width: 1px; height: 100vh; background: #e2e2e2; position: absolute; top: 0; right: 0.33rem; } #anchorPager ul { position: absolute; right: 0.5rem; /*top: 0.50rem;*/ top: 5rem; /* transform: translateY(-50%); */ text-align: right; min-width: 2rem; z-index: 1; } #anchorPager li { padding: 0.1rem 0; position: relative; } #anchorPager li a { font-size: 0.1rem; color: #d9d9d9; word-break: keep-all; font-weight: 300; } #anchorPager li a:after { content: ""; width: 0.1rem; height: 0.1rem; border-radius: 0.05rem; background: #d9d9d9; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: -0.21rem; } #anchorPager li .current { font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif", "游明朝", YuMincho, serif; font-size: 0.18rem; color: #c4973a; } #anchorPager li .current:after { width: 0.16rem; height: 0.16rem; border-radius: 0.08rem; right: -0.24rem; background-image: -webkit-gradient(linear, left top, right top, from(#bf8f3b), to(#dcb857)); background-image: linear-gradient(90deg, #bf8f3b, #dcb857); } #anchorPager li.middle a { font-size: 0.14rem; } } @media screen and (max-width: 1100px) and (min-width: 751px) { #footer { padding: 1.2rem 0.3rem; } #footer .logoArea .footerTtl { width: auto; word-break: keep-all; } #footer nav { margin-left: 0.4rem; } } @media screen and (max-width: 900px) and (min-width: 751px) { #footer .logoArea { margin-right: 0.4rem; } #footer nav dl div + div { margin-left: 0.4rem; } #footer nav dl div.column2 { max-width: none; display: block; } #footer nav dl div.column2 dd { width: 100%; } #footer nav dl dt { padding-left: 0.4rem; } } @media screen and (max-width: 374px) { #footerContact ul li a { font-size: 3.5vw; } } @media screen and (orientation: landscape) { #spMenu #spMenuInner .spMenuList { height: 250px; } #spMenu #spMenuInner .spMenuList:before { right: -50px; width: 235px; height: 185px; } #spMenu #spMenuInner .spMenuList:after { left: -50px; bottom: -30px; width: 235px; height: 222px; } #spMenu #spMenuInner .spMenuList .spMenuPolicy { top: 10px; left: 21px; } #spMenu #spMenuInner .spMenuList .spMenuFlow { top: 35px; left: 156px; } #spMenu #spMenuInner .spMenuList .spMenuSalon { top: 50px; left: -60px; } #spMenu #spMenuInner .spMenuList .spMenuPrice { top: 150px; left: 81px; } } @media screen and (orientation: landscape) and (min-width: 751px) { #spMenu #spMenuInner .spMenuList .spMenuPrice { top: 0; left: 0; width: 3.3rem; height: 3.3rem; } } @media screen and (orientation: landscape) { #spMenu #spMenuInner .spMenuList .spMenuFaq { top: 77px; left: 274px; } #spMenu #spMenuInner .spMenuList .spMenuVoice { top: 150px; left: -20px; } #spMenu #spMenuInner .spMenuList .spMenuGallery { top: 153px; left: 196px; } #spMenu #spMenuInner .spMenuMail { margin: 60px auto 0; } } @media screen and (max-width: 750px) { #pcContactBtn { display: none !important; } } @media print, screen and (min-width: 751px) { #pcContactBtn { position: fixed; width: 1.4rem; height: 2rem; right: 0.3rem; top: 0.3rem; z-index: 3999; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; will-change: transform; } #pcContactBtn.hide { -webkit-transform: translateX(2rem); -ms-transform: translateX(2rem); transform: translateX(2rem); } #pcContactBtn.hide02 { visibility: hidden; opacity: 0; } #pcContactBtn.-pedia { top: 1.3rem; } } @media screen and (min-width: 1081px) { #pcContactBtn { top: 90px; } } @media screen and (min-width: 1401px) { #pcContactBtn { top: 120px; } } @media screen and (max-width: 750px) { #comicBtn { display: none !important; } } @media print, screen and (min-width: 751px) { #comicBtn { position: fixed; width: 0.67rem; max-width: 55px; height: 2rem; right: 0; top: 7.55rem; /*3.80rem; 20190904*/ z-index: 3999; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; will-change: transform; } #comicBtn.hide { -webkit-transform: translateX(2rem); -ms-transform: translateX(2rem); transform: translateX(2rem); } #comicBtn.hide02 { visibility: hidden; opacity: 0; } } .pedia_body #pcSideMenu, #campaign #pcSideMenu { display: block !important; } #pcSideMenu { position: fixed; top: 0; left: 0; width: 0.8rem; height: calc(100vh - 6px); z-index: 6000; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transform: translateX(-0.8rem); -ms-transform: translateX(-0.8rem); transform: translateX(-0.8rem); will-change: transform; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } @media screen and (max-width: 750px) { #pcSideMenu { height: 100vh; -webkit-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); display: none; } } #pcSideMenu.show { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } #pcSideMenu > .menuSlide { top: 15vh; } #pcSideMenu > .menuSlide.-pctoponly { top: 58vh; } #pcSideMenu > div:not(.menuDetail) { height: 33.3333333333%; text-align: center; position: relative; z-index: 1; } #pcSideMenu > div:not(.menuDetail) a { display: block; height: 100%; color: #fff; position: relative; } #pcSideMenu > div:not(.menuDetail) a:before { content: ""; width: 0.48rem; height: 0.48rem; position: absolute; top: 0.12rem; left: calc(50% - 0.24rem); } #pcSideMenu > div:not(.menuDetail) a:after { content: ""; width: 0; height: 0; border-style: solid; border-width: 0.1rem 0 0.1rem 0.12rem; border-color: transparent transparent transparent #fff; position: absolute; bottom: 0.2rem; left: calc(50% - 0.06rem); } #pcSideMenu > div:not(.menuDetail) p { font-size: 0.16rem; font-weight: 400; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; display: inline-block; height: 100%; } #pcSideMenu .menuPlan { background: #ef845d; } #pcSideMenu .menuPlan a:before { background: url(/sp/images_re/icon_sidemenu_plan.svg) no-repeat center/0.48rem 0.48rem; } @media screen and (max-width: 750px) { #pcSideMenu .menuPlan a:before { background: url(/sp/images_re/icon_sidemenu_plan_sp.svg?2) no-repeat center/0.48rem 0.48rem; } } #pcSideMenu .menuPlan.show a:after { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } #pcSideMenu .menuPlan.pc p { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; text-align: center; line-height: 1; width: 1.5em; margin: 0em auto; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: initial; writing-mode: horizontal-tb; } #pcSideMenu .menuPlan.pc p .kana { display: inline-block; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; width: 1.5em; height: 1em; } #pcSideMenu .menuSalon { background: #81cde0; margin-top: 3px; } #pcSideMenu .menuSalon a:before { background: url(/sp/images_re/icon_sidemenu_salon.svg) no-repeat center/0.48rem 0.48rem; } #pcSideMenu .menuSalon.show a:after { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } #pcSideMenu .menuPrice { background: #dab35b; margin-top: 3px; } #pcSideMenu .menuPrice a:before { background: url(/sp/images_re/icon_sidemenu_price.svg) no-repeat center/0.48rem 0.48rem; } #pcSideMenu .menuSalonDetail { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; padding-left: 0.8rem; background: #b3e1ec; -webkit-transform: translateX(-100vw) translateX(-0.8rem); -ms-transform: translateX(-100vw) translateX(-0.8rem); transform: translateX(-100vw) translateX(-0.8rem); /*-webkit-transition: 0.6s ease; transition: 0.6s ease;*/ -webkit-transition: 0.4s ease; transition: 0.4s ease; } #pcSideMenu .menuSalonDetail.show { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } #pcSideMenu .menuSalonDetail.show .spMenuLogo, #pcSideMenu .menuSalonDetail.show .spMenuHome { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } #pcSideMenu .menuSalonDetail .spMenuLogo { opacity: 0; -webkit-transform: translateY(40px); -ms-transform: translateY(40px); transform: translateY(40px); -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; will-change: transform, opacity; position: absolute; top: 0.3rem; left: 1.5rem; } #pcSideMenu .menuSalonDetail .spMenuLogo svg { fill: #fff; width: 1.9rem; height: 0.7rem; } #pcSideMenu .menuSalonDetail .spMenuHome { color: #fff; font-family: "Cormorant Garamond", serif; font-weight: 600; text-align: center; padding: 0; margin: 0; line-height: 1; position: absolute; top: 0.51rem; left: 2.4rem; font-size: 0.3rem; opacity: 0; -webkit-transform: translateY(40px); -ms-transform: translateY(40px); transform: translateY(40px); -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; will-change: transform, opacity; } #pcSideMenu .menuSalonDetail .lead { text-align: center; width: 100%; position: absolute; top: 0; } #pcSideMenu .menuSalonDetail .lead p { font-size: 0.36rem; color: #fff; font-weight: 400; font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif", "游明朝", YuMincho, serif; } #pcSideMenu .menuSalonDetail .lead p b { display: inline-block; padding: 0 0.15rem; font-family: "Cormorant Garamond", serif; font-size: 0.7rem; vertical-align: bottom; } #pcSideMenu .menuSalonDetail .lead p + p { font-size: 0.5rem; margin-top: 0.2rem; text-shadow: 0px 0px 20px #fff, 0px 0px 40px #fff; } #pcSideMenu .menuSalonDetail .box { background: #fff; width: 16.8rem; margin: 1.8rem 0 0 0.7rem; padding: 0.3rem 0.4rem; padding: 0.3rem 0 0.3rem 0.4rem; max-height: 80vh; overflow-y: auto; } #pcSideMenu .menuSalonDetail .box dl { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 1.4rem; } #pcSideMenu .menuSalonDetail .box dl + dl { margin-top: 0.8rem; } #pcSideMenu .menuSalonDetail .box dl dt { width: 3rem; /* font-family: $font_serif; font-size: 0.24rem; font-weight: 500; padding-left: 0.32rem; background: url(/sp/images_re/thumb/icon_ttl.png) no-repeat center left / 0.26rem; */ } #pcSideMenu .menuSalonDetail .box dl dd { width: 13rem; } #pcSideMenu .menuSalonDetail .box dl dd ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: -0.3rem; } #pcSideMenu .menuSalonDetail .box dl dd ul li { width: 3.25rem; font-size: 0.22rem; font-weight: 400; height: 0.4rem; line-height: 0.4rem; margin-top: 0.3rem; padding-left: 0.65rem; } #pcSideMenu .menuSalonDetail .box dl dd ul li a { position: relative; display: inline-block; padding-right: 0.3rem; padding-left: 0.65rem; } #pcSideMenu .menuSalonDetail .box dl dd ul li a:after { content: ""; width: 0.12rem; height: 0.12rem; border: solid 2px #393939; border-bottom: none; border-left: none; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: calc(50% - 0.06rem); right: 0; } #pcSideMenu .menuSalonDetail .box dl dd ul li a span { position: relative; } #pcSideMenu .menuSalonDetail .box dl dd ul li a span:before { content: ""; width: 100%; height: 1px; background: #393939; position: absolute; bottom: 0; left: 0; opacity: 0; } #pcSideMenu .menuSalonDetail .box dl dd ul li a:hover span:before { opacity: 1; } #pcSideMenu .menuSalonDetail .box dl dd ul li img { position: absolute; top: calc(50% - 0.18rem); left: 0; width: 0.54rem; } #pcSideMenu .menuPlanDetail { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; padding-left: 0.8rem; background: #fff; -webkit-transform: translateX(-100vw) translateX(-0.8rem); -ms-transform: translateX(-100vw) translateX(-0.8rem); transform: translateX(-100vw) translateX(-0.8rem); /*-webkit-transition: 0.6s ease; transition: 0.6s ease;*/ -webkit-transition: transform 0.4s ease; -webkit-transition: -webkit-transform 0.4s ease; transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; transition: transform 0.4s ease, -webkit-transform 0.4s ease; text-align: center; overflow: auto; } @media screen and (max-width: 750px) { #pcSideMenu .menuPlanDetail { height: calc(100vh + 80px); padding: 25px 0 150px; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); display: none; -webkit-transition: transform 0.4s ease; -webkit-transition: -webkit-transform 0.4s ease; transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; transition: transform 0.4s ease, -webkit-transform 0.4s ease; } } #pcSideMenu .menuPlanDetail.show { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } @media screen and (max-width: 750px) { #pcSideMenu .menuPlanDetail.show { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } #pcSideMenu .menuPlanDetail.show .spMenuLogo { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } #pcSideMenu .menuPlanDetail .spMenuLogo { opacity: 0; -webkit-transform: translateY(40px); -ms-transform: translateY(40px); transform: translateY(40px); -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; will-change: transform, opacity; position: absolute; top: 0.4rem; left: 1.5rem; height: 0.7rem; font-size: 0; } @media screen and (max-width: 750px) { #pcSideMenu .menuPlanDetail .spMenuLogo { height: auto; margin-right: 8px; position: static; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; vertical-align: middle; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; } } #pcSideMenu .menuPlanDetail .spMenuLogo img { width: 2rem; } @media screen and (max-width: 750px) { #pcSideMenu .menuPlanDetail .spMenuLogo img { width: 108px; } } #pcSideMenu .menuPlanDetail .spMenuLogo svg { fill: #b58d2d; width: 0.8rem; height: 0.7rem; display: inline-block; } @media screen and (max-width: 750px) { #pcSideMenu .menuPlanDetail .spMenuLogo svg { width: 46px; height: 39px; } } #pcSideMenu .menuPlanDetail .spMenuLogo svg + svg { width: 1.4rem; height: 0.4rem; top: 0.12rem; left: 0.64rem; position: absolute; fill: #71644e; } @media screen and (max-width: 750px) { #pcSideMenu .menuPlanDetail .spMenuLogo svg + svg { width: 74px; height: 20px; margin-top: -7px; margin-left: -12px; position: static; } } #pcSideMenu .menuPlanDetail .ttl { text-align: center; width: 100%; position: absolute; top: 0.4rem; } @media screen and (max-width: 750px) { #pcSideMenu .menuPlanDetail .ttl { width: auto; margin-top: -6px; padding-right: 7px; position: static; display: inline-block; vertical-align: middle; } } #pcSideMenu .menuPlanDetail .ttl p { -webkit-transform: translateX(-1px); -ms-transform: translateX(-1px); transform: translateX(-1px); font-size: 0.3rem; color: #d9b260; font-weight: 600; font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif", "游明朝", YuMincho, serif; } @media screen and (max-width: 750px) { #pcSideMenu .menuPlanDetail .ttl p { font-size: 18px; } } #pcSideMenu .menuPlanDetail .ttl p b { display: inline-block; padding: 0 0.1rem 0 0; font-size: 0.5rem; font-weight: 600; vertical-align: -0.06rem; } @media screen and (max-width: 750px) { #pcSideMenu .menuPlanDetail .ttl p b { margin-right: 2px; padding: 0; font-size: 23px; } } #pcSideMenu .menuPlanDetail > ul { padding-top: 1.4rem; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 17rem; margin: 0 auto; } @media screen and (max-width: 750px) { #pcSideMenu .menuPlanDetail > ul { width: 100%; max-width: 500px; margin: 23px auto 27px; padding: 0 25px; display: block; overflow: auto; white-space: nowrap; letter-spacing: 0; font-size: 0; } } #pcSideMenu .menuPlanDetail > ul li { margin-left: 0.9rem; margin-bottom: 100px; width: 5.05rem; } @media screen and (max-width: 750px) { #pcSideMenu .menuPlanDetail > ul li { width: 305px; height: 400px; margin-left: 0; margin-bottom: 0; display: inline-block; vertical-align: top; overflow: hidden; } } #pcSideMenu .menuPlanDetail > ul li.sp { width: 100%; } #pcSideMenu .menuPlanDetail > ul li:nth-child(3n+1) { margin-left: 0; } @media screen and (max-width: 750px) { #pcSideMenu .menuPlanDetail > ul li:nth-child(2n) { margin-left: 0; } } @media screen and (max-width: 750px) { #pcSideMenu .menuPlanDetail > ul li:nth-child(n+2) { margin-left: 25px; } } #pcSideMenu .menuPlanDetail > ul li a { position: relative; display: block; } #pcSideMenu .menuPlanDetail > ul li img { position: relative; z-index: 2; } #pcSideMenu .menuPlanDetail > ul li .campaign-list-filter { position: absolute; left: 5px; top: 7px; z-index: 1; -webkit-filter: blur(2px); filter: blur(2px); opacity: 0.5; } #pcSideMenu .menuPlanDetail > ul li dl { text-align: center; } #pcSideMenu .menuPlanDetail > ul li dl dt { font-size: 0.22rem; color: #0090e3; padding-bottom: 0.1rem; text-decoration: underline; } @media screen and (max-width: 750px) { #pcSideMenu .menuPlanDetail > ul li dl dt { display: none; } } #pcSideMenu .menuPlanDetail > ul li dl dd { position: relative; } #pcSideMenu .menuPlanDetail .menuPlanDetail_text { background: #fff; width: 90.2%; padding-top: 10px; padding-right: 9.8%; position: absolute; top: calc(100% - 38px); right: 0; z-index: 2; display: block; line-height: 1.8; font-size: 0.17rem; } @media screen and (max-width: 750px) { #pcSideMenu .menuPlanDetail .menuPlanDetail_text { width: 92%; padding-right: 8%; line-height: 1.9; font-size: 10.5px; } } @media screen and (max-width: 750px) { #pcSideMenu > div:not(.menuDetail) { width: 50px; height: auto; padding: 15px 0 20px; position: absolute; top: auto; left: 0; bottom: 18px; z-index: 10002; display: none; opacity: 0.7; } #pcSideMenu > div:not(.menuDetail) a { height: auto; } #pcSideMenu > div:not(.menuDetail) a:before { background-size: 100% 100%; width: 30px; height: 30px; padding: 0; position: static; display: inline-block; } #pcSideMenu > div:not(.menuDetail) p { width: 1em; height: auto; margin: 7px auto 0; display: block; text-align: left; font-weight: 600; font-size: 12px; } #pcSideMenu .menuSalon { display: none !important; } } .menuPlan.sp, .menuPlanDetailClose { display: none; } @media screen and (max-width: 750px) { .menuPlan.sp { display: none; } .pedia_body .menuPlan.sp, #campaign .menuPlan.sp { background: #ef845d; width: 42px; height: auto; padding: 8px 0; position: fixed; top: auto; left: 8px; bottom: 20px; z-index: 3999; display: block; text-align: center; opacity: 0.7; -webkit-transition: left 0.5s; transition: left 0.5s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .pedia_body .show.menuPlan.sp, #campaign .show.menuPlan.sp { display: none; } .pedia_body .menuPlan.sp.hide, #campaign .menuPlan.sp.hide { left: -50px; } .menuPlan.sp a { height: auto; position: relative; display: block; color: #fff; } .menuPlan.sp a:before { content: ""; background: url(/sp/images_re/icon_sidemenu_plan_sp.svg?2) no-repeat center/100% 100%; width: 20px; height: 20px; padding: 0; position: static; display: inline-block; } .menuPlan.sp p { width: 1.5em; height: auto; margin: 2px auto 0; display: block; text-align: left; font-weight: 600; font-size: 12px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; line-height: 1.15; } .menuPlan.sp p .kana { display: inline-block; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; width: 1.5em; height: 1em; } .menuPlanDetailClose { width: 60px; height: 90px; position: fixed; left: 0; top: 460px; z-index: 10002; } .menuPlanDetailClose:before { content: ""; background: #f7ac98; width: 20px; height: 100%; position: absolute; left: 12px; top: 0; display: block; } .menuPlanDetailClose:after { content: ""; width: 0; height: 0; position: absolute; left: 18px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); display: block; border-style: solid; border-width: 5px 6px 5px 0; border-color: transparent #fff transparent transparent; } .menuPlanSp { max-width: 325px; margin: 0 auto; padding-left: 30px; } .menuPlanSp img { width: 100%; } } #a8sales img { display: none; } /* header_pc ------------------------------------------------------------------*/ .header_pc { background: -webkit-gradient(linear, left top, right top, color-stop(-40%, rgba(221, 206, 211, 0.9)), color-stop(140%, rgba(220, 218, 208, 0.9))); background: linear-gradient(to right, rgba(221, 206, 211, 0.9) -40%, rgba(220, 218, 208, 0.9) 140%); width: 100%; padding: 7px 0; position: fixed; left: 0; top: 0; z-index: 102; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); text-align: center; letter-spacing: 0; font-size: 0; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; will-change: transform; } @media screen and (max-width: 1080px) { .header_pc { display: none; } } .header_pc a:hover { opacity: 0.7; } .header_pc.hide { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } .header_pc_logo { margin-right: 12px; display: inline-block; -webkit-transform: translateY(2%); -ms-transform: translateY(2%); transform: translateY(2%); vertical-align: middle; } .header_pc_logo img { width: 124px; } .header_pc_home { margin-right: 68px; display: inline-block; -webkit-transform: translateY(2%); -ms-transform: translateY(2%); transform: translateY(2%); vertical-align: middle; } .header_pc_home img { width: 34px; } .header_pc ul { display: inline-block; vertical-align: middle; letter-spacing: 0; font-size: 0; } .header_pc li { margin-right: 48px; display: inline-block; vertical-align: middle; } .header_pc ul li:last-child { margin-right: 18px; } .header_pc li a { letter-spacing: 1px; font-size: 15px; font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif", "游明朝", YuMincho, serif; color: #8c6239; } .header_pc li a:hover { opacity: 0.7; } @media screen and (max-width: 1300px) { .header_pc_logo img { width: 124px; } .header_pc li { margin-right: 30px; } .header_pc ul li:last-child { margin-right: 10px; } .header_pc li a { letter-spacing: 0; font-size: 14px; } } .util-top { display: none; width: 10.9375rem; height: 15.625rem; position: fixed; top: 120px; right: 2.34375rem; z-index: 200; } .util-top a { display: block; -webkit-transition: opacity 0.4s; transition: opacity 0.4s; text-decoration: none; outline: none; color: inherit; -webkit-tap-highlight-color: transparent; -webkit-box-shadow: none; box-shadow: none; } .util-top img { max-width: 100%; height: auto; vertical-align: top; -webkit-tap-highlight-color: transparent; -webkit-box-shadow: none; box-shadow: none; } .util-top.hide { -webkit-transform: translateY(60vw); -ms-transform: translateY(60vw); transform: translateY(60vw); } @media screen and (max-width: 750px) { .util-top { display: block; width: 42px; height: 42px; top: auto; left: 18px; right: 25px; bottom: 16px; visibility: visible; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; will-change: transform; } }