@charset "utf-8";
:root {
    --font-serif: "Zen Old Mincho", serif;
    --zIndexMenu: 100;
    --letterSpacing: 0.05em;
    --color-gray-main: #463b3b;
    --color-gray: #cbcbcb;
    --color-white:#fff;
    --commonHeaderHeight: 19px;
}
.ls0 {
    --letterSpacing:0;
}
@media (min-width: 769px) {
    :root {
        --menuBtnWidth: 140px;
        --menuBtnHeight: 100px;
    }
}
@media (max-width: 768px) {
    :root {
        --menuBtnWidth: 70rem;
        --menuBtnHeight: 70rem;
    }
}
@font-face {
    font-family: "Zen Old Mincho";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/Zen_Old_Mincho/ZenOldMincho-Regular.ttf) format("TrueType")
}
@font-face {
    font-family: "Zen Old Mincho";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(../fonts/Zen_Old_Mincho/ZenOldMincho-Medium.ttf) format("TrueType")
}

body {
    font-size: 10rem;
}
.wrapper {
    font-family: var(--font-serif);
    font-weight: 500;
    color: var(--color-gray-main);
    position: relative;
    overflow: clip;
    background-color: var(--color-white);
}
a {
    color: var(--color-gray-main);
    text-decoration: none;
}
@media (min-width: 769px) {
    html {
        font-size: 1px;
    }
    [disp-only]:not([disp-only~="pc"]) {
        display: none!important;
    }
    @media(hover:hover) {
        .hover_opacity {
            transition: opacity .4s;
            opacity: 1;
        }
        .hover_opacity:hover {
            opacity: 0.5;
        }
    }
}
@media (max-width: 768px) {
	html {
        font-size: calc(100 / 390 * 1vw);
	}
    [disp-only]:not([disp-only~="sp"]) {
        display: none!important;
    }
}
* {
    letter-spacing: var(--letterSpacing);
}
button {
    color: var(--color-gray-main);
    border: none;
    cursor: pointer;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* ----------
   sitecommon
----------*/
#sitecommon {
    width: 100%;
    height: 19px;
    background: url(../img/sitecommon/sc_bg02_silver.jpg) left top repeat-x;
    text-align: center;
    position: relative;
    z-index: calc(var(--zIndexMenu) + 1);
}
#sitecommon_inner {
    min-width: auto;
    width: 100%;
    height: 19px;
    margin: 0px 0px 0px 0px;
    padding-left: 20px;
    padding-right: 20px;
    background: url(../img/sitecommon/sc_bg01_silver.jpg) center top repeat-x;
}
#sitecommon_inner02 {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 19px;
    margin: 0px auto 0px auto;
    padding: 0px 0px 0px 0px;
    text-align: left;
}
#sitecommon_inner #sitecommon_text {
    position: absolute;
    width: 109px;
    height: 9px;
    top: 3px;
    right: 151px;
    margin: 0px 0px 0px 0px;
    background: url(../img/sitecommon/sc_text_silver.gif) left top no-repeat;
    text-indent: -9999px;
}
#sitecommon_inner #sitecommon_text.sitecommon_text_02 {
    right: 160px
}
#sitecommon_inner #sitecommon_menard {
    position: absolute;
    width: 149px;
    height: 9px;
    top: 3px;
    right: 0px;
    margin: 0px 0px 0px 0px;
}
#sitecommon_inner #sitecommon_menard span {
    display: block;
    position: relative;
    width: 149px;
    height: 9px;
    margin: 0px 0px 0px 0px;
    background: url(../img/sitecommon/sc_menard_silver.jpg) right top no-repeat;/*ない*/
    text-indent: -9999px;
}
#sitecommon_inner #sitecommon_menard a {
    display: block;
    position: relative;
    width: 149px;
    height: 9px;
    margin: 0px 0px 0px 0px;
    background: url(../img/sitecommon/sc_menard_link_silver.gif) right top no-repeat;
    text-indent: -9999px;
    color: var(--color-white);
    cursor: pointer;
    overflow: hidden;
}
#sitecommon_inner #sitecommon_menard a:hover {
    background: url(../img/sitecommon/sc_menard_link_silver.gif) right -9px no-repeat;
}
#sitecommon_inner #sitecommon_menard a span {
    background: none;
}
@media screen and (max-width: 767.9px) {
    #sitecommon {
        display:none;
    }
}

