/* ---------------------
共通CSS
------------------------- */

/* ---------------------
レイアウト共通
------------------------- */

:root {
    --site-container-max: 1000px;
    --site-container-gutter: 16px;
    --luxury-beige: #b28b50;
    --luxury-teal: #00a8ba;
    --luxury-ink: #22323a;
    --luxury-shadow: 0 14px 34px rgba(11, 67, 72, 0.14);
    --compact-ui-scale: 0.90;
    --compact-ui-scale-tight: 0.88;
    --frame-border: 8px;
    --ui-btn-width: calc(200px * var(--compact-ui-scale-tight));
    --ui-btn-height: calc(42px * var(--compact-ui-scale-tight));
    --ui-btn-inner-height: calc(32px * var(--compact-ui-scale-tight));
    --ui-btn-radius: 999px;
    --ui-btn-icon-size: calc(16px * var(--compact-ui-scale-tight));
}

body {
    width: 100%;
    margin: 0;
    font-family: 'Noto Serif JP', 'Georgia',  serif;
    font-style: normal;
    font-weight: 300;
    font-size: calc(16px * var(--compact-ui-scale));
    letter-spacing: 0.05em;
    line-height: calc(36px * var(--compact-ui-scale));
    color: black;
    background: radial-gradient(circle at 0% 0%, #f7f7f7 0%, #fff 38%) fixed;
    scroll-behavior: smooth;
}    

body.menu-open {
    overflow: hidden;
}

.wrapper_outside {
    width: min(var(--site-container-max), calc(100% - (var(--site-container-gutter) * 2)));
    margin: 0 auto;
    overflow-x: hidden;
    padding: 0 4px;
    padding-inline: calc(8px * var(--compact-ui-scale));

}

.wrapper_inside {
    width: min(var(--site-container-max), calc(100% - (var(--site-container-gutter) * 2)));
    margin: 0 auto;
    padding-inline: calc(4px * var(--compact-ui-scale));
}

img {
    max-width: 100%;
    height: auto;
}

/* 茶色の枠 */
.whole-frame_B {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    overflow: hidden;
    border: var(--frame-border) solid #b28b50;
    pointer-events: none;
}    

/* 緑色の枠 */
.whole-frame_G {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    overflow: hidden;
    border: var(--frame-border) solid #33a5ac;
    pointer-events: none;
}

h1 {
    font-size: calc(24px * var(--compact-ui-scale));
    line-height: calc(48px * var(--compact-ui-scale));
    margin: 0 auto calc(75px * var(--compact-ui-scale));
    padding-top: calc(30px * var(--compact-ui-scale));
    text-align: center;
    letter-spacing: 0.1em;
}    

h2 {
    color: var(--luxury-ink);
    font-size: calc(38px * var(--compact-ui-scale));
    font-family: 'Georgia', 'Times New Roman', serif;
    font-style: italic;
    margin-top: calc(28px * var(--compact-ui-scale));
    letter-spacing: 0.1em;
}

h2::before {
    content: "";
    display: inline-block;
    width: calc(90px * var(--compact-ui-scale));
    height: 1px;
    margin-bottom: calc(6px * var(--compact-ui-scale));
    margin-right: 4px;
    background-color: #008f97;
}

h3 {
    font-size: calc(22px * var(--compact-ui-scale));
    line-height: calc(28px * var(--compact-ui-scale));
    color: #008f97;
    margin-bottom: calc(22px * var(--compact-ui-scale));
    text-align: center;
    letter-spacing: 0.1em;
}

/* ---------------------
トップページ用CSS
------------------------- */

body#home {
    padding-top: 0px;
}        

.site-header {
    width: min(var(--site-container-max), calc(100% - (var(--site-container-gutter) * 2)));
    margin: 0 auto;
    min-height: calc(64px * var(--compact-ui-scale));
}

/* ---------------------
グローバルナビゲーション
------------------------- */

header ul {
    list-style-type: none;
    margin: 0 0 0 auto;
    padding: 0;
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}    

header {
    position: relative;
    z-index: 500;
}

.main-nav {
    display: flex;
    align-items: center;
    min-height: calc(64px * var(--compact-ui-scale));
    justify-content: flex-end;
    padding-left: clamp(132px, 16vw, 232px);
}

.header-home-logo {
    position: absolute;
    left: clamp(10px, 1.4vw, 22px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 950;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.header-home-logo img {
    display: block;
    width: clamp(120px, 13vw, 190px);
    height: auto;
}

.header-quick-actions {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
    gap: 8px;
    align-items: center;
}

.mobile_menu {
    display: none;
}

.header-quick-actions .menu_text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 22px;
    color: #fff;
    font-style: normal;
    text-decoration: none;
}

.header-quick-actions .nav_to_reserve {
    background-color: #b28b50;
}

.header-quick-actions .nav_to_line {
    background-color: #06c755;
}

.site-header .header-quick-actions .menu_text::before {
    content: none;
}

header .main-nav,
header .header-quick-actions {
    width: 100%;
}

header a:focus-visible,
.menu-trigger:focus-visible,
.btn:focus-visible {
    outline: 3px dashed #008f97;
    outline-offset: 2px;
}
header li {
    display: inline-flex;
    align-items: center;
    min-height: calc(64px * var(--compact-ui-scale));
    margin-left: 22px;
    font-size: calc(13px * var(--compact-ui-scale));
    color: #b28b50;
}    

header a {
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
}

header .menu_text {
    display: inline-flex;
    align-items: center;
    height: calc(64px * var(--compact-ui-scale));
    padding-top: 0;
    box-sizing: border-box;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-style: italic;
    line-height: 1;
    letter-spacing: 0.1em;
    transition: color 0.25s ease;
}

header .main-nav .PC li > a {
    color: #b28b50;
    display: inline-flex;
    align-items: center;
    height: calc(64px * var(--compact-ui-scale));
    padding-top: 0;
    box-sizing: border-box;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-style: italic;
    line-height: 1;
    letter-spacing: 0.1em;
    transition: color 0.25s ease;
}

header .main-nav .PC li > a:hover,
header .main-nav .PC li > a:focus-visible {
    color: var(--luxury-ink);
}

header .menu_text:hover {
    color: var(--luxury-ink);
}

header .menu_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
}

header img {
    width: 25px;
}    

header .nav_to_line {
    margin-right: 5px;
}    

.header-quick-actions .header-line-btn {
    width: auto;
    min-height: auto;
    margin: 0;
    padding: 8px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.header-quick-actions .header-line-btn img {
    width: auto;
    height: calc(32px * var(--compact-ui-scale));
    display: block;
}

header a.nav_to_reserve {
    display: block;
    width: calc(188px * var(--compact-ui-scale));
    height: calc(64px * var(--compact-ui-scale));
    padding: calc(18px * var(--compact-ui-scale)) calc(40px * var(--compact-ui-scale)) calc(18px * var(--compact-ui-scale)) calc(74px * var(--compact-ui-scale));
    color: white;
    background-color: #b28b50;
    outline : 1px solid #FFFFFF; /* 内線の太さ・線状・色 */
    outline-offset : calc(-9.7px * var(--compact-ui-scale));
    text-align: center;
    box-sizing: border-box;
    position: relative;
}

header .nav_to_reserve::before {
    content: "";
    display: inline-block;
    width: 25px;
    height: 25px;
    border: 2px solid currentColor;
    border-radius: 50%;
    box-sizing: border-box;
    background:
        linear-gradient(currentColor, currentColor) 50% 28% / 2px 6px no-repeat,
        linear-gradient(currentColor, currentColor) 64% 52% / 6px 2px no-repeat;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 45px;
}


/* ---------------------
メインビジュアル
------------------------- */

.hero_image {
    width: 100%;
    height: auto;
    min-height: 0;
    margin: clamp(0px, 0.3vw, 4px) 0 clamp(22px, 3vw, 42px);
    padding-top: 0;
    position: relative;
}

.hero_gif {
    left: 50%;
    transform: translateX(-50%);
    width: 112px;
    margin: 0 auto;
    opacity: 0.9;
}    

.hero_gif img {
    width: 100%;
    height: auto;
}       

.hero_copy {
    margin: 0 auto calc(48px * var(--compact-ui-scale));
    padding-top: 0;
}

/* パララックス */

.hero_logo {
    position: relative;
    top: clamp(92px, 11vw, 158px);
    left: 0;
    width: 100%;
    z-index: 2;
    pointer-events: none;
}

.hero_logo .parallax1_logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 101%;
    max-width: 101%;
    margin-left: -1%;
    height: auto;
    z-index: 200;
}    

.hero_logo .parallax2_logo_light {
    position: absolute;
    top: 85px;
    left: 0;
    width: 101%;
    max-width: 101%;
    margin-left: -1%;
    height: auto;
    z-index: 100;
    opacity: 0.15;
} 

.hero_copy_block {
    position: relative;
    z-index: 3;
    max-width: calc(820px * var(--compact-ui-scale));
    width: min(860px, calc(100% - (var(--site-container-gutter) * 2)));
    margin-top: clamp(-18px, -1.6vw, -8px);
    margin-inline: auto;
    padding: calc(14px * var(--compact-ui-scale));
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(0, 168, 186, 0.2);
    border-radius: 18px;
    box-shadow: var(--luxury-shadow);
    backdrop-filter: blur(4px);
}

.hero_badge {
    display: block;
    width: fit-content;
    margin: 0 auto calc(10px * var(--compact-ui-scale));
    font-size: calc(12px * var(--compact-ui-scale));
    letter-spacing: 0.16em;
    color: var(--luxury-ink);
    border: 1px solid rgba(178, 139, 80, 0.35);
    padding: calc(4px * var(--compact-ui-scale)) calc(12px * var(--compact-ui-scale));
    border-radius: 999px;
    text-transform: uppercase;
}

.hero_title {
    margin: 0 0 calc(12px * var(--compact-ui-scale));
    padding-top: 0;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-style: italic;
    font-size: calc(36px * var(--compact-ui-scale));
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: #003339;
}

.hero_lead {
    margin: 0 auto calc(12px * var(--compact-ui-scale));
    max-width: 80%;
    line-height: 1.85;
    color: #3f4b4f;
}

.hero_points {
    margin: 0 auto calc(20px * var(--compact-ui-scale));
    padding: 0;
    list-style: none;
    max-width: 78%;
}

.hero_points li {
    margin: 0 0 calc(8px * var(--compact-ui-scale));
    line-height: 1.7;
    font-size: calc(14px * var(--compact-ui-scale));
}

.hero_actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(8px, 1.5vw, 14px);
    margin: 0 auto;
}

.hero_actions .btn {
    width: min(calc(var(--ui-btn-width) * 0.96), 100%);
    max-width: calc(250px * var(--compact-ui-scale-tight));
}

.hero_actions .line-official-btn {
    width: min(calc(var(--ui-btn-width) * 0.96), 100%);
    max-width: calc(250px * var(--compact-ui-scale-tight));
    min-height: var(--ui-btn-height);
}

/* ---------------------
背景画像
------------------------- */

.gradation {
    background-image: none;
    position: relative;
    transition: all 1s ease-out;
}

.gradation::before {
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -3;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(170,227,232,1) 60%, rgba(255,255,255,0) 100%);
    opacity: 0;
    transition: all 2s ease-out;
}

.gradation:hover::before {
    opacity: 1;
}

.triangles_pc {
    position: fixed;
    inset: 0;
    width: 100%;
    z-index: -2;
    margin: 0;
    background: none;
    pointer-events: none;
}


