@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Zen+Maru+Gothic&display=swap');

:root {
    --text-color: #3D3D3D;
    --bg-color: #FBF9F8;
    --main-color: #8FB9BA;
    --light-color: #CFE0E0;
    --font-en: "Montserrat", serif;
    --link-color: #0F8383;
}

html {
    font-size: 62.5%;
}

body {
    font-size: 16px;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 400;
    color: var(--text-color);
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--bg-color);
}

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

.inner, .inner02 {
    padding: 0 20px;
}
.pc-show {
    display: none;
}
.sp-show {
    display: block;
}
@media screen and (min-width: 768px) {
    .inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 40px;
    }
    .inner02 {
        max-width: 940px;
        padding: 0 40px;
        margin: 0 auto;
    }
    .pc-show {
        display: block!important;
    }
    .sp-show {
        display: none!important;
    }
}

/* header */
.header {
    padding: 20px 0;
}
.header-logo {
    width: 180px;
    margin: 0 auto;
}
.drawer-icon {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 1000;
    background: var(--main-color);
    width: 60px;
    height: 60px;
    border-radius: 10px 0 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.drawer-icon .bar {
    width: 26px;
    height: 18px;
    position: relative;
}
.drawer-icon .bar span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 5px;
    background: #fff;
    transition: all .4s ease;
}
.drawer-icon .bar span:nth-child(1) {
    top: 0;
}
.drawer-icon .bar span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}
.drawer-icon .bar span:nth-child(3) {
    top: calc(100% - 3px);
}
.drawer-icon.is-active .bar span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
.drawer-icon.is-active .bar span:nth-child(2) {
   opacity: 0;
}
.drawer-icon.is-active .bar span:nth-child(3) {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}

.drawer {
    position: fixed;
    top: 0;
    left: 0;
    background: var(--bg-color);
    width: 100vw;
    height: 100vh;
    opacity: 0;
    visibility: hidden;
    transition: all .6s ease;
    z-index: 999;
}
.drawer.is-open {
    opacity: 1;
    visibility: visible;
}
.dawer-inner {
    padding: 65px 20px 100px;
}
.drawer-logo {
    width: 180px;
    margin: 0 auto 47px;
}
.drawer-menu li {
    text-align: center;
}
.drawer-list {
    margin-bottom: 47px;
}
.drawer-list a {
    display: inline-block;
    line-height: 40px;
    font-weight: 600;
}
.drawer-list a.drawer-contact {
    background: var(--main-color);
    color: #fff;
    width: 200px;
    margin-top: 10px;
    border-radius: 30px;
    padding: 5px 0;
}
.drawer-list a.drawer-contact::after {
    content: "";
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2018%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M17.9535%202.94694C17.8724%202.53821%2017.6912%202.16419%2017.4381%201.8552C17.3847%201.78787%2017.3289%201.72758%2017.2685%201.66729C16.8201%201.21666%2016.1907%200.935547%2015.5032%200.935547H2.49683C1.80928%200.935547%201.18216%201.21666%200.731637%201.66729C0.671344%201.72758%200.615586%201.78787%200.562078%201.8552C0.308848%202.16415%200.127617%202.53821%200.0487266%202.94694C0.0163125%203.10469%200%203.26771%200%203.43252V12.5673C0%2012.9177%200.0743203%2013.2546%200.206859%2013.5588C0.329801%2013.8492%200.511066%2014.1119%200.731602%2014.3323C0.7875%2014.388%200.843012%2014.4393%200.903586%2014.4902C1.33552%2014.848%201.89306%2015.064%202.49683%2015.064H15.5032C16.1072%2015.064%2016.6671%2014.848%2017.0966%2014.488C17.157%2014.4393%2017.2127%2014.388%2017.2685%2014.3323C17.4889%2014.1119%2017.6702%2013.8492%2017.7956%2013.5588V13.5565C17.9281%2013.2523%2018%2012.9177%2018%2012.5673V3.43252C18%203.26771%2017.9839%203.10469%2017.9535%202.94694ZM1.63508%202.57063C1.85815%202.34781%202.15772%202.21291%202.49683%202.21291H15.5032C15.8423%202.21291%2016.1445%202.34781%2016.3649%202.57063C16.4044%202.61032%2016.4415%202.65455%2016.4743%202.69849L9.65728%208.63972C9.46927%208.8045%209.23702%208.88589%209%208.88589C8.76537%208.88589%208.53327%208.8045%208.34275%208.63972L1.52831%202.69596C1.55848%202.65202%201.59564%202.61032%201.63508%202.57063ZM1.27737%2012.5673V4.0178L6.21063%208.32145L1.27986%2012.6205C1.27737%2012.6042%201.27737%2012.5859%201.27737%2012.5673ZM15.5032%2013.7864H2.49683C2.27602%2013.7864%202.0694%2013.7283%201.89306%2013.6264L7.09541%209.09264L7.58109%209.51515C7.98753%209.86833%208.49614%2010.0472%209%2010.0472C9.50646%2010.0472%2010.015%209.86833%2010.4214%209.51515L10.9069%209.09264L16.1072%2013.6264C15.9306%2013.7283%2015.724%2013.7864%2015.5032%2013.7864ZM16.7226%2012.5673C16.7226%2012.5859%2016.7226%2012.6042%2016.7202%2012.6205L11.7895%208.32395L16.7226%204.02009V12.5673Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
    width: 18px;
    height: 16px;
    display: inline-block;
    vertical-align: -2px;
    margin-left: 10px;
}
.drawer-foot {
    font-size: 12px;
}
.drawer-foot li a {
    line-height: 30px;
}

/* footer */ 
.footer {
    margin-top: 120px;
    background: var(--main-color);
    color: #fff;
    padding: 37px 0 20px;
    position: relative;
}
.footer-flex {
    display: flex;
    flex-direction: column-reverse;
}
.footer-logo {
    width: 250px;
    margin: 0 auto;
}
.footer-nav {
    margin-bottom: 35px;
}
.footer-nav-list {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    padding: 0 25px;
    border-bottom: 1px solid #B9DADB;
    padding-bottom: 30px;
    margin-bottom: 30px;
}
.footer-nav-list li:nth-child(4) {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
}
.footer-nav-list li:nth-child(5) {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
}
.footer-nav-list li:nth-child(6) {
    grid-row: 3 / 4;
    grid-column: 2 / 3;
}
.footer-nav-list li:nth-child(7) {
    grid-row: 4 / 5;
    grid-column: 2 / 3;
}
.footer-nav-list li a {
    font-size: 14px;
    font-weight: 600;
    line-height: 27px;
}
.footer-bottom li {
    text-align: center;
}
.footer-bottom li a {
    font-size: 12px;
    line-height: 1.7;
    font-weight: 500;
}
.copyright {
    margin-top: 33px;
    font-size: 12px;
    text-align: center;
}
.pagetop {
    position: absolute;
    top: -55px;
    right: 10px;
    z-index: 3;
}
.pagetop a {
    display: inline-block;
    width: 50px;
    height: 45px;
    background: url(../img/pagetop.svg) no-repeat center center / contain;
}

/* top */
.main {
    min-height: calc(100vh - 85px - 537px);
    overflow: hidden;
}
.mv {
    margin-bottom: 50px;
    padding: 100px 0 50px;
    position: relative;
    overflow-x: hidden;
}
.mv::before {
    content: "";
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #CFE5E5;
    z-index: -2;
}
.mv::after {
    content: "";
    background: url(../img/slider_parts_sp.svg) no-repeat center center / contain;
    width: 130px;
    height: 180px;
    position: absolute;
    bottom: 0;
    left: -15px;
    z-index: -1;
}

.section-btn {
    width: 240px;
    margin: 60px auto 0;
}
.section-btn a {
    width: 100%;
    display: inline-block;
    border: 1px solid var(--text-color);
    text-align: center;
    padding: 15px;
    border-radius: 100px;
    font-weight: 500;
}
.section-btn a .small {
    display: block;
    font-size: 12px;
    margin-top: 3px;
}

.top-slider .swiper-slide {
    aspect-ratio: 280 / 340;
    transition: transform .2s ease;
    overflow: hidden;
    transform-origin: 50% 100%;
}
.top-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}
.top-slider .swiper-slide.swiper-slide-active {
    transform: scale(1.3);
    box-shadow: 0 3px 26px rgba(0, 0, 0, .15);
}