/* ----------
   header
----------*/
.header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: calc(var(--zIndexMenu) + 901);
}
.btn_menu {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: var(--menuBtnWidth);
    height: var(--menuBtnHeight);
    cursor: pointer;
    mix-blend-mode: difference;
    z-index: calc(var(--zIndexMenu) + 901);
}
.btn_menu_line {
    display: block;
    background-color: var(--color-white);
    margin: auto;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
}

@keyframes menu_btn_01_pc {
    0%   {rotate: -15deg;translate: 0 8px;}
    50%  {rotate:   0deg;translate: 0 8px;}
    100% {rotate:   0deg;translate: 0 0;}
}
@keyframes menu_btn_01_pc_active {
    0%   {rotate:   0deg;translate: 0 0;}
    50%  {rotate:   0deg;translate: 0 8px;}
    100% {rotate: -15deg;translate: 0 8px;}
}
@keyframes menu_btn_02_pc {
    0%   {rotate:  15deg;translate: 0 -8px;}
    50%  {rotate:   0deg;translate: 0 -8px;}
    100% {rotate:   0deg;translate: 0 0;}
}
@keyframes menu_btn_02_pc_active {
    0%   {rotate:   0deg;translate: 0 0;}
    50%  {rotate:   0deg;translate: 0 -8px;}
    100% {rotate:  15deg;translate: 0 -8px;}
}
@keyframes menu_btn_01_sp {
    0%   {rotate: -15deg;translate: 0 4rem;}
    50%  {rotate:   0deg;translate: 0 4rem;}
    100% {rotate:   0deg;translate: 0 0;}
}
@keyframes menu_btn_01_sp_active {
    0%   {rotate:   0deg;translate: 0 0;}
    50%  {rotate:   0deg;translate: 0 4rem;}
    100% {rotate: -15deg;translate: 0 4rem;}
}
@keyframes menu_btn_02_sp {
    0%   {rotate:  15deg;translate: 0 -4rem;}
    50%  {rotate:   0deg;translate: 0 -4rem;}
    100% {rotate:   0deg;translate: 0 0;}
}
@keyframes menu_btn_02_sp_active {
    0%   {rotate:   0deg;translate: 0 0;}
    50%  {rotate:   0deg;translate: 0 -4rem;}
    100% {rotate:  15deg;translate: 0 -4rem;}
}
@media (min-width: 769px) {
    .btn_menu {
        margin-top: var(--commonHeaderHeight);
    }
}
/*スクロールバーのガタツキをなくすため*/
html {
  scrollbar-gutter: stable;
  min-height: 100svh;
}
.hd_logo {
    display: block;
    z-index: calc(var(--zIndexMenu) + 901);
    background:url(../img/common/hd_logo_gold.svg) no-repeat center center / contain;
}
.menu {
    position: fixed;
    right: 0;
    top: 0;
    translate: 100% 0;
    background-color: var(--color-white);
    z-index: calc(var(--zIndexMenu) + 900);
    height: 100%;
    min-height: 100svh;
    transition: translate .6s, visibility .6s;
    visibility: hidden;
    display: flex;
    align-items: center;
}
.is_menu_open .menu {
    translate: 0% 0;
    visibility: visible;
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
}
.menu_inner {
    width: 100%;
    overflow: auto;
}
.menu_list {
    display: flex;
    flex-direction: column;
}
.menu_list .is_active {
    color: var(--color-gray);
}
.overlay {
    visibility: hidden;
    transition: visibility .6s, background .6s;
    background: rgba(255, 255, 255, 0);
    will-change: backdrop-filter;
}
.is_menu_open .overlay {
    visibility: visible;
    background: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    z-index: calc(var(--zIndexMenu) - 1);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.menu_list > li {
    opacity: 0;
    translate: 40rem 0;
}
.menu_list > li > a {
    position: relative;
    z-index: 1;
}
.is_menu_open .menu_list > li {
    opacity: 1;
    translate: 0rem 0;
    transition: opacity .6s, translate .6s;
    position: relative;
}
.is_menu_open .menu_list > li:nth-child(1) {
    transition-delay: .15s;
}
.is_menu_open .menu_list > li:nth-child(2) {
    transition-delay: .3s;
}
.is_menu_open .menu_list > li:nth-child(3) {
    transition-delay: .45s;
}
.is_menu_open .menu_list > li:nth-child(4) {
    transition-delay: .6s;
}
.menu_list > li:nth-child(2)::before,
.menu_list > li:nth-child(3)::before,
.menu_list > li:nth-child(4)::before {
    content: '';
    display: block;
    position: absolute;
    opacity: 0;
    translate: 0% 60%;
}
.is_menu_open .menu_list > li::before {
    opacity: .5;
    translate: 0% 0%;
}
.menu_list > li:nth-child(2)::before {
    right: 87%;
    top: -90%;
    background: url(../img/common/gra_blue.svg) no-repeat center center / contain;
}
.menu_list > li:nth-child(3)::before {
    top: -100%;
    left: 14%;
    background: url(../img/common/gra_gold.svg) no-repeat center center / contain;
}
.menu_list > li:nth-child(4)::before {
    top: -46%;
    left: -16%;
    background: url(../img/common/gra_pink.svg) no-repeat center center / contain;
}
.is_menu_open .menu_list > li:nth-child(2):before {
    transition: opacity 1s .3s, translate 1s .3s;
}
.is_menu_open .menu_list > li:nth-child(3):before {
    transition: opacity 1s .5s, translate 1s .5s;
}
.is_menu_open .menu_list > li:nth-child(4):before {
    transition: opacity 1s .7s, translate 1s .7s;
}
@media (min-width: 769px) {
    .header {
        padding-top: 32px;
        padding-left: 31px;
    }
    .hd_logo {
        width: 470px;
        height: 46px;
    }
    .menu {
        width: 425px;
    }
    .menu_inner {
        padding: 160px 80px;
    }
    .menu_list {
        row-gap: 64px;
        font-size: 20px;
    }
    .btn_menu_line {
        width: 80px;
    }
    .btn_menu_line:nth-child(1) {
        margin-top: -8px;
    }
    .btn_menu_line:nth-child(2) {
        margin-top: 8px;
    }
    .is_menu_close .btn_menu_line:nth-child(1) {
        animation: menu_btn_01_pc .8s forwards;
    }
    .is_menu_open .btn_menu_line:nth-child(1) {
        animation: menu_btn_01_pc_active .8s forwards;
    }
    .is_menu_close .btn_menu_line:nth-child(2) {
        animation: menu_btn_02_pc .8s forwards;
    }
    .is_menu_open .btn_menu_line:nth-child(2) {
        animation: menu_btn_02_pc_active .8s forwards;
    }
    .menu_list > li:nth-child(2)::before,
    .menu_list > li:nth-child(3)::before,
    .menu_list > li:nth-child(4)::before {
        width: 100px;
        height: 100px;
    }
}
@media (max-width: 768px) {
    .header {
        border-top: 4rem solid #ccc;
        width: 100%;
        padding-top: 20rem;
        padding-left: 16rem;
    }
    .hd_logo {
        width: 270rem;
        height: 26rem;
    }
    .menu {
        width: 292rem;
    }
    .menu_inner {
        padding: 80rem 40rem;
    }
    .menu_list {
        row-gap: 48rem;
        font-size: 16rem;
    }
    .btn_menu_line {
        width: 40rem;
        height: 1px;
    }
    .btn_menu_line:nth-child(1) {
        margin-top: -4rem;
    }
    .btn_menu_line:nth-child(2) {
        margin-top: 4rem;
    }
    .is_menu_close .btn_menu_line:nth-child(1) {
        animation: menu_btn_01_sp .8s forwards;
    }
    .is_menu_open .btn_menu_line:nth-child(1) {
        animation: menu_btn_01_sp_active .8s forwards;
    }
    .is_menu_close .btn_menu_line:nth-child(2) {
        animation: menu_btn_02_sp .8s forwards;
    }
    .is_menu_open .btn_menu_line:nth-child(2) {
        animation: menu_btn_02_sp_active .8s forwards;
    }
    .menu_list > li:nth-child(2)::before,
    .menu_list > li:nth-child(3)::before,
    .menu_list > li:nth-child(4)::before {
        width: 60rem;
        height: 60rem;
    }
}


/* ----------
   salon
----------*/
.btn {
    border: 1px solid var(--color-gray-main);
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
}
.salon_ttl {
    text-align: center;
}
.salon_list {
    display: flex;
    flex-direction: column;
    max-width: 734px;
    margin-inline: auto;
}
.salon_list > li {
    display: flex;
    position: relative;
}
.salon_list> li::before {
    content: '';
    display: block;
    position: absolute;
    pointer-events: none;
}
.salon_list> li:nth-child(1):before {
    background: url(../img/common/gra_blue.svg) no-repeat center center / contain;
}
.salon_list> li:nth-child(2):before {
    background: url(../img/common/gra_pink.svg) no-repeat center center / contain;
}
.salon_list_img_wrap {
    overflow: hidden;
}
.salon_subttl {
    display: flex;
    flex-direction: column;
}
.salon_subttl_en {
    color: var(--color-gray);
    font-weight: 400;
}
.salon_txt {
    word-break: keep-all;
}
.salon_link .btn {
    margin-left: auto;
    line-height: 1;
}
.salon_search_link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    margin-inline: auto;
    border-top: 1px solid var(--color-gray-main);
    border-bottom: 1px solid var(--color-gray-main);
}
.salon_search_link .btn {
    position: relative;
    line-height: 1;
    z-index: 1;
}
@media (min-width: 769px) {
    .salon {
        margin-top: 160px;
        overflow: hidden;
    }
    .salon_inner {
        position: relative;
        margin:auto;
        display: flex;
        justify-content: center;
    }
    .salon_img_pc {
        position: relative;
        width: calc(100% - 974px);
        max-width: 466px;
        min-width: 217px;
    }
    .salon_img_pc::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 50vw;
        height: 100%;
        background: url(../img/common/salon_img.webp) no-repeat right center / cover;
    }
    .salon_cont_wrap {
        width: 100%;
        padding: 80px 24px;
        max-width: 974px;
    }
    .salon_ttl {
        font-size: 24px;
    }
    .salon_list {
        row-gap: 64px;
        margin-top: 80px;
    }
    .salon_list > li {
        column-gap: 12px;
        align-items: center;
        justify-content: space-between;
    }
    .salon_list > li::before {
        top: -25%;
        left: 32%;
        width: 200px;
        height: 200px;
    }
    .salon_subttl {
        row-gap: 24px;
    }
    .salon_subttl_en {
        font-size: 14px;
    }
    .salon_subttl_ja {
        font-size: 20px;
    }
    .salon_txt {
        font-size: 16px;
        line-height: 2.5;
        margin-top: 24px;
    }
    .salon_link {
        width: 354px;
        padding-top: 24px;
    }
    .salon_link .btn {
        padding: 5px 24px;
        border-radius: 24px;
        font-size: 12px;
        margin-top: 24px;
    }
    .salon_img_sp {
        display: none;
    }
    .salon_search_link {
        margin-top: 80px;
        padding: 24px 32px;
        column-gap: 40px;
    }
    .salon_search_link_txt {
        font-size: 16px;
        position: relative;
        z-index: 1;
    }
    .salon_search_link .btn {
        padding: 5px 24px;
        border-radius: 24px;
        font-size: 12px;
        background-color: var(--color-white);
    }
    @media (hover:hover) {
        .salon_link:hover .btn {
            transition: color .3s, background .3s;
        }
        .salon_link:hover .btn {
            background: var(--color-gray-main);
            color: var(--color-white);
        }
        .salon_search_link {
            position: relative;
        }
        .salon_search_link::before {
            content: '';
            display: block;
            width: 0%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            transition: width .3s;
            background-color: var(--color-gray-main);
        }
        .salon_search_link:hover::before{
            width: 100%;
        }
        .salon_search_link_txt {
            transition: color .3s;
        }
        .salon_search_link:hover .salon_search_link_txt {
            color: var(--color-white);
        }
    }
}
@media (max-width: 768px) {
    .salon {
        margin-top: 120rem;
    }
    .salon_img_pc {
        display: none;
    }
    .salon_cont_inner {
        padding-inline: 24rem;
    }
    .salon_ttl {
        font-size: 18rem;
        line-height: 2;
    }
    .salon_list {
        row-gap: 64rem;
        margin-top: 40rem;
    }
    .salon_list > li {
        row-gap: 40rem;
        flex-direction: column;
    }
    .salon_list> li::before {
        top: 22%;
        left: -30%;
        width: 200rem;
        height: 200rem;
    }
    .salon_list_img_wrap {
        height: 200rem;
    }
    .salon_list_img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }
    .salon_subttl {
        row-gap: 10rem;
    }
    .salon_subttl_en {
        font-size: 11rem;
    }
    .salon_subttl_ja {
        font-size: 16rem;
    }
    .salon_txt {
        font-size: 13rem;
        line-height: 2.5;
        margin-top: 13rem;
    }
    .salon_link {
        padding-inline: 16rem;
    }
    .salon_link .btn {
        padding: 14rem 40rem;
        border-radius: 40rem;
        font-size: 10rem;
        margin-top: 24rem;
        margin-inline: auto;
    }
    .salon_img_sp {
        height: 256rem;
        margin-inline: -24rem;
        margin-top: 64rem;
        background: url(../img/common/salon_img_sp.webp) no-repeat right center / cover;
    }
    .salon_search_link {
        width: 100%;
        margin-top: 64rem;
        padding-block: 24rem;
        justify-content: space-between;
        padding-inline: 16rem;
    }
    .salon_search_link_txt {
        font-size: 13rem;
    }
    .salon_search_link .btn {
        font-size: 10rem;
        padding: 14rem 0;
        border-radius: 40rem;
        min-width: 130rem;
    }

}
.animation_ready .salon_list_img {
    scale: 1.1;
}
.animation_ready.animation_loaded .is_animated .salon_list_img {
    scale: 1;
    transition: scale .8s;
}