/* ---------------------
concept
------------------------- */

#concept .wrapper_outside {
    position: relative;
}    

#concept .parallax_woman {
    position: absolute;
    right: 0;
    top: calc(250px * var(--compact-ui-scale));
    width: calc(600px * var(--compact-ui-scale));
    height: calc(400px * var(--compact-ui-scale));
    background:
        radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.96) 0 18%, rgba(0, 168, 186, 0.16) 19% 42%, transparent 43%),
        radial-gradient(circle at 64% 72%, rgba(178, 139, 80, 0.20) 0 12%, transparent 13%),
        linear-gradient(160deg, rgba(244, 252, 253, 0.92) 0%, rgba(225, 244, 246, 0.88) 100%);
    border-radius: 40% 60% 52% 48% / 46% 40% 60% 54%;
    box-shadow: 0 22px 36px rgba(0, 138, 147, 0.08);
    z-index: -1;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
    #concept .parallax_woman {
        filter: saturate(1.02);
    }
}

#concept .feature {
    width: 100%;
}

#concept .feature .text {
    width: min(100%, calc(680px * var(--compact-ui-scale)));
    margin: 0 auto;
}

#concept .feature h3 {
    text-align: center;
}

#concept h3 span {
    display: inline-block;
    font-size: calc(16px * var(--compact-ui-scale));
    color: black;
    margin-bottom: calc(5px * var(--compact-ui-scale));
    letter-spacing: 0.05em;
}

#concept .feature ul.about_whitening {
    position: relative;
    width: 100%;
    padding: 0 clamp(14px, 2vw, 24px);
    margin-bottom: calc(28px * var(--compact-ui-scale));
}

#concept .feature .about_whitening li {
    position: relative;
    padding-left: clamp(36px, 4vw, 50px);
    padding-right: clamp(14px, 2vw, 24px);
    line-height: calc(30px * var(--compact-ui-scale));
    margin-bottom: calc(16px * var(--compact-ui-scale));
    word-break: keep-all;
    overflow-wrap: anywhere;
}

#concept .feature .about_whitening li::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(14px * var(--compact-ui-scale));
    transform: translateY(-50%);
    width: calc(22px * var(--compact-ui-scale));
    height: calc(22px * var(--compact-ui-scale));
    margin: 0;
    border: 1px solid rgba(0, 168, 186, 0.45);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 168, 186, 0.92) 0 30%, rgba(0, 168, 186, 0.16) 31% 66%, transparent 67%);
    box-sizing: border-box;
}

#concept .feature .about_whitening br.PC {
    display: none;
}

#concept .point {
    position: relative;
    width: fit-content;
    border: double calc(5px * var(--compact-ui-scale)) #00aaba;
    background-color: white;
    padding: calc(30px * var(--compact-ui-scale)) calc(30px * var(--compact-ui-scale)) calc(20px * var(--compact-ui-scale));
    margin: 0 auto calc(32px * var(--compact-ui-scale));
}

#concept .point p {
    position: absolute;
    top: 0px;
    left: calc(30px * var(--compact-ui-scale));
    transform: translateY(-70%);
    font-family: 'Playfair Display', serif;
    font-size: calc(30px * var(--compact-ui-scale));
    color: #b28b50;
    background-color: white;
    padding: 0 calc(10px * var(--compact-ui-scale)) 0 calc(10px * var(--compact-ui-scale));
}

#concept .point p::after {
    content: "";
    display: inline-block;
    width: calc(18px * var(--compact-ui-scale));
    height: calc(18px * var(--compact-ui-scale));
    margin-left: calc(10px * var(--compact-ui-scale));
    background: radial-gradient(circle, rgba(178, 139, 80, 0.92) 0 34%, rgba(0, 168, 186, 0.16) 35% 68%, transparent 69%);
    border-radius: 50%;
    background-color: transparent !important;
    vertical-align: middle;
}

#concept .point ul {
    list-style-type: none;
}

#concept .point li {
    margin-bottom: 5px;
}

#concept .photos {
    width: 100%;
    height: calc(300px * var(--compact-ui-scale));
    margin-bottom: calc(40px * var(--compact-ui-scale));
    display: flex;
    justify-content: space-between;
}

#concept .photos .img {
    width: calc(400px * var(--compact-ui-scale));
    height: calc(300px * var(--compact-ui-scale));
}


#concept .flow {
    position: relative;
    margin-top: calc(-6px * var(--compact-ui-scale));
    padding-top: calc(8px * var(--compact-ui-scale));
    min-height: calc(690px * var(--compact-ui-scale));
    padding-bottom: clamp(8px, 1.8vw, 22px);
}

#concept .flow .icon_jewelry {
    width: clamp(92px, 14vw, calc(175px * var(--compact-ui-scale)));
    aspect-ratio: 1 / 1;
    height: auto;
    padding-top: 0;
    margin: 0 auto clamp(4px, 0.8vw, 10px);
    background-position: center center;
    background: url(../images/icon_jewelry_LB.png) no-repeat top center / contain;
    pointer-events: none;
}    

#concept .flow .icon_jewelry img {
    display: none;
}    

#concept .detail1 {
    position: absolute;
    left: 50%;
    top: calc(12px * var(--compact-ui-scale));
    transform: translateX(-50%);
    width: calc(580px * var(--compact-ui-scale));
    height: calc(580px * var(--compact-ui-scale));
    background: radial-gradient(circle, rgba(255, 255, 255, 0.72) 0 56%, rgba(0, 168, 186, 0.08) 57% 73%, transparent 74%);
    border-radius: 50%;
    color: #00a8ba;
}

#concept .detail1 h3 {
    text-align: center;
    background-color: transparent;
    margin: calc(50px * var(--compact-ui-scale)) auto calc(35px * var(--compact-ui-scale));
    width: fit-content;
}

#concept .detail1 dl {
    width: fit-content;
    margin: 0 auto;
}

#concept .detail1 dt {
    line-height: calc(30px * var(--compact-ui-scale));
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: calc(35px * var(--compact-ui-scale));
    float: left;
}

#concept .detail1 dd {
    margin-left: calc(40px * var(--compact-ui-scale));
}


#concept .detail1 .arrow {
    width: calc(40px * var(--compact-ui-scale));
    margin: calc(5px * var(--compact-ui-scale)) auto;
}

#concept .detail1 .arrow img {
    width: 100%;
}

#concept .detail2 {
    position: absolute;
    top: calc(560px * var(--compact-ui-scale));
    left: 50%;
    transform: translateX(-50%);
    width: min(92%, calc(760px * var(--compact-ui-scale)));
    clear: both;
    letter-spacing: 0.01em;
}

#concept .detail2 li {
    line-height: calc(30px * var(--compact-ui-scale));
}

#concept hr {
    border: none;
    width: calc(685px * var(--compact-ui-scale));
    margin: clamp(16px, 2.2vw, 26px) auto;
    border-top: 2px solid #e7e7e7;
}

#concept .COVID-19 {
    width: fit-content;
    margin: 0 auto clamp(8px, 1.3vw, 14px);
}

#concept .COVID-19 h3 {
    text-align: left;
}

#concept .COVID-19 ul {
    list-style-type: none;
    line-height: calc(40px * var(--compact-ui-scale));
}

#concept {
    clear: both;
    padding-bottom: clamp(2px, 0.6vw, 8px);
}

#access {
    margin-top: clamp(12px, 2vw, 24px);
    clear: both;
}

#contact {
    clear: both;
    margin-top: clamp(10px, 1.8vw, 22px);
}

#price + #access,
#access + #contact {
    margin-top: clamp(8px, 1.2vw, 16px);
}

/* ---------------------
Price
------------------------- */


#price {
    position: relative;
    clear: both;
    padding-bottom: clamp(14px, 2vw, 26px);
    margin-top: clamp(2px, 0.6vw, 8px);
}

#price .price_frame {
    display: none;
}

#price .title {
    position: static;
    top: 0;
    text-align: left;
    width: min(var(--site-container-max), calc(100% - (var(--site-container-gutter) * 2)));
    margin: 0 auto calc(26px * var(--compact-ui-scale));
    padding-inline: calc(8px * var(--compact-ui-scale));
    z-index: auto;
}

#contact .wrapper_outside {
    width: min(var(--site-container-max), calc(100% - (var(--site-container-gutter) * 2)));
    margin-left: auto;
    margin-right: auto;
    padding-inline: calc(8px * var(--compact-ui-scale));
}

#price .title h2 {
    margin-top: 0;
    text-align: left;
}

#price .title h2,
#access .access_content > h2,
#contact .wrapper_outside > h2 {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}

#price .wrapper_outside {
    overflow: visible;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.95fr);
    gap: clamp(16px, 3vw, 32px);
    align-items: start;
}

#price .wrapper_inside {
    width: 100%;
    margin: 0;
}

#price .menu {
    margin-left: 0;
    max-width: 100%;
    padding-inline: clamp(8px, 1.2vw, 14px);
    box-sizing: border-box;
    padding-bottom: 0px;
}

#price .menu .price_table_block {
    margin-top: calc(68px * var(--compact-ui-scale));
    margin-bottom: calc(20px * var(--compact-ui-scale));
}

#price .menu .price_table_block:first-child {
    margin-top: 0;
}

#price .price_table_block h3 {
    margin: 0 0 calc(14px * var(--compact-ui-scale));
    color: var(--luxury-ink);
    font-size: calc(30px * var(--compact-ui-scale));
    line-height: 1.6;
    font-style: italic;
    letter-spacing: 0.08em;
}

#price .price_table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid rgba(0, 168, 186, 0.2);
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    overflow: hidden;
    table-layout: fixed;
    min-width: 0;
    box-shadow: 0 10px 24px rgba(0, 74, 79, 0.08);
}

#price .price_table thead th {
    background: #eaf7fa;
    border-bottom: 1px solid rgba(0, 168, 186, 0.2);
    color: var(--luxury-ink);
    font-size: calc(14px * var(--compact-ui-scale));
    font-weight: 700;
    text-align: left;
    padding: calc(14px * var(--compact-ui-scale));
}

#price .price_table thead th:nth-child(1) {
    width: 18%;
}

#price .price_table thead th:nth-child(2) {
    width: 22%;
}

#price .price_table thead th:nth-child(3) {
    width: 15%;
}

#price .price_table thead th:nth-child(4) {
    width: 45%;
}

#price .price_table th,
#price .price_table td {
    text-align: left;
    vertical-align: top;
    padding: calc(12px * var(--compact-ui-scale));
    font-size: calc(14px * var(--compact-ui-scale));
    line-height: 1.8;
    letter-spacing: 0.02em;
    border-bottom: 1px solid rgba(0, 168, 186, 0.12);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#price .price_table th {
    color: #005b61;
    font-weight: 700;
    background: rgba(244, 250, 252, 0.9);
}

#price .price_table_sub th {
    width: auto;
}

#price .price_table_sub thead th:nth-child(1) {
    width: 20%;
}

#price .price_table_sub thead th:nth-child(2) {
    width: 20%;
}

#price .price_table_sub thead th:nth-child(3) {
    width: 60%;
}

#price .price_table th,
#price .price_table td {
    overflow-wrap: break-word;
    word-break: normal;
}

#price .price_table .price {
    font-weight: 700;
    white-space: nowrap;
}

#price .price_table tbody tr:last-child th,
#price .price_table tbody tr:last-child td {
    border-bottom: none;
}