.top-about {
    overflow-x: hidden;
    margin-bottom: 50px;
    position: relative;
}
.top-about-block {
    margin-left: 20px;
    background: #FBF9F8;
    border-radius: 20px 0 0 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
    padding: 45px 20px 60px 30px;
    transform: translateX(100px);
    opacity: 0;
    transition: all 1.3s ease;
}
.top-about-block.is-show {
    opacity: 1;
    transform: translateX(0);
}
.top-about-title {
    padding-left: 25px;
    position: relative;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 23px;
}
.top-about-title::before {
    content: "";
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2020%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5.89812%206.28252C6.2381%206.44201%206.60989%206.5239%206.98607%206.52216C7.33571%206.52128%207.68207%206.45536%208.00713%206.3278C8.46382%206.14976%208.83793%205.8698%209.08879%205.51834C9.34111%205.16477%209.48242%204.72712%209.50881%204.21715L9.5089%204.21706C9.529%203.82585%209.4842%203.39916%209.37191%202.91245C9.29013%202.5583%209.17479%202.14818%208.93865%201.79245C8.75743%201.51875%208.51314%201.29163%208.2259%201.12981C7.93866%200.967986%207.6167%200.8761%207.28657%200.861721C6.65641%200.837825%206.02663%201.12721%205.51403%201.68078C4.78914%202.46367%204.40452%203.65601%204.57869%204.58026C4.71594%205.3087%205.22146%205.96088%205.89812%206.28252Z%22%20fill%3D%22%238FB9BA%22%2F%3E%3Cpath%20d%3D%22M4.4049%207.16507C4.22322%206.89073%203.9783%206.66309%203.69035%206.50091C3.40239%206.33874%203.07965%206.24667%202.74871%206.2323C2.11629%206.20865%201.48635%206.49762%200.97354%207.05136C0.251054%207.83153%20-0.132189%209.02036%200.0414858%209.94229C0.178836%2010.6708%200.684578%2011.3232%201.36139%2011.6448C1.7016%2011.8044%202.07365%2011.8864%202.4501%2011.8847C2.7996%2011.8838%203.14582%2011.8179%203.47077%2011.6905C3.92747%2011.5123%204.30178%2011.2322%204.55322%2010.8801C4.80567%2010.5263%204.94702%2010.0888%204.97329%209.5797C4.99339%209.1906%204.94887%208.76597%204.83715%208.28168C4.75582%207.92923%204.64093%207.52087%204.4049%207.16507Z%22%20fill%3D%22%238FB9BA%22%2F%3E%3Cpath%20d%3D%22M11.3705%205.72524C11.6054%206.0543%2011.9552%206.31619%2012.3822%206.48256C12.6857%206.60171%2013.0092%206.66327%2013.3357%206.66403C13.6876%206.66565%2014.0354%206.58904%2014.3534%206.43985C14.986%206.13925%2015.4587%205.52959%2015.587%204.84879C15.7491%203.98848%2015.3917%202.87931%2014.7178%202.15156C14.2385%201.63408%2013.6477%201.3634%2013.0576%201.38608C12.748%201.39954%2012.4461%201.48567%2012.1766%201.63738C11.9072%201.78908%2011.678%202.00202%2011.508%202.25864C11.2876%202.59065%2011.1805%202.97169%2011.1047%203.30036C11.0006%203.75123%2010.959%204.14689%2010.9777%204.51012C11.0024%204.98581%2011.1345%205.39461%2011.3705%205.72524Z%22%20fill%3D%22%238FB9BA%22%2F%3E%3Cpath%20d%3D%22M19.1277%207.22668C18.6659%206.72793%2018.0966%206.46688%2017.526%206.4891C17.227%206.50207%2016.9355%206.5852%2016.6753%206.73165C16.4151%206.8781%2016.1938%207.08368%2016.0296%207.33146C15.8176%207.65098%2015.7145%208.0168%2015.6416%208.33259C15.5418%208.76522%2015.5021%209.14485%2015.52%209.49307C15.5438%209.95098%2015.6711%2010.3447%2015.8985%2010.6634C16.1253%2010.9808%2016.4625%2011.2334%2016.8739%2011.3938C17.1664%2011.5085%2017.478%2011.5677%2017.7926%2011.5685C18.1317%2011.5701%2018.4669%2011.4962%2018.7734%2011.3523C19.3833%2011.0625%2019.8389%2010.4749%2019.9627%209.81888C20.1185%208.9918%2019.7752%207.92592%2019.1277%207.22668Z%22%20fill%3D%22%238FB9BA%22%2F%3E%3Cpath%20d%3D%22M14.6877%2011.3911C14.2011%2011.0115%2013.7416%2010.6531%2013.5805%2010.1167C13.3019%209.18882%2012.7155%208.42746%2011.9293%207.97295C11.2066%207.55525%2010.2779%207.49255%209.09034%207.78082C8.20646%207.99553%207.49987%208.56299%207.04697%209.4219C6.91739%209.66787%206.83401%209.93004%206.75344%2010.1837C6.6391%2010.5436%206.53101%2010.8837%206.31085%2011.114C6.12981%2011.3035%205.96067%2011.414%205.7649%2011.542C5.5312%2011.6946%205.26635%2011.8677%204.99299%2012.1783C4.42899%2012.8196%204.23795%2013.7497%204.49432%2014.6056C5.00707%2016.3173%206.56582%2017.3677%208.28447%2017.157C8.60348%2017.1182%208.90552%2017.0441%209.19768%2016.9725C9.55333%2016.8855%209.88922%2016.8032%2010.2196%2016.7923C10.6202%2016.7809%2010.9694%2016.8785%2011.3383%2016.9837C11.7064%2017.0887%2012.1126%2017.2046%2012.5862%2017.2046C12.7298%2017.2046%2012.8733%2017.1938%2013.0153%2017.1723C14.742%2016.9113%2016.091%2015.1735%2016.1437%2013.7939C16.1669%2013.1839%2015.9787%2012.6553%2015.5683%2012.1778C15.3077%2011.8748%2014.9925%2011.6289%2014.6877%2011.3911Z%22%20fill%3D%22%238FB9BA%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
    width: 20px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.top-about-lead {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 0.03em;
    margin-bottom: 18px;
}
.top-about-detail {
    margin-bottom: 25px;
}
.top-about-detail p {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.85;
}
.top-about-detail p + p {
    margin-top: 24px;
}
.top-about-block .section-btn {
    width: 100%;
    margin: 0;
}
.top-about-block .section-btn a {
    padding: 10px;
    
}

.top-about-img {
    position: relative;
    top: -30px;
    border-radius: 0 30px 30px 0;
    z-index: -1;
    aspect-ratio: 1;
    width: 90%;
    overflow: hidden;
}
.top-about-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.top-about::after {
    content: "";
    background: url(../img/top_about_parts.svg) no-repeat center center / contain;
    width: 140px;
    height: 160px;
    position: absolute;
    bottom: 0;
    right: 0;
}

.top-news {
    background: #EDF3F3;
}
.section-title {
    padding: 67px 0 47px;
    font-size: 20px;
    font-weight: 600;
    display: flex;
    gap: 0 17px;
    align-items: center;
    justify-content: center;
}
.section-title::before {
    content: "";
    width: 21px;
    height: 17px;
    background: url(data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2020%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5.89812%206.28252C6.2381%206.44201%206.60989%206.5239%206.98607%206.52216C7.33571%206.52128%207.68207%206.45536%208.00713%206.3278C8.46382%206.14976%208.83793%205.8698%209.08879%205.51834C9.34111%205.16477%209.48242%204.72712%209.50881%204.21715L9.5089%204.21706C9.529%203.82585%209.4842%203.39916%209.37191%202.91245C9.29013%202.5583%209.17479%202.14818%208.93865%201.79245C8.75743%201.51875%208.51314%201.29163%208.2259%201.12981C7.93866%200.967986%207.6167%200.8761%207.28657%200.861721C6.65641%200.837825%206.02663%201.12721%205.51403%201.68078C4.78914%202.46367%204.40452%203.65601%204.57869%204.58026C4.71594%205.3087%205.22146%205.96088%205.89812%206.28252Z%22%20fill%3D%22%238FB9BA%22%2F%3E%3Cpath%20d%3D%22M4.4049%207.16507C4.22322%206.89073%203.9783%206.66309%203.69035%206.50091C3.40239%206.33874%203.07965%206.24667%202.74871%206.2323C2.11629%206.20865%201.48635%206.49762%200.97354%207.05136C0.251054%207.83153%20-0.132189%209.02036%200.0414858%209.94229C0.178836%2010.6708%200.684578%2011.3232%201.36139%2011.6448C1.7016%2011.8044%202.07365%2011.8864%202.4501%2011.8847C2.7996%2011.8838%203.14582%2011.8179%203.47077%2011.6905C3.92747%2011.5123%204.30178%2011.2322%204.55322%2010.8801C4.80567%2010.5263%204.94702%2010.0888%204.97329%209.5797C4.99339%209.1906%204.94887%208.76597%204.83715%208.28168C4.75582%207.92923%204.64093%207.52087%204.4049%207.16507Z%22%20fill%3D%22%238FB9BA%22%2F%3E%3Cpath%20d%3D%22M11.3705%205.72524C11.6054%206.0543%2011.9552%206.31619%2012.3822%206.48256C12.6857%206.60171%2013.0092%206.66327%2013.3357%206.66403C13.6876%206.66565%2014.0354%206.58904%2014.3534%206.43985C14.986%206.13925%2015.4587%205.52959%2015.587%204.84879C15.7491%203.98848%2015.3917%202.87931%2014.7178%202.15156C14.2385%201.63408%2013.6477%201.3634%2013.0576%201.38608C12.748%201.39954%2012.4461%201.48567%2012.1766%201.63738C11.9072%201.78908%2011.678%202.00202%2011.508%202.25864C11.2876%202.59065%2011.1805%202.97169%2011.1047%203.30036C11.0006%203.75123%2010.959%204.14689%2010.9777%204.51012C11.0024%204.98581%2011.1345%205.39461%2011.3705%205.72524Z%22%20fill%3D%22%238FB9BA%22%2F%3E%3Cpath%20d%3D%22M19.1277%207.22668C18.6659%206.72793%2018.0966%206.46688%2017.526%206.4891C17.227%206.50207%2016.9355%206.5852%2016.6753%206.73165C16.4151%206.8781%2016.1938%207.08368%2016.0296%207.33146C15.8176%207.65098%2015.7145%208.0168%2015.6416%208.33259C15.5418%208.76522%2015.5021%209.14485%2015.52%209.49307C15.5438%209.95098%2015.6711%2010.3447%2015.8985%2010.6634C16.1253%2010.9808%2016.4625%2011.2334%2016.8739%2011.3938C17.1664%2011.5085%2017.478%2011.5677%2017.7926%2011.5685C18.1317%2011.5701%2018.4669%2011.4962%2018.7734%2011.3523C19.3833%2011.0625%2019.8389%2010.4749%2019.9627%209.81888C20.1185%208.9918%2019.7752%207.92592%2019.1277%207.22668Z%22%20fill%3D%22%238FB9BA%22%2F%3E%3Cpath%20d%3D%22M14.6877%2011.3911C14.2011%2011.0115%2013.7416%2010.6531%2013.5805%2010.1167C13.3019%209.18882%2012.7155%208.42746%2011.9293%207.97295C11.2066%207.55525%2010.2779%207.49255%209.09034%207.78082C8.20646%207.99553%207.49987%208.56299%207.04697%209.4219C6.91739%209.66787%206.83401%209.93004%206.75344%2010.1837C6.6391%2010.5436%206.53101%2010.8837%206.31085%2011.114C6.12981%2011.3035%205.96067%2011.414%205.7649%2011.542C5.5312%2011.6946%205.26635%2011.8677%204.99299%2012.1783C4.42899%2012.8196%204.23795%2013.7497%204.49432%2014.6056C5.00707%2016.3173%206.56582%2017.3677%208.28447%2017.157C8.60348%2017.1182%208.90552%2017.0441%209.19768%2016.9725C9.55333%2016.8855%209.88922%2016.8032%2010.2196%2016.7923C10.6202%2016.7809%2010.9694%2016.8785%2011.3383%2016.9837C11.7064%2017.0887%2012.1126%2017.2046%2012.5862%2017.2046C12.7298%2017.2046%2012.8733%2017.1938%2013.0153%2017.1723C14.742%2016.9113%2016.091%2015.1735%2016.1437%2013.7939C16.1669%2013.1839%2015.9787%2012.6553%2015.5683%2012.1778C15.3077%2011.8748%2014.9925%2011.6289%2014.6877%2011.3911Z%22%20fill%3D%22%238FB9BA%22%2F%3E%3C%2Fsvg%3E) no-repeat center center / contain;
}
.section-title::after {
    content: "";
    width: 21px;
    height: 17px;
    background: url(data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2020%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5.89812%206.28252C6.2381%206.44201%206.60989%206.5239%206.98607%206.52216C7.33571%206.52128%207.68207%206.45536%208.00713%206.3278C8.46382%206.14976%208.83793%205.8698%209.08879%205.51834C9.34111%205.16477%209.48242%204.72712%209.50881%204.21715L9.5089%204.21706C9.529%203.82585%209.4842%203.39916%209.37191%202.91245C9.29013%202.5583%209.17479%202.14818%208.93865%201.79245C8.75743%201.51875%208.51314%201.29163%208.2259%201.12981C7.93866%200.967986%207.6167%200.8761%207.28657%200.861721C6.65641%200.837825%206.02663%201.12721%205.51403%201.68078C4.78914%202.46367%204.40452%203.65601%204.57869%204.58026C4.71594%205.3087%205.22146%205.96088%205.89812%206.28252Z%22%20fill%3D%22%238FB9BA%22%2F%3E%3Cpath%20d%3D%22M4.4049%207.16507C4.22322%206.89073%203.9783%206.66309%203.69035%206.50091C3.40239%206.33874%203.07965%206.24667%202.74871%206.2323C2.11629%206.20865%201.48635%206.49762%200.97354%207.05136C0.251054%207.83153%20-0.132189%209.02036%200.0414858%209.94229C0.178836%2010.6708%200.684578%2011.3232%201.36139%2011.6448C1.7016%2011.8044%202.07365%2011.8864%202.4501%2011.8847C2.7996%2011.8838%203.14582%2011.8179%203.47077%2011.6905C3.92747%2011.5123%204.30178%2011.2322%204.55322%2010.8801C4.80567%2010.5263%204.94702%2010.0888%204.97329%209.5797C4.99339%209.1906%204.94887%208.76597%204.83715%208.28168C4.75582%207.92923%204.64093%207.52087%204.4049%207.16507Z%22%20fill%3D%22%238FB9BA%22%2F%3E%3Cpath%20d%3D%22M11.3705%205.72524C11.6054%206.0543%2011.9552%206.31619%2012.3822%206.48256C12.6857%206.60171%2013.0092%206.66327%2013.3357%206.66403C13.6876%206.66565%2014.0354%206.58904%2014.3534%206.43985C14.986%206.13925%2015.4587%205.52959%2015.587%204.84879C15.7491%203.98848%2015.3917%202.87931%2014.7178%202.15156C14.2385%201.63408%2013.6477%201.3634%2013.0576%201.38608C12.748%201.39954%2012.4461%201.48567%2012.1766%201.63738C11.9072%201.78908%2011.678%202.00202%2011.508%202.25864C11.2876%202.59065%2011.1805%202.97169%2011.1047%203.30036C11.0006%203.75123%2010.959%204.14689%2010.9777%204.51012C11.0024%204.98581%2011.1345%205.39461%2011.3705%205.72524Z%22%20fill%3D%22%238FB9BA%22%2F%3E%3Cpath%20d%3D%22M19.1277%207.22668C18.6659%206.72793%2018.0966%206.46688%2017.526%206.4891C17.227%206.50207%2016.9355%206.5852%2016.6753%206.73165C16.4151%206.8781%2016.1938%207.08368%2016.0296%207.33146C15.8176%207.65098%2015.7145%208.0168%2015.6416%208.33259C15.5418%208.76522%2015.5021%209.14485%2015.52%209.49307C15.5438%209.95098%2015.6711%2010.3447%2015.8985%2010.6634C16.1253%2010.9808%2016.4625%2011.2334%2016.8739%2011.3938C17.1664%2011.5085%2017.478%2011.5677%2017.7926%2011.5685C18.1317%2011.5701%2018.4669%2011.4962%2018.7734%2011.3523C19.3833%2011.0625%2019.8389%2010.4749%2019.9627%209.81888C20.1185%208.9918%2019.7752%207.92592%2019.1277%207.22668Z%22%20fill%3D%22%238FB9BA%22%2F%3E%3Cpath%20d%3D%22M14.6877%2011.3911C14.2011%2011.0115%2013.7416%2010.6531%2013.5805%2010.1167C13.3019%209.18882%2012.7155%208.42746%2011.9293%207.97295C11.2066%207.55525%2010.2779%207.49255%209.09034%207.78082C8.20646%207.99553%207.49987%208.56299%207.04697%209.4219C6.91739%209.66787%206.83401%209.93004%206.75344%2010.1837C6.6391%2010.5436%206.53101%2010.8837%206.31085%2011.114C6.12981%2011.3035%205.96067%2011.414%205.7649%2011.542C5.5312%2011.6946%205.26635%2011.8677%204.99299%2012.1783C4.42899%2012.8196%204.23795%2013.7497%204.49432%2014.6056C5.00707%2016.3173%206.56582%2017.3677%208.28447%2017.157C8.60348%2017.1182%208.90552%2017.0441%209.19768%2016.9725C9.55333%2016.8855%209.88922%2016.8032%2010.2196%2016.7923C10.6202%2016.7809%2010.9694%2016.8785%2011.3383%2016.9837C11.7064%2017.0887%2012.1126%2017.2046%2012.5862%2017.2046C12.7298%2017.2046%2012.8733%2017.1938%2013.0153%2017.1723C14.742%2016.9113%2016.091%2015.1735%2016.1437%2013.7939C16.1669%2013.1839%2015.9787%2012.6553%2015.5683%2012.1778C15.3077%2011.8748%2014.9925%2011.6289%2014.6877%2011.3911Z%22%20fill%3D%22%238FB9BA%22%2F%3E%3C%2Fsvg%3E) no-repeat center center / contain;
}

.section-content {
    padding-bottom: 78px;
}

.top-news-item {
    display: flex;
    align-items: center;
}
.top-news-item + .top-news-item {
    margin-top: 25px;
}
.top-news-item .img {
    width: 34%;
    border-radius: 5px;
    overflow: hidden;
    aspect-ratio: 1;
}
.top-news-item .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.top-news-item .txt {
    width: 66%;
    padding-left: 20px;
}
.top-news-item .ttl {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 700;
}
.top-news-item .date {
    font-size: 12px;
    font-family: var(--font-en);
    font-weight: 500;
    letter-spacing: 0.05em;
}
.top-news-item .category a {
    color: var(--link-color);
    font-size: 13px;
    font-weight: 600;
}
.top-news-item .detail {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    color: #777777;
}

.top-ranking {
    background: #9DC9C9;
}
.top-ranking .section-title {
    color: #fff;
}
.top-ranking .section-title::before {
    content: "";
    background: #fff;
    width: 2px;
    height: 18px;
    border-radius: 5px;
    transform: rotate(-30deg);
}
.top-ranking .section-title::after {
    content: "";
    background: #fff;
    width: 2px;
    height: 18px;
    border-radius: 5px;
    transform: rotate(30deg);
}
.top-ranking-list {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto auto;
    gap: 27px 0;
    width: 100%;
}
.top-ranking-item {
    position: relative;
}
.top-ranking-item:first-child {
    grid-row: 1 / 2;
    grid-column: 1 / 3;
    padding-top: 60px;
}
.top-ranking-item:nth-child(2) {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
}
.top-ranking-item:nth-child(3) {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
}
.top-ranking-item:nth-child(n + 2) {
    width: 90%;
    padding-top: 60px;
    position: relative;
}
.top-ranking-item:first-child::before {
    content: "";
    background: url(../img/ranking01.png) no-repeat center center / contain;
    width: 90px;
    height: 60px;
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
}
.top-ranking-item:nth-child(n + 2)::before {
    content: "";
    width: 80px;
    height: 53px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.top-ranking-item:nth-child(2)::before {
    background: url(../img/ranking02.png) no-repeat center center / contain;
}
.top-ranking-item:nth-child(3)::before {
    background: url(../img/ranking03.png) no-repeat center center / contain;
}
.top-ranking-item .img {
    border-radius: 20px;
    aspect-ratio: 1;
    background: #fff;
    padding: 10px;
    position: relative;
    z-index: 2;
    box-shadow: 15px 15px 0 #6BAAAC;
    margin-bottom: 15px;
}
.top-ranking-item .img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 20px;
}
.top-ranking-item .name {
    text-align: center;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-size: 16px;
    margin-bottom: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.top-ranking-item p {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}
.top-ranking-item:first-child .img {
    width: 80%;
    margin: 0 auto 22px;
}
.top-ranking-item:first-child .name {
    font-size: 24px;
}
.top-ranking-item:nth-child(n + 2) .img {
    box-shadow: 10px 10px 0 #6BAAAC;
}
.top-ranking .section-btn a {
    color: #fff;
    border-color: #fff;
}

.top-blog-list {
    padding: 0 30px;
}
.top-blog-item + .top-blog-item {
    margin-top: 40px;
}
.top-blog-item .img {
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 6px;
    aspect-ratio: 1;
}
.top-blog-item .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.top-blog-item .ttl {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 4px;
}
.top-blog-item .meta {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}
.top-blog-item .date {
    font-family: var(--font-en);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.05em;
    line-height: 1.6;
}
.top-blog-item .category {
    padding-left: 12px;
    margin-left: 12px;
    position: relative;
}
.top-blog-item .category::before {
    content: "";
    width: 1px;
    height: 13px;
    background: var(--text-color);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.top-blog-item .category a {
    color: var(--link-color);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    vertical-align: 2px;
}
.top-blog-item .detail a {
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #6D6D6D;
    margin-bottom: 4px;
}
.top-blog-item .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
}
.top-blog-item .tag-item a {
    font-size: 13px;
}
.top-blog-item .tag-item a::before {
    content: "#";
}
.top-blog .section-content {
    padding-bottom: 0;
}

.top-banner {
    margin-top: 100px;
}


@media screen and (min-width: 768px) {
    /* header */
    .header {
        height: 82px;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 10000;
        background: rgba(251, 249, 248, .9);
        padding: 0;
    }
    .header-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 40px;
        height: 100%;
    }
    .header-logo {
        margin: 0;
        width: 210px;
    }
    .header-nav {
        position: absolute;
        top: 50%;
        right: 0;
        display: flex!important;
        align-items: center;
        gap: 0 45px;
        transform: translateY(-50%);
    }
    .header-nav-list {
        display: flex;
        gap: 0 45px;
    }
    .header-nav-list li a {
        font-size: 16px;
        font-weight: 600;
        white-space: nowrap;
        position: relative;
        transition: all .4s ease;
    }
    .header-nav-list li a:hover {
        color: var(--main-color);
    }
    .header-nav-list li a::before {
        content: "";
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%) scale(0, 1);
        width: 30px;
        height: 1px;
        background: var(--main-color);
        transition: all .3s ease;
    }
    .header-nav-list li a:hover::before {
        transform: translateX(-50%) scale(1, 1);
    }
    .header-contact {
        /* position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%); */
    }
    .header-contact a {
        background: var(--main-color);
        color: #fff;
        width: 200px;
        display: block;
        border-radius: 50px 0 0 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0 10px;
        padding: 14px 0 14px 10px;
        font-size: 18px;
        font-weight: 600;
        transition: all .4s ease;
    }
    .header-contact a:hover {
        opacity: .7;
    }
    .header-contact a::before {
        content: "";
        background: url(data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2018%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M17.9535%202.94694C17.8724%202.53821%2017.6912%202.16419%2017.4381%201.8552C17.3847%201.78787%2017.3289%201.72758%2017.2685%201.66729C16.8201%201.21666%2016.1907%200.935547%2015.5032%200.935547H2.49683C1.80928%200.935547%201.18216%201.21666%200.731637%201.66729C0.671344%201.72758%200.615586%201.78787%200.562078%201.8552C0.308848%202.16415%200.127617%202.53821%200.0487266%202.94694C0.0163125%203.10469%200%203.26771%200%203.43252V12.5673C0%2012.9177%200.0743203%2013.2546%200.206859%2013.5588C0.329801%2013.8492%200.511066%2014.1119%200.731602%2014.3323C0.7875%2014.388%200.843012%2014.4393%200.903586%2014.4902C1.33552%2014.848%201.89306%2015.064%202.49683%2015.064H15.5032C16.1072%2015.064%2016.6671%2014.848%2017.0966%2014.488C17.157%2014.4393%2017.2127%2014.388%2017.2685%2014.3323C17.4889%2014.1119%2017.6702%2013.8492%2017.7956%2013.5588V13.5565C17.9281%2013.2523%2018%2012.9177%2018%2012.5673V3.43252C18%203.26771%2017.9839%203.10469%2017.9535%202.94694ZM1.63508%202.57063C1.85815%202.34781%202.15772%202.21291%202.49683%202.21291H15.5032C15.8423%202.21291%2016.1445%202.34781%2016.3649%202.57063C16.4044%202.61032%2016.4415%202.65455%2016.4743%202.69849L9.65728%208.63972C9.46927%208.8045%209.23702%208.88589%209%208.88589C8.76537%208.88589%208.53327%208.8045%208.34275%208.63972L1.52831%202.69596C1.55848%202.65202%201.59564%202.61032%201.63508%202.57063ZM1.27737%2012.5673V4.0178L6.21063%208.32145L1.27986%2012.6205C1.27737%2012.6042%201.27737%2012.5859%201.27737%2012.5673ZM15.5032%2013.7864H2.49683C2.27602%2013.7864%202.0694%2013.7283%201.89306%2013.6264L7.09541%209.09264L7.58109%209.51515C7.98753%209.86833%208.49614%2010.0472%209%2010.0472C9.50646%2010.0472%2010.015%209.86833%2010.4214%209.51515L10.9069%209.09264L16.1072%2013.6264C15.9306%2013.7283%2015.724%2013.7864%2015.5032%2013.7864ZM16.7226%2012.5673C16.7226%2012.5859%2016.7226%2012.6042%2016.7202%2012.6205L11.7895%208.32395L16.7226%204.02009V12.5673Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E) no-repeat center center / contain;
        width: 24px;
        height: 24px;
    }

    /* footer */
    .footer {
        margin-top: 110px;
        padding: 52px 0 38px;
    }
    .footer-flex {
        flex-direction: row;
        justify-content: space-between;
    }
    .footer-logo {
        margin: 0;
    }
    .footer-menu {
        width: 63%;
    }
    .footer-nav {
        margin: 0 0 50px;
    }
    .footer-nav-list {
        padding: 0 0 25px;
        margin-bottom: 25px;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-auto-flow: row;
    }
    .footer-nav-list li:nth-child(4) {
        grid-row: 2 / 3;
        grid-column: 1 / 2;
    }
    .footer-nav-list li:nth-child(5) {
        grid-row: 2 / 3;
        grid-column: 2 / 3;
    }
    .footer-nav-list li:nth-child(6) {
        grid-row: 2 / 3;
        grid-column: 3 / 4;
    }
    .footer-nav-list li:nth-child(7) {
        grid-row: 2 / 3;
        grid-column: 4 / 5;
    }
    .footer-nav-list li a {
        line-height: 35px;
    }
    .footer-bottom {
        display: flex;
        align-items: center;
        gap: 0 30px;
    }
    .footer-bottom li a {
        font-size: 13px;
    }
    .copyright {
        margin-top: 0;
        text-align: right;
    }
    .pagetop a {
        transition: all .4s ease;
    }
    .pagetop a:hover {
        transform: translateY(-5px);
    }

    .main {
        padding-top: 82px;
        min-height: calc(100vh - 82px - 310px);
    }

    .mv {
        padding-bottom: 100px;
        margin-bottom: 75px;
    }
    .mv::after {
        width: 220px;
        height: 310px;
        bottom: 0;
        left: -10px;
    }
    .top-slider .swiper-slide {
        transform-origin: 50% 50%;
        margin-left: -13px;
    }
    .top-slider .swiper-slide.swiper-slide-active {
        transform: scale(1.4);
        margin-right: 100px!important;
    }
    .top-slider .swiper-slide:has(+ .swiper-slide-active) {
        margin-right: 100px!important;
    }

    .top-about {
        overflow: visible;
        max-width: 1200px;
        padding: 0 40px;
        margin: 0 auto 120px;
        position: relative;
    }
    .top-about::after {
        width: 150px;
        height: 190px;
        bottom: -100px;
        right: 30px;
    }
    .top-about-block {
        border-radius: 25px;
        width: 58%;
        margin: 0;
        position: relative;
        top: 58px;
        margin: 0 40px 0 auto;
        padding: 50px;
    }
    .top-about-lead {
        font-size: 22px;
    }
    .top-about-detail p + p {
        margin-top: 20px;
    }
    .top-about-block .section-btn {
        margin: 30px auto 0;
        width: 290px;
    }
    

    .top-about-img {
        position: absolute;
        top: 0;
        width: 45vw;
        max-width: 500px;
        border-radius: 25px;
        margin-left: 3vw;
        aspect-ratio: 700 / 940;
    }

    .section-title {
        font-size: 24px;
        gap: 0 22px;
        padding: 70px 0 40px;
    }
    .section-title::before,
    .section-title::after {
        width: 27px;
        height: 22px;
    }
    .section-btn {
        width: 290px;
    }
    .section-btn a {
        font-size: 18px;
        padding: 17px;
        position: relative;
        overflow: hidden;
        transition: all .4s ease;
        z-index: 3;
    }
    .section-btn a::after {
        background:  var(--main-color);
        border-radius: 50%;
        content: "";
        display: block;
        margin: auto;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        width: 100%;
        padding-top: 100%;
        height: 0;
        z-index: -1;
        transform: translateY(-50%) scale(0.1);
        transition: opacity .7s, transform 0s;
        transition-delay: 0s, .4s;
      }
    .section-btn a:hover {
        color: #fff;
        border-color: var(--main-color);
    }
    .section-btn a:hover::after {
        opacity: 1;
        transform: translateY(-50%) scale(1.1);
        transition-delay: 0s;
        transition: opacity .8s, transform .6s ease-in-out;
    }

    .top-news-list {
        max-width: 830px;
        margin: 0 auto;
    }
    .top-news-item .img {
        width: 150px;
    }
    .top-news-item .img img {
        transition: all .8s ease;
    }
    .top-news-item .txt {
        padding-left: 38px;
        width: calc(100% - 150px);
    }
    .top-news-item .ttl {
        font-size: 18px;
        margin-bottom: 8px;
    }
    .top-news-item .meta {
        display: flex;
        align-items: center;
        margin-bottom: 7px;
    }
    .top-news-item .category {
        margin-left: 12px;
        padding-left: 12px;
        position: relative;
    }
    .top-news-item .category::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 1px;
        height: 12px;
        background: var(--text-color);
        transform: translateY(-50%);
    }
    .top-news-item .category a {
        vertical-align: 3px;
    }
    .top-news-item .date {
        font-size: 14px;
    }
    .top-news-item:has(a):hover .img img {
        transform: scale(1.1);
    }

    .top-ranking .section-title {
        gap: 0 25px;
    }
    .top-ranking .section-title::before,
    .top-ranking .section-title::after {
        height: 23px;
        width: 3px;
    }
    .top-ranking .section-btn a:hover {
        color: var(--main-color);
    }
    .top-ranking .section-btn a::after {
        background: #fff;
    }
    
    .top-ranking-list {
        display: flex;
        gap: 0 50px;
        align-items: flex-end;
        padding: 0 20px;
    }
    .top-ranking-item:first-child .img {
        width: 100%;
    }
    .top-ranking-item:nth-child(n + 2) {
        transform-origin: 50% 100%;
    }
    .top-ranking-item {
        width: calc(33.333% - 50px * 2 / 3)!important;
    }
    .top-ranking-item .img {
        box-shadow: 20px 20px 0 #6BAAAC!important;
    }
    .top-ranking-item:nth-child(2) .img {
        width: 84%;
        margin: 0 auto 28px;
    }
    .top-ranking-item:nth-child(3) .img {
        width: 75%;
        margin: 0 auto 30px;
    }
    .top-ranking-item::before {
        top: 24px!important;
        left: 0!important;
        z-index: 3;
        width: 90px!important;
        height: 60px!important;
    }
    .top-ranking-item:nth-child(2)::before {
        top: 27px !important;
        left: 34px !important;
    }
    .top-ranking-item:nth-child(3)::before {
        top: 25px !important;
        left: 45px !important;
    }
    .top-ranking-item:nth-child(2) .name {
        font-size: 20px;
    }
    .top-ranking-item:nth-child(3) .name {
        font-size: 18px;
    }
    .top-ranking-item p {
        font-size: 15px;
        min-height: 42px;
    }

    .top-blog-list {
        display: flex;
        gap: 0 40px;
    }
    .top-blog-item {
        width: calc(33.333% - 40px * 2 / 3);
    }
    .top-blog-item + .top-blog-item {
        margin-top: 0;
    }


}
@media screen and (min-width: 768px) and (max-width: 1100px) {
    .header-inner {
        padding: 0 20px;
    }
    .header-logo {
        width: 180px;
    }
    .header-nav-list {
        gap: 0 25px;
    }
    .header-nav-list li a {
        font-size: 14px;
    }
    .header-contact a {
        font-size: 14px;
        width: 145px;
    }
    .header-contact a::before {
        width: 19px;
        height: 19px;
    }
    .header-nav {
        gap: 0 24px;
    }
    .top-slider .swiper-slide {
        margin-left: -4px;
    }
    .top-slider .swiper-slide.swiper-slide-active,
    .top-slider .swiper-slide:has(+ .swiper-slide-active) {
        margin-right: 70px !important;
    }
    .top-about-block {
        margin-right: 0;
        padding: 35px 25px;
    }
    .top-about-img {
        margin-left: 0;
    }
    .top-about-lead {
        font-size: 18px;
    }
    .top-about-detail p + p {
        margin-top: 10px;
    }
    .footer-logo {
        width: 170px;
    }
    .footer-menu {
        width: 72%;
    }

}
@media screen and (min-width: 1200px) {
    .mv {
        height: calc(100vh - 82px);
        max-height: 700px;
        min-height: 630px;
        padding-top: 120px;
    }
}

