@charset "UTF-8";
/*
Theme Name: ricerca life_v002
Description: karakurikoによりバージョンアップ
Author: unkler
version： 2.0.0
*/

/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*,*::before,*::after{box-sizing:border-box}*{margin:0}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root,#__next{isolation:isolate}
ul,
ol {
    padding-left: 0;
    list-style-type: none;
}
a {
    cursor: pointer;
    transition: all 0.3s ease;
}
a:hover {
    opacity: 0.7;
}

body {
    position: relative;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: #323232;
    letter-spacing: 0.05em;
}
body::before{
    content: '';
    position: fixed;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100vh;
    background: url(./images/01_bg.png) no-repeat 50% 0 / cover;
}

.wrapper {
    max-width: 500px;
    min-height: calc(100svh - 122px);
    margin-inline: auto;
    background-color: #fff;
    filter: drop-shadow(1.11px 1.11px 3.33px rgba(175, 163, 163, 0.5));
    border-radius: 45px;
    overflow: hidden;
}

/* headline */
.section__headline {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.75;
    text-align: center;
}

h2.section__headline.form-search__headline{
    font-weight: 400;
}

.section__headline--color {
    background-color: #123857;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

/* btn */
.btn {
    background-color: #123857;
    width: 100%;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 22.5px;
    filter: drop-shadow(2px 2px 3px rgba(155, 155, 155, 0.5));
    margin-inline: auto;
}
.btn--area {
    max-width: 300px;
}
.btn--ranking {
    background-color: #fff;
    max-width: 300px;
    box-shadow: 1.3px 1.3px 2.5px rgba(155, 155, 155, 0.5);
    margin-top: 30px;
}
.btn--clear {
    background-color: #fff;
    box-shadow: 1.3px 1.3px 2.5px rgba(155, 155, 155, 0.5);
    width: 90px;
}
.btn--popup {
    width: calc(100% - 100px);
}
.btn__text {
    position: relative;
    color: #fff;
    font-size: 16px;
    line-height: 1;
}
.btn__text::after {
    position: absolute;
    top: calc(50% - (11px  / 2));
    right: -16.6px;
    content: "";
    width: 7px;
    height: 11px;
    background: url(https://sc.mayuly.net/wp-content/themes/ricerca-life_v002/images/icon_arrow_white.svg) no-repeat center / contain;
}
.btn--ranking .btn__text,
.btn--clear .btn__text {
    color: #323232;
}
.btn--ranking .btn__text::after {
    background: url(https://sc.mayuly.net/wp-content/themes/ricerca-life_v002/images/icon_arrow_gray.svg) no-repeat center / contain;
}
.btn-back {
    display: inline-block;
    min-width: 7.07px;
    height: 11.78px;
    background: url(https://sc.mayuly.net/wp-content/themes/ricerca-life_v002/images/icon_arrow_green.svg) no-repeat center / contain;
}
.btn-back--area,
.btn-back--summary {
    position: absolute;
    top: calc(50% - (11.78px / 2));
    left: 30px;
}
@media (width < 500px) {
    .btn-back--area,
    .btn-back--summary {
        left: 16px;
    }
}

/* close */
.close {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: url(https://sc.mayuly.net/wp-content/themes/ricerca-life_v002/images/icon_close.svg) no-repeat center / 14.09px 13.4px;
    margin-left: 8px;
    cursor: pointer;
}
.close--popup {
    margin-left: 0;
    position: absolute;
    top: 20px;
    right: 20px;
}

/* header */
.header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* height: 72px; */
    padding: 18px 10px 18px;
}
.header__logo {
    display: block;
    max-width: 200px;
    width: 100%;
    height: auto;
}
.header__link {
    display: block;
}
@media (width < 500px) {
    .header {
        
    }
    .header__logo {
        width: 200px;
        height: auto;
    }
}

/* footer */
.footer {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer__copy {
    font-size: 12px;
    color: #646464;
}
@media (width < 500px) {
    .footer {
        height: 40px;
    } 
}

/* catch */
.catch {
    text-align: center;
    width: 100%;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #64BBB4;
}
.catch__text {
    font-size: 14px;
    color: #fff;
}

/* パンクズ */
.topicpath__list {
    padding: 11px 22px 0;
    font-size: 0;
    line-height: 1;
}
.topicpath__item {
    color: #969696;
    display: inline-block;
    position: relative;
    font-size: 10px;
}
.topicpath__item:nth-child(n+2)::before {
    content: "＞";
    margin-left: 2px;
    margin-right: 2px;
}
.topicpath__link {
    color: #123857;
    text-decoration: none;
}
@media (width < 500px) {
    .topicpath__list {
        padding: 10px 16px 0;
    }
}

/* input-search */
.input-search {
    position: relative;
    height: 48px;
}
.input-search--form-search {
    margin-top: 17.1px;
}
.input-search__text,
.input-search__submit {
    position: absolute;
}
.form-search__input-text,
.form-search__input-submit {
    position: absolute;
}
.input-search__text {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-left: 46.6px;
    border: 0;
}
.input-search__text--border {
    border: 1px solid #646464;
}
.input-search__text::placeholder {
    color: #B9B9B9;
}
.input-search__submit {
    width: 18.44px;
    height: 20.45px;
    top: calc(50% - (20.45px / 2));
    left: 11.4px;
    background: url(https://sc.mayuly.net/wp-content/themes/ricerca-life_v002/images/icon_search.svg) no-repeat center / contain;
    border: none;
    font-size: 0;
    cursor: pointer;
}

/* キーワードから探す */
.form-search__wrap {
    padding-top: 64px;
    padding-bottom: 48px;
}
.topicpath__list + .form-search__wrap {
    padding-top: 24px;
}
.form-search {
    width: 100%;
    max-width: 350px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.form-search__headline {
    line-height: 1;
}
.form-search + .btn--area {
    margin-top: 30px;
    margin-bottom: 16px;
}
@media (width < 500px) {
    .form-search__wrap {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* area search */
.area-search {
    background-color: #EBF6F5;
    padding: 40px 32px 46px;
}
.area-search__list {
    margin-top: 30px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}
.area-search__item {
    width: calc((100% - 20px) / 3);
}
.area-search__link {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 76.47px;
    background-color: #fff;
    filter: drop-shadow(0.33px 0.33px 0.67px rgba(175, 163, 163, 0.5));
    border-radius: 4.78px;
    background-color: #fff;
    color: #323232;
}
@media (width < 500px) {
    .area-search {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* special */
.special {
    padding-top: 47px;
}
.special--color {
    padding-top: 0;
}
.special__inner {
    padding: 34px 30px 47px;
}
.special__title {
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    border-bottom: 1px solid #323232;
    padding-bottom: 11.5px;
}
.special__list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 15px;
    margin-top: 20px;
}
.special__item {
    width: calc((100% - 20px) / 2);
    box-shadow: 0.46px 0.46px 1px rgba(175, 163, 163, 0.75);
    border-radius: 5.11px;
    overflow: hidden;
}
.special__link {
    display: flex;
    background-color: #fff;
    color: #323232;
    text-decoration: none;
}
.special__image-wrap {
    width: 70px;
}
.special__image {
    object-fit: cover;
    aspect-ratio: 70 / 115;
}
.special__text-wrap {
    width: calc(100% - 70px);
    padding: 10px;
    display: flex;
    flex-flow: column;
}
.special__text {
    font-size: 13px;
    line-height: 1.769;
    letter-spacing: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.special__number-wrap {
    margin-top: auto;
    margin-left: auto;
    margin-right: 16px;
}
.special__number {
    font-size: 12px;
    padding: 0 6.7px;
    background-color: #EBF6F5;
    border-radius: 6.7px;
    line-height: 16px;
    position: relative;
}
.special__number::after {
    position: absolute;
    top: calc(50% - (10.74px / 2));
    right: -13.67px;
    content: "";
    width: 6.27px;
    height: 10.74px;
    background: url(https://sc.mayuly.net/wp-content/themes/ricerca-life_v002/images/icon_arrow_gray.svg) no-repeat center / contain;
}
@media (width < 500px) {
    .special__inner {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ranking */
.ranking__inner {
    padding: 30px 30px 47px;
}
.ranking__list {
    display: flex;
    flex-flow: column;
    gap: 20px;
}
.ranking__item {
    width: 100%;
    background-color: #fff;
    filter: drop-shadow(1.06px 1.06px 2.11px rgba(175, 163, 163, 0.5));
    border-radius: 5px;
    padding: 16px;
}
.ranking__link {
    display: block;
    text-decoration: none;
    color: #323232;
}
.ranking__shop-name {
    font-size: 16px;
    line-height: 1.625;
}
.ranking__info-list {
    display: flex;
    justify-content: flex-start;
    margin-top: 10px;
}
.ranking__info-item {
    color: #646464;
    font-size: 13px;
    line-height: 1.75;
    padding-left: 18px;
}
/* CloudWorks: unkler追記 
  first-child、nth-childを使用すると「access」がnull,「cut_price」がデータありの場合、「cut_price」に「icon_train.svg」が
  適用されてしまうので固定のクラス名へ変更
*/
.ranking__info-item-train {
    background: url(https://sc.mayuly.net/wp-content/themes/ricerca-life_v002/images/icon_train.svg) no-repeat center left / 11.39px 16.11px;
    margin-right: 34px;
}
.ranking__info-item-cut {
    background: url(https://sc.mayuly.net/wp-content/themes/ricerca-life_v002/images/icon_cut.svg) no-repeat center left / 14.88px 16.22px;
}
/* CloudWorks: unkler追記ここまで */

/* .ranking__info-item:first-child {
    background: url(https://ricerca.life/wp-content/themes/ricerca-life/images/icon_train.svg) no-repeat center left / 11.39px 16.11px;
    margin-right: 34px;
}
.ranking__info-item:nth-child(2) {
    background: url(https://ricerca.life/wp-content/themes/ricerca-life/images/icon_cut.svg) no-repeat center left / 14.88px 16.22px;
} */
.ranking__contents {
    display: flex;
    align-items: center;
    margin-top: 10px;
}
.ranking__image-wrap {
    width: 200px;
    margin-right: 10px;
}
.ranking__image {
    object-fit: cover;
    aspect-ratio: 200 / 112;
}
.ranking__note-list {
    border-top: 2px solid #D2ECFB;
    width: calc(100% - 200px - 10px);
}
.ranking__note-item {
    border-bottom: 2px solid #D2ECFB;
    padding-left: 42px;
    background-repeat: no-repeat;
    background-size: 22px 22px;
    background-position: center left 6px;
    display: flex;
    align-items: center;
    height: 38px;
}
/* CloudWorks: unkler追記 
  first-child、nth-childを使用すると「hrb」がnull,「mnm」がデータありの場合、「mnm」に「icon_community01.png」が
  適用されてしまうので固定のクラス名へ変更
    (「rtb」「ggl」も同様の理由で固定のクラス名へ変更)
*/
.ranking__note-item-hpb {
    background-image: url(https://sc.mayuly.net/wp-content/themes/ricerca-life_v002/images/icon_community01.png);
}
.ranking__note-item-mnm {
    background-image: url(https://sc.mayuly.net/wp-content/themes/ricerca-life_v002/images/icon_community02.png);
}
.ranking__note-item-rtb {
    background-image: url(https://sc.mayuly.net/wp-content/themes/ricerca-life_v002/images/icon_community03.png);
}
.ranking__note-item-ggl {
    background-image: url(https://sc.mayuly.net/wp-content/themes/ricerca-life_v002/images/icon_community04.png);
}
/* CloudWorks: unkler追記ここまで */

/* .ranking__note-item:first-child {
    background-image: url(https://ricerca.life/wp-content/themes/ricerca-life/images/icon_community01.png);
}
.ranking__note-item:nth-child(2) {
    background-image: url(https://ricerca.life/wp-content/themes/ricerca-life/images/icon_community02.png);
}
.ranking__note-item:nth-child(3) {
    background-image: url(https://ricerca.life/wp-content/themes/ricerca-life/images/icon_community03.png);
} */
.ranking__comment,
.ranking__star {
    line-height: 1;
    font-size: 13px;
}
.ranking__comment {
    padding-left: 22px;
    background: url(https://sc.mayuly.net/wp-content/themes/ricerca-life_v002/images/icon_ranking_fukidashi.svg) no-repeat top 2px left / 16.36px 11.31px;
    min-width: 60px;
    width: 60%;
}
.ranking__star {
    padding-left: 18px;
    background: url(https://sc.mayuly.net/wp-content/themes/ricerca-life_v002/images/icon_ranking_star.svg) no-repeat center left / 14.09px 13.4px;
    width: 40%;
}
.ranking__text {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.667;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
@media (width < 500px) {
    .ranking__inner {
        padding-left: 16px;
        padding-right: 16px;
    }
    .ranking__contents {
        flex-flow: column;
    }
    .ranking__image-wrap,
    .ranking__note-list {
        width: 100%;
    }
    .ranking__image-wrap {
        margin-right: 0;
    }
    .ranking__note-list {
        margin-top: 24px;
    }
    .ranking__comment,
    .ranking__star {
        width: 50%;
    }
}

/* result-header */
.result-header {
    display: flex;
    align-items: center;
    margin-top: 26px;
    padding-left: 16px;
    padding-right: 16px;
}
.result-header__text {
    margin-left: 12.3px;
    font-size: 20px;
    line-height: 1.5;
    font-weight: bold;
}

/* conditions */
.conditions {
    display: flex;
    justify-content: space-between;
    padding: 16px 30px;
    background-color: #EBF6F5;
    margin-top: 26px;
}
.conditions__list {
    display: flex;
    flex-flow: column;
    gap: 10px;
}
.conditions__item {
    font-size: 14px;
    line-height: 1.5;
}
.conditions__trigger {
    width: 92.54px;
    height: 36.81px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    color: #123857;
    background-color: #fff;
    border-radius: 18.41px;
    cursor: pointer;
}
@media (width < 500px) {
    .conditions {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* result-number */
.result-number {
    width: 100%;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #646464;
    border-bottom: 2px solid #D2ECFB;
    padding-left: 30px;
    padding-right: 30px;
}
@media (width < 500px) {
    .result-number {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* popup */
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #EBF6F5;
    padding: 20px 45px 45px;
}

.popup__title {
    text-align: center;
    font-size: 18px;
    line-height: 1;
    margin-bottom: 16px;
    font-weight: bold;
}
.popup__selected {
    display: flex;
    align-items: flex-start;
    font-size: 14px;
    margin-bottom: 20px;
}
.popup__selected-catch {
    color: #64BBB4;
    margin-right: 20px;
    line-height: 1;
}
.popup__selected-list {
    display: flex;
    flex-flow: column;
    gap: 8px;
}
.popup__selected-item {
    color: #646464;
    line-height: 1.2;
}
.popup__inner {
    overflow-y: auto;
    max-width: 500px;
    max-height: 500px;
    margin-inline: auto;
}
.popup__item + .popup__item {
    margin-top: 20px;
}
.popup__catch {
    font-size: 14px;
    line-height: 1;
    color: #123857;
    margin-bottom: 8px;
}
.area__list {
    width: 100%;
    display: flex;
    flex-flow: column;
    gap: 2px;
}
.area__link {
    display: flex;
    align-items: center;
    width: 100%;
    height: 48px;
    font-size: 14px;
    line-height: 1;
    color: #323232;
    text-decoration: none;
    background-color: #fff;
    padding-left: 25.4px;
}
.area__link--arrow {
    background: #fff url(https://sc.mayuly.net/wp-content/themes/ricerca-life_v002/images/icon_arrow_gray.svg) no-repeat center right 12.6px / 7.84px 11.59px;
}
.area__change {
    margin-left: auto;
    margin-right: 16px;
    color: #123857;
}
@media (width < 500px) {
    .popup {
        padding-left: 16px;
        padding-right: 16px;
    }
    .area__link {
        padding-left: 16px;
    }
}

/* menu */
.radio-btn__wrap {
    background-color: #fff;
    padding: 16px 18px 18px;
}
.radio-btn__list {
    display: flex;
    flex-wrap: wrap;
    column-gap: 25px;
    row-gap: 12px;
}
.radio-btn__label {
    position: relative;
    padding-left: 18px;
    line-height: 1;
    font-size: 14px;
}
.radio-btn__input {
    appearance: none;
}
.radio-btn__input::before,
.radio-btn__input::after {
    position: absolute;
    content: "";
}
.radio-btn__input:checked::before {
    width: 12px;
    height: 8px;
    border-left: 3px solid #64BBB4;
    border-bottom: 3px solid #64BBB4;
    transform: rotate(-45deg);
    top: 1px;
    left: 2px;
}
.radio-btn__input::after {
    top: 2px;
    left: 0;
    width: 12px;
    height: 12px;
    border: 1px solid #323232;
    border-radius: 2.4px;
}
.radio-btn__catch {
    position: relative;
    font-size: 14px;
    padding-left: 12px;
    line-height: 1;
    margin-bottom: 18px;
}
.radio-btn__catch::before {
    content: "";
    width: 4.68px;
    height: 16px;
    background-color: #64BBB4;
    position: absolute;
    top: 0;
    left: 0;
}
.popup__btn {
    padding-top: 16px;
}
.popup__btn-inner {
    display: flex;
    gap: 10px;
    max-width: 500px;
    margin-inline: auto;
}

/* area */
.area__header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 26px;
}
.area__headline {
    background-color: #D2ECFB;
    font-size: 14px;
    font-weight: 400;
    color: #123857;
    width: 100%;
    height: 58px;
    padding-left: 30px;
    display: flex;
    align-items: center;
    margin-top: 25px;
}
.area__inner {
    border-bottom: 2px solid #D2ECFB;
}
.area__item {
    border-top: 2px solid #D2ECFB;
    font-size: 16px;
}
.area__item--child {
    padding-left: calc(30px + 1em);
}
.area__trigger,
.area__item-link {
    display: flex;
    align-items: center;
    width: 100%;
    height: 60px;
    padding-right: 42px;
}
.area__trigger {
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    padding-left: 30px;
}
.area__trigger::after {
    content: "";
    width: 7.84px;
    height: 11.59px;
    background: url(https://sc.mayuly.net/wp-content/themes/ricerca-life_v002/images/icon_arrow_gray.svg) no-repeat center / contain;
    position: absolute;
    top: calc(50% - (11.59px / 2));
    right: 30px;
    transform: rotate(90deg);
}
.area__trigger:hover {
    opacity: 0.7;
}
.area__trigger.show {
    color: #123857;
}
.area__trigger.show::after {
    transform: rotate(-90deg);
}
.area__list--child {
    display: none;
}
.area__trigger.show + .area__list--child {
    display: block;
}
.area__item-link {
    text-decoration: none;
    color: #323232;
    background: url(https://sc.mayuly.net/wp-content/themes/ricerca-life_v002/images/icon_arrow_gray.svg) no-repeat center right 30px / 7.84px 11.59px;
}
@media (width < 500px) {
    .area__headline,
    .area__trigger {
        padding-left: 16px;
    }
    .area__item--child {
        padding-left: calc(16px + 1em);
    }
}

/* summary */
.summary-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 26px;
    padding-left: 48px;
    padding-right: 30px;
}
/* CloudWorks: unkler追記 */
.summary-header__text {
    font-size: 18px;
    font-weight: bold;
}
/* CloudWorks: unkler追記ここまで */
.summary-map {
    display: flex;
    align-items: flex-start;
    padding: 16px 30px;
    border-top: 2px solid #D2ECFB;
    margin-top: 22px;
}
.summary-map__left {
    width: calc(100% - 45.92px);
}
.summary-map__right {
    width: 45.92px;
}
.summary-map__address {
    font-size: 14px;
    line-height: 1.6;
}
.summary-map__train {
    font-size: 13px;
    background: url(https://sc.mayuly.net/wp-content/themes/ricerca-life_v002/images/icon_train.svg) no-repeat center left / 11.39px 16.11px;
    padding-left: 16px;
    line-height: 16px;
    margin-top: 8px;
}
.summary-map__icon {
    width: 45.92px;
    height: 45.92px;
}
@media (width < 500px) {
    .summary-header {
        padding-left: 32px;
        padding-right: 16px;
    }
    .summary-map {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/*  */
.reviews__list {
    padding-left: 30px;
    padding-right: 30px;
    display: flex;
    flex-flow: column;
    gap: 16px;
}
.reviews__item {
    display: flex;
    align-items: center;
    padding-left: 16px;
    padding-right: 32px;
    height: 48px;
    background-color: #fff;
    filter: drop-shadow(1.05px 1.05px 2.1px rgba(175, 163, 163, 0.5));
    border-radius: 5px;
}
.reviews__icon {
    width: 30px;
    height: 30px;
}
.reviews {
    margin-left: 24px;
    margin-right: 32px;
    color: #646464;
    font-size: 10px;
    font-weight: 500;
}
.reviews__num {
    font-size: 15px;
    color: #123857;
    line-height: 1;
}
.evaluation {
    display: flex;
    align-items: center;
    line-height: 1;
    margin-left: auto;
    width: 55%;
}
.evaluation__catch {
    font-size: 12px;
    color: #646464;
    padding-top: 4px;
}
.evaluation__stars {
    --rating: 0;
    --star-size: 24px;
    --star-color: #FFE66E;
    --star-background: #F0F0F0;
    display: inline-block;
    font-size: 0;
    position: relative;
    margin-left: 8px;
    margin-right: 8px;
}
.evaluation__stars::before {
    content: '★★★★★';
    font-size: var(--star-size);
    color: var(--star-background);
}
.evaluation__stars::after {
    content: '★★★★★';
    font-size: var(--star-size);
    color: var(--star-color);
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--rating) / 5 * 100%);
    overflow: hidden;
}
.evaluation__num {
    font-size: 18px;
    font-weight: 500;
    color: #123857;
    padding-top: 4px;
}
@media (width < 500px) {
    .reviews__list {
        padding-left: 16px;
        padding-right: 16px;
    }
    .reviews__item {
        padding: 16px;
        flex-wrap: wrap;
        height: auto;
    }
    .reviews__icon {
        width: 24px;
        height: 24px;
    }
    .reviews {
        margin-left: 16px;
        margin-right: 24px;
    }
    .evaluation {
        display: flex;
        align-items: center;
        line-height: 1;
        margin-top: 4px;
        margin-left: 40px;
        width: 100%;
    }
    .evaluation__catch {
        font-size: 12px;
        color: #646464;
        padding-top: 4px;
    }
    .evaluation__stars {
        --rating: 0;
        --star-size: 24px;
        --star-color: #FFE66E;
        --star-background: #F0F0F0;
        display: inline-block;
        font-size: 0;
        position: relative;
        margin-left: 8px;
        margin-right: 8px;
    }
    .evaluation__stars::before {
        content: '★★★★★';
        font-size: var(--star-size);
        color: var(--star-background);
    }
    .evaluation__stars::after {
        content: '★★★★★';
        font-size: var(--star-size);
        color: var(--star-color);
        position: absolute;
        top: 0;
        left: 0;
        width: calc(var(--rating) / 5 * 100%);
        overflow: hidden;
    }
    .evaluation__num {
        font-size: 18px;
        font-weight: 500;
        color: #64BBB4;
        padding-top: 4px;
    }
}

.summary__shop-info {
    margin-top: 28px;
}
.summary__shop-image {
    width: 100%;
    max-width: 500px;
    height: 280px;
    aspect-ratio: 500 / 280;
    object-fit: cover;
}
.summary__shop-lead,
.summary__shop-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    padding-left: 30px;
    padding-right: 30px;
}
.summary__shop-lead {
    -webkit-line-clamp: 3;
    color: #123857;
    font-size: 16px;
    line-height: 1.625;
    margin-top: 24px;
}
.summary__shop-text {
    -webkit-line-clamp: 6;
    font-size: 14px;
    line-height: 1.786;
    margin-top: 16px;
    margin-bottom: 40px;
}
.summary__headline {
    width: 100%;
    height: 70px;
    font-size: 18px;
    font-weight: bold;
    background-color: #123857;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 30px;
    padding-right: 30px;
}
.summary-coupon__list {
    width: 100%;
    margin-top: 30px;
    display: flex;
    flex-flow: column;
    gap: 20px;
    padding-left: 30px;
    padding-right: 30px;
}
.summary-coupon__item {
    background-color: #fff;
    box-shadow: 1.5px 1.5px 3px rgba(175, 163, 163, 0.5);
    border-radius: 4px;
}
.summary-coupon__link {
    display: flex;
    padding: 16px;
    text-decoration: none;
    color: #323232;
}
.summary-coupon__icon {
    width: 30px;
    height: 30px;
    margin-right: 16px;
}
.summary-coupon__contents-top {
    display: flex;
}
.summary-coupon__contents{
    width: 350px;
}
.subject__list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-top: 2px;
}
.subject__item {
    font-size: 10px;
    background-color: #D2ECFB;
    height: 14px;
    padding-left: 6px;
    padding-right: 6px;
    display: flex;
    align-items: center;
}
.subject__item--round,
.subject__item--new {
    margin-right: 8px;
    border-radius: 7px;
}
.subject__item--new {
    background-color: #64BBB4;
    color: #fff;
}
.summary-coupon__price {
    font-size: 18px;
    font-weight: 700;
    color: #323232;
    line-height: 1;
    margin-left: auto;
}
.summary-coupon__text {
    margin-top: 4px;
    color: #323232;
    font-size: 14px;
    line-height: 1.571;
}
@media (width < 500px) {
    .summary__shop-lead,
    .summary__shop-text,
    .summary__headline,
    .summary-coupon__list {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* summary-salon */
.summary-salon {
    margin-top: 60px;
}

/* tab */
.summary-tab {
    display: flex;
    flex-wrap: wrap;
    padding: 44px 30px 0;
}
.summary-tab__label {
    color: #323232;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #fff;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(50% - 8px);
    border-radius: 20px;
    filter: drop-shadow(1.22px 1.22px 2.43px rgba(175, 163, 163, 0.5));
}
input[name="tab_switch"] + .summary-tab__label + input[name="tab_switch"] + .summary-tab__label {
    margin-left: 16px;
}
.summary-tab__label:hover {
    opacity: 0.7;
}
.summary-tab__content {
    flex: 100%;
    display: none;
    overflow: hidden;
}
input[name="tab_switch"] {
    display: none;
}
.summary-tab input:checked + .summary-tab__label {
    color: #323232;
    background-color: #D2ECFB;
}
#tab01:checked ~ #tab01_content,
#tab02:checked ~ #tab02_content {
    display: block;
}
.summary-tab__content{
    position: relative;
    animation: fadeIn 1s ease;
}
@media (width < 500px) {
    .summary-tab {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* donut-chart */
.donut-chart__box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
}
.donut-chart {
    min-width: 160px;
    height: 160px;
    border-radius: 50%;
    background: conic-gradient(
        #F0F0F0 0% calc(var(--percentage) * 1%),
        #123857 calc(var(--percentage) * 1%) 100%
    );
    position: relative;
}
.donut-chart::before {
    content: "";
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.donut-chart__text {
    color: #123857;
    font-size: 16px;
}
@media (width < 500px) {}

/* bar-graph */
.bar-graph {
    margin-top: 40px;
    display: flex;
    flex-flow: column;
    gap: 20px;
}
.bar-graph__item {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.bar-graph__catch,
.bar-graph__num {
    font-size: 14px;
    width: 55px;
}
.bar-graph__num {
    text-align: right;
}
.bar-graph__background,
.bar-graph__ratio {
    height: 14px;
    border-radius: 7px;
    max-width: 330px;
}
.bar-graph__background {
    position: relative;
    width: 100%;
    background-color: #F0F0F0;
}
.bar-graph__ratio {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #123857;
}
@media (width < 500px) {
    .bar-graph__catch,
    .bar-graph__num {
        font-size: 12px;
    }
}

/* summary-about */
.summary-about {
    margin-top: 60px;
}
.about__list-wrap {
    padding: 40px 30px 50px;
}
.about__list {
    display: flex;
    align-items: flex-start;
    border-bottom: 2px solid #E4F3F2;
    margin-top: 16px;
    padding-bottom: 16px;
    font-size: 14px;
}
.about__term {
    width: 30%;
}
.about__desc {
    width: 70%;
}
@media (width < 500px) {
    .about__list-wrap {
        padding-left: 16px;
        padding-right: 16px;
    }
    .about__list {
        margin-top: 12px;
        padding-bottom: 12px;
        font-size: 14px;
    }
}

/* CloudWorks: unkler追記 */
.hidden {
    display: none;
}
.text-decoration__none {
    text-decoration: none;
}
.pagination {
    display: flex;
    justify-content: center;
    padding: 0;
}
.pagination a, .pagination span {
    font-size: 12px;
    margin: 10px 2px;
    padding: 8px 7px;
    text-decoration: none;
    color: #123857;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.pagination a:hover, .pagination .current {
    background-color: #123857;
    color: #fff;
    border-color: #123857;
}

.zero_search_result {
    text-align: center;
    margin-top: 30px;
    font-size: 0.9rem;
}
/* CloudWorks: unkler追記ここまで */

/* CloudWorks: karakuriko追記ここから */
/* キービジュアル */
.kv_area{
    background: url(./images/01_kv.jpg) no-repeat 30% 50% / cover;
    aspect-ratio: 500 / 460;
    min-height: 460px;
    padding-top: 131px;
    /* padding-left: 75px;
    padding-right: 75px; */
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 40px;
    width: 100%;
}
/* 追加 */
.kv_area .kv_search{
	margin-top: 100px;
}
/* 追加 ここまで */
.kv_copy{
    display: flex;
    flex-direction: column;
	align-items: center;
    margin: 0 auto 29px;
    /* margin-bottom: 29px; */
    max-width: 350px;
	text-align: center;
}
.kv_copy span{
	display: inline-block;
    width: fit-content;
    color: #123857;
    background: #FFFFFF;
    padding: 0 2px;
    font-size: 26px;
    letter-spacing: 1.3px;
    line-height: 1.25;
}
/* 追加 */
.kv_copy span + span{
	margin-top:1.2rem;
}
/* 追加 ここまで */
.kv_subcopy{
    color: #636464;
    font-size: 14px;
    line-height: calc(25 / 14);
    letter-spacing: 0.7px;
    max-width: 350px;
    margin: 0 auto 37px;
}

.form-search{
    margin-inline: unset;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 25px 25px 0 0;
    overflow: hidden;
    margin: 0 auto;
}
.form-search .form-search__headline{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #123857;
    min-height: 48px;
    color: #FFFFFF;
    font-size: 20px;
    line-height: calc(29 / 20);
    font-weight: 700;
}
.form-search .input-search--form-search{
    margin: unset;
    width: 100%;
}
.form-search .input-search__text--border{
    border: unset;
}
.input-search__submit{
    background: url(./images/kennsaku.png) no-repeat center / contain;
}
/* .form-search .input-search__submit{
    background: url(./images/kennsaku.png) no-repeat center / contain;
} */

.area-search{
    background: #D2ECFB;
}
.section__headline{
    color: #123857;
}

.area-search__list{
    gap: 20px 10px;
}
.area-search__link{
    height: auto;
    min-height: 50px;
    box-shadow: 0px 3px 6px #00000029;
    color: #123857;
    border-radius: 30px;
}

.commit{
    padding: 40px 30px 65px;
}
.commit .section__headline{
    margin-bottom: 38px;
}
.commit_box{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px 28px;
}
.commit_box_item{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8.62px;
    width: calc(50% - 14px);
    border-radius: 30px 30px 0 0;
    overflow: hidden;
    text-decoration: none;
}
.commit_box_item h3{
    width: fit-content;
    margin: 0 auto;
    text-align: center;
    font-size: 14px;
    line-height: calc(16.8 / 14);
    color: #123857;
    font-weight: 400;
	/* 追加 */
	min-height: 2.4em;
	display: grid;
	place-items: center
	/* 追加 ここまで */
}
.commit_box_item img{
    aspect-ratio: 206 / 120;
    object-fit: cover;
    height: auto;
}
.count{
    position: absolute;
    top: 94px;
    right: 10px;
    transform: translate(0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #123857;
    width: fit-content;
    height: 16px;
    padding: 0 8px;
    border-radius: 10px;
    line-height: 1;
    font-size: 12px;
    color: #FFFFFF;
    font-weight: 400;
}

.column{
    border-top: 10px solid #D2ECFB;
    padding: 40px 30px 65px;
}
.column .section__headline{
    margin-bottom: 30px;
}

.column_box{
    display: flex;
    flex-direction: column;
    gap: 62px;
    margin-bottom: 53px;
}
.column_box_item{
    display: flex;
    flex-direction: column;
    gap: 23px;
    text-decoration: none;
}
.column_box_item img{
    aspect-ratio: 440 / 240;
    height: auto;
    object-fit: cover;
    border-radius: 30px;
}
.column_box_item h3{
    color: #123857;
    font-size: 18px;
    line-height: calc(21.6 / 18);
    font-weight: 400;
}
.cloumn_btn{
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 246px;
    width: 100%;
    min-height: 70px;
    padding: 0 20px;
    margin: 0 auto;
    border: 1px solid #123857;
    border-radius: 40px;
    box-shadow: 0px 3px 6px #00000029;
    font-size: 17px;
    line-height: calc(20.4 / 17);
    font-weight: 400;
    color: #123857;
    text-decoration: none;
}

/* エリア検索 */
.catch{
    background: unset;
}
.catch__text{
    font-size: 18px;
    color: #123857;
}
.header_area{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 11px;
    background: url(./images/01_bg.png) no-repeat 50% 50% / cover;
}

.header_area .form-search__wrap{
    width: 100%;
    padding-top: 36px;
    padding-bottom: 48px;
}
.header_area .topicpath__list{
    padding-top: 18px;
}
.header_area .btn{
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 246px;
    width: 100%;
    min-height: 70px;
    padding: 0 20px;
    border: 1px solid #123857;
    border-radius: 40px;
    box-shadow: 0px 3px 6px #00000029;
    font-size: 17px;
    line-height: calc(20.4 / 17);
    font-weight: 400;
    color: #123857;
    text-decoration: none;
    filter: unset;
}
.header_area .btn__text{
    color: #123857;
    font-size: 17px;
    letter-spacing: 0.85px;
}
.header_area .btn__text::after{
    display: none;
}

/* 地域選択 */
.topicpath__list{
    display: flex;
    justify-content: center;
    gap: 9px;
    padding-top: 18px;
    flex-wrap: wrap;
}
.topicpath__link{
    font-size: 11px;
}
.topicpath__item{
    font-size: 11px;
}
.topicpath__item:nth-child(n+2)::before{
    content: '〉';
}
.area__headline{
    background: #D2ECFB;
    color: #123857;
    font-size: 16px;
}
.footer__copy{
    color: #123857;
    font-size: 16px;
    font-weight: 200;
}
.area__item{
    border-color: #D2ECFB;
}
.area__header{

}
.area__header-text{
    color: #123857;
    font-size: 20px;
    font-weight: 700;
}

/* district-list */
.sub_text p{
    width: fit-content;
    margin: 23px auto 10px;
    font-size: 16px;
    line-height: calc(20.4 / 16);
    font-weight: 400;
    color: #123857;
}
.sub_text + .result-header{
    margin-top: 0;
    align-items: flex-start;
    padding-left: 30px;
    padding-right: 30px;
}
.sub_text + .result-header .result-header__text{
    letter-spacing: unset;
    margin-left: 16px;
}
.sub_text + .result-header .btn-back{
    
}
.conditions{
    align-items: center;
    margin-top: 30px;
    background: #123857;
}
.conditions__item{
    font-size: 13px;
    color: #FFFFFF;
    font-weight: 400;
}
.conditions__trigger{
    font-size: 13px;
    width: 80px;
    height: 34px;
}

/* ポップアップ */
.popup.logged-in{
    top: 32px;
}
.popup{
    padding-top: 51px;
    background: #D2ECFB;
}
.popup__title{
    margin-bottom: 30px;
    font-size: 20px;
    letter-spacing: 0;
    color: #123857;
}
.input-search__submit{

}
.popup__catch{
    color: #123857;
}
.popup__inner{
    max-width: 440px;
}
.popup__btn{
    padding-top: 30px;
}
.popup__btn-inner{
    gap: 28px;
    max-width: 440px;
}
.btn{
    height: 70px;
    background: #123857;
    border-radius: 40px;
    letter-spacing: 0.85px;
    font-size: 17px;
}
.btn--clear{
    height: 70px;
    width: 167px;
    box-shadow: 0px 3px 6px #00000029;
    border: 1px solid #123857;
    border-radius: 40px;
    color: #123857;
    background: #FFFFFF;
}
.btn--clear .btn__text{
    color: inherit;
}
.btn--clear .btn__text::after{
    display: none;
}
.conditions__list .close{
    
}
.radio-btn__list{
    row-gap: 14px;
    column-gap: 36px;
}
.result-number{
    color: #123857;
}
.area__item{
    border-top: 3px solid #D2ECFB;
}


.btn--ranking{
    background: #FFFFFF;
    border: 1px solid #123857;
    max-width: 246px;
    box-shadow: 0px 3px 6px #00000029;
}
.btn--ranking .btn__text::after{
    display: none;
}
.btn--ranking .btn__text{
    color: #123857;
    font-weight: 400;
}

.ranking .section__headline--color{
    background: unset;
    height: auto;
    padding: 0 30px;
    font-size: 22px;
    color: #323232;
}
.ranking .sub_text p{
    margin-bottom: 0;
}
.ranking__inner{
    padding: 26px 30px 67px;
}
.ranking__item{
    box-shadow: 0px 3px 6px #00000029;
    filter: unset;
    border-radius: 30px;
    padding: 18px 22px 28px;
}
.ranking__shop-name{
    font-weight: 700;
}
.ranking__info-item{
    color: #323232;
}
.ranking__info-item-train{
    background: url(./images/densha.png) no-repeat center left / 16px 16px;
}
.ranking__info-item-cut{
    background: url(./images/hasami.png) no-repeat center left / 16px 16px;
}
.ranking__comment{
    background: url(./images/kuchikomi.png) no-repeat center left / 17px 17px;
}
.ranking__star{
    background: url(./images/hoshi.png) no-repeat center left / 15px 15px;
}

/* カラム記事 */
.column_wrapper .column{
    border-top: 0;
}
.pagination{
    gap: 18px;
    padding-top: 20px;
}
.pagination a, .pagination span{
    border: unset;
    margin: unset;
    padding: unset;
    padding: 0 2px 6px;
    font-size: 14px;
    line-height: 1;
    color: #323232;
    text-decoration: none;
    border-radius: unset;
}
.pagination a:hover, .pagination .current{
    border: unset;
    background: unset;
    border-bottom: 3px solid #123857;
    color: #323232;
}

.column_single{
    padding-bottom: 56px;
}
.topicpath__item_title {
    display: inline-block;   /* 幅を効かせるため */
    max-width: 300px;        /* ここは好きな幅に調整 */
    white-space: nowrap;     /* 折り返さない */
    overflow: hidden;        /* はみ出しを隠す */
    text-overflow: ellipsis; /* …にする */
    vertical-align: middle;  /* 高さを揃える用 */
}
.column_article_title{
    text-align: center;
}

.single_column_wrapper .column{
    padding-left: 0;
    padding-right: 0;
}
.column_article_header{
    padding: 0 30px;
    margin-bottom: 37px;
}
.column_article_thumb{
    margin-bottom: 35px;
}
.column_article_thumb img{
    width: 100%;
    height: auto;
    aspect-ratio: 500 / 280;
    object-fit: cover;
}
.single_column_wrapper .for_single_column{
    padding: 57px 30px 0;
    border-top: 10px solid #D2ECFB;
}
.single_column_wrapper .for_single_column .column_box{
    margin-bottom: 76px;
}

.column_article_content{
    padding: 0 26px;
}
/* 記事本文のスタイル調整 */
.column_article_content {
    line-height: 1.5;
    color: #323232;
    font-size: 16px;
}

/* 見出し */
.column_article_content h1,
.column_article_content h2 {
    font-size: 20px;
    margin: 0 0 20px;
    line-height: 1.5;
    font-weight: bold;
}
.column_article_content h3 {
    font-size: 18px;
    margin: 0 0 18px;
    font-weight: bold;
}
.column_article_content h4 {
    font-size: 16px;
    margin: 0 0 16px;
    font-weight: bold;
}
.column_article_content h5,
.column_article_content h6 {
    font-size: 14px;
    margin: 0 0 14px;
    font-weight: bold;
}

/* 段落・リンク */
.column_article_content p,
.column_article_content a,
.column_article_content ul,
.column_article_content ol,
.column_article_content li,
.column_article_content blockquote {
    font-size: 16px;
    margin-bottom: 16px;
    letter-spacing: unset;
}

.column_article_content a {
    color: #0066cc;
    text-decoration: underline;
}
.column_article_content a:hover {
    text-decoration: none;
}

/* リスト */
.column_article_content ul,
.column_article_content ol {
    padding-left: 1.5em;
    margin-bottom: 16px;
}
.column_article_content li {
    margin-bottom: 8px;
}

/* 引用 */
.column_article_content blockquote {
    padding: 12px 16px;
    border-left: 4px solid #ccc;
    background: #f9f9f9;
    color: #555;
    font-style: italic;
}

/* 画像 */
.column_article_content img {
    max-width: 100%;
    height: auto;
    margin: 16px 0;
    display: block;
}

/* テーブル */
.column_article_content table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 16px;
}
.column_article_content table th,
.column_article_content table td {
    border: 1px solid #ccc;
    padding: 8px 12px;
    text-align: left;
}
.column_article_content table th {
    background: #f0f0f0;
    font-weight: bold;
}

/* サロン個別 */
.summary__shop-lead{
    font-weight: 700;
}
.summary__shop-text{
    margin-bottom: 56px;
}
.summary__headline{
    background: unset;
    height: auto;
    font-size: 20px;
    letter-spacing: 1px;
    color: #123857;
    margin-bottom: 20px;
    padding-top: 57px;
    border-top: 10px solid #D2ECFB;
}
.about__list-wrap{
    padding-top: 20px;
}
.topicpath__item:nth-child(n+2)::before{
    color: #123857;
}
.topicpath__item:last-of-type::before{
    color: #969696;
}

.column_single{
    padding-top: 26px;
}
.column_article_content ol{
    list-style-type: auto;
}
.column_article_content ol li{
    list-style-type: auto;
}
.column_article_content ul{
    list-style-type: auto;
}
.column_article_content ul li{
    list-style-type: auto;
}
/* CloudWorks: karakuriko追記ここまで */