#price .price3 a {
    border-bottom: solid 1px black;
}


#price .buttons {
    margin-top: calc(65px * var(--compact-ui-scale));
}

#price .parallax_image2 {
    position: relative;
    margin-top: clamp(16px, 2.2vw, 28px);
    height: auto;
    width: 100%;
    overflow: visible;
}

#price .parallax_image2::before {
    content: "";
    position: absolute;
    width: clamp(120px, 22vw, 210px);
    aspect-ratio: 1 / 1;
    right: calc(5vw + 12px);
    top: calc(12px * var(--compact-ui-scale));
    background: url(../images/icon_jewelry_LB.png) no-repeat center / contain;
    opacity: 0.21;
    pointer-events: none;
    z-index: 1;
    transform: translateY(-12%);
}

#price .parallax_image2 .whitening_sample {
    position: static;
    top: auto;
    width: min(calc(740px * var(--compact-ui-scale)), 100%);
    margin-left: 0;
    margin-bottom: calc(40px * var(--compact-ui-scale));
    z-index: 2;
}

#price .parallax_image2 .whitening_sample img {
    width: 100%;
}

#price .parallax_image2 .salon4 {
    position: static;
    top: auto;
    right: auto;
    width: min(calc(640px * var(--compact-ui-scale)), 100%);
    margin: 0;
    z-index: 2;
}
#price .parallax_image2 .salon4 img {
    width: 100%;
}

#concept .photos > div {
    padding: calc(6px * var(--compact-ui-scale));
    background: #fff;
    border: 1px solid rgba(0, 168, 186, 0.16);
    border-radius: 16px;
    box-sizing: border-box;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

#concept .photos > div img {
    border-radius: 10px;
}

#access {
    padding-bottom: clamp(26px, 3.8vw, 42px);
    clear: both;
    margin-top: clamp(10px, 1.8vw, 22px);
    position: relative;
    z-index: 2;
}

#access .access_content {
    position: relative;
}

#access .access_grid {
    width: min(100%, calc(100% - (var(--site-container-gutter) * 2)));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr);
    align-items: start;
    gap: clamp(24px, 4vw, 48px);
}

#access .access_list {
    background: #ffffffea;
    border: 1px solid rgba(0, 168, 186, 0.2);
    border-radius: 16px;
    padding: calc(24px * var(--compact-ui-scale));
    box-sizing: border-box;
    box-shadow: 0 12px 26px rgba(0, 138, 147, 0.11);
    margin: 0;
}

#access .access_list dl {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(90px, max-content) minmax(0, 1fr);
    column-gap: 24px;
    row-gap: calc(16px * var(--compact-ui-scale));
}

#access .access_list dt {
    white-space: nowrap;
    color: var(--luxury-ink);
    font-weight: 700;
}

#access .access_list dd {
    margin: 0;
    line-height: 1.7;
    min-width: 0;
    overflow-wrap: anywhere;
}

#access .access_list .label {
    align-self: start;
}

#access .access_list .address {
    min-width: 0;
}

#access .access_list .payment {
    margin: calc(26px * var(--compact-ui-scale)) 0 0;
    padding-top: calc(18px * var(--compact-ui-scale));
    border-top: 1px solid rgba(0, 168, 186, 0.2);
    display: grid;
    grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
    column-gap: 24px;
}

#access .access_list p {
    margin: calc(28px * var(--compact-ui-scale)) 0 0;
}

#access .access_map {
    display: flex;
    flex-direction: column;
    gap: calc(14px * var(--compact-ui-scale));
    justify-content: flex-start;
}

#access .btn_to_map {
    display: inline-flex;
    width: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
    min-height: calc(54px * var(--compact-ui-scale));
    padding: 0 calc(16px * var(--compact-ui-scale));
    color: #fff;
    text-decoration: none;
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: 0.08em;
    background: linear-gradient(120deg, #3bafc3 0%, #008c97 100%);
    border: 1px solid #fff;
    border-radius: 9999px;
    box-shadow: var(--luxury-shadow);
}

#access .btn_to_map:hover {
    filter: brightness(1.05);
}

#access .map_frame {
    border: 1px solid rgba(0, 138, 147, 0.28);
    border-radius: 16px;
    overflow: hidden;
    background: #f6f7f8;
}

#access .map_frame iframe {
    width: 100%;
    min-height: clamp(240px, 52vw, 340px);
    aspect-ratio: 16 / 9;
    height: clamp(240px, 52vw, 340px);
    border: 0;
}

.btn_to_map {
    position: relative;
}

.btn_to_map::after {
    content: "↗";
    margin-left: 10px;
    font-size: 0.9rem;
    opacity: 0.95;
}

/* ---------------------
ラインが動くリンクボタン
------------------------- */

.btn {
    display: inline-block;
    text-decoration: none;
    width: min(var(--ui-btn-width), 100%);
    height: var(--ui-btn-height);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: transform 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease;
    position: relative;
    border-radius: var(--ui-btn-radius);
    overflow: hidden;
    text-align: center;
    box-shadow: 0 10px 20px rgba(7, 41, 46, 0.11);
}

.btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
    box-shadow: 0 14px 26px rgba(7, 41, 46, 0.16);
}

.buttons {
    width: min(100%, 980px);
    margin: 0 auto calc(40px * var(--compact-ui-scale));
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(175px, 100%), 1fr));
    justify-items: stretch;
    align-items: stretch;
    gap: clamp(8px, 1.4vw, 12px);
}

.buttons .btn,
.buttons .line-official-btn {
    width: 100%;
}

.btn .inner_box {
    min-height: var(--ui-btn-inner-height);
    height: auto;
    width: calc(100% - 8px);
    margin: calc(4px * var(--compact-ui-scale));
    padding-inline: clamp(14px, 2.5vw, 20px);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
}

.line-official-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    width: min(var(--ui-btn-width), 100%);
    min-height: var(--ui-btn-height);
    height: var(--ui-btn-height);
    padding: calc(4px * var(--compact-ui-scale));
    box-sizing: border-box;
    border-radius: var(--ui-btn-radius);
    background: transparent;
    box-shadow: 0 10px 20px rgba(7, 41, 46, 0.11);
    transition: transform 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease;
}

.line-official-btn img {
    display: block;
    border: 0;
    width: auto;
    max-width: 100%;
    height: calc(30px * var(--compact-ui-scale-tight));
    max-height: calc(32px * var(--compact-ui-scale-tight));
    margin: 0 auto;
}

.sticky-cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 600;
    display: none;
    align-items: center;
    justify-content: center;
    gap: calc(8px * var(--compact-ui-scale));
    padding: calc(8px * var(--compact-ui-scale));
    background-color: rgba(255, 255, 255, 0.95);
    border-top: 1px solid #008f97;
}

.sticky-cta-bar .btn {
    width: calc(50% - calc(8px * var(--compact-ui-scale-tight)));
    max-width: calc(180px * var(--compact-ui-scale-tight));
    height: var(--ui-btn-height);
    margin: 0;
}

.sticky-cta-bar .line-official-btn {
    width: calc(50% - calc(8px * var(--compact-ui-scale-tight)));
    max-width: calc(180px * var(--compact-ui-scale-tight));
    height: var(--ui-btn-height);
    margin: 0;
}

.sticky-cta-bar .inner_box {
    width: 100%;
    min-height: var(--ui-btn-inner-height);
    height: auto;
    margin: calc(4px * var(--compact-ui-scale));
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sticky-cta-bar .inner_box::before {
    left: 16px;
}

.sticky-cta-bar .line-official-btn img {
    height: calc(30px * var(--compact-ui-scale-tight));
    width: auto;
}


/* 内側のラインより中のデザイン */

.inner_box {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: var(--ui-btn-inner-height);
    margin: calc(4px * var(--compact-ui-scale));
    padding: 0 calc(42px * var(--compact-ui-scale));
    font-size: calc(16px * var(--compact-ui-scale));
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-align: center;
    position: relative;
    box-sizing: border-box;
    border-radius: var(--ui-btn-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.btn:hover .inner_box {
    transform: none;
}

.ib_for_reserve {
    color: white;
    background: linear-gradient(120deg, #d5ab70 0%, #b28b50 100%);
    border: solid 1px white; /* 内側のライン　*/
}

.ib_for_LINE {
    color: white;
    background: linear-gradient(120deg, #3dd56b 0%, #06c755 100%);
    border: solid 1px white; /* 内側のライン　*/
}

.ib_for_contact {
    color: #00a8ba;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 252, 254, 0.98) 100%);
    border: solid 1px white; /* 内側のライン　*/
}

.inner_box::before { /* ボタン内のアイコン */
    content:"";
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: calc(16px * var(--compact-ui-scale));    
    width: var(--ui-btn-icon-size);
    height: var(--ui-btn-icon-size);
    padding-right: 0;
    background-repeat: no-repeat;
    background-size: contain;
}

.ib_for_reserve::before {
    background:
        linear-gradient(currentColor, currentColor) 50% 30% / 1.5px 4px no-repeat,
        linear-gradient(currentColor, currentColor) 62% 52% / 4px 1.5px no-repeat;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    box-sizing: border-box;
}

.ib_for_LINE::before {
    background: currentColor;
    clip-path: polygon(14% 12%, 86% 12%, 86% 66%, 58% 66%, 44% 88%, 46% 66%, 14% 66%);
}

.ib_for_contact::before {
    background: currentColor;
    clip-path: polygon(16% 16%, 84% 16%, 84% 68%, 58% 68%, 42% 88%, 44% 68%, 16% 68%);
}

.inner_box::after { /* ボタン内のアイコン */
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    right: calc(16px * var(--compact-ui-scale));
    width: calc(var(--ui-btn-icon-size) * 0.55);
    height: calc(var(--ui-btn-icon-size) * 0.55);
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    box-sizing: border-box;
    transform: translateY(-50%) rotate(45deg);
}

/* 内部のデザインここまで */
/* 外周ラインのCSSここから */

.btn:before,
.btn:after {
  content: "";
  display: none;
  position: absolute;
  top: 0;
  pointer-events: none;
  border-radius: 9999px;
}

.btn_to_reserve:before,
.btn_to_reserve:after {
    background-color: #b28b50; /* 動くラインの色 */
}

.btn_to_LINE:before,
.btn_to_LINE:after {
    background-color: #06c755; /* 動くラインの色 */
}

.btn_to_contact:before,
.btn_to_contact:after {
    background-color: #00a8ba; /* 動くラインの色 */
}

.btn:before {
  left: 0;
  width: 0;
  height: 0;
}
.btn:after {
  right: 0;
  width: 0;
  height: 0;
}
.btn:hover:before {
  width: 0;
  transition: none;
}
.btn:hover:after {
  height: 0;
  transition: none;
}
.btn:hover .moving_line:before {
  width: 0;
  transition: none;
}
.btn:hover .moving_line:after {
  height: 0;
  transition: none;
}
.btn .moving_line:before,
.btn .moving_line:after {
  content: "";
  display: none;
  position: absolute;
  bottom: 0;
  pointer-events: none;
  border-radius: 9999px;
}

.ml_for_reserve:before,
.ml_for_reserve:after{
    background-color: #b28b50; /* 動くラインの色 */
}

.ml_for_LINE:before,
.ml_for_LINE:after{
    background-color: #06c755; /* 動くラインの色 */
}

.ml_for_contact:before,
.ml_for_contact:after{
    background-color: #00a8ba; /* 動くラインの色 */
}

.btn .moving_line:before {
  right: 0;
  width: 0;
  height: 0;
}
.btn .moving_line:after {
  left: 0;
  width: 0;
  height: 0;
}

.line-official-btn {
    transition: transform 0.22s ease, filter 0.22s ease;
}

.line-official-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 12px 18px rgba(7, 41, 46, 0.14);
}



/* ---------------------
Contact
------------------------- */

#contact {
    clear: both;
    width: 100%;
    background: radial-gradient(circle at 50% 88%, rgba(178, 139, 80, 0.08) 0 18%, transparent 19%);
}

#contact .contact_text {
    margin: calc(10px * var(--compact-ui-scale)) auto calc(14px * var(--compact-ui-scale));
    letter-spacing: 0.01em;
}

#contact p {
    text-align: center;
    line-height: calc(60px * var(--compact-ui-scale));
}

#contact .buttons {
    width: min(100%, 860px);
    margin: 0 auto calc(30px * var(--compact-ui-scale));
}