/* 追加 */
.breadcrumb {
    margin: 0 20px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.breadcrumb li {
    font-size: 12px;
    white-space: nowrap;
}
.breadcrumb li + li {
    margin-left: 8px;
    padding-left: 9px;
    position: relative;
}
.breadcrumb li + li::before {
    content: "/";
    position: absolute;
    top: 50%;
    left: -1px;
    transform: translateY(-50%);
}
.breadcrumb li:last-child {
    text-overflow: ellipsis;
    overflow: hidden;
}

.page-head {
    padding: 50px 0 35px;
    margin-bottom: 50px;
    position: relative;
    text-align: center;
}
.page-head::before {
    content: "";
    width: 92px;
    height: 2px;
    background: var(--main-color);
    border-radius: 5px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.page-title {
    font-family: var(--font-en);
    font-weight: 600;
    font-size: 28px;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
}
.page-head p {
    font-size: 14px;
    font-weight: 600;
}

.salon-select {
    width: 280px;
    margin: 0 auto 42px;
    position: relative;
}
.salon-select .txt {
    border: 2px solid var(--main-color);
    background: #fff;
    text-align: center;
    padding: 10px 0;
    width: 100%;
    border-radius: 30px;
    position: relative;
}
.salon-select .txt::before {
    content: "";
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_181_664)%22%3E%3Cpath%20d%3D%22M19.5123%2017.1607L16.405%2014.0527L14.0527%2016.405L17.16%2019.513C17.4744%2019.8267%2017.8918%2020%2018.3368%2020C18.7805%2020%2019.198%2019.8267%2019.5123%2019.513C19.8273%2019.1986%2020%2018.7805%2020%2018.3362C20%2017.8919%2019.8267%2017.4744%2019.5123%2017.1607Z%22%20fill%3D%22%238FB9BA%22%2F%3E%3Cpath%20d%3D%22M15.6012%2014.1529L13.9844%2012.5354C13.9868%2012.5317%2013.9868%2012.528%2013.9893%2012.5256C15.0269%2011.1694%2015.5969%209.49094%2015.5957%207.79785C15.5975%205.71656%2014.787%203.7573%2013.3118%202.28395C11.8402%200.811172%209.88528%200%207.78809%200C5.70985%200%203.75551%200.811172%202.28395%202.28395C0.808717%203.75734%20-0.00245535%205.71656%205.58308e-06%207.79848C-0.00183035%209.88039%200.809341%2011.8384%202.28333%2013.3118C3.75551%2014.7852%205.71169%2015.5957%207.79848%2015.5957H7.80583C9.49465%2015.5957%2011.1707%2015.0257%2012.5257%2013.9893C12.5287%2013.9868%2012.5318%2013.9856%2012.5348%2013.9844L14.1522%2015.6018L15.6012%2014.1529ZM11.5113%2011.5112C10.5194%2012.5012%209.20168%2013.0481%207.79727%2013.0505C6.39407%2013.0481%205.07571%2012.5012%204.0845%2011.5112C3.09391%2010.5207%202.54762%209.20168%202.54579%207.79785C2.54762%206.39402%203.09387%205.07566%204.08387%204.08445C5.07508%203.09445%206.39344%202.54879%207.79727%202.54574C7.7979%202.54512%207.79848%202.54574%207.79848%202.54574C9.20168%202.54879%2010.52%203.09445%2011.5113%204.08445C12.5013%205.07504%2013.0475%206.39402%2013.05%207.79906C13.0475%209.20226%2012.5012%2010.5212%2011.5113%2011.5112Z%22%20fill%3D%22%238FB9BA%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_181_664%22%3E%3Crect%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E') no-repeat center center / contain;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
}
.salon-select-list {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 108%;
    left: 50%;
    transform: translate(-50%, -10px);
    background: #fff;
    height: 300px;
    overflow-y: scroll;
    width: 100%;
    border-radius: 10px;
    padding: 10px 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
    z-index: 10;
    transition: all .4s ease;
}
.salon-select-list.is-open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.salon-select-list li {
    font-size: 16px;
    font-weight: 600;
    line-height: 2.2;
}
.salon-select-list li a {
    display: block;
    text-align: center;
}

.salon-block + .salon-block {
    margin-top: 30px;
}
.salon-block dt {
    background: var(--main-color);
    color: #fff;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 10px 0;
}
.salon-item a {
    display: flex;
    border-bottom: 2px solid var(--main-color);
    position: relative;
}
.salon-item a::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2018%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M17.7071%208.70711C18.0976%208.31658%2018.0976%207.68342%2017.7071%207.29289L11.3431%200.928932C10.9526%200.538408%2010.3195%200.538408%209.92893%200.928932C9.53841%201.31946%209.53841%201.95262%209.92893%202.34315L15.5858%208L9.92893%2013.6569C9.53841%2014.0474%209.53841%2014.6805%209.92893%2015.0711C10.3195%2015.4616%2010.9526%2015.4616%2011.3431%2015.0711L17.7071%208.70711ZM0%209H17V7H0V9Z%22%20fill%3D%22%238FB9BA%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
    width: 17px;
    height: 17px;
}
.salon-item .img {
    width: 85px;
    aspect-ratio: 1;
}
.salon-item .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.salon-item .txt {
    width: calc(100% - 85px);
    background: #fff;
    padding: 10px 40px 7px 10px;
}
.salon-item .txt .salon-name {
    font-size: 15px;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}
