:root {
  --main: #222223;
  --gry: #e0e0e0;
  --gray: #bcbcbc;
  --bk: #ffffff;
  --blk: #333333;
  --footer-bg: #e8e9e7;
  --band: #f0f1f0;
  --font-jp: "dnp-shuei-gothic-gin-std", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-en: "Jost", sans-serif;
  --w-l: 400;
  --w-m: 500;
  --w-b: 600;
  --base: 14px;
  --little: 11px;
  --h5: 43px;
  --h6: 34px;
  --ls-base: 0.0025px;
  --ls-lose: 0.5px;
}

@media (max-width: 767px) {
  .site-footer .addr a,
  .site-footer .f-info a,
  .access .addr a,
  .access .phone a,
  .access-address > div > p a,
  .menu-foot .addr a {
    text-decoration: none !important;
  }
  .hero {
    position: relative;
    width: 100%;
    height: 655px;
    overflow: hidden;
  }
  .hero > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 26px 20px 0;
  }
  .hamburger {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 28px;
    padding: 4px 0;
  }
  .hamburger span {
    display: block;
    width: 28px;
    border-top: 1px solid var(--main);
  }
  .intro {
    padding: 112px 20px 0;
  }
  .intro .lead {
    line-height: 1.9;
  }
  .intro .desc {
    margin-top: 64px;
    align-items: flex-start;
    gap: 48px;
  }
  .intro .desc p {
    text-align: left;
  }
  .studio {
    margin-top: 128px;
  }
  .studio .sec-head {
    padding: 0 20px;
  }
  .studio .sec-head .ttl {
    font-size: 18px;
    letter-spacing: 0.72px;
  }
  .studio .sec-head .dash {
    display: none;
  }
  .studio-rows {
    margin-top: 90px;
  }
  .studio-row {
    display: flex;
    flex-direction: column;
  }
  .studio-row .ph {
    order: 1;
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
  .studio-row .col {
    order: 2;
  }
  .studio-row .sep {
    order: 3;
    border-top: 1px solid var(--gry);
    margin: 62px 20px 63px;
  }
  .studio-row .room {
    display: none;
  }
  .studio-row .body-txt {
    margin: 30px 20px 0;
  }
  .studio-row .btn-wrap {
    display: flex;
    justify-content: flex-end;
    margin: 34px 20px 0;
  }
  .access {
    padding: 89px 20px 0;
  }
  .access .sec-head .ttl {
    font-size: 18px;
    letter-spacing: 0.72px;
  }
  .access .sec-head .dash {
    display: none;
  }
  .access .routes {
    margin-top: 56px;
  }
  .access .routes p {
    font-size: var(--base);
    line-height: 2;
    letter-spacing: var(--ls-base);
  }
  .access .addr-block {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
  }
  .access .map-btn-sp {
    display: flex;
    justify-content: flex-end;
    margin-top: 48px;
  }
  .access .map {
    margin-top: 40px;
    aspect-ratio: 335/260;
  }
  .access .map img {
    width: 100%;
    height: auto;
  }
  .access .sep {
    border-top: 1px solid var(--gry);
    margin-top: 64px;
  }
  .cta-bar {
    padding: 0 20px;
  }
  .cta-bar .half {
    padding: 88px 0;
  }
  .cta-bar .half + .half {
    border-top: 1px solid var(--gry);
  }
  .cta-bar .ttl {
    font-family: var(--font-en);
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 0.72px;
    line-height: 1;
  }
  .cta-bar .body-txt {
    margin-top: 40px;
  }
  .cta-bar .btn-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 44px;
  }
  .cta-bar .tail {
    border-top: 1px solid var(--gry);
  }
  .site-footer {
    margin-top: 140px;
    padding: 56px 20px 64px;
  }
  .site-footer .f-logo {
    font-size: var(--h6);
  }
  .site-footer .f-col1 {
    display: flex;
    flex-direction: column;
    gap: 56px;
  }
  .site-footer .f-col2 {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px 28px;
  }
  .site-footer .f-col2 a {
    font-family: var(--font-en);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.48px;
    line-height: 1;
  }
  .site-footer .f-col2 .insta svg {
    width: 10px;
    height: 10px;
  }
}
@media (max-width: 767px) {
  body {
    font-size: 13px;
  }
  .body-txt {
    font-size: 13px;
  }
  .hero-fade {
    position: absolute;
    inset: 0;
  }
  .site-header, .lower-page .page-header, .studio-page .page-header {
    padding: 24px 20px 0;
  }
  .site-header .logo, .lower-page .page-header .logo, .studio-page .page-header .logo {
    font-family: var(--font-en);
    font-size: 20px;
    line-height: 1.3;
  }
  .hamburger, .nav-toggle {
    width: 32px;
    height: 10px;
    padding: 0;
    gap: 0;
    justify-content: space-between;
    position: relative;
  }
  .hamburger span, .nav-toggle span {
    width: 32px;
  }
  .hamburger::after, .nav-toggle::after {
    content: "";
    position: absolute;
    inset: -17px -12px;
  }
  .lower-page .page-header, .studio-page .page-header {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .lower-page .page-header .ph-right, .studio-page .page-header .ph-right {
    display: flex;
    align-items: center;
  }
  .lower-page .page-header .pill, .studio-page .page-header .pill {
    display: none;
  }
  .lower-page h1 {
    position: absolute;
    left: 30px;
    top: 203px;
    font-size: 36px;
  }
  .menu-overlay .menu-visual {
    display: none;
  }
  .menu-overlay .menu-panel {
    width: 100%;
  }
  .menu-overlay .menu-top {
    top: 24px;
    left: 30px;
    right: 20px;
    justify-content: flex-end;
  }
  .menu-overlay .menu-top .pill {
    position: absolute;
    top: 85px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 315px;
    height: 45px;
    padding: 14px 32px;
    border-radius: 50px;
    font-family: var(--font-en);
    font-weight: 400;
    line-height: 1.3;
  }
  .menu-overlay .menu-list {
    left: 30px;
    top: 178px;
    width: 315px;
  }
  .menu-overlay .menu-download {
    left: 30px;
    bottom: 48px;
  }
  .site-footer {
    height: 870px;
    margin: 0;
    padding: 80px 30px;
  }
  .site-footer .f-logo {
    font-size: 43px;
  }
  .site-footer .f-col1 {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
  .site-footer .addr-wrap {
    gap: 21px;
  }
  .site-footer .f-info {
    font-size: 14px;
  }
  .site-footer .f-col2, .site-footer .f-col3 {
    position: absolute;
    top: 348px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    flex-wrap: nowrap;
    align-items: flex-start;
  }
  .site-footer .f-col2 a, .site-footer .f-col3 a {
    font-family: var(--font-en);
    font-size: 14px;
    letter-spacing: 0.56px;
    line-height: 1;
  }
  .site-footer .f-col2 {
    left: 30px;
  }
  .site-footer .f-col3 {
    left: 203px;
  }
  .site-footer .f-col3 .sub {
    display: flex;
    gap: 6px;
    align-items: center;
  }
  .site-footer .f-col3 .d {
    width: 8px;
    border-top: 0.5px solid var(--main);
  }
  .site-footer .f-col4 {
    position: absolute;
    left: 30px;
    top: 582px;
    width: 315px;
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
  .site-footer .f-col4 .hr {
    border-top: 1px solid rgba(34, 34, 35, 0.5);
  }
  .site-footer .f-col4 .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .site-footer .f-col4 .row .lbl {
    font-family: var(--font-en);
    font-weight: 300;
    font-size: 24px;
    letter-spacing: 0.96px;
  }
  .site-footer .footer-download {
    margin-top: 24px;
  }
  .studio-page {
    position: relative;
    min-height: 5779px;
  }
  .studio-page .studio-hero {
    padding-top: 203px;
  }
  .studio-page .studio-hero h1 {
    margin: 0 30px;
    font-size: 36px;
  }
  .studio-page .studio-hero .strip {
    position: absolute;
    left: 0;
    top: 271px;
    margin: 0;
    padding: 0;
    width: 363px;
    height: 335px;
    gap: 3px;
    overflow: hidden;
  }
  .studio-page .studio-hero .strip .st-a {
    width: 272px;
    flex: 0 0 272px;
  }
  .studio-page .studio-hero .strip .st-b {
    width: 88px;
    flex: 0 0 88px;
  }
  .studio-page .room-sec {
    position: absolute;
    left: 0;
    width: 375px;
    margin: 0 !important;
  }
  .studio-page .room-sec:nth-of-type(2) {
    top: 740px;
  }
  .studio-page .room-sec:nth-of-type(3) {
    top: 1385px;
  }
  .studio-page .room-sec:nth-of-type(4) {
    top: 2030px;
  }
  .studio-page .room-sec:nth-of-type(5) {
    top: 2649px;
  }
  .studio-page .room-sec .rs-head {
    padding: 0 30px;
  }
  .studio-page .room-sec .rs-head .rs-ttl {
    font-size: 23px;
    letter-spacing: 0.92px;
    line-height: 1.2;
  }
  .studio-page .room-sec .rs-head .rs-desc {
    margin-top: 32px;
    font-size: 13px;
    line-height: 2;
  }
  .studio-page .room-sec .carousel {
    position: absolute;
    left: 0;
    top: 204px;
    width: 375px;
    margin: 0;
  }
  .studio-page .room-sec:nth-of-type(4) .carousel {
    top: 178px;
  }
  .studio-page .room-sec:nth-of-type(5) .carousel {
    top: 230px;
  }
  .studio-page .carousel .car-main {
    height: 230px;
    aspect-ratio: auto;
  }
  .studio-page .carousel .car-foot {
    position: relative;
    margin: 10px 0 0;
    padding: 0 30px;
    height: 95px;
    gap: 0;
  }
  .studio-page .carousel .thumbs {
    width: 315px;
    height: 60px;
    overflow: hidden;
  }
  .studio-page .carousel .thumbs .thumb, .studio-page .carousel .thumbs .thumb img {
    width: 90px;
    height: 60px;
  }
  .studio-page .carousel .car-ctrl {
    position: absolute;
    right: 30px;
    top: 80px;
    gap: 32px;
  }
  .studio-page .drawing-band {
    position: absolute;
    left: 0;
    top: 3368px;
    width: 375px;
    height: 790px;
    margin: 0;
    padding: 64px 30px;
  }
  .studio-page .drawing-band .drawing {
    width: 315px;
    height: 187px;
    object-fit: cover;
  }
  .studio-page .drawing-band .spec {
    margin-top: 48px;
    gap: 0;
    height: 462px;
  }
  .studio-page .drawing-band .spec .row {
    min-height: 54px;
    padding: 20px 0;
    align-items: center;
    border-top: 0;
    border-bottom: 1px solid var(--gray);
  }
  .studio-page .drawing-band .spec .row:first-child {
    border-top: 1px solid var(--gray);
  }
  .studio-page .drawing-band .prop-btn {
    display: none;
  }
  .studio-page .cta-bar.wide {
    position: absolute;
    left: 0;
    top: 4337px;
    width: 375px;
    margin: 0;
    padding: 0 30px;
  }
  .studio-page .cta-bar .half {
    padding: 48px 0;
  }
  .studio-page > .site-footer {
    position: absolute;
    left: 0;
    top: 4909px;
    width: 100%;
  }
  .price-page {
    position: relative;
    min-height: 6614px;
  }
  .price-page .price-lead {
    position: absolute;
    left: 30px;
    top: 279px;
    width: 315px;
    font-size: 13px;
    line-height: 1.8;
  }
  .price-page .info-section {
    position: absolute;
    left: 30px;
    width: 315px;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .price-page .info-section header {
    width: 216px;
  }
  .price-page .info-section header p {
    font-size: 12px;
    letter-spacing: 2.4px;
  }
  .price-page .info-table {
    width: 315px;
    font-size: 13px;
  }
  .price-page .info-row {
    flex-direction: column;
    gap: 32px;
    padding: 20px 0 40px;
  }
  .price-page .living-price .info-row {
    flex-direction: row;
    gap: 24px;
  }
  .price-page .living-price .info-row h3 {
    width: 92px;
  }
  .price-page .info-row > div {
    width: 100%;
  }
  .price-page .living-price {
    top: 487px;
  }
  .price-page .time-price {
    top: 1236px;
  }
  .price-page .reserve-price {
    top: 2141px;
  }
  .price-page .around-price {
    top: 3699px;
  }
  .price-page .cta-bar {
    position: absolute;
    left: 0;
    top: 5172px;
    width: 375px;
    margin: 0;
    padding: 0 30px;
  }
  .price-page .cta-bar .half {
    padding: 48px 0;
  }
  .price-page > .site-footer {
    position: absolute;
    left: 0;
    top: 5744px;
    width: 100%;
  }
  .contact-page {
    position: relative;
    min-height: 2518px;
  }
  .contact-intro {
    position: absolute;
    left: 30px;
    top: 279px;
    width: 315px;
    font-size: 13px;
    line-height: 1.8;
  }
  .reserve-info {
    display: flex;
    gap: 20px;
    margin-top: 18px;
    font-size: 14px;
  }
  .form-lead {
    position: absolute;
    left: 30px;
    top: 481px;
    width: 315px;
    font-size: 13px;
    line-height: 1.8;
  }
  .contact-form {
    position: absolute;
    left: 30px;
    top: 471px;
    width: 315px;
    font-size: 13px;
  }
  .contact-form .form-row {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
  }
  .contact-form input, .contact-form textarea {
    width: 315px;
    height: 60px;
    padding: 18px;
  }
  .contact-form .fields {
    flex-direction: column;
    gap: 8px;
  }
  .contact-form .message textarea {
    height: 240px;
  }
  .contact-form .message {
    margin-bottom: 40px;
  }
  .contact-form .submit {
    width: 315px;
  }
  .contact-form textarea {
    resize: none;
  }
  .contact-page > .site-footer {
    position: absolute;
    left: 0;
    top: 1648px;
    width: 100%;
  }
  .access-page {
    position: relative;
    min-height: 4200px;
  }
  .access-map-large {
    position: absolute;
    left: 30px;
    top: 279px;
    width: 315px;
    height: 260px;
  }
  .access-map-large iframe, .access-map-large .map-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
  }
  .access-map-large iframe {
    opacity: 1;
  }
  .access-map-large .map-shield {
    position: absolute;
    inset: 0;
  }
  .access-map-large .map-open {
    display: none;
  }
  .access-address {
    position: absolute;
    left: 30px;
    top: 579px;
    width: 315px;
    font-size: 14px;
    line-height: 1.8;
  }
  .access-address > a {
    display: inline-block;
    margin-top: 24px;
  }
  .access-page .info-section {
    position: absolute;
    left: 30px;
    width: 315px;
    flex-direction: column;
    gap: 32px;
  }
  .access-page .info-table {
    width: 315px;
    font-size: 13px;
  }
  .access-page .info-row {
    flex-direction: column;
    gap: 24px;
  }
  .access-page .root-access {
    top: 800px;
  }
  .access-page .around-access {
    top: 1750px;
  }
  .access-page > .site-footer {
    position: absolute;
    left: 0;
    top: 3330px;
    width: 100%;
  }
}
@media (max-width: 767px) {
  .studio-page .page-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 26px 20px 0;
  }
  .studio-page .page-header .logo {
    font-family: var(--font-en);
    font-weight: 400;
    font-size: 20px;
    line-height: 1;
  }
  .studio-page .page-header .ph-right {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .studio-page .page-header .pill {
    display: none;
  }
  .studio-page .page-header .header-nav {
    display: none;
  }
  .studio-page .studio-hero {
    padding-top: 120px;
  }
  .studio-page .studio-hero h1 {
    margin: 0 20px;
    font-family: var(--font-en);
    font-weight: 300;
    font-size: 40px;
    line-height: 1;
  }
  .studio-page .studio-hero .strip {
    margin-top: 32px;
    display: flex;
    gap: 4px;
    height: 300px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 20px;
  }
  .studio-page .studio-hero .strip .st-a, .studio-page .studio-hero .strip .st-b {
    flex: 0 0 auto;
    height: 100%;
    scroll-snap-align: start;
    overflow: hidden;
  }
  .studio-page .studio-hero .strip .st-a {
    width: 88%;
  }
  .studio-page .studio-hero .strip .st-b {
    width: 40%;
  }
  .studio-page .studio-hero .strip img {
    height: 100%;
    object-fit: cover;
    max-width: none;
  }
  .studio-page .studio-hero .strip .st-a img {
    width: 133.47%;
  }
  .studio-page .studio-hero .strip .st-b img {
    width: 408.805%;
    margin-left: -308.805%;
  }
  .studio-page .sub-nav {
    position: absolute;
    left: 20px;
    top: 613px;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 335px;
    white-space: nowrap;
    font-family: var(--font-en);
    font-size: 11px;
    letter-spacing: 0.2px;
  }
  .studio-page .sub-nav a {
    color: var(--gray);
  }
  .studio-page .sub-nav a.is-active {
    color: var(--main);
  }
  .studio-page .sub-nav.is-stuck {
    position: fixed;
    left: 0;
    top: 57px;
    width: 100%;
    margin: 0;
    padding: 12px 20px;
    background: var(--bk);
    border-bottom: 1px solid var(--gry);
    box-sizing: border-box;
  }
  .studio-page .room-sec {
    margin-top: 96px;
  }
  .studio-page .room-sec.first {
    margin-top: 104px;
  }
  .studio-page .room-sec .rs-head {
    padding: 0 20px;
  }
  .studio-page .room-sec .rs-head .rs-ttl {
    font-family: var(--font-en);
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 0.72px;
    line-height: 1.2;
  }
  .studio-page .room-sec .rs-head .rs-desc {
    margin-top: 24px;
    font-size: var(--base);
    line-height: 2;
    letter-spacing: var(--ls-base);
    text-align: justify;
  }
  .studio-page .room-sec .carousel {
    margin-top: 32px;
  }
  .studio-page .room-sec .car-foot {
    margin-top: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 0 20px;
  }
  .studio-page .room-sec .thumbs {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .studio-page .room-sec .thumbs .thumb {
    width: 96px;
    height: 64px;
  }
  .studio-page .room-sec .thumbs .thumb img {
    width: 96px;
    height: 64px;
  }
  .studio-page .room-sec .car-ctrl {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 32px;
    align-self: flex-end;
  }
  .studio-page .drawing-band {
    margin-top: 120px;
    padding: 80px 20px;
    background: var(--band);
  }
  .studio-page .drawing-band .drawing {
    width: 100%;
    height: auto;
  }
  .studio-page .drawing-band .spec {
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .studio-page .drawing-band .spec .row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 0;
    line-height: 1;
  }
  .studio-page .drawing-band .spec .row dt {
    font-weight: var(--w-l);
    width: 84px;
    flex: 0 0 auto;
  }
  .studio-page .drawing-band .spec .row dd {
    margin: 0;
  }
  .studio-page .drawing-band .spec .row.lined {
    border-top: 1px solid var(--gray);
    border-bottom: 1px solid var(--gray);
  }
  .studio-page .drawing-band .spec .row.wrap {
    line-height: 1.8;
  }
  .studio-page .drawing-band .spec .row.wrap dd {
    flex: 1;
    text-align: justify;
    margin-left: 16px;
  }
  .studio-page .drawing-band .prop-btn {
    margin-top: 40px;
  }
  .studio-page .cta-bar.wide {
    margin-top: 0;
  }
  .studio-page .site-footer {
    margin-top: 140px;
  }
}
@media (max-width: 767px) {
  .studio-page {
    min-height: 5779px;
  }
  .studio-page .page-header {
    padding: 24px 20px 0;
  }
  .studio-page .page-header .ph-right {
    gap: 0;
  }
  .studio-page .studio-hero {
    padding-top: 203px;
  }
  .studio-page .studio-hero h1 {
    margin: 0 30px;
    font-size: 36px;
  }
  .studio-page .studio-hero .strip {
    position: absolute;
    left: 0;
    top: 254px;
    margin: 0;
    padding: 0;
    width: 363px;
    height: 335px;
    gap: 3px;
    overflow: hidden;
  }
  .studio-page .studio-hero .strip .st-a {
    width: 272px;
    flex: 0 0 272px;
  }
  .studio-page .studio-hero .strip .st-b {
    width: 88px;
    flex: 0 0 88px;
  }
  .studio-page .room-sec {
    position: absolute;
    left: 0;
    width: 375px;
    margin: 0 !important;
  }
  .studio-page .room-sec:nth-of-type(2) {
    top: 740px;
  }
  .studio-page .room-sec:nth-of-type(3) {
    top: 1385px;
  }
  .studio-page .room-sec:nth-of-type(4) {
    top: 2030px;
  }
  .studio-page .room-sec:nth-of-type(5) {
    top: 2649px;
  }
  .studio-page .room-sec .rs-head {
    padding: 0 30px;
  }
  .studio-page .room-sec .rs-head .rs-ttl {
    font-size: 23px;
    letter-spacing: 0.92px;
    line-height: 1.2;
  }
  .studio-page .room-sec .rs-head .rs-desc {
    margin-top: 32px;
    font-size: 13px;
    line-height: 2;
  }
  .studio-page .room-sec .carousel {
    position: absolute;
    left: 0;
    top: 204px;
    width: 375px;
    margin: 0;
  }
  .studio-page .room-sec:nth-of-type(4) .carousel {
    top: 178px;
  }
  .studio-page .room-sec:nth-of-type(5) .carousel {
    top: 230px;
  }
  .studio-page .carousel .car-main {
    height: 230px;
    aspect-ratio: auto;
  }
  .studio-page .carousel .car-foot {
    position: relative;
    margin: 10px 0 0;
    padding: 0 30px;
    height: 95px;
    gap: 0;
  }
  .studio-page .carousel .thumbs {
    width: 315px;
    height: 60px;
    overflow: hidden;
  }
  .studio-page .carousel .thumbs .thumb, .studio-page .carousel .thumbs .thumb img {
    width: 90px;
    height: 60px;
  }
  .studio-page .carousel .car-ctrl {
    position: absolute;
    right: 30px;
    top: 80px;
    gap: 32px;
  }
  .studio-page .drawing-band {
    position: absolute;
    left: 0;
    top: 3368px;
    width: 375px;
    height: 790px;
    margin: 0;
    padding: 64px 30px;
  }
  .studio-page .drawing-band .drawing {
    width: 315px;
    height: 187px;
    object-fit: cover;
  }
  .studio-page .drawing-band .spec {
    margin-top: 48px;
    gap: 0;
    height: 462px;
  }
  .studio-page .drawing-band .spec .row {
    min-height: 54px;
    padding: 20px 0;
    align-items: center;
    border-top: 0;
    border-bottom: 1px solid var(--gray);
  }
  .studio-page .drawing-band .spec .row:first-child {
    border-top: 1px solid var(--gray);
  }
  .studio-page .drawing-band .prop-btn {
    display: none;
  }
  .studio-page .cta-bar.wide {
    position: absolute;
    left: 0;
    top: 4337px;
    width: 375px;
    margin: 0;
    padding: 0 30px;
  }
  .studio-page .cta-bar .half {
    padding: 48px 0;
  }
  .studio-page > .site-footer {
    position: absolute;
    left: 0;
    top: 4909px;
    width: 100%;
    margin: 0;
  }
}
@media (max-width: 767px) {
  .site-footer .f-info {
    display: inline-flex;
    margin-right: 12px;
  }
  .site-footer .f-col4 {
    top: 529px;
    gap: 24px;
  }
  .price-page .price-lead, .price-page .info-table {
    font-family: var(--font-jp);
    letter-spacing: var(--ls-base);
  }
  .price-page .info-table {
    width: 315px;
    font-size: 13px;
    line-height: 1.8;
  }
  .price-page .reserve-price .info-row:nth-child(1) {
    font-size: 14px;
    letter-spacing: var(--ls-base);
  }
  .price-page .living-price .info-row:nth-child(1) {
    padding-bottom: 38px;
  }
  .price-page .living-price .info-row:nth-child(2) {
    padding-bottom: 39px;
  }
  .price-page .living-price .info-row:nth-child(3) {
    padding-bottom: 39px;
  }
  .price-page .living-price .info-row:nth-child(4) {
    padding-bottom: 39px;
  }
  .price-page .time-price .info-row:nth-child(1) {
    padding-bottom: 39px;
  }
  .price-page .time-price .info-row:nth-child(2) {
    padding-bottom: 39px;
  }
  .price-page .time-price .info-row small {
    margin-top: 15px;
  }
  .price-page .reserve-price .info-row:nth-child(1) {
    padding-bottom: 38px;
  }
  .price-page .reserve-price .info-row:nth-child(2) {
    padding-bottom: 39px;
  }
  .price-page .reserve-price .info-row:nth-child(3) {
    padding-bottom: 39px;
  }
  .price-page .reserve-price .info-row:nth-child(4) {
    padding-bottom: 39px;
  }
  .price-page .around-price {
    gap: 32px;
  }
  .price-page .info-row {
    line-height: 23px;
  }
  .price-page .info-row p + p {
    margin-top: 20px;
  }
  .price-page .price-lead {
    line-height: 23px;
  }
  .price-page .reserve-price .info-row:nth-child(1) {
    line-height: 25px;
  }
  .price-page .around-table article {
    width: 321px;
  }
  .price-page .around-table p + article {
    margin-top: 25px;
  }
  .price-page .around-price header p {
    font-size: 14px;
    letter-spacing: 2.8px;
  }
  .price-page .around-price .info-row:nth-child(1) h3 {
    font-size: 14px;
  }
  .price-page .around-price .info-row:nth-child(1) {
    padding-bottom: 39px;
  }
  .price-page .around-price .info-row:nth-child(2) {
    padding-bottom: 39px;
  }
  .price-page .around-price .info-row:nth-child(3) {
    padding-bottom: 39px;
  }
  .studio-page .drawing-band .spec .row {
    min-height: 53px;
    padding: 19px 0;
  }
  .studio-page .drawing-band .spec .row.tall {
    align-items: flex-start;
    min-height: 0;
    padding: 20px 0;
  }
  .studio-page .drawing-band .spec .row.tall dt {
    width: 70px;
    line-height: 2;
  }
  .studio-page .drawing-band .spec .row.tall dd {
    flex: 1;
    margin-left: 20px;
    line-height: 2;
  }
  .contact-page .contact-form {
    top: 575px;
  }
  .contact-page .contact-form .form-row {
    margin-bottom: 27px;
  }
  .contact-page .contact-form input {
    height: 49px;
  }
  .contact-page .contact-form .fields {
    gap: 10px;
  }
  .contact-page .contact-form .message textarea {
    height: 180px;
  }
  .contact-page .contact-form .message {
    margin-bottom: 49px;
  }
  .contact-page .contact-form .form-row:nth-child(2) {
    margin-bottom: 28px;
  }
  .contact-page .contact-form .form-row:nth-child(4) {
    margin-bottom: 28px;
  }
  .contact-page .contact-form .form-row:nth-child(5) {
    margin-bottom: 28px;
  }
  .contact-page .contact-form .form-row:nth-child(6) {
    margin-bottom: 48px;
  }
  .cta-bar .body-txt {
    margin-top: 24px;
    font-size: 14px;
    line-height: 2;
    text-align: justify;
  }
  .cta-bar .ttl {
    font-size: 23px;
    letter-spacing: 0.92px;
  }
  .cta-bar .btn .lbl {
    display: none;
  }
  .top-page .cta-bar .half {
    height: 141px;
  }
  .top-page .cta-bar .vdiv {
    display: block !important;
    width: 100%;
    height: 0;
    border-top: 1px solid var(--gray);
  }
  .cta-bar .btn-wrap {
    margin-top: 32px;
  }
  .studio-page .cta-bar .btn .lbl, .price-page .cta-bar .btn .lbl {
    display: none;
  }
  .studio-page .cta-bar, .price-page .cta-bar {
    border-top: 1px solid var(--gry);
  }
  .price-page .cta-bar > .half:first-child, .studio-page .cta-bar > .half:first-child {
    height: 236px;
  }
  .price-page .cta-bar, .studio-page .cta-bar {
    border-bottom: 1px solid var(--gry);
  }
  .studio-page .cta-bar .half, .price-page .cta-bar .half {
    height: 238px;
    padding: 48px 0;
    box-sizing: border-box;
  }
  .studio-page .cta-bar .vdiv + .half, .price-page .cta-bar .vdiv + .half {
    border-top: 1px solid var(--gry);
  }
  .top-page {
    position: relative;
    min-height: 7659px;
    overflow-x: clip;
  }
  html, body {
    overflow-x: clip;
    max-width: 100%;
  }
  .top-page .hero {
    position: absolute;
    left: 0;
    top: 0;
    width: 375px;
    height: 655px;
    overflow: hidden;
  }
  .top-page .hero-fade {
    overflow: hidden;
  }
  .top-page .hero > img,
  .top-page .hero-fade img {
    position: absolute;
    left: -20.49%;
    top: 0;
    width: 259.79%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 50%;
  }
  .top-page .hero-fade {
    position: absolute;
    inset: 0;
  }
  .top-page .site-header {
    position: absolute;
    left: 0;
    top: 0;
    width: 375px;
    padding: 0;
  }
  .top-page .site-header .logo {
    position: absolute;
    left: 61.5px;
    top: 24px;
    transform: translateX(-50%);
    font-size: 20px;
    line-height: 1.3;
    white-space: nowrap;
  }
  .top-page .site-header .hamburger {
    position: absolute;
    left: calc(75% + 41.75px);
    top: 32px;
    width: 32px;
    height: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
  }
  .top-page .site-header .hamburger span {
    width: 32px;
    border-top: 1px solid var(--main);
  }
  .top-page .intro {
    position: absolute;
    left: 0;
    top: 0;
    width: 375px;
    height: 2064px;
    padding: 0;
  }
  .top-page .intro .lead {
    position: absolute;
    left: 30px;
    top: 740px;
    width: 315px;
    font-size: 18px;
    line-height: 1.6;
    white-space: normal;
  }
  .top-page .intro .desc {
    position: absolute;
    left: 30px;
    top: 877px;
    width: 315px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 48px;
    margin: 0;
  }
  .top-page .intro .desc .paras {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
  }
  .top-page .intro .desc p {
    font-size: 13px;
    line-height: 2;
    text-align: justify;
  }
  .top-page .intro .desc p.tight {
    letter-spacing: var(--ls-base);
  }
  .top-page .intro .img-living {
    display: block !important;
    position: absolute;
    left: 15px;
    top: 1396px;
    width: 345px;
    height: 234px;
    object-fit: cover;
  }
  .top-page .intro .img-exterior {
    display: block !important;
    position: absolute;
    right: 0;
    top: 1670px;
    width: 202px;
    height: 278px;
    object-fit: cover;
    object-position: 6.32% 50%;
  }
  .top-page .studio {
    position: absolute;
    left: 30px;
    top: 2064px;
    width: 345px;
    margin: 0;
    gap: 0;
    display: block;
  }
  .top-page .studio .sec-head {
    padding: 0;
    gap: 25px;
  }
  .top-page .studio .sec-head .ttl {
    font-size: 23px;
    letter-spacing: 0.92px;
    line-height: 1;
  }
  .top-page .studio .sec-head .dash {
    display: block;
    width: 8px;
    border-top: 1px solid var(--main);
  }
  .top-page .studio-rows {
    position: absolute;
    left: 0;
    top: 113px;
    width: 345px;
    margin: 0;
    display: block;
  }
  .top-page .studio-row {
    position: absolute;
    left: 0;
    width: 345px;
    display: block;
  }
  .top-page .studio-row:nth-of-type(1) {
    top: 0;
  }
  .top-page .studio-row:nth-of-type(2) {
    top: 641px;
  }
  .top-page .studio-row:nth-of-type(3) {
    top: 1308px;
  }
  .top-page .studio-row:nth-of-type(4) {
    top: 1923px;
  }
  .top-page .studio-row .ph {
    position: absolute;
    left: 0;
    top: 0;
    width: 345px;
    height: 240px;
    object-fit: cover;
  }
  .top-page .studio-row .col {
    position: absolute;
    z-index: 1;
    left: 0;
    width: 315px;
    padding: 0;
    display: block;
  }
  .top-page .studio-row:nth-of-type(1) .col {
    top: 280px;
  }
  .top-page .studio-row:nth-of-type(2) .col {
    top: 280px;
  }
  .top-page .studio-row:nth-of-type(3) .col {
    top: 280px;
  }
  .top-page .studio-row:nth-of-type(4) .col {
    top: 280px;
  }
  .top-page .studio-row .txt {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin: 0;
  }
  .top-page .studio-row .room {
    display: block;
    font-family: var(--font-en);
    font-size: 18px;
    letter-spacing: 0.36px;
    line-height: 1;
  }
  .top-page .studio-row .body-txt {
    margin: 0;
    width: 315px;
    font-size: 13px;
    line-height: 2;
    text-align: justify;
  }
  .top-page .studio-row .btn-wrap {
    display: flex;
    justify-content: flex-start;
    margin: 36px 0 0;
  }
  .top-page .studio-row .sep {
    display: block;
    position: absolute;
    left: 0;
    width: 315px;
    height: 0;
    margin: 0;
    border-top: 1px solid var(--gry);
  }
  .top-page .studio-row:nth-of-type(1) .sep {
    top: 577px;
  }
  .top-page .studio-row:nth-of-type(2) .sep {
    top: 603px;
  }
  .top-page .studio-row:nth-of-type(3) .sep {
    top: 551px;
  }
  .top-page .sea-wrap {
    display: block !important;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 4757px;
    width: 375px;
    height: 234px;
    margin: 0;
    overflow: hidden;
  }
  .top-page .sea-wrap .sea {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .top-page .access {
    position: absolute;
    left: 0;
    top: 5135px;
    width: 375px;
    padding: 0;
    display: block;
    height: 1222px;
  }
  .top-page .access .sec-head {
    position: absolute;
    left: 30px;
    top: 0;
    gap: 25px;
  }
  .top-page .access .sec-head .ttl {
    font-size: 23px;
    letter-spacing: 0.92px;
    line-height: 1;
  }
  .top-page .access .sec-head .dash {
    display: block;
    width: 8px;
    border-top: 1px solid var(--main);
  }
  .top-page .access .map {
    position: absolute;
    left: 30px;
    top: 113px;
    width: 315px;
    height: 306px;
    aspect-ratio: auto;
    margin: 0;
  }
  .top-page .access .addr-block {
    position: absolute;
    left: 30px;
    top: 459px;
    width: 315px;
    margin: 0;
    gap: 32px;
  }
  .top-page .access .routes {
    position: absolute;
    left: 30px;
    top: 678px;
    width: 315px;
    margin: 0;
  }
  .top-page .access .routes p {
    font-size: 14px;
    line-height: 2;
    letter-spacing: var(--ls-base);
  }
  .top-page .access .routes p + p {
    margin-top: 28px;
  }
  .top-page .access .sep {
    display: none;
  }
  .top-page .cta-bar {
    position: absolute;
    left: 0;
    top: 6357px;
    width: 375px;
    margin: 0;
    padding: 48px 30px;
    display: flex;
    flex-direction: column;
    gap: 48px;
    border-top: 1px solid var(--gray);
    border-bottom: 1px solid var(--gray);
  }
  .top-page .cta-bar .half {
    padding: 0;
    border: 0;
  }
  .top-page .cta-bar .tail {
    display: none;
  }
  .top-page > .site-footer {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 6929px;
    width: 375px;
    margin: 0;
  }
  .top-page .access .addr-block {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .top-page .access .addr-block .addr-inner {
    order: 1;
  }
  .top-page .access .addr-block .btn {
    order: 2;
  }
  .top-page .access .routes .parking {
    margin-bottom: 28px;
  }
  .top-page .access .routes .route-label:not(:first-of-type) {
    margin-top: 28px;
  }
}
@media (max-width: 767px) {
  .menu-overlay .menu-list {
    max-height: calc(100% - 308px);
    overflow-y: auto;
  }
  .menu-legal {
    gap: 20px;
  }
  .site-footer .f-col1 {
    gap: 40px;
  }
  .site-footer .f-info {
    font-size: 12px;
  }
  .site-footer .f-col2, .site-footer .f-col3 {
    top: 398px;
  }
  .site-footer .f-col4 {
    top: 612px;
  }
  .site-footer {
    height: 920px;
  }
  .price-page, .contact-page, .access-page, .terms-page {
    min-height: 0;
  }
  .price-main, .contact-main, .access-main, .terms-main {
    padding: 279px 30px 0;
  }
  .lower-page .info-section {
    position: relative;
    top: auto;
    left: auto;
    width: 315px;
    margin-top: 96px;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .lower-page .info-table {
    width: 315px;
    font-size: 13px;
  }
  .lower-page .info-row {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 20px 0 40px;
    height: auto;
    line-height: 26px;
  }
  .lower-page .info-row > div {
    width: 100%;
  }
  .lower-page .info-row p {
    line-height: 26px;
  }
  .lower-page .info-row p + p {
    margin-top: 16px;
  }
  .lower-page .info-row small {
    display: block;
    margin-top: 12px;
    font-size: 10px;
    line-height: 18px;
  }
  .lower-page .info-section header h2 {
    font-size: 23px;
    line-height: 28px;
  }
  .lower-page .info-section header > p {
    margin-top: 16px;
  }
  .lower-page .info-section article {
    margin-top: 24px;
  }
  .lower-page .info-section article a {
    display: inline-flex;
    margin-top: 10px;
  }
  .lower-page .price-lead, .lower-page .contact-intro {
    position: relative;
    top: auto;
    left: auto;
    width: 315px;
  }
  .price-page .living-price .info-row {
    flex-direction: column;
  }
  .price-page .price-lead a {
    text-decoration: underline;
  }
  .lower-page .cta-bar {
    position: relative;
    top: auto;
    left: auto;
    width: 315px;
    margin: 128px 0 0;
    padding: 0;
  }
  .lower-page > .site-footer {
    position: relative;
    top: auto;
    left: auto;
    width: 375px;
    margin-top: 140px;
  }
  .contact-page > .site-footer, .access-page > .site-footer {
    margin-top: 180px;
  }
  .access-page .access-map-large {
    position: relative;
    top: auto;
    left: auto;
    width: 315px;
    height: 260px;
  }
  .access-page .access-address {
    position: relative;
    top: auto;
    left: auto;
    width: 315px;
    margin-top: 40px;
  }
  .terms-body {
    width: 315px;
    font-size: 13px;
    line-height: 26px;
  }
  .terms-rules {
    margin-top: 96px;
  }
  .studio-page {
    min-height: 0;
  }
  .studio-page .room-sec {
    position: relative;
    top: auto !important;
    left: 0;
    width: 375px;
    margin: 128px 0 0 !important;
  }
  .studio-page .room-sec.first {
    margin-top: 465px !important;
  }
  .studio-page .room-sec .rs-desc {
    min-height: 0;
  }
  .studio-page .room-sec .carousel {
    position: relative;
    top: auto !important;
    width: 375px;
    margin: 40px 0 0;
  }
  .studio-page .carousel .car-main {
    height: 250px;
  }
  .studio-page .carousel .car-main img {
    height: 100%;
    width: 100%;
    object-fit: contain;
  }
  .studio-page .carousel .car-foot {
    height: 105px;
  }
  .studio-page .drawing-band {
    position: relative;
    top: auto;
    left: 0;
    width: 375px;
    height: auto;
    margin: 128px 0 0;
    padding: 64px 30px;
  }
  .studio-page .drawing-band .drawing-viewer {
    position: relative;
    width: 315px;
  }
  .studio-page .drawing-band .drawing-stage {
    height: 214px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .studio-page .drawing-band .drawing {
    position: static;
    width: 295px;
    height: 194px;
    object-fit: contain;
    transform: none;
  }
  .studio-page .drawing-band .spec {
    position: relative;
    top: auto;
    left: auto;
    width: 315px;
    height: auto;
    margin-top: 48px;
  }
  .studio-page .drawing-band .spec .row {
    height: auto;
    min-height: 54px;
  }
  .studio-page .cta-bar.wide {
    position: relative;
    top: auto;
    left: 0;
    width: 375px;
    margin: 128px 0 0;
  }
  .studio-page > .site-footer {
    position: relative;
    top: auto;
    left: 0;
    width: 375px;
    margin-top: 96px;
  }
}
@media (max-width: 767px) {
  .drawing-controls {
    flex-wrap: wrap;
    gap: 16px;
    font-size: 12px;
    justify-content: space-between;
  }
  .drawing-tabs {
    width: 100%;
    justify-content: space-between;
  }
  .drawing-arrows {
    margin-left: auto;
  }
  .studio-page .drawing-band .spec dt {
    flex: none;
    width: 76px;
  }
  .studio-page .drawing-band .spec dd {
    flex: 1;
    min-width: 0;
  }
}
@media (max-width: 767px) {
  body {
    width: 375px;
    max-width: none;
    zoom: var(--layout-scale, 1);
  }
}