#contact,
#contact * {
    scrollbar-width: none;
}

#contact *::-webkit-scrollbar {
    display: none;
}

#instagram {
    width: 100%;
    margin: 0 auto calc(42px * var(--compact-ui-scale));
}

#instagram iframe {
    display: block;
    margin: 0 auto calc(40px * var(--compact-ui-scale));
}

#instagram a.btn_to_instagram {
    display: block;
    width: calc(160px * var(--compact-ui-scale));
    height: calc(48px * var(--compact-ui-scale));
    margin: 0 auto;
    padding: calc(12px * var(--compact-ui-scale)) calc(16px * var(--compact-ui-scale));
    background-color: #00a8ba;
    color: white;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: calc(14px * var(--compact-ui-scale));
    letter-spacing: 0.1em;
    text-align: center;
    outline : 1px solid #FFFFFF;
    outline-offset : -4px;
}

#instagram .btn_to_instagram::before {
    content: "";
    display: inline-block;
    width: calc(22px * var(--compact-ui-scale));
    height: calc(22px * var(--compact-ui-scale));
    margin: 0 calc(10px * var(--compact-ui-scale)) 0 0;
    background: url(../images/icon_instagram_B.png) no-repeat;
    background-size: contain;
    filter: brightness(0) invert(1);
    vertical-align: middle;
}

.insta_list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: calc(3vw * var(--compact-ui-scale)) 0 calc(2vw * var(--compact-ui-scale));
}

.insta_list img{
    width: 13vw;
    padding: 0 calc(.25vw * var(--compact-ui-scale));
}

/* ---------------------
フッター
------------------------- */

footer .wrapper_inside {
    position: relative;
}

#to_page_top {
    display: none !important;
}

aside {
    position: static;
    right: auto;
    top: auto;
    transform: none;
    width: min(var(--site-container-max), calc(100% - (var(--site-container-gutter) * 2)));
    margin: 0 auto clamp(8px, 1.5vw, 16px);
    text-align: right;
}        

aside a {
    text-decoration: none;
    color: #008f97;
    font-style: italic;
    letter-spacing: 0.05em;
}

aside a::before {
    content: "";
    display: inline-block;
    width: calc(72px * var(--compact-ui-scale));
    height: 1px;
    background-color: #008f97;
    vertical-align: middle;
    margin-right: calc(5px * var(--compact-ui-scale));

    animation: scroll-animation 1.6s infinite;
    animation-duration: 1.6s;
    animation-timing-function: cubic-bezier(.645,.045,.355,1);
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
}

@keyframes scroll-animation{
    0% {
        transform-origin:left;
        transform:scaleX(1);
    }
    50% {
        transform-origin:left;
        transform:scaleX(0);
    }
    51% {
        transform-origin:right;
    }
    100% {
        transform-origin:right;
        transform:scaleX(1);
    }
}

footer .copyright {
    margin: 0 auto;
    padding-top: clamp(10px, 1.8vw, 18px);
    padding-bottom: 0;
}

footer .copyright .footer_note {
    margin: 0 auto calc(10px * var(--compact-ui-scale));
    color: #46656a;
    font-size: calc(13px * var(--compact-ui-scale));
    line-height: 1.72;
    letter-spacing: 0.01em;
    text-align: center;
    max-width: min(100%, calc(780px * var(--compact-ui-scale)));
}

footer .copyright p {
    margin: 0;
    text-align: center;
    color: #00a8ba;
    font-size: calc(13px * var(--compact-ui-scale));
    line-height: 1.45;
}

footer .copyright p:last-child {
    margin: clamp(4px, 0.7vw, 8px) auto 0;
    letter-spacing: 0.05em;
}

footer hr {
    border: none;
    width: calc(680px * var(--compact-ui-scale));
    margin: 0 auto;
    /* margin: 60px auto 100px; */
    border-top: 1px solid #008f97;
}    

footer .footer_logo {
    width: calc(280px * var(--compact-ui-scale));
    margin: 0 auto;
    padding-top: calc(46px * var(--compact-ui-scale));
}

footer img {
    width: 100%;
}

footer .copyright p {
    margin: 0 auto;
    text-align: center;
    color: #00a8ba;
    font-size: calc(12px * var(--compact-ui-scale));
    letter-spacing: 0.1em;
}



/* ---------------------
プライバシーポリシーのページ
------------------------- */

#policy {
    position: relative;
}

.cross {
    position: absolute;
    top: calc(45px * var(--compact-ui-scale));
    right: calc(80px * var(--compact-ui-scale));
    width: calc(40px * var(--compact-ui-scale));
}

.cross img {
    width: 100%;
}

#policy .wrapper_policy {
    width: calc(740px * var(--compact-ui-scale));
    margin: 0 auto;
    line-height: calc(34px * var(--compact-ui-scale));
}

#policy .policy_title {
    margin-bottom: calc(30px * var(--compact-ui-scale)); 
}

#policy h1 {
    margin-top: calc(100px * var(--compact-ui-scale));
    margin-bottom: calc(45px * var(--compact-ui-scale));
    font-size: calc(40px * var(--compact-ui-scale));
    color: #00a8ba;
}

#policy h1 span {
    font-size: calc(20px * var(--compact-ui-scale));
}

#policy ul {
    list-style-type: none;
}

#policy li {
    font-weight: bold;
    margin-top: calc(40px * var(--compact-ui-scale));
}

    #policy ul p {
    font-weight: 300;
}

#policy .optout {
    line-height: calc(30px * var(--compact-ui-scale));
    margin-top: calc(40px * var(--compact-ui-scale));
}

#policy .hr_top {
    margin: calc(14px * var(--compact-ui-scale)) auto calc(24px * var(--compact-ui-scale));
}

#policy .hr_bottom {
    margin: calc(60px * var(--compact-ui-scale)) auto calc(110px * var(--compact-ui-scale));
}

#policy .comment {
    margin-top: calc(80px * var(--compact-ui-scale));
}

#policy .comment a {
    border-bottom: solid 1px black;
}

/* ---------------------
お問い合わせフォームのページ
------------------------- */

#form .wrapper_inside {
    margin-top: calc(200px * var(--compact-ui-scale));
}

#form .wrapper_form {
    width: calc(500px * var(--compact-ui-scale));
    margin: calc(70px * var(--compact-ui-scale)) auto 0;
    line-height: calc(60px * var(--compact-ui-scale));
}

#form input:focus,textarea:focus {
    outline: none;
}

#form input:hover,textarea:hover {
    cursor: pointer;
}

#form input {
    width: 100%;
}

#form .items {
    display: table;
}

#form .items dt {
    /* /左に寄せる/ */
    float: left ;
    /* /後続の左寄せを解除/ */
    clear: left ;
    margin-right: 0;
    width: calc(150px * var(--compact-ui-scale)) ;
    display: table-cell !important;
    vertical-align: bottom;
}

#form .items dd {
    margin-left: calc(150px * var(--compact-ui-scale));
    width: calc(350px * var(--compact-ui-scale));
    border-bottom: 1px solid #008f97;
}

#form .radio {
    margin: calc(10px * var(--compact-ui-scale)) 0;
    display: flex;
    justify-content:flex-start
}

#form .radio dt, .radio dd {
    width: calc(150px * var(--compact-ui-scale));
    margin-right: calc(40px * var(--compact-ui-scale));
}

#form .radio input {
    width: 50%;
}

#form textarea {
    width: 100%;
    border-bottom: 1px solid #008f97;
}

#form .comment {
    font-size: calc(12px * var(--compact-ui-scale));
    line-height: calc(30px * var(--compact-ui-scale));
    margin-top: calc(45px * var(--compact-ui-scale));
    margin-bottom: calc(25px * var(--compact-ui-scale));
}

#form .comment a {
    border-bottom: solid 1px black;
}

#form #btn_submit {
    display: block;
    width: calc(400px * var(--compact-ui-scale));
    height: calc(75px * var(--compact-ui-scale));
    background-color: #008f97;
    color: white ;
    padding: calc(15px * var(--compact-ui-scale));
    margin-bottom: calc(240px * var(--compact-ui-scale));
    text-align: center;
    outline : 1px solid #FFFFFF; /* 内線の太さ・線状・色 */
    outline-offset : -5px;
    line-height: 1;
}

#form #btn_submit::before {
    content: "";
    display: inline-block;
    width: calc(14px * var(--compact-ui-scale));
    height: calc(14px * var(--compact-ui-scale));
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    box-sizing: border-box;
    transform: rotate(45deg);
    vertical-align: middle;
    margin-right: calc(10px * var(--compact-ui-scale));
}



    

/* ---------------------
サンクスページ
------------------------- */

#thanks .thanks_message {
    margin: calc(110px * var(--compact-ui-scale)) auto calc(40px * var(--compact-ui-scale));
    text-align: center;
    line-height: calc(40px * var(--compact-ui-scale));
}

#thanks .btn_to_toppage {
    display: inline-block;
    text-decoration: none;
    margin: calc(40px * var(--compact-ui-scale)) auto 0;
    padding: calc(10px * var(--compact-ui-scale)) calc(30px * var(--compact-ui-scale));
    width: fit-content;
    color: white;
    background-color: #b28b50;
    outline : 1px solid #FFFFFF;
    outline-offset : -4px;
}

#thanks .copyright p {
    margin-top: calc(25px * var(--compact-ui-scale));
}


/* ---------------------
メディアクエリ
------------------------- */