.salon-item .txt p {
    color: #616161;
    font-size: 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.salon-item .txt p + p {
    margin-top: 3px;
}

.salon-info-wrap {
    margin-bottom: 70px;
}
.salon-info-img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 20px;
}
.salon-info-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.salon-info-text .name {
    font-size: 18px;
    font-weight: 600;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--main-color);
}
.sns-list {
    display: flex;
    align-items: center;
    gap: 0 20px;
    margin-bottom: 30px;
}
.sns-list li {
    width: 24px;
    height: 24px;
}
.sns-list li a {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: inline-block;
}
.salon-table {
    margin-bottom: 25px;
}
.salon-table tr :is(th, td) {
    display: block;
}
.salon-table tr:not(:last-child) {
    margin-bottom: 18px;
    display: block;
}
.salon-table tr th {
    margin-bottom: 5px;
}
.salon-table tr td {
    padding-left: 15px;
}
.salon-table tr a {
    text-decoration: underline;
    padding-right: 15px;
    position: relative;
    word-break: break-all;
}
.salon-table tr a::after {
    content: "";
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%209%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.5%201C8.5%200.723857%208.27614%200.5%208%200.5L3.5%200.5C3.22386%200.5%203%200.723858%203%201C3%201.27614%203.22386%201.5%203.5%201.5L7.5%201.5L7.5%205.5C7.5%205.77614%207.72386%206%208%206C8.27614%206%208.5%205.77614%208.5%205.5L8.5%201ZM1.35355%208.35355L8.35355%201.35355L7.64645%200.646447L0.646447%207.64645L1.35355%208.35355Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E') center center / contain;
    width: 10px;
    height: 10px;
    position: absolute;
    bottom: 6px;
    right: 0;
}
.salon-message {
    border-radius: 10px;
    background: #fff;
    padding: 15px 17px;
    margin-bottom: 30px;
}
.salon-message p {
    font-size: 14px;
    line-height: 1.7;
}
.salon-map-wrap {
    width: 100%;
    aspect-ratio: 335 / 200;
    border-radius: 10px;
    overflow: hidden;
}
.salon-map-wrap iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.salob-map-btn {
    margin: 18px auto 0;
    width: 230px;
}
.salob-map-btn a {
    background: var(--main-color);
    color: #fff;
    text-align: center;
    width: 100%;
    padding: 10px 0;
    font-weight: 600;
    display: inline-block;
    border-radius: 50px;
}
.salon-foot {
    margin: 0 -20px 50px;
    background: var(--light-color);
    padding: 50px 20px 50px;
}
.page-foot-title,
.page-sub-title {
    margin-bottom: 30px;
}
.page-title02 {
    font-size: 20px;
    font-weight: 600;
    font-family: "Montserrat",  "Zen Maru Gothic", serif;
    letter-spacing: 0.1em;
    position: relative;
    width: fit-content;
    margin: 0 auto;
    padding: 0 15px;
}
.page-title02::before {
    content: "";
    position: absolute;
    top: calc(50% - 2px);
    left: 100%;
    width: 30px;
    height: 2px;
    border-radius: 10px;
    background: var(--main-color);
}
.page-title02::after {
    content: "";
    position: absolute;
    top: calc(50% - 2px);
    right: 100%;
    width: 30px;
    height: 2px;
    border-radius: 10px;
    background: var(--main-color);
}
:is(.page-foot-title, .page-sub-title) p {
    font-size: 13px;
    text-align: center;
}
.cut-list {
    display: flex;
    gap: 23px 7px;
    flex-wrap: wrap;
}
.cut-item {
    width: calc(50% - 7px / 2);
    background: #fff;
    border-radius: 5px;
    position: relative;
}
.style-page .cut-item {
    padding-bottom: 26px;
}
.cut-item-wrap {
    padding: 8px;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.cut-img {
    aspect-ratio: 150 / 200;
    width: 100%;
    height: fit-content;
    margin-bottom: 5px;
    position: relative;
}
.cut-img > p {
    display: contents;
}
.cut-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cut-img .more-btn {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    text-align: center;
    width: 124px;
    padding: 2px 0;
    background: var(--main-color);
    border: 1px solid #fff;
    color: #fff;
    border-radius: 20px;
    font-weight: 600;
    letter-spacing: 0.1em;
}
.cut-title {
    font-size: 14px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 2px;
    font-weight: 600;
    letter-spacing: 0.05em;
}
.cut-category {
    color: #484848;
    font-size: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center;
}
.style-page .cut-category {
    padding-bottom: 5px;
    border-bottom: 1px solid var(--main-color);
}
.cut-salon-link {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 10px 10px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    width: 100%;
    color: var(--link-color);
    font-weight: 600;
    text-align: center;
}

.page-back a {
    display: inline-block;
    font-size: 14px;
    padding-left: 20px;
    position: relative;
}
.page-back a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2014%2021%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1.02387%2012.0774C-0.00347092%2011.2767%20-0.00347301%209.72328%201.02386%208.92255L10.7705%201.3258C12.0839%200.302095%2014%201.238%2014%202.90325L14%2018.0968C14%2019.762%2012.0839%2020.6979%2010.7705%2019.6742L1.02387%2012.0774Z%22%20fill%3D%22%238FB9BA%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
    width: 12px;
    height: 17px;
}

