@font-face{font-family:"Kiwi Maru";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/kiwi-maru-sapporo-v20.woff2") format("woff2")}
/* Extracted from ress.min.css */
html { text-size-adjust: 100%; box-sizing: border-box; tab-size: 4; word-break: normal; }
*, ::after, ::before { background-repeat: no-repeat; box-sizing: inherit; }
* { margin: 0px; padding: 0px; }
details, main { display: block; }
a { background-color: transparent; }
a:active, a:hover { outline-width: 0px; }
button, input, optgroup, select, textarea { font: inherit; }
button { overflow: visible; }
button, select { text-transform: none; }
[role="button"], [type="button"], [type="reset"], [type="submit"], button { cursor: pointer; }
[type="reset"], [type="submit"], button, html [type="button"] { appearance: button; }
button, input, select, textarea { background-color: transparent; border-style: none; }
a:focus, button:focus, input:focus, select:focus, textarea:focus { outline-width: 0px; }
img { border-style: none; }
[aria-controls] { cursor: pointer; }
/* Extracted from style.css */
:root { --color-main: #333333; --color-key: #e71425; --color-bg: #ffffff; --font: "Kiwi Maru", serif; --space-xs: clamp(8px, 2.5vw, 10px); --space-sm: clamp(12px, 5vw, 20px); --space-md: clamp(20px, 7.5vw, 30px); --space-l: clamp(24px, 10vw, 40px); --space-xl: clamp(32px, 12.5vw, 50px); --space-2xl: clamp(40px, 15vw, 60px); --space-3xl: clamp(48px, 17.5vw, 70px); --space-4xl: clamp(56px, 20vw, 80px); --transition: .5s ease; }
* { font-style: normal; margin: 0px; padding: 0px; text-align: left; box-sizing: border-box; }
html, body { scroll-behavior: smooth; }
[id] { scroll-margin-top: 60px; }
body { font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; color: var(--color-main); font-size: 16px; line-height: 1.5; font-weight: 400; background: url("../images/common/pc_bg.jpg") center center / cover no-repeat fixed; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
li { list-style-type: none; }
p { line-height: 1.8; }
img { height: auto; max-width: 100%; vertical-align: bottom; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
.layout { position: relative; }
.z-02 { position: relative; z-index: 2; }
.m20b { margin-bottom: 20px !important; }
.mb01 { margin-bottom: var(--space-xs); }
.mb02 { margin-bottom: var(--space-sm); }
.mb03 { margin-bottom: var(--space-md); }
.mb04 { margin-bottom: var(--space-l); }
.mb05 { margin-bottom: var(--space-xl); }
.mb07 { margin-bottom: var(--space-4xl); }
.p-i01 { padding-inline: clamp(10px, 4vw, 30px); }
.p-b01 { padding-block: var(--space-sm); }
.p-b02 { padding-block: var(--space-md); }
.p-b03 { padding-block: var(--space-l); }
.pb01 { padding-bottom: var(--space-xl); }
.txtWhite { color: rgb(255, 255, 255) !important; }
.txt10 { font-size: 77% !important; }
.f-maru { font-family: var(--font); font-style: normal; }
.cen { text-align: center !important; }
.bg01 { background: linear-gradient(rgb(255, 241, 235) 0%, rgb(255, 207, 202) 100%); }
.bg02 { background: var(--color-key); }
.bg04 { position: relative; padding-top: var(--space-l); background: url("../images/common/bg02-t.jpg") center top / 100% no-repeat rgb(255, 234, 225); }
.bg04::after { content: ""; position: absolute; left: 50%; bottom: -60px; transform: translateX(-50%); width: 110%; height: 210px; background: rgb(255, 234, 225); border-radius: 50%; z-index: 1; }
.span03 { border-bottom: 2px dotted rgb(51, 51, 51); line-height: 2; }
.secstyle01 { position: relative; }
.secstyle01::before { content: " "; width: 100%; height: 50px; display: block; background: url("../images/common/bg01.png") 0% 0% / 11px; }
.hstyle02 { color: var(--color-key); font-family: var(--font); font-size: min(5.5vw, 26px); text-align: center; }
.hstyle05 { display: inline-block; position: relative; padding: 10px 15px; color: var(--color-key); font-family: var(--font); font-size: min(4.8vw, 24px); text-align: center; }
.hstyle05::before { content: " "; position: absolute; left: 0px; top: 0px; background: url("../images/common/commnet01_b.png") left top / 100% no-repeat; width: 20px; height: 25px; }
.hstyle05::after { content: " "; position: absolute; right: 0px; bottom: 0px; background: url("../images/common/commnet01_a.png") right top / 100% no-repeat; width: 20px; height: 25px; }
.ulstyle01 .hstyle05 { font-size: min(4.4vw, 20px); padding-inline: var(--space-sm); }
.ulstyle01 .hstyle05 { padding-left: 10px; padding-right: 0px; }
.ulstyle01 .hstyle05::before { left: -10px; }
.ulstyle01 .hstyle05::after { right: -10px; }
.ulstyle01 li.inner { border: solid var(--color-key) 1px; border-radius: 10px; overflow: hidden; background: rgb(255, 255, 255); box-shadow: rgba(206, 9, 25, 0.5) 0px 4px 0px; }
.ulstyle01 li.inner { margin-right: 1px; }
.ulstyle01 li .text { padding: var(--space-sm); }
.ulstyle01.step li.inner { padding: var(--space-sm); }
.ulstyle01.step li.inner p { font-size: 90%; }
.boxstyle01 { display: flex; flex-wrap: wrap; justify-content: space-between; }
.boxstyle01.center { align-items: center; }
.wid03 { width: 36%; }
.wid04 { width: 60%; }
.en_bg01 { position: absolute; left: 50%; top: max(-5.5vw, -30px); z-index: 2; transform: translateX(-50%); }
.header { position: fixed; inset: 0px auto auto 0px; width: 100%; min-height: 55px; z-index: 5; background: rgba(255, 255, 255, 0.7); }
body.menu-open .header { background: none !important; }
.header-site-title { position: absolute; top: 1px; left: 50%; transform: translateX(-50%); z-index: 20; display: block; width: auto; white-space: nowrap; font-size: 11px; line-height: 1.4; text-align: center; margin: 0px; font-weight: 400; pointer-events: auto; }
.logo { display: flex; justify-content: center; align-items: center; height: auto; padding-top: 18px; padding-bottom: 5px; }
.logo img { display: block; width: 80px; height: auto; }
.circle-text { display: none; }
.hamburger { position: fixed; top: 0px; right: 0px; width: 56px; height: 56px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; z-index: 7; transition: var(--transition); }
.hamburger span { position: absolute; left: 50%; transform: translateX(-50%); width: 24px; height: 2px; background: rgb(232, 32, 48); transition: var(--transition); }
.hamburger span:nth-child(1) { top: 20px; }
.hamburger span:nth-child(2) { top: 27px; }
.hamburger span:nth-child(3) { top: 34px; }
.hamburger.active span:nth-child(1) { top: 27px; transform: translateX(-50%) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { top: 27px; transform: translateX(-50%) rotate(-45deg); }
body.menu-open { overflow: hidden; height: 100dvh; overscroll-behavior: none; }
.nav { position: fixed; inset: 0px; opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s; z-index: 6; padding-top: 60px; padding-bottom: 20px; background: rgba(17, 17, 17, 0.94); overflow-y: scroll; }
.nav.active { opacity: 1; visibility: visible; }
.nav-list a { display: block; border-bottom: 1px solid rgb(102, 102, 102); padding-block: var(--space-xs); padding-inline: var(--space-sm); background: url("../images/common/list03.png") right 20px center / 8px no-repeat; color: rgb(255, 255, 255); font-size: clamp(12px, 4.3vw, 22px); }
.area-list-sp { padding: var(--space-sm); display: grid; gap: 10px; grid-template-columns: 1fr 1fr 1fr 1fr; }
.area-list-sp li a { padding: var(--space-xs); display: block; background: rgba(255, 255, 255, 0.9); text-align: center; font-size: min(4vw, 16px); }
#entry { padding-block: var(--space-l); background: url("../images/common/entry_bg01.jpg") center bottom / cover no-repeat; }
#entry h2 { margin-bottom: 55%; }
#entry .inner { padding-bottom: var(--space-l); padding-inline: var(--space-sm); background: rgba(232, 32, 48, 0.85); border-radius: 10px; }
#entry .inner .text img { margin-top: -53%; }
#entry .inner ul li a { padding: 15px 10px; display: block; border-radius: 20px; background: rgb(255, 255, 255); font-size: min(4.1vw, 20px); text-align: center; }
#entry .inner ul li:first-of-type a img { width: 20px; vertical-align: -2px; margin-right: var(--space-xs); }
#entry .inner ul li:last-of-type a img { width: 25px; margin-right: var(--space-xs); }
footer { padding-bottom: 50px; }
footer .footertop { padding-top: var(--space-l); padding-bottom: var(--space-sm); padding-inline: var(--space-sm); border-bottom: 1px solid rgb(204, 204, 204); }
footer .footertop .ttl img { width: 80px; }
footer .footertop ul { display: flex; justify-content: center; }
footer .footertop ul li a { padding-inline: 5px; text-decoration: underline; font-size: 90%; }
footer .footerbottom { padding: var(--space-xs); line-height: 1.5; font-size: 75%; }
#footerFloatingMenu { display: block; width: 100%; position: fixed; left: 0px; bottom: 0px; z-index: 4; text-align: center; }
#footerFloatingMenu ul { display: grid; grid-template-columns: repeat(3, 1fr); }
#footerFloatingMenu ul li { border-top: 1px solid rgb(255, 255, 255); height: 50px; line-height: 1; }
#footerFloatingMenu ul li:first-child { border-right: 1px solid rgb(255, 255, 255); background: rgb(241, 70, 70); }
#footerFloatingMenu ul li:nth-child(2) { border-right: 1px solid rgb(255, 255, 255); background: rgb(76, 198, 101); }
#footerFloatingMenu ul li:nth-child(3) { background: rgb(81, 156, 222); }
#footerFloatingMenu ul li a { position: relative; display: block; width: 100%; height: 100%; text-decoration: none; text-align: center; padding: 5px 0px; color: rgb(255, 255, 255); font-size: 11px; }
#footerFloatingMenu ul li:first-of-type img { width: 31px; }
#footerFloatingMenu ul li:nth-of-type(2) img { margin-top: 1px; width: 24px; }
#footerFloatingMenu ul li:nth-of-type(3) img { margin-top: 4px; width: 26px; }
#footerFloatingMenu ul li div { position: absolute; width: 100%; left: 0px; bottom: 5px; }
.modal { position: fixed; top: 0px; left: 0px; width: 100%; height: 100vh; z-index: 9; opacity: 0; visibility: hidden; transition: 0.3s; }
.modal.is-active { opacity: 1; visibility: visible; }
.modal__bg { position: absolute; inset: 0px; background: rgba(0, 0, 0, 0.8); }
.modal__content { left: 50%; padding: 10% 5%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; overflow: auto; }
.modal__content .text { max-width: 440px; margin: 0px auto 30px; text-align: center; font-size: min(3.8vw, 18px); }
.modal__content ul { max-width: 380px; margin: 0px auto; }
.modal__content ul li a { position: relative; display: block; padding: 10px 22%; text-decoration: none; background: var(--color-key); color: rgb(255, 255, 255); margin-bottom: 15px; text-align: center; border-radius: 20px; font-size: min(3.8vw, 16px); }
.modal__content ul li a::before { content: " "; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 10px; height: 15px; background: url("../images/common/list02.png") center center / 100% no-repeat; }
.modal__content ul.f-tel a { background: url("../images/common/c_tel.png") 10% center / 13px no-repeat rgb(241, 70, 70); }
.modal__content ul.f-line a { background: url("../images/common/c_line.png") 10px center / 20px no-repeat rgb(76, 198, 101); }
.f-line, .f-tel { display: flex; flex-wrap: wrap; gap: 10px; }
.f-line li, .f-tel li { width: calc(50% - 10px); list-style: none; }
.f-line li a, .f-tel li a { display: block; padding: 10px; }
.close { margin-top: 20px; text-align: center; }
.close button { width: 100px; margin: 10px auto; display: block; text-align: center; text-decoration: none; background: rgb(255, 255, 255); padding: 5px 10px; color: rgb(26, 26, 26); border-radius: 5px; }
.sidebar { display: none; }
.main { width: min(100%, 560px); margin-inline: auto; background: rgb(255, 255, 255); min-height: 100vh; box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 30px; overflow: hidden; }
#subimage { padding-bottom: var(--space-sm); background: url("../images/top/topimage_bg01.png") center center / cover repeat; }
#subimage .sub-top { position: relative; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; background: url("../images/chatlady/subimage.png") center bottom / cover no-repeat; height: 55vh; }
#subimage .sub-top .ttl1 { display: inline-block; margin-bottom: var(--space-xs); padding: var(--space-xs); border: solid 1px var(--color-key); background: rgb(255, 255, 255); color: var(--color-key); font-family: var(--font); font-size: min(5vw, 30px); }
#subimage .sub-bottom { display: flex; justify-content: center; align-items: center; height: 16vh; padding: 0px 2%; font-size: clamp(12px, 4.2vw, 18px); }
#breadcrumb { position: relative; background: rgba(255, 255, 255, 0.6); z-index: 2; }
#breadcrumb ul { padding: 5px 5px 5px 12px; display: flex; flex-wrap: wrap; gap: 0px 4px; }
#breadcrumb ul li { font-size: 75%; }
#breadcrumb::after { content: " "; display: block; clear: both; }
.fadeUp { opacity: 0; transform: translateY(20px); transition: opacity 0.8s, transform 0.8s; }
.fadeUp.show { opacity: 1; transform: translateY(0px); }
.delay1 { transition-delay: 0.2s; }
.delay2 { transition-delay: 0.4s; }
@keyframes infinity-scroll-left { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-100%); }
}
@media (min-width: 500px){
body { font-size: 18px; }
#footerFloatingMenu { max-width: 560px; left: 50%; transform: translateX(-50%); }
#subimage .sub-bottom { width: 450px; margin-inline: auto; }
}
@media screen and (min-width: 1000px){
.header { background: none; }
.hamburger, .nav { display: none; }
.header { z-index: 20; width: 420px; inset: 0px 0px auto; padding: 40px 20px; }
.logo { display: inline-block; height: auto; padding-top: 0px; }
.header-site-title { top: 12px; left: 20px; transform: none; font-size: 12px; text-align: left; z-index: 1001; }
#footerFloatingMenu { display: none; }
.sidebar { display: block; position: fixed; top: 0px; left: 0px; width: 420px; height: 100vh; padding: 140px 60px 140px 30px; z-index: 5; }
.pc-nav { display: flex; }
.pc-nav-list { margin-right: 70px; }
.pc-nav-list li { position: relative; }
.pc-nav-list li + li { margin-top: 24px; }
.pc-nav-list a { transition: var(--transition); }
.pc-nav-list li a.current { color: var(--color-key); }
.pc-nav-list a:hover { color: var(--color-key); }
.pc-nav-list li a::after { position: absolute; left: -20px; content: "●"; opacity: 0; transition: 0.5s; color: var(--color-key); }
.pc-nav-list li a.current::before { position: absolute; left: -20px; content: "●"; color: var(--color-key); }
.pc-nav-list li a:hover::after { opacity: 1; }
.area-list li { position: relative; margin-bottom: 15px; font-size: 90%; }
.area-list li a { transition: var(--transition); }
.area-list li a.current { color: var(--color-key); }
.area-list li a.current::before { position: absolute; left: -20px; content: "●"; color: var(--color-key); }
.area-list li a:hover { color: var(--color-key); }
.contact-nav { display: flex; justify-content: space-between; }
.contact-nav li { width: 48%; }
.contact-nav li a { display: block; padding: 15px 10px; border: solid 1px var(--color-key); background: rgb(255, 255, 255); color: var(--color-key); border-radius: 30px; text-align: center; transition: var(--transition); }
.contact-nav li:first-of-type a img { width: 25px; vertical-align: -5px; margin-right: var(--space-xs); }
.contact-nav li:last-of-type a img { width: 22px; vertical-align: -1px; margin-right: var(--space-xs); }
.contact-nav li a:hover { background: rgb(254, 243, 240); }
.circle-text { display: block; position: fixed; bottom: -30vw; right: -10vw; width: 80vw; aspect-ratio: 1 / 1; pointer-events: none; z-index: -1; animation: 80s linear 0s infinite normal none running rotate-circle; }
.circle-text svg { width: 100%; height: 100%; overflow: visible; }
.circle-text text { fill: rgba(255, 255, 255, 0.4); font-size: clamp(8px, 0.5vw, 14px); letter-spacing: 0.12em; text-transform: uppercase; }
@keyframes rotate-circle { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.main { margin-inline: auto 0px; }
#subimage .sub-top { height: 560px; }
#subimage .sub-bottom { height: 160px; }
}
@media screen and (min-width: 1120px){
.main { margin-left: 50%; }
.sidebar, .header { left: inherit; right: 60%; }
}
html { scroll-behavior: smooth; }
.page-top { position: fixed; right: 14px; bottom: 64px; z-index: 8; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: solid 1px var(--color-key); border-radius: 50%; background: rgba(255, 255, 255, 0.9); color: var(--color-key); font-size: 18px; line-height: 1; text-decoration: none; box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 12px; }
.page-top:hover { background: rgb(254, 243, 240); }
@media screen and (min-width: 1000px){
.page-top { right: 24px; bottom: 24px; }
}
.circle-text, .circle-text * { user-select: none; pointer-events: none; }
.page-top { user-select: none; -webkit-tap-highlight-color: transparent; }
.page-top:focus { outline: none; }
.page-id-213 .fadeUp, .page-id-37773 .fadeUp, .page-id-37774 .fadeUp { opacity: 1; transform: none; transition: none; }
/* Keep the testimonial cards visually separate on the motivation page. */
.page-id-37774 .tokyo-static-list.reviews { display: grid; gap: clamp(18px, 4vw, 28px); margin: 0px; padding: 0px; overflow: visible; }
.page-id-37774 .tokyo-static-list.reviews > li.inner { width: 100%; margin: 0px; }
/* Extracted from content.css */
.modelcase .inner { padding-bottom: var(--space-l); border-bottom: 1px solid rgb(255, 255, 255); }
.modelcase .box { padding-block: var(--space-sm); padding-left: 25%; position: relative; background: rgba(255, 255, 255, 0.8); border-radius: 40px 40px 0px 0px; }
.modelcase .box .girl { position: absolute; left: 3%; top: -5%; height: 182px; width: auto; }
.case-dl1 { display: flex; justify-content: space-between; }
.case-dl1 dt { width: 18%; }
.case-dl1 dd { width: 78%; }
#arealist ul { display: flex; }
#arealist ul li { width: 20%; background: rgb(255, 255, 255); }
#arealist ul li a { width: 100%; height: 100%; padding: 34px 0px 5px; border-right: solid 1px var(--color-key); display: block; text-align: center; font-size: min(2.8vw, 16px); color: var(--color-key); line-height: 1.4; }
#arealist ul li:last-of-type a { border-right-width: medium; border-right-style: none; border-right-color: currentcolor; }
#arealist ul li.insta a { background: url("../images/area/area_list1.png") center top 5px / 22px no-repeat rgb(255, 255, 255); }
#arealist ul li.room a { background: url("../images/area/area_list2.png") center top 5px / 25px no-repeat rgb(255, 255, 255); }
#arealist ul li.douki a { background: url("../images/area/area_list3.png") center top 9px / 22px no-repeat rgb(255, 255, 255); }
#arealist ul li.manager a { background: url("../images/area/area_list4.png") center top 4px / 17px no-repeat rgb(255, 255, 255); }
#arealist ul li.docu a { padding-top: 41px; background: url("../images/area/area_list5.png") center top 8px / 18px no-repeat rgb(255, 255, 255); }
#arealist li.current a { pointer-events: none; cursor: default; }
#arealist li.current { opacity: 0.9; }
#sapporo2_02 h2 { margin-top: -30px; padding-inline: 10%; }
#sapporo2_02 ul { display: flex; justify-content: space-between; flex-wrap: wrap; }
#sapporo2_02 ul li { width: 48%; margin-bottom: 15px; }
#sapporo2_02 ul li:first-of-type { width: 100%; }
#sapporo2_03 .bg04 .en01 { width: 60%; }
#sapporo2_03 .modelcase .box .girl { top: -7%; height: 155px; }
#sapporo2_03 .modelcase .box { padding-right: 3%; padding-left: 33%; }
#sapporo2_03 .modelcase .inner { padding-top: 20px; }
.reviews .case-dl1 { align-items: flex-start; }
.reviews .case-dl1 dt { padding-block: 5px; background: rgb(255, 255, 255); color: var(--color-key); border: solid 1px var(--color-key); line-height: 1.2; text-align: center; font-size: min(3.5vw, 18px); }
#sapporo2_04 { padding-top: clamp(32px, 8vw, 48px); }
#sapporo2_04 .why { padding: 0px 40%; }
.ulstyle01.areaslider li .text { padding: 0px; }
#sapporo2_04 .ulstyle01 .hstyle05 { text-align: left; }
#sapporo2_04 .ulstyle01 { overflow: hidden; }
/* Space the reason cards in the "why Alice Sapporo" section. */
.page-id-37774 #sapporo2_04 .tokyo-static-list.ulstyle01.step.areaslider { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 4vw, 28px); margin: 0px; padding: 0px; overflow: visible; }
.page-id-37774 #sapporo2_04 .tokyo-static-list.ulstyle01.step.areaslider > li.inner { width: 100%; margin: 0px; }