@media screen and (min-width : 701px) and (max-width : 1100px) {
    .wrapper_outside,
    .wrapper_inside {
        width: min(96vw, var(--site-container-max));
        padding-inline: clamp(6px, 2vw, 12px);
    }

    html {
        width: 100%;
        font-size: 12px;
        line-height: 1.8;
    }

    .site-header {
        min-height: calc(58px * var(--compact-ui-scale));
    }

    .main-nav {
        padding-left: clamp(116px, 22vw, 198px);
    }

    .header-home-logo img {
        width: clamp(108px, 18vw, 168px);
    }

    .header .main-nav,
    .header-quick-actions {
        position: static;
    }

    .header-quick-actions {
        gap: 4px;
    }

    .header-quick-actions .menu_text {
        padding: 0 16px;
        min-height: 42px;
        line-height: 1.2;
        font-size: calc(12px * var(--compact-ui-scale));
    }

    .header .nav_to_reserve {
        width: calc(164px * var(--compact-ui-scale));
        height: calc(52px * var(--compact-ui-scale));
        padding-top: calc(16px * var(--compact-ui-scale));
        padding-left: calc(48px * var(--compact-ui-scale));
        padding-right: calc(20px * var(--compact-ui-scale));
    }

    .header .nav_to_reserve::before {
        left: calc(15px * var(--compact-ui-scale));
        width: calc(19px * var(--compact-ui-scale));
        height: calc(19px * var(--compact-ui-scale));
    }

    .header-quick-actions .header-line-btn img {
        height: calc(30px * var(--compact-ui-scale));
    }

    .header .nav_to_line img {
        width: 19px;
        height: 19px;
    }

.hero_image {
        min-height: auto;
        margin: clamp(-8px, -1vw, -2px) 0 clamp(6px, 1.8vw, 18px);
    }

    .hero_gif {
        width: 13vw;
        min-width: 50px;
    }

    .hero_logo .parallax1_logo {
        width: 101%;
    }

    .hero_logo .parallax2_logo_light {
        width: 101%;
        top: 85px;
    }

    .hero_copy_block {
        width: calc(100% - 6vw);
        padding: 4vw;
        margin-top: 4px;
    }

    .hero_title {
        font-size: 2rem;
        margin-bottom: 2.2vw;
    }

    .hero_lead {
        max-width: 100%;
    }

    .hero_points {
        max-width: 100%;
        margin-bottom: 3.2vw;
    }

    .hero_actions {
        display: flex;
        gap: 2.8vw;
        justify-content: center;
        flex-wrap: wrap;
    }

    .hero_actions .btn,
    .hero_actions .line-official-btn {
        width: min(calc(220px * var(--compact-ui-scale-tight)), 100%);
        flex: 1 1 0;
    }

    #price .wrapper_outside,
    #access .wrapper_outside,
    #contact .wrapper_outside,
    #contact .wrapper_inside {
        width: 94vw;
        grid-template-columns: 1fr;
    }

    #price .title {
        width: 94vw;
        padding-inline: clamp(6px, 2vw, 12px);
        margin-left: auto;
        margin-right: auto;
    }

    #contact .wrapper_outside {
        width: 94vw;
        padding-inline: clamp(6px, 2vw, 12px);
    }

    #price .wrapper_outside {
        display: block;
    }

    #price .parallax_image2 {
        width: 100%;
    }

    #price .parallax_image2 .whitening_sample {
        width: min(640px, 100%);
        margin: 0 auto;
    }

    #price .parallax_image2 .salon4 {
        width: min(620px, 100%);
        margin: 0 auto;
    }

    #price .buttons,
    #contact .buttons {
        width: min(96%, 820px);
        grid-template-columns: repeat(2, 1fr);
    }

    .buttons .btn,
    .buttons .line-official-btn {
        max-width: 100%;
    }

    #access .access_grid {
        grid-template-columns: 1fr;
    }

    #access .map_frame iframe {
        height: clamp(290px, 56vw, 360px);
    }

    .line-official-btn img {
        max-height: calc(32px * var(--compact-ui-scale));
    }

    footer .wrapper_inside {
        width: 94vw;
    }
}

@media screen and (max-width : 700px) {
    /* モバイル用レイアウト 横幅700px以内 */

    .PC {
        display: none;
    }

    .sticky-cta-bar {
        display: flex;
    }

    .hero_copy {
        margin-bottom: 14vw;
        font-size: clamp(0.82rem, 3.9vw, 1rem);
        line-height: 1.75;
        letter-spacing: 0.03em;
    }

    body#home {
        padding-bottom: calc(92px + env(safe-area-inset-bottom));
    }

    html {
        width:100%;
        font-size: 11px;
        line-height: 2.1;
    }
    
    .whole-frame_B {
        border: 1.5vw solid #b28b50;
    }

    .wrapper_outside {
        width: 97vw;
    }

    .wrapper_inside {
        width: 93vw;
    }

    h1 {
        font-size: 1.8rem;
        line-height: 2;
        margin-bottom: 12vw;
        padding-top: 3vw;
    }
    
    h2 {
        font-size: 2.25rem;
        margin-top: 6vw;
    }
    
    h2::before {
        height: .3vw;
        margin-bottom: 1vw;
        margin-right: 2px;
        width: 18vw;
    }
    
    h3 {
        font-size: 1.2rem;
        line-height: 1.5;
        margin-bottom: 6vw;
    }

    ul, li, p {
        font-size: 0.95rem;
    }

    /* ラインが動くリンクボタン */
    .btn {
        width: min(92vw, 320px);
        height: var(--ui-btn-height);
        margin: 0 auto calc(7vw);
        filter: none;
    }
    
    .buttons {
        margin-bottom: 5vw;
    }
    
    .btn .inner_box {
        width: calc(100% - 8px);
        min-height: calc(32px * var(--compact-ui-scale));
        margin: 4px;
        font-size: 1rem;
        padding: 0 calc(34px * var(--compact-ui-scale));
        justify-content: center;
    }
    
    .inner_box::before, .inner_box::after {
        width: 4vw;
        height: 4vw;
        max-width: 18px;
        max-height: 18px;
    }
 
    .inner_box::before {
        left: min(5vw, 18px);
    }

    .inner_box::after {
        right: min(5vw, 18px);
    }

    .btn:before,
    .btn:after,
    .btn .moving_line:before,
    .btn .moving_line:after {
        border-radius: 9999px;
    }


    /* ナビゲーション */

    header {
        height: 14vw;
    }

    .mobile_menu {
        height: 10vw;
        width: 100%;
        position: relative;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 2.8vw;
        padding-right: 4vw;
    }

    .menu_icon {
        padding-top: 0 !important;
        padding-right: 0;
        width: clamp(20px, 5.6vw, 30px);
        height: auto;
    }

    .mobile_menu .menu_icon {
        position: static;
        z-index: 400;
    }
    
    .mobile_menu .instagram {
        right: auto;
        order: 1;
    }

    .mobile_menu .LINE {
        right: auto;
        order: 2;
    }

    .menu_icon img {
        width: 100%;
    }

    .mobile_menu .nav_to_reserve {
        right: 0vw;
        z-index: 400;
        width: 32vw;
        height: 11vw;
        padding: 2.6vw 5vw 2.5vw 10vw;
        outline : .25vw solid #FFFFFF; /* 内線の太さ・線状・色 */
        outline-offset : -1.6vw;
        font-size: 1.8vw;
    }

    .mobile_menu .nav_to_reserve::before {
        width: 3.9vw;
        height: 3.9vw;
        top: 50%;
        transform: translateY(-50%);
        left: 6.9vw;
    }

    /* バーガーメニューのボタン */
    .mobile_menu {
        position: relative;
        display: flex;
    }

    .menu-trigger {
        position: relative;
        top: auto;
        left: auto;
        order: 3;
        margin-left: clamp(4px, 1.4vw, 10px);
        transform: scale(0.86);
        transform-origin: center right;
        z-index: 2200;
        width: 7vw;
        height: 7vw;
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
        line-height: 1;
    }

    .menu-trigger span {
        display: block;
        position: absolute;
        left: 0;
        box-sizing: border-box;
        width: 100%;
        height: .3vw;
        border-radius: 1px;
        background-color: #b28b50;
        transition: transform .22s ease, top .22s ease, opacity .22s ease;
    }

    .menu-trigger span:nth-of-type(1) {
        top: 0;
    }

    .menu-trigger span:nth-of-type(2) {
        top: 3vw;
    }

    .menu-trigger span:nth-of-type(3) {
        top: 6vw;
    }

    .menu-trigger.is-active span:nth-of-type(1) {
        top: 3vw;
        transform: rotate(45deg);
    }

    .menu-trigger.is-active span:nth-of-type(2) {
        opacity: 0;
    }

    .menu-trigger.is-active span:nth-of-type(3) {
        top: 3vw;
        transform: rotate(-45deg);
    }

    /* モーダルウィンドウ */
    #modal {
        position: fixed;
        inset: 0;
        z-index: 2000;
        width: 100vw;
        height: 100dvh;
        min-height: 100dvh;
        background: linear-gradient(165deg, #f7f9fb 0%, #edf4f8 100%);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.22s ease, visibility 0.22s linear;
        pointer-events: none;
    }

    #modal ul {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        inset: 0;
        gap: clamp(16px, 4.8vw, 28px);
        padding: calc(16vw + 20px) 10vw 12vw;
        transform: translateY(10px);
        transition: transform 0.22s ease;
    }

    #modal ul li {
        opacity: 0;
        transform: translateY(12px);
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        font-size: 1.4rem;
        line-height: 1.45;
        letter-spacing: 0.01em;
        list-style: none;
        color: #b28b50;
        text-align: center;
        transition: opacity 0.18s ease, transform 0.18s ease;
    }

    #modal.is-active ul li {
        opacity: 1;
        transform: translateY(0);
    }

    #modal.is-active ul li:nth-child(1) {
        transition-delay: 0.02s;
    }

    #modal.is-active ul li:nth-child(2) {
        transition-delay: 0.06s;
    }

    #modal.is-active ul li:nth-child(3) {
        transition-delay: 0.1s;
    }

    #modal.is-active ul li:nth-child(4) {
        transition-delay: 0.14s;
    }

    #modal ul li:hover {
        color: black;
    }

    #modal ul li a {
        display: block;
        margin: 0 auto;
        width: fit-content;
        text-align: center;
    }

    #modal.is-active {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    #modal.is-active ul {
        transform: translateY(0);
    }

    /* /モーダルウィンドウ */


    /* メインビジュアル */

    .hero_image {
        min-height: auto;
        margin: 2vw 0 5vw;
        display: block;
        padding-top: 1.4vw;
    }

    .hero_gif {
        top: 0.8vw;
        width: 15vw;
        min-width: 46px;
        margin-top: 0;
    }

    .hero_logo {
        top: clamp(78px, 20vw, 118px);
    }

    .hero_logo .parallax1_logo {
        width: 101%;
    }

    .hero_logo .parallax2_logo_light {
        top: 85px;
        width: 101%;
    }

    .hero_copy_block {
        width: calc(100% - 8vw);
        margin-top: 0;
        padding: 4.2vw;
        text-align: left;
    }

    .hero_title {
        font-size: 1.5rem;
        margin-bottom: 2vw;
        line-height: 1.5;
    }

    .hero_lead {
        max-width: 100%;
        margin-bottom: 2.4vw;
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .hero_points {
        margin-bottom: 3.8vw;
        max-width: 100%;
    }

    .hero_points li {
        font-size: 0.84rem;
        margin-bottom: 1.7vw;
        line-height: 1.8;
    }

    .hero_actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 3vw;
    }


    /* 背景画像 */

    .gradation::before {
        background-image: none;
    }

    .triangles_mobile {
        position: relative;
        z-index: 0;
        width: 100%;
        min-height: 0;
        background: none;
    }
        

    /* concept */

    #concept .parallax_woman {
        background-image: none;
    }

    #concept .mobile_woman_image {
        margin: 0 auto;
        background:
            radial-gradient(circle at 38% 26%, rgba(255, 255, 255, 0.96) 0 18%, rgba(0, 168, 186, 0.16) 19% 42%, transparent 43%),
            radial-gradient(circle at 66% 74%, rgba(178, 139, 80, 0.18) 0 12%, transparent 13%),
            linear-gradient(160deg, rgba(244, 252, 253, 0.92) 0%, rgba(225, 244, 246, 0.88) 100%);
        background-position: center;
        background-size: cover;
        border-radius: 24px;
    }


    #concept .feature .text {
        width: 100%;
        margin: 0 auto;
    }

    #concept .feature .text span {
        font-size: 1rem;
    }

    #concept .feature ul.about_whitening {
        position: relative;
        padding-left: 6vw;
        padding-right: 6vw;
        margin: 0px auto 5vw;
    }

    #concept .feature .about_whitening li {
        position: relative;
        padding-left: 8vw;
        padding-right: 2vw;
        line-height: 1.8;
        margin-bottom: 4vw;
    }

    #concept .feature .about_whitening li::before {
        left: 0;
        width: 4vw;
        height: 4vw;
        top: 0.95em;
        transform: translateY(-50%);
        margin: 0;
    }

    #concept .point {
        margin: 11vw auto 5.9vw;
        padding:3vw;
    }

    #concept .point p {
        font-size: 1.5rem;
    }

    #concept .point p::after {
        width: 6vw;
        height: 6vw;
        margin-left: 1vw;
    }

    #concept .point li {
        margin-bottom: 0;
        line-height: 1.8;
    }

    #concept .photos {
        width: 100%;
        height: fit-content;
        margin: 0 auto 65px;
        display: inherit;
        justify-content: inherit;
    }
    
    #concept .photos > div {
        width: 92vw;
        margin: 0 auto 4vw;    }

    #concept .photos img {
        width: 100%;
        height: auto;
    }
    
    #concept .flow .icon_jewelry {
        width: clamp(84px, 24vw, 120px);
        aspect-ratio: 1 / 1;
        height: auto;
        padding-top: 0;
        margin: 0 auto 2.2vw !important;
        min-height: 0;
        background-position: center center;
    }    

    #concept .flow {
        position: static;
        margin-top: 4vw;
    }

    #concept .detail1 {
        position: static;
        width: 100%;
        height: fit-content;
        left: auto;
        top: auto;
        transform: none;
        background-size: 78vw;
        background-position: top;
        padding-top: 1vw;
    }

    #concept .detail1 h3 {
        margin: 0 auto 2vw;
    }

    #concept .detail1 dl {
        width: 76vw;
    }

    #concept .detail1 dt {
        margin-left: 5vw;
        margin-right: 4vw;
        font-size: 1.8rem;
        line-height: 2rem;
    }
    
    #concept .detail1 dd {
        margin-left: 13vw;
        margin-top: 1vw;
        line-height: 2rem;
        font-size: 0.9rem;
    }

    #concept .detail1 .arrow {
        width: 6vw;
        height: 6vw;
        margin: 0vw auto;
    }

    #concept .detail1 .arrow img {
        vertical-align: baseline;
    }

    #concept .detail2 {
        position: static;
        left: auto;
        top: auto;
        transform: none;
        width: 94%;
        margin: 2.6vw auto 5vw;
    }
    
    #concept .detail2 li {
        line-height: 1.8;
    }

    #concept hr {
        width: 90vw;
        margin: 2.8vw auto;
    }

    #concept .COVID-19 {
        width: 88vw;
        margin-top: 2vw;
        margin-left: 5vw;
        margin-bottom: 2vw;
    }

    #concept .COVID-19 h3 {
        margin-bottom: 3vw;
    }

    #concept .COVID-19 li {
        line-height: 2.1;
    }



    /* price */