.style-head {
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.style-search-btn {
    padding: 7px 36px 7px 14px;
    border: 2px solid var(--main-color);
    border-radius: 40px;
    font-size: 13px;
    font-weight: 500;
    background: #fff;
    position: relative;
    cursor: pointer;
}
.style-search-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_206_2280)%22%3E%3Cpath%20d%3D%22M13.6586%2012.0125L11.4835%209.83691L9.83691%2011.4835L12.012%2013.6591C12.2321%2013.8787%2012.5243%2014%2012.8358%2014C13.1464%2014%2013.4386%2013.8787%2013.6586%2013.6591C13.8791%2013.439%2014%2013.1464%2014%2012.8353C14%2012.5243%2013.8787%2012.2321%2013.6586%2012.0125Z%22%20fill%3D%22%238FB9BA%22%2F%3E%3Cpath%20d%3D%22M10.9209%209.90699L9.78907%208.77477C9.79079%208.7722%209.79079%208.76963%209.79248%208.76794C10.5188%207.81859%2010.9178%206.64366%2010.917%205.4585C10.9183%204.00159%2010.3509%202.63011%209.31823%201.59876C8.28814%200.56782%206.9197%200%205.45166%200C3.99689%200%202.62886%200.56782%201.59877%201.59876C0.566102%202.63014%20-0.00171875%204.00159%203.90816e-06%205.45893C-0.00128125%206.91627%200.566539%208.28688%201.59833%209.31826C2.62886%2010.3496%203.99818%2010.917%205.45894%2010.917H5.46408C6.64626%2010.917%207.8195%2010.518%208.76797%209.79251C8.7701%209.79078%208.77223%209.78994%208.77437%209.78909L9.90656%2010.9213L10.9209%209.90699ZM8.05788%208.05787C7.36359%208.75087%206.44118%209.13369%205.45809%209.13538C4.47585%209.13366%203.553%208.75085%202.85915%208.05787C2.16574%207.36446%201.78334%206.44118%201.78205%205.4585C1.78334%204.47582%202.16571%203.55296%202.85871%202.85912C3.55256%202.16612%204.47541%201.78415%205.45809%201.78202C5.45853%201.78158%205.45894%201.78202%205.45894%201.78202C6.44118%201.78415%207.36403%202.16612%208.05788%202.85912C8.75088%203.55253%209.13325%204.47582%209.13498%205.45934C9.13325%206.44159%208.75085%207.36487%208.05788%208.05787Z%22%20fill%3D%22%238FB9BA%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_206_2280%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E') no-repeat center center / contain;
    width: 14px;
    height: 14px;
}
.style-search {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 40px);
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
    border-radius: 10px;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: all .4s ease;
}
.style-search.is-open {
    opacity: 1;
    visibility: visible;
}
.style-search-inner {
    padding: 34px 28px 32px;
}
.style-search-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.style-search-close::before {
    content: "";
    width: 22px;
    height: 2px;
    background: #8B8B8B;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}
.style-search-close::after {
    content: "";
    width: 22px;
    height: 2px;
    background: #8B8B8B;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}
.style-search-item .checkbox {
    display: none;
}
.style-search-item .txt {
    font-weight: 600;
    padding-left: 24px;
    position: relative;
    cursor: pointer;
}
.style-search-item .txt::before {
    content: "";
    width: 13px;
    height: 13px;
    border-radius: 2px;
    box-shadow: inset 1px 2px 4px rgba(0, 0, 0, .12);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: #fff;
}
.style-search-item .checkbox:checked + .txt::before {
    background: var(--main-color);
}
.style-search-item + .style-search-item {
    margin-top: 12px;
    display: block;
}
.style-search-submit {
    margin-top: 25px;
    background: var(--main-color);
    color: #fff;
    width: 100%;
    padding: 12px 0;
    text-align: center;
    border-radius: 50px;
    display: block;
    font-weight: 700;
}
.style-search-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, .6);
    z-index: 9;
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: all .4s ease;
}
.style-search-bg.is-open {
    opacity: 1;
    visibility: visible;
}