/* ----------
   footer
----------*/
.footer {
    position: relative;
}
.footer::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #C2EEEE 0%, #E9E1C5 50%, #FAD9D8 100%);
}
.footer_inner {
    display: flex;
    flex-direction: column;
    margin-inline: auto;
}
.footer_top {
    display: flex;
}
.footer_nav_list {
    display: flex;
}
@media (min-width: 769px) {
    .footer {
        padding: 104px 112px 80px;
        margin-top: 160px;
    }
    .footer_inner {
        row-gap: 120px;
    }
    .footer_top {
        column-gap: 48px;
        align-items: flex-start;
    }
    .footer_logo {
        flex-shrink: 0;
    }
    .footer_nav_list {
        font-size: 16px;
        line-height: 2.4;
        flex-wrap: wrap;
        overflow: hidden;
        gap: 16px 42px;
        margin-left: -25px;
    }
    .footer_nav_list > li {
        margin-left: -1px;
        padding-left: 42px;
        position: relative;
    }
    .footer_nav_list > li::before {
        content: '';
        display: block;
        width: 1px;
        height: 14px;
        background-color: var(--color-gray-main);
        position: absolute;
        top: 0;
        left: -1px;
        bottom: 0;
        margin: auto;
    }
    .footer_bottom {
        align-self: end;
    }
    .footer_copy {
        font-size: 10px;
    }
}
@media (max-width: 768px) {
    .footer {
        padding: 80rem 0;
        margin-top: 120rem;
    }
    .footer_inner {
        align-items: center;
        row-gap: 40rem;
    }
    .footer_top,
    .footer_nav_list {
        flex-direction: column;
    }
    .footer_top {
        row-gap: 40rem;
    }
    .footer_logo {
        width: 237rem;
        text-align: center;
    }
    .footer_logo img {
        width: 100%;
    }
    .footer_nav_list {
        align-items: center;
        font-size: 13rem;
    }
    .footer_nav_list a {
        padding: 10rem;
        display: block;
    }
    .footer_copy {
        font-size: 9rem;
    }
}

.animation_ready .anim_fadein_up {
    opacity: 0;
    transform: translateY(40rem);
    transition: opacity .1s, transform .1s;
}
.animation_loaded .is_animated.anim_fadein_up,
.animation_loaded .is_animated .anim_fadein_up {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .8s, transform .8s;
}
.animation_loaded .salon_link .salon_subttl {
    transition-delay: .3s;
}
.animation_loaded .salon_link .salon_txt {
    transition-delay: .5s;
}
.animation_loaded .salon_link .salon_btn_wrap {
    transition-delay: .7s;
}