#price .wrapper_outside {
    position: relative;
    display: block;
    width: 100%;
    margin-inline: auto;
    padding-inline: 2.5vw;
    box-sizing: border-box;
}

    #price .price_frame {
        display: none;
    }

    #price .wrapper_inside {
        padding-bottom: 0;
        width: 100%;
        padding-inline: 0;
    }

    #price .title {
        width: 97vw;
        height: auto;
        margin: 0 auto calc(6vw);
        padding-inline: calc(8px * var(--compact-ui-scale));
    }

    #contact .wrapper_outside {
        width: 97vw;
        padding-inline: calc(8px * var(--compact-ui-scale));
    }

#price .title h2 {
    margin-top: 0;
}

#access .access_content > h2,
#contact .wrapper_outside > h2 {
    margin-top: 0;
}

#price .menu {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-inline: 2.5vw;
}

    #price .price_table_block {
        margin-top: 7vw;
    }

    #price .price_table_block h3 {
        font-size: 1.2rem;
        margin-bottom: 2.8vw;
    }

    #price .price_table {
        border-radius: 10px;
        width: 100%;
    }

    #price .price_table thead th {
        padding: 2.8vw;
        font-size: 0.86rem;
        line-height: 1.5;
    }

    #price .price_table th,
    #price .price_table td {
        font-size: 0.85rem;
        padding: 2.5vw;
        line-height: 1.55;
    }

    #price .price3 {
        margin-top: 3vw;
    }

    #price .price3 p {
        line-height: 2.5;
        letter-spacing: 0.01em;
    }

    #price .price3 p {
        line-height: 2.5;
        letter-spacing: 0.01em;
    }

    #price .buttons {
        margin-top: 11vw;
        margin-bottom: 1vw;
    }

    .btn:before,
    .btn:after,
    .btn .moving_line:before,
    .btn .moving_line:after {
        display: none;
    }

    .btn:before {
        width: 0;
    }
    .btn:after {
        height: 0;
    }
    .btn .moving_line:before {
        width: 0;
    }
    .btn .moving_line:after {
        height: 0;
    }

    .btn:hover:before {
        width: 0;
        transition: none;
    }
    .btn:hover:after {
        height: 0;
        transition: none;
    }
    .btn:hover .moving_line:before {
        width: 0;
        transition: none;
    }
    .btn:hover .moving_line:after {
        height: 0;
        transition: none;
    }
        
    #price .parallax_image2 {
        position: static;
        width: 100%;
        margin: 0 auto 15vw;
    }
    
    #price .parallax_image2 {
        position: relative;
        width: 92vw;
        height: fit-content;
        margin: 0 auto;
    }

    #price .parallax_image2 .whitening_sample {
        position: static;
        width: 100%;
        margin-bottom: 13vw;
    }

    #price .parallax_image2 .salon4 {
        position: static;
        width: 100%;
    }

    #price .parallax_image2::before {
        width: clamp(94px, 20vw, 140px);
        right: calc(50% - 11vw);
        top: 4vw;
        opacity: 0.16;
    }
    

    /* Access */

    #access .wrapper_outside {
        margin-top: 4vw;
    }

    #access .access_content {
        margin: 0;
    }

    #access .access_grid {
        display: block;
    }

    #access .access_list {
        width: 100%;
        margin: 0 auto;
        padding: 5vw 4vw;
        font-size: 0.94rem;
        line-height: 1.6;
    }

    #access .access_list dl {
        grid-template-columns: 24vw minmax(0, 1fr);
        column-gap: 1.8vw;
        row-gap: 1.6vw;
    }

    #access .access_list dt,
    #access dt,
    #access .access_list .label {
        float: none;
        width: auto;
        margin: 0;
        clear: none;
    }

    #access .access_list .payment {
        margin-top: 4vw;
        padding-top: 2.6vw;
        border-top: 1px solid rgba(0, 168, 186, 0.2);
        grid-template-columns: 24vw minmax(0, 1fr);
        row-gap: 1.6vw;
    }

    #access .access_list p {
        margin: 3vw 0 0;
    }

    #access .access_map {
        margin-top: 4vw;
        width: 100%;
        gap: 3.2vw;
    }

    #access .access_map .btn_to_map {
        width: 100%;
        margin: 0;
        min-height: 46px;
        font-size: 0.95rem;
    }

    #access .map_frame {
        margin: 0;
    }

    #access .map_frame iframe {
        aspect-ratio: 16 / 9;
        min-height: 52vw;
    }

    #access {
        padding-bottom: 7vw;
    }

    /* Contact */

    #contact {
        clear: both;
        width: 100%;
        background: radial-gradient(circle at 50% 86%, rgba(178, 139, 80, 0.08) 0 20%, transparent 21%);
    }
    
    #contact .contact_text {
        margin: 2vw auto 3vw;
    }
    
    #contact p {
        text-align: center;
        line-height: 3.3rem;
    }
    
    #contact .buttons {
        width: min(100%, 640px);
        margin: 0 auto calc(24px * var(--compact-ui-scale));
        padding-left: 0;
    }
    
    #instagram {
        width: 100%;
        margin: 0 auto 8vw;
    }
    
    /*　お問い合わせフォーム・レスポンシブ用CSS　*/
    #formWrap {
        width:95%;
        margin:0 auto;
    }
    table.formTable th, table.formTable td {
        width:auto;
        display:block;
    }
    table.formTable th {
        margin-top:5px;
        border-bottom:0;
    }
    form input[type="text"], form textarea {
        width:80%;
        padding:5px;
        font-size:110%;
        display:block;
    }
    form input[type="submit"], form input[type="reset"], form input[type="button"] {
        display:block;
        width:100%;
        height:40px;
    }
    

    /* フッター */
    
    aside {
        position: static;
        right: auto;
        bottom: auto;
        font-size: 0.8rem;
        text-align: right;
        margin: 0 auto 4vw;
    }        

    aside a::before {
        width: min(18vw, 72px);
    }

    footer .copyright {
        margin: 0 auto;
        padding-top: 6vw;
    }
    
    footer .copyright .footer_note {
        margin-bottom: 2vw;
        font-size: .58rem;
        line-height: 1.7;
        max-width: 84vw;
    }
    
    footer hr {
        border: none;
        width: 60vw;
        margin: 0 auto;
        border-top: 1px solid #008f97;
    }    
    
    footer .footer_logo {
        width: 53vw;
        margin: 0 auto;
    }
    
    footer img {
        width: 100%;
    }
    
    footer .copyright p {
        margin: 2vw auto 0;
        text-align: center;
        color: #00a8ba;
        font-size: .72rem;
    }

    
    /* お問い合わせページ */

    .cross {
        top: 7vw;
        right: 10vw;
        width: 10vw;
    }

    #form .wrapper_inside {
        margin-top: 35vw;
    }


    #form .wrapper_form {
        width: 90vw;
        margin: 15vw auto 0;
        line-height: 3;
    }    

    #form .items dt {
        /* /左に寄せる/ */
        float: left ;
        /* /後続の左寄せを解除/ */
        clear: left ;
        margin-right: 0;
        width: 25vw;
    }

    #form .items dd {
        margin-left: 25vw;
        width: 55vw;
    }

    #form .radio {
        display: block;
    }

    #form .radio dt {
        width: 32vw;
        margin-right: 8vw;
        float: left;
    }

    #form .radio dd {
        width: 19vw;
        margin-right: 5vw;
        margin-bottom: 7vw;   float: left;
    }

    #form .inquiry {
        clear: both;
    }

    #form .comment {
        font-size: .75rem;
        line-height: 1.5;
        margin: 10vw auto;
        width: fit-content;
    }

    #form #btn_submit {
        display: block;
        width: 80vw;
        height: 20vw;
        padding: calc(3vw * var(--compact-ui-scale));
        margin: 0 auto calc(20vw * var(--compact-ui-scale));
    }

    #form #btn_submit::before {
        width: 6vw;
        height: 6vw;
        margin-right: 3vw;
    }


    /* プライバシーポリシー */

    #policy {
        padding-top: 0px;
        width: 100%;
    }

    #policy .wrapper_policy {
        width: 90vw;
        margin: 0 auto;
        line-height: 1.5;
    }

    #policy .policy_title {
        padding-top: 30vw;
        margin-bottom: 5vw;
    }

    #policy h1 {
        margin: 0 auto 10vw;
        padding-top: 0;
        font-size: 2rem;
        color: #00a8ba;
    }

    #policy h1 span {
        font-size: 1rem;
    }

    #policy li {
        font-weight: bold;
        margin: 6vw auto 1vw 0;
    }

    #policy .optout {
        line-height: 1.5;
        margin-top: 3vw;
    }

    #policy .hr_top {
        margin: 7vw auto 7vw;
        }

    #policy .hr_bottom {
        margin: 20vw auto 35vw;
    }

    #policy .comment {
        margin-top: 15vw;
    }

    #policy footer {
        position: relative;
    }

    #policy footer .footer_logo {
        padding-top: 15vw;
    }

    #policy footer .copyright {
        padding-top: 20vw;
    }

    #policy footer aside {
        right: -5vw;
    }

}