.style-pagenation {
    margin-top: 50px;
}
.screen-reader-text {
    display: none;
}
.navigation > .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 20px;
}
.page-numbers {
    font-size: 15px;
    font-weight: 600;
}
.page-numbers.current {
    background: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--main-color);
    border-radius: 50%;
}
.page-numbers:is(.prev, .next) {
    font-size: 0;
    width: 14px;
    height: 20px;
}
.page-numbers.prev {
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2017%2025%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0.973176%2014.0664C-0.0354727%2013.2657%20-0.0354697%2011.7343%200.973179%2010.9336L13.7565%200.785462C15.0672%20-0.25506%2017%200.678368%2017%202.35189L17%2022.6481C17%2024.3216%2015.0672%2025.2551%2013.7565%2024.2145L0.973176%2014.0664Z%22%20fill%3D%22%238FB9BA%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
}
.page-numbers.next {
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2017%2025%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.0268%2010.9336C17.0355%2011.7343%2017.0355%2013.2657%2016.0268%2014.0664L3.24351%2024.2145C1.93279%2025.2551%20-3.14533e-06%2024.3216%20-3.07217e-06%2022.6481L-2.185e-06%202.35188C-2.11185e-06%200.678363%201.93279%20-0.255057%203.24351%200.785465L16.0268%2010.9336Z%22%20fill%3D%22%238FB9BA%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
}

.style-modal-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.9);
    z-index: 4;
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: all .4s ease;
}
.style-modal-bg.is-open {
    opacity: 1;
    visibility: visible;
}
.style-modal {
    position: fixed;
    z-index: 5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 80vh;
    height: 100%;
    width: calc(100vw - 40px);
    background: var(--bg-color);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
    border-radius: 10px;
    opacity: 0;
    visibility: hidden;
    transition: all .4s ease;
}
.style-modal.is-open {
    opacity: 1;
    visibility: visible;
}
.style-modal-inner {
    padding: 24px 15px 20px;
    overflow-y: auto;
    height: 100%;
}
.style-modal-close {
    position: absolute;
    top: -45px;
    right: 0;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .15);
    z-index: 6;
    cursor: pointer;
}
.style-modal-close::before {
    content: "";
    width: 15px;
    height: 3px;
    background: #8F8F8F;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    border-radius: 10px;
}
.style-modal-close::after {
    content: "";
    width: 15px;
    height: 3px;
    background: #8F8F8F;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    border-radius: 10px;
}
.style-modal-ttl {
    font-size: 18px;
    text-align: center;
    font-weight: 600;
    padding-bottom: 12px;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--main-color);
}
.style-modal-img,
.style-modal-img img {
    width: 100%;
}
.style-modal-img > p {
    display: contents;
}
.style-modal-info {
    margin: 10px 0 35px;
    text-align: center;
}
.style-modal-info .name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
}
.style-modal-info .category {
    font-size: 14px;
    font-weight: 600;
}
.style-modal-block {
    margin-top: 13px;
    background: #fff;
    border-radius: 5px;
    position: relative;
    padding: 26px 12px 12px;
}
.style-modal-block + .style-modal-block {
    margin-top: 32px;
}
.style-modal-block p {
    font-size: 14px;
    line-height: 1.56;
}
.style-modal-block .ttl {
    position: absolute;
    background: var(--main-color);
    color: #fff;
    width: 90px;
    text-align: center;
    padding: 5px 0;
    border-radius: 3px;
    z-index: 6;
    top: -13px;
    left: 0;
    font-weight: 600;
}
.style-graph {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px 0;
    margin-bottom: 18px;
    transform: translateX(3px);
}
.style-graph dt {
    font-weight: 600;
    font-size: 14px;
}
.style-graph dd {
    width: 100%;
}
.graph-list {
    display: flex;
    justify-content: space-between;
    position: relative;
}
.graph-list::before {
    content: "";
    width: 81%;
    height: 2px;
    background: #D9D9D9;
    position: absolute;
    left: 50%;
    top: 4px;
    transform: translateX(-50%);
}
.graph-list li {
    width: calc(100% / 5);
    position: relative;
}
.graph-list li::before {
    content: "";
    width: 10px;
    height: 10px;
    background: #D9D9D9;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.graph-list li.is-active::before {
    background: var(--main-color);
    transform: translateX(-50%) scale(1.4);
}
.graph-list li span {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    display: inline-block;
    width: 100%;
    padding-top: 18px;
}

.article-main {
    margin-bottom: 70px;
}
.news-list {
    display: flex;
    flex-direction: column;
    gap: 30px 0;
    margin-bottom: 50px;
}
.news-item-wrap {
    display: flex;
    gap: 0 20px;
    align-items: center;
}
.news-img {
    width: 34.33%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 5px;
}
.news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.news-text {
    width: calc(100% - 34.33% - 20px);
}
.news-ttl {
    font-size: 16px;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-date {
    margin-top: 4px;
    font-size: 12px;
    font-family: var(--font-en);
    font-weight: 500;
}
.news-category {
    display: flex;
    flex-wrap: wrap;
    gap: 0 5px;
}
.news-category a {
    font-size: 13px;
    font-weight: 600;
    color: var(--link-color);
}
.news-excerpt {
    font-size: 13px;
    color: #777777;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.side-block + .side-block {
    margin-top: 30px;
}
.article-search {
    display: flex;
    border: 1px solid var(--main-color);
    border-radius: 5px;
    overflow: hidden;
}
.article-search-input {
    width: calc(100% - 70px);
    border-radius: 3px 0 0 3px;
    background: #fff;
    font-size: 16px;
    padding: 7px 10px;
}
.article-search-btn {
    width: 70px;
    border-radius: 0 3px 3px 0;
    background: var(--main-color);
    text-align: center;
    font-weight: 600;
    color: #fff;
}
.side-ttl {
    font-weight: 600;
    margin-bottom: 9px;
}
.side-list li a {
    color: var(--link-color);
    display: inline-block;
    padding-left: 25px;
    font-weight: 500;
    position: relative;
}
.side-list li a::before {
    content: "";
    width: 10px;
    height: 1px;
    background: var(--link-color);
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
}

.blog-list {
    width: 81.79%;
    max-width: 500px;
    margin: 0 auto 60px;
    display: flex;
    flex-direction: column;
    gap: 25px 0;
}
.blog-item {
    width: 100%;
}
.blog-item-wrap {
    display: contents;
}
.blog-img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 6px;
}
.blog-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blog-ttl {
    font-size: 16px;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-date {
    font-size: 14px;
    font-family: var(--font-en);
    font-weight: 500;
    margin-bottom: 2px;
    display: inline-block;
}
.blog-category {
    font-size: 13px;
    color: var(--link-color);
    font-weight: 600;
    margin-bottom: 2px;
    display: flex;
    flex-wrap: wrap;
    gap: 0 7px;
}
.blog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
}
.blog-tags .tag {
    font-size: 13px;
}
.blog-tags .tag::before {
    content: "#";
}

