:root {
--color-salon-red: #9D174D;
--color-salon-black: #333;
--color-salon-pink: #D198C2;
--font-mincho: "Zen Old Mincho", serif;
--px-10: calc(10px * .65);
--px-13: calc(13px * .65);
--px-15: calc(15px * .65);
--px-20: calc(20px * .65);
--px-24: calc(24px * .65);
--px-25: calc(25px * .65);
--px-28: calc(28px * .65);
--px-30: calc(30px * .65);
--px-32: calc(32px * .65);
--px-35: calc(35px * .65);
--px-40: calc(40px * .65);
--px-45: calc(45px * .65);
--px-48: calc(48px * .65);
--px-50: calc(50px * .65);
--px-55: calc(55px * .65);
--px-60: calc(60px * .65);
--px-65: calc(65px * .65);
--px-70: calc(70px * .65);
--px-75: calc(75px * .65);
--px-80: calc(80px * .65);
--px-85: calc(85px * .65);
--px-90: calc(90px * .65);
--px-95: calc(95px * .65);
--px-100: calc(100px * .65);
--px-110: calc(110px * .65);
--px-120: calc(120px * .65);
--px-120: calc(120px * .65);
--px-130: calc(130px * .65);
--px-132: calc(132px * .65);
--px-135: calc(135px * .65);
--px-140: calc(140px * .65);
--px-150: calc(150px * .65);
--px-160: calc(160px * .65);
--px-180: calc(180px * .65);
--px-200: calc(200px * .65);
}
@media (min-width: 960px) {
:root {
--px-13: 13px;
--px-10: 10px;
--px-15: 15px;
--px-20: 20px;
--px-24: 24px;
--px-25: 25px;
--px-28: 28px;
--px-30: 30px;
--px-32: 32px;
--px-35: 35px;
--px-40: 40px;
--px-45: 45px;
--px-48: 48px;
--px-50: 50px;
--px-55: 55px;
--px-60: 60px;
--px-65: 65px;
--px-70: 70px;
--px-75: 75px;
--px-80: 80px;
--px-85: 85px;
--px-90: 90px;
--px-95: 95px;
--px-100: 100px;
--px-110: 110px;
--px-120: 120px;
--px-130: 130px;
--px-132: 132px;
--px-135: 135px;
--px-140: 140px;
--px-150: 150px;
--px-160: 160px;
--px-180: 180px;
--px-200: 200px;
}
}
._d-none {
display: none !important;
}
._d-block {
display: block !important;
}
._dh-none {
display: none !important;
}
._dh-block {
display: block !important;
}
@media (min-width: 461px) {
._d-ssm-none {
display: none !important;
}
._d-ssm-block {
display: block !important;
}
}
@media (min-width: 561px) {
._d-sm-none {
display: none !important;
}
._d-sm-block {
display: block !important;
}
}
@media (min-width: 768px) and (min-height: 768px){
._dh-md-none{
display: none !important;
}
._dh-md-block{
display: block !important;
}
}
@media (min-width: 768px) {
._d-md-none {
display: none !important;
}
._d-md-block {
display: block !important;
}
}
@media (min-width: 961px) {
._d-lg-none {
display: none !important;
}
._d-lg-block {
display: block !important;
}
}
@media (min-width: 1001px) {
._d-llg-none {
display: none !important;
}
._d-llg-block {
display: block !important;
}
}
@media (min-width: 1201px) {
._d-xl-none {
display: none !important;
}
._d-xl-block {
display: block !important;
}
}
@media (min-width: 1501px) {
._d-xxl-none {
display: none !important;
}
._d-xxl-block {
display: block !important;
}
} main.salon{
background: url(//kanon.rest/wp-content/themes/kanon/assets/img/salon/bg.jpg) no-repeat center / cover;
} .brand>a>h1.-salon{
color: var(--color-salon-red);
}
.header>nav>.nav.-salon>a{
color: var(--color-salon-black);
}
.nav_li.-typeA.-salon::after{
color: var(--color-salon-pink);
}
.header_tel.-salon>p{
color: var(--color-salon-red);
font-weight: 600;
}
.header_tel.-salon>p>a{
color: var(--color-salon-red);
}
.tel_icon.-salon::before{
content: url(//kanon.rest/wp-content/themes/kanon/assets/img/salon/tel-icon.svg);
}
.header_contact.-salon>a{
background: var(--color-salon-red);
}
@media (hover : hover) { 
.header_contact.-salon>a:hover{
opacity: 0.65;
background: var(--color-salon-red);
}
.header>nav>.nav.-salon>a:hover{
color: var(--color-salon-red);
}
.nav_li.-typeA.-salon:hover:after{
color: var(--color-salon-pink);
}
}
@media (max-width:560px) {
.brand>a>h1.-salon{
font-size: 20px;
}
.header_logo > .brand >a>img{
width: 50px;
}
.g_nav--container{
margin: 0 auto 4em !important;
}
} .top_tlt.-salon{
margin-bottom: var(--px-40);
}
.top_tlt.-salon>h2{
color: var(--color-salon-red);
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.top_tlt.-salon>h2::after{
border-bottom: none;
content: "";
position: absolute;
top: .4em;
left: 50%;
transform: translateX(-50%);
bottom: unset;
background: url(//kanon.rest/wp-content/themes/kanon/assets/img/salon/ttl-deco.svg) no-repeat center / contain;
width: min(360px, 90vw);
height: auto;
aspect-ratio: 360 / 55;
}
.top_tlt.-salon>p::after{
color: var(--color-salon-pink);
} .home_intro.-salon-hero{
margin-top: 0;
background: var(--color-white);
}
.home_intro.-salon-hero>.kv_slider img{
border-radius: 15px;
height: 100%;
}
@media (max-width: 767px) {
.home_intro.-salon-hero {
height: 100%;
max-height: 100%;
}
.home_intro.-salon-hero img{
height: 85svh;
width: 100%;
object-fit: cover;
object-position: top;
}
}
@media (max-width:560px) {
.home_intro.-salon-hero img{
height: auto;
}
} .salon-time>.inner{
width: min(700px,90vw);
margin-inline: auto;
padding-block: var(--px-100);
}
@media (max-width:767px) {
.salon-time>.inner img{
margin-inline: auto;
}
} .home_news.-salon{
background-color: var(--color-white);
margin-block: 0 !important;
padding-block: clamp(50px, 6.976744186vw, 120px);
}
.c_archiveList.-salon >li{
border-bottom: 1px solid var(--color-salon-pink);
}
.action.-salon>a{
border: 1px solid var(--color-salon-pink);
color: var(--color-salon-black);
} .home_about.-salon{
margin: 0;
padding: 0;
margin-block: 0 !important;
padding-block: clamp(50px, 6.976744186vw, 120px);
}
.home_about.-salon>.inner{
width: min(1000px,90vw);
margin-inline: auto;
}
.home_about.-salon>.inner>.flx{
display: flex;
justify-content: center;
gap: clamp(15px, 4.4444444444vw, 80px);
}
.home_about.-salon>.inner>.flx>.list{
margin: 0;
padding: 0;
display: block;
}
.home_about.-salon>.inner>.flx>.list.-media{
flex-basis: 40%;
max-width: 40%;
}
.home_about.-salon>.inner>.flx>.list.-content{
flex-basis: 60%;
max-width: 60%;
}
.home_about.-salon>.inner>.flx>.list.-media>.media{
position: relative;
height: fit-content;
}
.home_about.-salon>.inner>.flx>.list.-media>.media>img{
border-radius: 10px;
}
.home_about.-salon>.inner>.flx>.list.-media>.media>.caption{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: var(--color-white);
color: var(--color-salon-red);
font-size: 14px;
font-weight: 500;
line-height: 1.7;
text-align: center;
padding: 1em .5em;
border-radius: 0 0 10px 10px;
}
.home_about.-salon>.inner>.flx>.list.-content{
display: block;
}
.home_about.-salon>.inner>.flx>.list.-content>.ttl{
color: var(--color-salon-black);
font-size: var(--font-36);
font-weight: 400;
line-height: 1.7;
font-family: var(--font-mincho);
margin-bottom: 10px;
}
.home_about.-salon>.inner>.flx>.list.-content>.ttl>span{
background: linear-gradient(90deg, #D946EF 0%, #A855F7 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.home_about.-salon>.inner>.flx>.list.-content>.txt{
font-size: 16px;
font-weight: 400;
line-height: 2;
}
.home_about.-salon>.inner>.flx>.list.-content>.txt+.txt{
margin-top: 10px;
}
.home_about.-salon>.inner>.flx>.list.-content>.item{
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
padding: 0;
z-index: initial;
background-color: var(--color-white);
margin-top: var(--px-35);
padding-block: var(--px-20);
padding-inline: clamp(10px, 1.6666666667vw, 30px);
border-radius: 10px;
position: relative;
}
.home_about.-salon>.inner>.flx>.list.-content>.item>.list{
padding: 0;
margin: 0;
display: flex;
flex-wrap: nowrap;
gap: 15px;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
}
.home_about.-salon>.inner>.flx>.list.-content>.item>.deco{
position: absolute;
top: -11px;
left: 50%;
transform: translateX(-50%);
color: var(--color-salon-red);
font-size: 16px;
font-weight: 500;
line-height: 1.5;
}
@media (max-width:1000px) {
.home_about.-salon>.inner>.flx>.list.-content>.item>.list{
flex-direction: column;
gap: 0;
}
}
@media (max-width:767px) {
.home_about.-salon>.inner>.flx{
flex-direction: column;
align-items: center;
}
.home_about.-salon>.inner>.flx>.list.-media{
flex-basis: 100%;
max-width: 70%;
}
.home_about.-salon>.inner>.flx>.list.-content{
flex-basis: 100%;
max-width: 100%;
}
.home_about.-salon>.inner>.flx>.list.-media>.media>img{
width: 100%;
height: 450px;
object-fit: cover;
}
}
@media (max-width:560px) {
.home_about.-salon>.inner>.flx>.list.-media{
max-width: 100%;
}
} .salon-service{
background-color: var(--color-white);
margin: 0;
padding: 0;
padding-block: clamp(50px, 6.976744186vw, 120px);
}
.salon-service>.inner{
width: min(1200px,90vw);
margin-inline: auto;
}
.salon-service>.inner>.item{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 27px 25px;
}
.salon-service>.inner>.item>.list{
display: flex;
flex-wrap: nowrap;
flex-direction: column;
align-items: center;
margin: 0;
padding: 0;
border-radius: 15px;
box-shadow: 0 0px 6px 1px rgba(0, 0, 0, 0.15);
padding: 28px var(--px-40);
}
.salon-service>.inner>.item>.list.-full{
grid-column: span 2 / span 2;
flex-direction: row;
gap: var(--px-55);
}
.salon-service>.inner>.item>.list.-full>.content>.item>.list{
display: block;
padding: 0;
margin: 0;
}
.salon-service>.inner>.item>.list.-full>.-item{
flex: 2 0;
display: flex;
flex-direction: column;
align-items: center;
}
.salon-service>.inner>.item>.list.-full>.media>img{
width: 100%;
border-radius: 10px;
height: 400px;
object-fit: cover;
}
.salon-service>.inner>.item>.list.-full>.content>.ttl{
color: #9D174D;
color: var(--color-salon-red);
font-size: 20px;
font-weight: 600;
line-height: 1.5;
}
.salon-service>.inner>.item>.list.-full>.content>.txt{
font-size: 16px;
font-weight: 400;
line-height: 2;
margin-top: var(--px-20);
}
.salon-service>.inner>.item>.list.-full>.content>.catch{
border-radius: 15px;
background-color: var(--color-salon-pink);
color: var(--color-white);
font-size: 16px;
font-weight: 500;
line-height: 1.5;
text-align: center;
padding: 6px .5em;
width: 100%;
margin-top: var(--px-40);
}
.salon-service>.inner>.item>.list.-full>.content>.item>.list>.flx{
display: flex;
justify-content: space-between;
align-items: center;
gap: 25px;
}
.salon-service>.inner>.item>.list.-full>.content>.note{
color: #A19E9E;
font-size: 14px;
font-weight: 400;
line-height: 1.7;
}
.salon-service>.inner>.item>.list>img{
width: 100%;
border-radius: 10px;
}
.salon-service>.inner>.item>.list>.ttl{
color: #9D174D;
color: var(--color-salon-red);
font-size: 20px;
font-weight: 600;
line-height: 1.5;
margin-top: var(--px-25);
}
.salon-service>.inner>.item>.list>.txt{
font-size: 16px;
font-weight: 400;
line-height: 2;
margin-top: var(--px-10);
}
@media (max-width:767px) {
.salon-service>.inner>.item{
grid-template-columns: 1fr;
}
.salon-service>.inner>.item>.list.-full{
grid-column: span 1 / span 1;
flex-direction: column;
}
.salon-service>.inner>.item>.list{
padding-inline: 1em;
}
}  .full-width-banner {
width: 100%;
margin: 0;
padding: 0;
line-height: 0; overflow: hidden; } .banner-img {
width: 100%; height: auto; display: block; object-fit: cover; } .salon-menu{
margin: 0;
padding: 0;
padding-block: clamp(50px, 6.976744186vw, 120px);
background: url(//kanon.rest/wp-content/themes/kanon/assets/img/salon/img-bg.jpg) no-repeat center / cover;
}
.salon-menu>.inner{
width: min(950px,90vw);
margin-inline: auto;
}
.salon-menu>.inner>.item>.list{
margin: 0;
padding: 0;
display: block;
background-color: var(--color-white);
border: 1px solid var(--color-salon-red);
border-radius: 15px;
padding-block: var(--px-35) var(--px-30);
padding-inline: clamp(15px, 3.1666666667vw, 57px);
}
.salon-menu>.inner>.item>.list+.list{
margin-top: 15px;
}
.salon-menu>.inner>.item>.list.-deco{
position: relative;
}
.salon-menu>.inner>.item>.list.-deco>.deco{
position: absolute;
top: 0;
right: 0;
background-color: var(--color-salon-red);
color: var(--color-white);
font-size: var(--font-20);
font-weight: 500;
line-height: 1.2;
border-radius: 0 15px 0 10px;
padding-block: 6px;
padding-inline: 20px 27px;
}
.salon-menu>.inner>.item>.list>.ttl{
color: var(--color-salon-red);
font-size: var(--font-30);
font-weight: 600;
line-height: 1.5;
margin-bottom: 15px;
}
.salon-menu>.inner>.item>.list>.txt{
font-size: 16px;
font-weight: 400;
line-height: 2;
margin-bottom: 15px;
}
.salon-menu>.inner>.item>.list.-deco>.wrap.-deco{
background-color: #FCF3FB;
border-radius: 10px;
padding-block: 18px 10px;
padding-inline: 1.5em;
}
.salon-menu>.inner>.item>.list.-deco>.wrap.-deco>.menu{
color: #A19E9E;
font-size: 14px;
font-weight: 400;
line-height: 1.7;
}
.salon-menu>.inner>.item>.list.-deco>.wrap.-deco>.flx{
display: flex;
align-items: center;
justify-content: space-between;
}
.salon-menu>.inner>.item>.list.-deco>.wrap.-deco>.flx>.ttl{
color: var(--color-salon-black);
font-size: 16px;
font-weight: 600;
line-height: 2;
}
.salon-menu>.inner>.item>.list.-deco>.wrap.-deco>.flx>.price{
color: var(--color-salon-red);
font-size: var(--font-30);
font-weight: 600;
line-height: 1.5;
}
.salon-menu>.inner>.item>.list.-deco>.wrap.-deco>.flx>.price>span{
color: var(--color-salon-black);
font-size: 16px;
font-weight: 400;
line-height: 1.5;
}
@media (max-width:767px) {
.salon-menu>.inner>.item>.list.-deco>.wrap.-deco>.flx{
flex-direction: column;
align-items: flex-start;
}
.salon-menu>.inner>.item>.list.-deco{
padding-top: 3em;
}
}
.salon-menu>.inner>.item>.list>.wrap.-content{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
}
.salon-menu>.inner>.item>.list>.wrap.-content>.ttl{
color: var(--color-salon-red);
font-size: var(--font-30);
font-weight: 600;
line-height: 1.5;
display: flex;
align-items: center;
gap: 10px;
}
.salon-menu>.inner>.item>.list>.wrap.-content>.price{
color: var(--color-salon-red);
font-size: var(--font-30);
font-weight: 600;
line-height: 1.5;
}
.salon-menu>.inner>.item>.list>.wrap.-content>.price>span{
color: var(--color-salon-black);
font-size: 16px;
font-weight: 400;
line-height: 1.5;
}
.salon-menu>.inner>.item>.list>.wrap.-content>.txt{
font-size: 16px;
font-weight: 400;
line-height: 2;
margin-bottom: 15px;
}
@media (max-width:767px) {
.salon-menu>.inner>.item>.list>.wrap.-content{
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width:560px) {
.salon-menu>.inner>.item>.list>.wrap.-content>.ttl{
gap: 5px;
}
.salon-menu>.inner>.item>.list>.wrap.-content>.ttl>img{
width: 30px;
aspect-ratio: 1/1;
}
} .salon-faq{
margin: 0;
padding: 0;
padding-block: clamp(50px, 6.976744186vw, 120px);
background-color: var(--color-white);
}
.salon-faq>.inner{
width: min(1200px,90vw);
margin-inline: auto;
}
.accordion-area.-salon p.faq_txt{
margin-block: var(--px-30) var(--px-35);
color: var(--color-salon-black);
font-size: 16px;
line-height: 2;
}
.accordion-area.-salon section{
border-radius: 15px;
border: 1px solid var(--color-salon-red);
background: var(--color-white);
}
.faq_box.-salon{
border-radius: 10px;
background: #FCF3FB;
}
.accordion-area.-salon section .faq_title::before,
.accordion-area.-salon section .faq_title::after{
background-color: var(--color-salon-red);
} .salon-reserve{
padding-block: clamp(30px, 5.5555555556vw, 100px);
padding-inline: 1em;
}
.footer_reserve.-salon{
background: none;
margin: 0;
padding: 0;
color: var(--color-salon-red);
}
.reserve_tel>p>.reserve_tel-icon{
position: relative;
padding-left: 40px;
font-size: var(--font-30);
}
.reserve_tel>p>.reserve_tel-icon::before{
content: "" !important;
background: url(//kanon.rest/wp-content/themes/kanon/assets/img/salon/tel-icon.svg) no-repeat center;
width: 30px !important;
height: 30px;
aspect-ratio: 1/1;
vertical-align: baseline !important;
position: absolute;
top: 0;
left: 0;
}
.salon-reserve>.bnr>.item{
display: flex;
align-items: center;
justify-content: center;
gap: clamp(15px, 3.0555555556vw, 55px);
margin-top: var(--px-55);
}
.salon-reserve>.bnr>.item>.list{
margin: 0;
padding: 0;
}
@media (max-width:767px) {
.salon-reserve>.bnr>.item{
flex-direction: column;
gap: 10px;
}
} .footer.-salon{
background: #D8B5D2;
align-items: center;
gap: clamp(0px, 6.976744186vw, 120px);
}
.footer.-salon>.footer_content{
color: var(--color-salon-black);
margin-right: 0;
}
.footer.-salon>.footer_content>p{
font-size: var(--font-20);
line-height: 2;
font-weight: 600;
margin-left: 1em;
}
.footer.-salon>.footer_content>p:first-of-type{
line-height: 1.5;
}
.footer.-salon>.footer_content>p>a{
text-decoration: underline;
}
.copy{
background: url(//kanon.rest/wp-content/themes/kanon/assets/img/salon/bg.jpg) no-repeat center / cover;
}
.copy>p{
color: #000;
}
.footer > .footer_content > .brand > a > p{
font-size: var(--font-30);
font-weight: bold;
}
@media (max-width:960px) {
.footer.-salon{
gap: 15px;
}
.footer.-salon>.footer_content>p{
margin-left: 0;
}
.footer>.footer_content>.brand>a>img{
width: 50px;
height: auto;
}
}
@media (max-width:767px) {
.footer.-salon{
display: flex;
flex-direction: column;
padding-block: 30px;
padding-inline: 1em;
}
}