/* === Final professional polish for section layout / buttons / map / footer === */
#home .whole-frame_B {
    padding: 0;
}

.hero_actions .btn,
.hero_actions .line-official-btn,
#price .buttons .btn,
#price .buttons .line-official-btn,
#contact .buttons .btn,
#contact .buttons .line-official-btn,
#access .access_map .btn_to_map,
.sticky-cta-bar .btn {
    width: min(220px, 46vw);
    min-width: 185px;
}

.btn {
    margin: 0;
    height: var(--ui-btn-height);
}

.line-official-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    position: relative;
    overflow: visible;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.line-official-btn img {
    height: calc(36px * var(--compact-ui-scale));
    max-height: 36px;
    width: auto;
    display: block;
}

.btn,
.line-official-btn {
    transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}

.btn:hover,
.btn:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(0, 168, 186, 0.25);
    opacity: 0.95;
}

.line-official-btn:hover,
.line-official-btn:focus-visible {
    transform: none;
    box-shadow: none;
    opacity: 1;
    filter: none;
}

#price .buttons,
#access .access_map {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(12px, 1.6vw, 18px);
}

#contact .buttons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: clamp(12px, 1.6vw, 18px);
    width: 100%;
    max-width: none;
    margin: 0 auto calc(24px * var(--compact-ui-scale));
    padding-left: 0;
}

#contact .buttons .btn,
#contact .buttons .line-official-btn {
    width: 100%;
    min-width: 0;
}

#price .title,
#access .access_content > h2,
#contact .wrapper_outside > h2 {
    text-align: left;
}

#price .wrapper_outside,
#access .wrapper_outside,
#contact .wrapper_outside {
    margin-top: clamp(4px, 0.9vw, 10px);
}

#price .wrapper_inside,
#access .access_content,
#contact .wrapper_inside {
    margin-bottom: 0;
}

#price .price_table {
    table-layout: fixed;
}

#price .price_table thead th:nth-child(1),
#price .price_table tbody th:nth-child(1) {
    width: 22%;
}

#price .price_table thead th:nth-child(2),
#price .price_table tbody td:nth-child(2) {
    width: 23%;
}

#price .price_table thead th:nth-child(3),
#price .price_table tbody td:nth-child(3) {
    width: 14%;
}

#price .price_table thead th:nth-child(4),
#price .price_table tbody td:nth-child(4) {
    width: 41%;
}

#price .price_table_sub thead th:nth-child(1),
#price .price_table_sub tbody th:nth-child(1) {
    width: 29%;
}

#price .price_table_sub thead th:nth-child(2),
#price .price_table_sub tbody td:nth-child(2) {
    width: 28%;
}

#price .price_table_sub thead th:nth-child(3),
#price .price_table_sub tbody td:nth-child(3) {
    width: 43%;
}

#price .price_table th,
#price .price_table td {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.6;
}

#price .parallax_image2 {
    clear: both;
    position: relative;
    width: min(100%, 960px);
    margin: clamp(20px, 3vw, 38px) auto 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 22px);
    align-items: start;
}

#price .parallax_image2::before {
    content: "";
    position: absolute;
    width: clamp(130px, 18vw, 220px);
    aspect-ratio: 1 / 1;
    right: clamp(10px, 2vw, 26px);
    top: clamp(8px, 1.8vw, 18px);
    background: url(../images/icon_jewelry_LB.png) no-repeat center / contain;
    opacity: 0.18;
    pointer-events: none;
    z-index: 4;
    mix-blend-mode: multiply;
    transform: none;
}

#price .parallax_image2 .whitening_sample,
#price .parallax_image2 .salon4 {
    position: static !important;
    margin: 0 auto;
    width: 100%;
    z-index: 2;
    overflow: hidden;
}

#price .parallax_image2 .whitening_sample {
    margin-bottom: 0;
}

#price .parallax_image2 img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
}

#access .map_frame iframe {
    min-height: clamp(260px, 34vw, 360px);
    aspect-ratio: 16 / 9;
}

#access .access_content {
    gap: clamp(18px, 3vw, 28px);
}

#access .access_list {
    margin-bottom: 0;
}

footer {
    padding-bottom: clamp(6px, 1vw, 12px);
}

footer .copyright {
    padding-bottom: clamp(4px, 0.8vw, 8px);
}

.copyright p {
    margin-top: clamp(4px, 0.7vw, 8px);
}

@media screen and (min-width: 701px) and (max-width: 960px) {
    .btn {
        width: clamp(170px, 44vw, 210px);
    }

    .hero_actions .line-official-btn,
    #price .buttons .line-official-btn,
    #contact .buttons .line-official-btn {
        width: clamp(170px, 44vw, 210px);
        min-width: 0;
    }

    #contact .buttons {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    #contact .buttons .btn,
    #contact .buttons .line-official-btn {
        width: 100%;
    }

    .hero_actions {
        gap: 10px;
    }

    #concept .flow {
        position: static;
        min-height: auto;
        margin-top: 8vw;
        padding-top: 0;
        padding-bottom: 0;
    }

    #concept .flow .icon_jewelry {
        width: clamp(86px, 16vw, 128px);
        aspect-ratio: 1 / 1;
        margin: 0 auto 2vw;
        min-height: 0;
    }

    #concept .detail1,
    #concept .detail2 {
        position: static;
        width: 100%;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        height: auto;
        min-height: 0;
    }

    #concept .detail1 {
        background-size: 78vw;
        background-position: top center;
        padding-top: 1vw;
    }

    #concept .detail2 {
        margin-top: 5vw;
    }

    .hero_copy_block {
        width: min(640px, 76vw);
    }

}

@media screen and (max-width : 700px) {
    .hero_copy_block {
        width: min(100%, 100%);
        margin-top: clamp(-10px, -2.8vw, -4px);
    }

    #concept .flow {
        min-height: auto;
        padding-bottom: 0;
    }

    .hero_actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 3vw;
    }

    .btn {
        width: min(92vw, 320px);
        min-width: 0;
    }

    .hero_actions .line-official-btn,
    #price .buttons .line-official-btn,
    #contact .buttons .line-official-btn {
        width: min(92vw, 320px);
        min-width: 0;
    }

    .hero_actions .btn,
    .hero_actions .line-official-btn {
        width: 100%;
        min-width: 0;
    }

    #price .buttons {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 3vw;
    }

    #price .buttons .btn,
    #price .buttons .line-official-btn {
        width: 100%;
        min-width: 0;
    }

    #contact .buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #contact .buttons .btn,
    #contact .buttons .line-official-btn {
        width: 100%;
    }

    .line-official-btn img {
        max-height: 34px;
    }

    #price .parallax_image2 {
        width: 92vw;
        margin-top: 16px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3vw;
    }

    #price .parallax_image2::before {
        width: clamp(88px, 20vw, 138px);
        right: clamp(6px, 2vw, 12px);
        top: clamp(6px, 1.4vw, 10px);
        opacity: 0.16;
    }

}

@media screen and (min-width: 1101px) {
    #price .parallax_image2 {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 640px;
        gap: clamp(16px, 2vw, 28px);
    }

    #price .parallax_image2 .whitening_sample,
    #price .parallax_image2 .salon4 {
        width: 100%;
    }

    #price .parallax_image2::before {
        width: clamp(110px, 14vw, 180px);
        right: clamp(8px, 1.2vw, 16px);
        top: clamp(8px, 1.2vw, 14px);
        opacity: 0.14;
    }
}


@media screen and (min-width: 961px) {
    /* PC用レイアウトでは非表示とする */
    .mobile {
        display: none;
    }

    .header-quick-actions {
        display: flex;
    }
}

@media screen and (min-width: 701px) {
    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
        max-width: none;
        margin: 0;
        z-index: 900;
        background: rgba(245, 247, 248, 0.94);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    body#home {
        padding-top: clamp(68px, 7vw, 96px);
    }
}

@media screen and (max-width: 700px) {
    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        max-width: none;
        margin: 0;
        z-index: 900;
        background: rgba(245, 247, 248, 0.94);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    body#home {
        padding-top: 14vw;
        padding-bottom: calc(108px + env(safe-area-inset-bottom));
    }

    .main-nav {
        padding-left: clamp(100px, 40vw, 170px);
    }

    .header-home-logo {
        left: 4vw;
    }

    .header-home-logo img {
        width: clamp(92px, 34vw, 148px);
    }

    #concept .inner_box,
    #concept .btn,
    #concept .line-official-btn,
    #price .inner_box,
    #price .btn,
    #price .line-official-btn,
    #access .inner_box,
    #access .btn,
    #access .line-official-btn,
    #contact .btn:not(.btn_to_contact),
    #contact .line-official-btn,
    #contact .btn:not(.btn_to_contact) .inner_box {
        display: none !important;
    }
}

/* Contact us: single centered CTA across all breakpoints */
#contact .buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-template-columns: none;
    width: 100%;
    max-width: 100%;
    gap: 0;
}

#contact .buttons .btn_to_contact {
    width: min(var(--ui-btn-width), 100%);
    max-width: min(var(--ui-btn-width), 100%);
}

#contact .buttons .btn:not(.btn_to_contact),
#contact .buttons .line-official-btn {
    display: none !important;
}

/* Hero slider */
.hero_slider {
    position: relative;
    overflow: visible;
}

.hero_slider_viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.hero_slider_track {
    display: flex;
    width: 100%;
    transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

.hero_slide {
    flex: 0 0 100%;
}

.hero_slide[aria-hidden="true"] {
    pointer-events: none;
}

.hero_slide_placeholder {
    min-height: clamp(260px, 36vw, 360px);
}

.hero_slider_nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 1px solid rgba(0, 168, 186, 0.42);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.92);
    color: #008f97;
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
}

.hero_slider_prev {
    left: clamp(6px, 1.2vw, 14px);
}

.hero_slider_next {
    right: clamp(6px, 1.2vw, 14px);
}

.hero_slider_dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: clamp(8px, 1.2vw, 12px);
}

.hero_slider_dot {
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    border: 1px solid rgba(0, 168, 186, 0.75);
    background: rgba(255, 255, 255, 0.9);
    padding: 0;
    cursor: pointer;
}

.hero_slider_dot.is-active {
    background: #00a8ba;
}

@media screen and (max-width: 700px) {
    .hero_slider {
        padding-bottom: 42px;
    }

    .hero_slider_nav {
        top: auto;
        bottom: 10px;
        transform: none;
        width: 28px;
        height: 28px;
        font-size: 15px;
    }

    .hero_slider_prev {
        left: 10px;
    }

    .hero_slider_next {
        right: 10px;
    }

    .hero_slider_dots {
        margin-top: 4px;
    }
}