.entry-head {
    margin-bottom: 30px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--main-color);
}
.entry-img {
    margin: 0 -20px 12px;
    aspect-ratio: 16 / 9;
}
.entry-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.entry-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
}
.entry-meta {
    display: flex;
    gap: 0 12px;
}
.entry-date {
    padding-right: 12px;
    position: relative;
    font-family: var(--font-en);
    font-weight: 500;
    font-size: 14px;
    margin-top: 4px;
}
.entry-date::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
    background: var(--text-color);
}
.entry-category a {
    color: var(--link-color);
    font-weight: 600;
    font-size: 14px;
}
.entry-body {
    font-size: 16px;
    margin-bottom: 40px;
}
.entry-body > * + * {
    margin-top: 30px;
}
.entry-body h1 {
    background: var(--main-color);
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    padding: 6px 14px;
}
.entry-body h2 {
    border-left: 4px solid var(--main-color);
    border-bottom: 2px solid var(--main-color);
    padding: 0 0 7px 18px;
    font-weight: 600;
    font-size: 20px;
    color: var(--link-color);
}
.entry-body h3 {
    font-size: 18px;
    font-weight: 600;
    padding-bottom: 4px;
    border-bottom: 2px dotted var(--main-color);
    color: var(--link-color);
}
.entry-body h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--link-color);
}
.entry-body h5 {
    font-weight: 600;
    font-size: 18px;
}
.entry-body h6 {
    font-weight: 600;
}
.entry-body a {
    color: var(--link-color);
    text-decoration: underline;
}
.entry-body ul {
    list-style: disc;
    padding-left: 20px;
}
.entry-body ol {
    list-style: decimal;
    padding-left: 20px;
}
.entry-body li + li {
    margin-top: 8px;
}
.entry-body .wp-element-caption {
    font-size: 13px;
    margin-top: 5px;
}
.entry-body .wp-block-image {
    text-align: center;
}
blockquote {
    border: 7px solid var(--light-color);
    padding: 20px 15px 15px;
    background: #fff;
    position: relative;
}
blockquote::before {
    content: "";
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2033%2022%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7.62857%200.732239C8.77143%200.110944%209.74286%20-0.114981%2010.5429%200.054465C11.4%200.167426%2012%200.534555%2012.3429%201.15585C12.6857%201.83363%2012.6%202.42668%2012.0857%202.93502C11.5714%203.44335%2010.7429%204.06465%209.6%204.79891C6.34286%206.66279%204.71429%209.11974%204.71429%2012.1697C4.71429%2013.1299%204.88571%2013.9207%205.22857%2014.542C5.68571%2013.7512%206.28571%2013.1017%207.02857%2012.5933C7.82857%2012.085%208.68571%2011.8308%209.6%2011.8308C11.0286%2011.8308%2012.2286%2012.2827%2013.2%2013.1864C14.2286%2014.0901%2014.7429%2015.3327%2014.7429%2016.9142C14.7429%2018.4957%2014.1714%2019.7383%2013.0286%2020.642C11.8857%2021.4892%2010.5143%2021.941%208.91429%2021.9975C6.4%2022.054%204.28571%2021.1503%202.57143%2019.2864C0.857143%2017.4225%200%2014.9938%200%2012.0003C0%209.45862%200.685714%207.25585%202.05714%205.39196C3.42857%203.47159%205.28571%201.91835%207.62857%200.732239ZM25.8857%200.732239C27.0286%200.110944%2028%20-0.114981%2028.8%200.054465C29.6571%200.167426%2030.2571%200.534555%2030.6%201.15585C30.9429%201.83363%2030.8571%202.42668%2030.3429%202.93502C29.8286%203.44335%2029%204.06465%2027.8571%204.79891C24.6%206.66279%2022.9714%209.11974%2022.9714%2012.1697C22.9714%2012.6781%2023.0286%2013.1299%2023.1429%2013.5253C23.2571%2013.9207%2023.3714%2014.2596%2023.4857%2014.542C23.9429%2013.7512%2024.5429%2013.1017%2025.2857%2012.5933C26.0857%2012.085%2026.9429%2011.8308%2027.8571%2011.8308C29.2857%2011.8308%2030.4857%2012.2827%2031.4571%2013.1864C32.4857%2014.0901%2033%2015.3327%2033%2016.9142C33%2018.4957%2032.4286%2019.7383%2031.2857%2020.642C30.1429%2021.4892%2028.7714%2021.941%2027.1714%2021.9975C24.7143%2022.054%2022.6%2021.1503%2020.8286%2019.2864C19.1143%2017.4225%2018.2571%2014.9938%2018.2571%2012.0003C18.2571%209.45862%2018.9429%207.25585%2020.3143%205.39196C21.6857%203.47159%2023.5429%201.91835%2025.8857%200.732239Z%22%20fill%3D%22%238FB9BA%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
    width: 33px;
    height: 22px;
    position: absolute;
    top: -10px;
    left: 5px;
}
blockquote p {
    margin-bottom: 4px;
}
blockquote cite {
    font-size: 14px;
    color: #979797;
}
.entry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    margin-bottom: 10px;
}
.entry-tags .tag {
    font-size: 13px;
}
.entry-tags .tag::before {
    content: "#";
}
.entry-foot-links {
    border-top: 1px solid var(--main-color);
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
}
.entry-foot-links .link a {
    font-size: 14px;
    font-weight: 600;
}
.entry-foot-links .link a.prev {
    padding-left: 24px;
    position: relative;
}
.entry-foot-links .link a.prev::before {
    content: "";
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2014%2021%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1.02387%2012.0774C-0.00347092%2011.2767%20-0.00347301%209.72328%201.02386%208.92255L10.7705%201.3258C12.0839%200.302095%2014%201.238%2014%202.90325L14%2018.0968C14%2019.762%2012.0839%2020.6979%2010.7705%2019.6742L1.02387%2012.0774Z%22%20fill%3D%22%238FB9BA%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
    width: 13px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.entry-foot-links .link a.next {
    padding-right: 24px;
    position: relative;
}
.entry-foot-links .link a.next::before {
    content: "";
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2014%2021%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.9761%208.92255C14.0035%209.72328%2014.0035%2011.2767%2012.9761%2012.0774L3.2295%2019.6742C1.91608%2020.6979%20-2.90231e-06%2019.762%20-2.82952e-06%2018.0968L-2.16539e-06%202.90325C-2.0926e-06%201.238%201.91608%200.302093%203.2295%201.3258L12.9761%208.92255Z%22%20fill%3D%22%238FB9BA%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
    width: 13px;
    height: 20px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.contact-head {
    margin: 60px 0;
}
.req-text {
    padding-left: 20px;
    position: relative;
    width: fit-content;
    margin: 0 auto;
}
.req-text::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #EC3C3C;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.contact-item + .contact-item {
    margin-top: 30px;
}
.contact-item dt {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    position: relative;
    padding-right: 12px;
    width: fit-content;
}
.contact-item dt.req::before {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    top: 5px;
    right: 0;
    border-radius: 50%;
    background: #EC3C3C;
}
.contact-input {
    width: 100%;
    font-size: 16px;
    border: 1px solid #B0B0B0;
    border-radius: 8px;
    padding: 7px 10px;
}
textarea.contact-input {
    height: 177px;
}
.contact-radio {
    display: block;
}
.contact-radio + .contact-radio {
    margin-top: 10px;
}
.contact-radio .radio {
    display: none;
}
.mwform-radio-field .mwform-radio-field-text {
    padding-left: 20px;
    position: relative;
}
.mwform-radio-field .mwform-radio-field-text::before {
    content: "";
    border-radius: 50%;
    border: 1px solid #B0B0B0;
    width: 18px;
    height: 18px;
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
}
.mwform-radio-field .mwform-radio-field-text::after {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--main-color);
    position: absolute;
    top: 50%;
    left: -3px;
    transform: translateY(-50%);
    opacity: 0;
}
.mwform-radio-field .radio:checked + .mwform-radio-field-text::after {
    opacity: 1;
}
.contact-check-wrap {
    display: block;
    width: fit-content;
    margin: 35px auto 40px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.mwform-checkbox-field {
    display: block;
    width: 100%;
}
.contact-check {
    width: 20px;
    height: 20px;
    border-radius: 2px;
    border: 2px solid var(--main-color);
    vertical-align: -4px;
    margin: 0!important;
}
.mwform-checkbox-field-text {
    padding-left: 12px;
    position: relative;
}
.mwform-checkbox-field-text::after {
    content: "";
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2017%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cline%20x1%3D%221.60164%22%20y1%3D%229.39836%22%20x2%3D%227.14282%22%20y2%3D%2214.9395%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%225.72844%22%20y1%3D%2214.9404%22%20x2%3D%2215.8345%22%20y2%3D%224.83428%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
    position: absolute;
    top: 45%;
    left: -23px;
    transform: translateY(-50%);
    z-index: 3;
    width: 17px;
    height: 17px;
    opacity: 0;
}
.contact-check-wrap .contact-check:checked {
    background: var(--main-color);
}
.contact-check-wrap .contact-check:checked + .mwform-checkbox-field-text::after {
    opacity: 1;
}
.mwform-checkbox-field-text a {
    color: var(--link-color);
    font-weight: 600;
}
.contact-btn {
    margin: 30px auto 0;
}
.submit-btn {
    background: var(--main-color);
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    padding: 15px 0;
    border-radius: 50px;
    width: 290px;
    margin: 0 auto;
    display: block;
} 
.mw_wp_form_confirm .contact-btn {
    display: flex;
    flex-direction: column;
    gap: 30px 0;
    margin-top: 60px;
}
.mw_wp_form_confirm .contact-check-wrap {
    display: none;
}
.back-btn {
    width: 160px;
    margin: 0 auto;
    background: #878787;
    text-align: center;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    padding: 10px 0;
    color: #fff;
}
.contact-send {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 30px;
}
.send-text {
    text-align: center;
    font-size: 16px;
    line-height: 2;
    margin-bottom: 42px;
}
.send-link {
    text-align: center;
}
.send-link a {
    padding-left: 28px;
    position: relative;
    font-weight: 600;
    letter-spacing: 0.05em;
}
.send-link a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: url(data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2014%2021%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1.02387%2012.0774C-0.00347092%2011.2767%20-0.00347301%209.72328%201.02386%208.92255L10.7705%201.3258C12.0839%200.302095%2014%201.238%2014%202.90325L14%2018.0968C14%2019.762%2012.0839%2020.6979%2010.7705%2019.6742L1.02387%2012.0774Z%22%20fill%3D%22%238FB9BA%22%2F%3E%3C%2Fsvg%3E) no-repeat center center / contain;
    width: 13px;
    height: 20px;
}

.layout01 {
    margin: 60px auto;
    max-width: 600px;
}
.layout01 .row {
    display: flex;
    flex-direction: column;
    gap: 11px 0;
    padding-bottom: 23px;
    border-bottom: 1px solid #CCCCCC;
    margin-bottom: 23px;
}
.layout01 dt {
    font-weight: 600;
    font-size: 16px;
}
.layout01 dd {
    font-size: 16px;
}
.layout01 dd ul {
    list-style: disc;
    padding-left: 20px;
}
.layout01 dd a {
    text-decoration: underline;
    padding-right: 17px;
    position: relative;
}
.layout01 dd a::after {
    content: "";
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%209%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.5%201C8.5%200.723857%208.27614%200.5%208%200.5L3.5%200.5C3.22386%200.5%203%200.723858%203%201C3%201.27614%203.22386%201.5%203.5%201.5L7.5%201.5L7.5%205.5C7.5%205.77614%207.72386%206%208%206C8.27614%206%208.5%205.77614%208.5%205.5L8.5%201ZM1.35355%208.35355L8.35355%201.35355L7.64645%200.646447L0.646447%207.64645L1.35355%208.35355Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 60%;
    right: 0;
    transform: translateY(-50%);
}
.layout02 {
    font-size: 14px;
}
.layout02 dl {
    padding-bottom: 25px;
    border-bottom: 1px solid #CCCCCC;
    margin-bottom: 25px;
}
.layout02 dl dt {
    font-weight: 600;
    margin-bottom: 16px;
}
.layout02 dl dd ul {
    list-style: disc;
    padding: 0 8px 0 25px;
}
.layout02 dl dd ul li + li {
    margin-top: 8px;
}
.layout02 dl dd > * + * {
    margin-top: 16px;
}
.error-message {
    margin-bottom: 60px;
    line-height: 1.6;
}
.error-message p + p {
    margin-top: 16px;
}

.search-results {
    margin: 30px 0;
}
.search-results p {
    border-bottom: 2px dotted var(--light-color);
    padding-bottom: 6px;
    font-size: 16px;
}