/* Live fixes: keep the desktop nav aligned to the page container and remove Lightning's outer button chrome. */
@media screen and (min-width: 701px) {
    body#home .site-header {
        left: 0;
        transform: none;
        width: 100%;
        max-width: none;
        padding-inline: clamp(12px, 1.5vw, 24px);
    }

    body#home .main-nav {
        padding-right: 0;
    }

    body#home .main-nav .PC {
        gap: clamp(14px, 1.2vw, 22px);
        flex-wrap: nowrap;
    }

    body#home .main-nav .PC li {
        margin-left: 0;
        flex: 0 0 auto;
    }
}

body#home .hero_actions .btn,
body#home #price .buttons .btn,
body#home #contact .buttons .btn,
body#home .sticky-cta-bar .btn {
    background: transparent;
    border: 0;
    box-shadow: none;
}

body#home .hero_actions .btn:hover,
body#home .hero_actions .btn:focus-visible,
body#home #price .buttons .btn:hover,
body#home #price .buttons .btn:focus-visible,
body#home #contact .buttons .btn:hover,
body#home #contact .buttons .btn:focus-visible,
body#home .sticky-cta-bar .btn:hover,
body#home .sticky-cta-bar .btn:focus-visible {
    box-shadow: none;
}

body#home .hero_actions .btn .inner_box,
body#home #price .buttons .btn .inner_box,
body#home #contact .buttons .btn .inner_box,
body#home .sticky-cta-bar .btn .inner_box {
    box-shadow: 0 10px 20px rgba(7, 41, 46, 0.11);
}

body#home .hero_actions .btn:hover .inner_box,
body#home .hero_actions .btn:focus-visible .inner_box,
body#home #price .buttons .btn:hover .inner_box,
body#home #price .buttons .btn:focus-visible .inner_box,
body#home #contact .buttons .btn:hover .inner_box,
body#home #contact .buttons .btn:focus-visible .inner_box,
body#home .sticky-cta-bar .btn:hover .inner_box,
body#home .sticky-cta-bar .btn:focus-visible .inner_box {
    box-shadow: 0 14px 26px rgba(7, 41, 46, 0.16);
}

body#home #price .price_frame {
    display: none;
}

body#home #price .title h2,
body#home #access .access_content > h2,
body#home #contact .wrapper_outside > h2 {
    border-top: 0 !important;
    border-bottom: 0 !important;
    padding-top: 0;
    padding-bottom: 0;
}

body#home .hero_title {
    border-top: 0 !important;
    border-bottom: 0 !important;
    background: transparent;
    padding: 0;
    margin: 0;
    box-shadow: none;
}

body#home #concept .detail1 {
    background: transparent;
}

body#home #contact {
    background: transparent;
}

body#home .ib_for_reserve::before,
body#home .ib_for_reserve::after {
    content: none !important;
    display: none !important;
}

body#home #concept .about_whitening {
    list-style: none;
    padding-left: 0;
}

body#home #concept .about_whitening li {
    position: relative;
    padding-left: 26px;
}

body#home #concept .about_whitening li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.95em;
    width: 9px;
    height: 9px;
    border: 0;
    border-radius: 999px;
    background: #c9a062;
    box-shadow: none;
    transform: translateY(-50%);
}

body#home #concept .about_whitening li::after {
    content: none;
}

body#home #concept .point > p {
    display: inline-block;
}

body#home #concept .point > p::before {
    content: none;
}

body#home #concept .point > p::after {
    content: none;
}

/* Contact Form 7 page */
#form .wrapper_inside {
    width: min(100%, 920px);
    margin-top: clamp(120px, 14vw, 170px);
    margin-bottom: clamp(80px, 10vw, 120px);
}

#form .contact_page_intro {
    width: min(100%, 760px);
    margin: 0 auto clamp(28px, 4vw, 42px);
    text-align: center;
}

#form .contact_kicker {
    margin: 0 0 10px;
    color: #b28b50;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-style: italic;
    letter-spacing: 0.12em;
}

#form .contact_page_title {
    margin: 0 0 clamp(14px, 2vw, 18px);
    color: #1f4b54;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

#form .contact_page_lead {
    max-width: 760px;
    font-size: clamp(0.98rem, 1.9vw, 1.12rem);
    line-height: 1.85;
    text-wrap: pretty;
}

#form .contact_page_lead,
#form .contact_page_subnote,
#form .contact_page_note {
    margin: 0 auto;
    max-width: 680px;
    color: rgba(31, 75, 84, 0.86);
    line-height: 1.9;
}

#form .contact_page_subnote {
    margin-top: 10px;
    font-size: 0.97rem;
    font-weight: 400;
}

#form .contact_page_note {
    margin-top: 10px;
    font-size: 0.97rem;
    line-height: 1.8;
}

#form .contact_page_note a {
    color: #008f97;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 143, 151, 0.35);
}

#form .wm-contact-extra-fields {
    margin-top: 24px;
    padding: 20px;
    border: 1px dashed rgba(0, 143, 151, 0.22);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
}

#form .wm-contact-required-note {
    margin: 0 0 12px;
    color: #bf6d6d;
    font-size: 0.95rem;
    font-weight: 700;
}

#form .wm-contact-field {
    margin: 0 0 14px;
}

#form .wm-contact-field label {
    color: #1f4b54;
}

#form .wm-contact-field .required {
    margin-left: 6px;
    color: #bf6d6d;
    font-size: 0.8rem;
    font-weight: 700;
}

#form .wm-contact-tel.wpcf7-form-control {
    margin-top: 8px;
}

#form .wm-checkbox-label {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    align-items: start;
    font-size: 0.92rem;
    line-height: 1.6;
}

#form .wm-checkbox-label input[type="checkbox"] {
    margin-top: 5px;
}

#form .wm-checkbox-label a {
    color: #008f97;
    text-decoration: underline;
}

#form .wrapper_form.contact_form_shell {
    width: min(100%, 820px);
    margin: 0 auto;
    padding: clamp(24px, 4vw, 40px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 252, 253, 0.96) 100%);
    border: 1px solid rgba(0, 168, 186, 0.18);
    border-radius: 32px;
    box-shadow: 0 24px 50px rgba(7, 41, 46, 0.10);
    line-height: 1.8;
}

#form .wpcf7 {
    width: 100%;
}

#form .wpcf7 form {
    display: grid;
    gap: 22px;
}

#form .wpcf7 p {
    margin: 0;
    line-height: 1.8;
}

#form .wpcf7 label {
    display: block;
    color: #1f4b54;
    font-family: 'Noto Serif JP', serif;
    font-size: 0.98rem;
    letter-spacing: 0.04em;
}

#form .wpcf7-form-control-wrap {
    display: block;
    margin-top: 10px;
}

#form .wpcf7 input[type="text"],
#form .wpcf7 input[type="email"],
#form .wpcf7 input[type="tel"],
#form .wpcf7 input[type="url"],
#form .wpcf7 input[type="number"],
#form .wpcf7 select,
#form .wpcf7 textarea {
    width: 100%;
    border: 1px solid rgba(0, 143, 151, 0.2);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    padding: 14px 16px;
    box-sizing: border-box;
    color: #1f4b54;
    line-height: 1.7;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

#form .wpcf7 textarea {
    min-height: 180px;
    resize: vertical;
}

#form .wpcf7 input[type="text"]:focus,
#form .wpcf7 input[type="email"]:focus,
#form .wpcf7 input[type="tel"]:focus,
#form .wpcf7 input[type="url"]:focus,
#form .wpcf7 input[type="number"]:focus,
#form .wpcf7 select:focus,
#form .wpcf7 textarea:focus {
    border-color: rgba(0, 143, 151, 0.55);
    box-shadow: 0 0 0 4px rgba(0, 143, 151, 0.10);
    background: #fff;
}

#form .wpcf7 input[type="checkbox"],
#form .wpcf7 input[type="radio"] {
    width: auto;
    margin-right: 8px;
}

#form .wpcf7-list-item {
    margin: 0 18px 0 0;
}

#form .wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: min(320px, 100%);
    min-height: 58px;
    padding: 16px 28px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(120deg, #d5ab70 0%, #b28b50 100%);
    color: #fff;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.14em;
    box-shadow: 0 12px 24px rgba(178, 139, 80, 0.24);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

#form .wpcf7-submit:hover,
#form .wpcf7-submit:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(178, 139, 80, 0.30);
    opacity: 0.98;
}

#form .wpcf7-spinner {
    margin: 14px 0 0;
}

#form .wpcf7-not-valid-tip {
    margin-top: 8px;
    color: #c15252;
    font-size: 0.88rem;
    line-height: 1.6;
}

#form .wpcf7-response-output {
    margin: 0 !important;
    padding: 14px 18px !important;
    border-radius: 18px;
    line-height: 1.7;
}

#form .wpcf7 form.sent .wpcf7-response-output {
    border: 1px solid rgba(0, 143, 151, 0.32);
    background: rgba(0, 168, 186, 0.08);
    color: #1f4b54;
}

#form .wpcf7 form.invalid .wpcf7-response-output,
#form .wpcf7 form.failed .wpcf7-response-output,
#form .wpcf7 form.aborted .wpcf7-response-output,
#form .wpcf7 form.spam .wpcf7-response-output {
    border: 1px solid rgba(193, 82, 82, 0.28);
    background: rgba(193, 82, 82, 0.08);
    color: #7b3d3d;
}

#form .comment {
    margin: 22px auto 0;
    font-size: 0.92rem;
    line-height: 1.8;
    text-align: center;
}

#form .comment a {
    color: #008f97;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 143, 151, 0.35);
}

@media screen and (max-width: 700px) {
    #form .wrapper_inside {
        width: 92vw;
        margin-top: calc(110px + env(safe-area-inset-top));
        margin-bottom: calc(110px + env(safe-area-inset-bottom));
    }

    #form .wrapper_form.contact_form_shell {
        padding: 22px 18px;
        border-radius: 26px;
    }

    #form .contact_page_title {
        font-size: clamp(1.7rem, 8vw, 2.3rem);
    }

    #form .wpcf7-submit {
        width: 100%;
        min-width: 0;
    }
}

@media screen and (max-width: 700px) {
    body#home #concept .feature {
        background: transparent !important;
        box-shadow: none;
    }

    body#home #concept .mobile_woman_image {
        background: transparent !important;
    }

    body#home .photos_carousel {
        position: relative;
    }

    body#home .photos {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        overflow-y: hidden;
        position: relative;
        padding-inline: 4vw;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 4vw;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    body#home .photos > div {
        flex: 0 0 82vw;
        max-width: 82vw;
        scroll-snap-align: start;
    }

    body#home .photos img {
        display: block;
        width: 100%;
        height: auto;
    }

    body#home .photos::-webkit-scrollbar {
        display: none;
    }

    body#home .photos_nav {
        position: absolute;
        top: 50%;
        z-index: 2;
        width: 34px;
        height: 34px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.88);
        color: #b28b50;
        font-family: "Times New Roman", serif;
        font-size: 22px;
        line-height: 34px;
        text-align: center;
        box-shadow: 0 8px 20px rgba(18, 52, 58, 0.12);
        transform: translateY(-50%);
        cursor: pointer;
    }

    body#home .photos_nav_prev {
        left: 10px;
    }

    body#home .photos_nav_next {
        right: 10px;
    }

    body#home .photos_nav[disabled] {
        opacity: 0.35;
    }
}