@media screen and (min-width: 768px) {
    .breadcrumb {
        max-width: 1280px;
        margin: 0 auto;
        padding: 5px 40px 15px;
    }

    .page-head {
        padding: 136px 0 36px;
        background: url(../img/page_head.svg) no-repeat center top / contain;
        margin-bottom: 80px;
    }
    .page-title {
        font-size: 34px;
        margin-bottom: 5px;
    }
    .page-head p {
        font-size: 16px;
    }

    .salon-select {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto 70px;
        padding: 0 40px;
    }
    .salon-select-list {
        opacity: 1;
        visibility: visible;
        transform: translate(0);
        position: static;
        background: none;
        box-shadow: none;
        height: auto;
        overflow: auto;
        width: 100%;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .salon-select-list li {
        width: calc(100% / 9 - 10px * 8 / 9);
    }
    .salon-select-list li a {
        border-radius: 30px;
        border: 2px solid var(--main-color);
        transition: all .4s ease;
    }
    .salon-select-list li a:hover {
        background: var(--main-color);
        color: #fff;
    }

    .salon-block + .salon-block {
        margin-top: 50px;
    }
    .salon-block dt {
        padding: 12px 0;
        margin-bottom: 30px;
    }
    .salon-list {
        display: flex;
        flex-wrap: wrap;
        gap: 32px 50px;
    }
    .salon-item {
        width: calc(50% - 50px / 2);
    }
    .salon-item a {
        border-right: 2px solid var(--main-color);
    }
    .salon-item a::before {
        opacity: 0;
        right: 21px;
        transition: all .4s ease;
    }
    .salon-item a:hover::before {
        opacity: 1;
        transform: translate(5px, -50%);
    }
    .salon-item .img {
        width: 105px;
        overflow: hidden;
    }
    .salon-item .img img {
        transition: all .4s ease;
    }
    .salon-item a:hover .img img {
        transform: scale(1.1);
    }
    .salon-item .txt {
        width: calc(100% - 105px);
    }
    .salon-item .txt .salon-name {
        font-size: 18px;
        margin-bottom: 5px;
    }
    .salon-item .txt {
        padding: 13px 50px 7px 17px;
    }
    .salon-item .txt p {
        font-size: 16px;
    }

    .salon-info-wrap {
        margin-bottom: 86px;
    }
    .salon-info-flex {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 32px;
    }
    .salon-info-img {
        width: 41%;
        margin-bottom: 0;
    }
    .salon-info-text {
        width: calc(100% - 41% - 60px);
    }
    .salon-info-text .name {
        font-size: 24px;
        padding-bottom: 18px;
        margin-bottom: 23px;
    }
    .salon-table {
        margin-bottom: 0;
    }
    .salon-table tr:not(:last-child) {
        display: table-row;
        margin-bottom: 0;
    }
    .salon-table tr :is(th, td) {
        display: table-cell;
    }
    .salon-table tr th {
        margin-bottom: 0;
        width: 110px;
    }
    .salon-table tr td {
        padding: 0 0 23px 0;
    }
    .salon-message {
        padding: 27px 38px;
        margin-bottom: 46px;
    }
    .salon-message p {
        font-size: 16px;
    }
    .salon-map-wrap {
        aspect-ratio: auto;
        height: 300px;
        width: 100%;
    }
    .salob-map-btn {
        margin-top: 25px;
    }
    .salob-map-btn a {
        transition: all .4s ease;
    }
    .salob-map-btn a:hover {
        transform: translateY(4px);
    }
    .salon-foot {
        padding: 58px 0 72px;
    }
    .page-foot-title,
    .page-sub-title {
        margin-bottom: 40px;
    }
    .page-title02 {
        font-size: 24px;
        margin-bottom: 4px;
        padding: 0 30px;
    }
    .page-title02::before,
    .page-title02::after {
        width: 50px;
    }
    :is(.page-foot-title, .page-sub-title) p {
        font-size: 14px;
    }

    .cut-list {
        gap: 20px;
    }
    .cut-item {
        width: calc(25% - 20px * 3 / 4);
    }
    .cut-item-wrap {
        padding: 17px 17px 20px;
    }
    .cut-img {
        margin-bottom: 12px;
    }
    .cut-title {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 7px;
        flex-grow: 0;
    }
    .cut-category {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: block;
        height: 23px;
    }
    .page-back a {
        font-weight: 600;
    }
    .page-back a::before {
        transition: all .3s ease;
    }
    .page-back a:hover::before {
        transform: translate(-5px, -50%);
    }

    .style-head {
        margin-bottom: 20px;
    }
    .style-search-btn {
        font-weight: 600;
        font-size: 15px;
    }
    .style-search-btn::after {
        width: 17px;
        height: 17px;
        right: 13px;
    }
    .style-search {
        width: 600px;
    }
    .style-search-inner {
        padding: 40px 50px 32px;
    }
    .style-search-submit {
        width: 300px;
        margin: 27px auto 0;
    }
    .cut-img .more-btn {
        font-size: 14px;
    }
    .cut-salon-link {
        font-size: 14px;
        padding: 0 17px 15px;
    }
    .cut-item {
        transition: all .4s ease;
    }
    .cut-item:has(a.cut-item-wrap):hover {
        box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
    }
    .style-pagenation {
        margin-top: 60px;
    }
    .navigation > .nav-links {
        gap: 0 27px;
    }
    .page-numbers {
        font-size: 20px;
    }
    .page-numbers.current {
        width: 55px;
        height: 55px;
    }
    .page-numbers:is(.prev, .next) {
        width: 17px;
        height: 25px;
        margin: 0 10px;
    }

    .style-modal {
        width: 90vw;
        max-width: 1120px;
        height: 80vh;
        max-height: 600px;
        top: 56%;
    }
    .style-modal-inner {
        padding: 60px 40px;
    }
    .style-modal-flex {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .style-modal-pic {
        width: 33.33%;
        background: #fff;
        padding: 20px;
    }
    .style-modal-detail {
        width: 63%;
    }
    .style-modal-img {
        aspect-ratio: 288 / 380;
    }
    .style-modal-img img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .style-modal-info {
        margin: 10px 0 0;
    }
    .style-modal-ttl {
        font-size: 25px;
        text-align: left;
        padding: 10px 0 15px;
        margin-bottom: 30px;
    }
    .style-modal-block {
        padding: 35px 25px 24px;
    }
    .style-modal-block + .style-modal-block {
        margin-top: 40px;
    }
    .style-modal-block .ttl {
        left: 14px;
    }
    .style-graph {
        flex-direction: row;
    }
    .style-graph + .style-graph {
        margin-top: 30px;
    }
    .style-graph dt {
        width: 70px;
        text-align: right;
        font-size: 16px;
        padding-right: 10px;
    }
    .style-graph dd {
        width: calc(100% - 70px);
    }
    .graph-list {
        transform: translateY(10px);
    }
    .graph-list li span {
        font-size: 14px;
        padding-top: 21px;
        white-space: nowrap;
    }
    .style-modal-block p {
        font-size: 16px;
        font-weight: 500;
    }
    .style-modal-close {
        width: 46px;
        height: 46px;
        top: 16px;
        right: 16px;
        box-shadow: inset 2px 4px 6px rgba(0, 0, 0, .08);
    }
    .style-modal-close::before,
    .style-modal-close::after {
        width: 21px;
    }

    .article-list-wrap {
        display: flex;
        justify-content: space-between;
    }
    .article-main {
        width: 71.43%;
        padding-right: 5.54%;
        border-right: 1px solid var(--main-color);
    }
    .news-list {
        margin-bottom: 70px;
    }
    .news-item-wrap {
        gap: 0 38px;
    }
    .news-item-wrap:has(a) .news-img img {
        transition: all 1s ease;
    }
    .news-item-wrap:has(a):hover .news-img img {
        transform: scale(1.1);
    }
    .news-img {
        width: 150px;
        height: 150px;
    }
    .news-text {
        width: calc(100% - 150px - 38px);
    }
    .news-ttl {
        font-size: 18px;
        margin-bottom: 5px;
    }
    .news-ttl a {
        transition: all .4s ease;
    }
    .news-ttl:hover a {
        color: var(--main-color);
    }
    .news-meta {
        display: flex;
        align-items: center;
        gap: 0 12px;
        margin-bottom: 10px;
    }
    .news-date {
        font-size: 14px;
        padding-right: 12px;
        position: relative;
        margin-top: 6px;
    }
    .news-date::after {
        content: "";
        position: absolute;
        width: 1px;
        height: 12px;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        background: var(--text-color);
    }

    .article-sidebar {
        width: 23.93%;
    }

    .blog-list {
        width: 100%;
        max-width: none;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 40px 20px
    }
    .blog-item {
        width: calc(33.333% - 20px * 2 / 3);
    }
    .blog-item .blog-img img {
        transition: all 1s ease;
    }
    .blog-item:hover .blog-img img {
        transform: scale(1.1);
    }
    .blog-ttl {
        margin-bottom: 4px;
    }
    .blog-ttl a {
        transition: all .4s ease;
    }
    .blog-ttl a:hover {
        color: var(--main-color);
    }
    .blog-meta {
        display: flex;
        align-items: center;
        gap: 0 12px;
        margin-bottom: 4px;
    }
    .blog-date {
        font-size: 14px;
        padding-right: 12px;
        position: relative;
        margin-top: 2px;
    }
    .blog-date::after {
        content: "";
        position: absolute;
        width: 1px;
        height: 12px;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        background: var(--text-color);
    }
    .blog-excerpt {
        font-size: 14px;
        color: #898989;
        display: -webkit-box!important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 4px;
    }


    .entry-head {
        padding-bottom: 20px;
        margin-bottom: 40px;
    }
    .entry-img {
        margin: 0 0 14px;
    }
    .entry-title {
        font-size: 22px;
        margin-bottom: 12px;
    }
    .entry-body {
        margin-bottom: 60px;
    }
    .entry-body h1 {
        font-size: 26px;
    }
    .entry-body h2 {
        font-size: 24px;
    }
    .entry-body h3 {
        font-size: 22px;
    }
    .entry-body h4 {
        font-size: 20px;
    }
    .entry-body h5 {
        font-size: 20px;
    }
    .entry-body h6 {
        font-size: 18px;
    }
    blockquote {
        border: 15px solid var(--light-color);
        padding: 25px 20px 20px;
    }
    .entry-tags {
        margin-bottom: 20px;
    }
    .entry-foot-links {
        padding-top: 20px;
    }
    
    .contact-body {
        max-width: 660px;
        margin: 0 auto;
    }
    .contact-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .contact-item + .contact-item {
        margin-top: 45px;
    }
    .contact-item:first-of-type,
    .contact-item:last-of-type {
        align-items: flex-start;
    }
    .contact-item dt {
        width: 220px;
        margin-bottom: 0;
        padding: 0 0 0 20px;
    }
    .contact-item dt.req::before {
        right: auto;
        left: 0;
        top: 10px;
        
    }
    .contact-item dd {
        width: calc(100% - 220px);
    }
    .contact-input {
        padding: 10px 13px;
    }
    .mw_wp_form .vertical-item + .vertical-item {
        margin-top: 15px;
    }
    .mwform-radio-field .mwform-radio-field-text {
        padding-left: 25px;
    }
    .contact-check-wrap {
        margin-top: 60px;
    }
    .contact-btn {
        margin-top: 65px;
    }
    .submit-btn {
        padding: 17px 0;
        font-size: 18px;
        transition: all .4s ease;
        width: 360px;
    }
    .submit-btn:hover,
    .back-btn:hover {
        opacity: .7;
    }
    .mw_wp_form_confirm .contact-btn {
        flex-direction: row-reverse;
        gap: 0 60px;
        justify-content: center;
    }
    .mw_wp_form_confirm .submit-btn {
        margin: 0;
    }
    .mw_wp_form_confirm .back-btn {
        margin: 0;
    }
    .back-btn {
        transition: all .4s ease;
    }

    .contact-send {
        font-size: 24px;
        margin-bottom: 32px;
    }
    .send-text {
        margin-bottom: 90px;
    }
    .send-link a::before {
        transition: all .4s ease;
    }
    .send-link a:hover::before {
        transform: translate(-5px, -50%);
    }

    .layout01 {
        max-width: 780px;
        margin-bottom: 110px;
    }
    .layout01 .row {
        padding: 0 0 30px;
        margin-bottom: 30px;
        flex-direction: row;
        align-items: center;
    }
    .layout01 dt {
        width: 45%;
        padding-left: 100px;
    }
    .layout01 dd {
        width: 55%;
    }

    .layout02  {
        max-width: 680px;
        margin: 0 auto;
        font-size: 16px;
        line-height: 1.6;
    }
    .layout02 dl {
        padding-bottom: 30px;
        margin-bottom: 30px;
    }
    .layout02 dl dt {
        margin-bottom: 24px;
    }
    .layout02 dl dd ul {
        padding: 0 10px 0 30px;
    }
    
    .error-message {
        text-align: center;
        margin-bottom: 80px;
    }
    
    .search-results p {
        font-size: 18px;
        padding-bottom: 9px;
    }

}
@media screen and (min-width: 768px) and (max-width: 1000px) {
    .cut-list {
        gap: 12px;
    }
    .cut-item {
        width: calc(25% - 12px * 3 / 4);
    }
    .cut-item-wrap {
        padding: 10px 10px 12px;
    }
    .style-modal {
        height: auto;
    }
    .style-modal-inner {
        padding: 30px;
    }
    .style-modal-close {
        width: 30px;
        height: 30px;
        top: 9px;
        right: 9px;
    }
    .style-modal-close::before, .style-modal-close::after {
        width: 16px;
    }
    .style-modal-pic {
        width: 41%;
    }
    .style-modal-detail {
        width: 55%;
    }
    .style-modal-ttl {
        font-size: 20px;
    }
    .style-modal-block {
        padding: 20px 16px 12px;
    }
    .style-graph {
        flex-direction: column;
        gap: 0;
    }
    .style-graph dt {
        width: 50px;
        font-size: 14px;
    }
    .style-graph dd {
        width: 100%;
    }
    .style-modal-block + .style-modal-block {
        margin-top: 30px;
    }
    .graph-list li span {
        font-size: 12px;
    }
    .style-modal-block p {
        font-size: 14px;
    }
    .style-modal-block .ttl {
        font-size: 14px;
        width: 70px;
        padding: 4px 0;
    }



}