@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* 新規の場合使用 */
:root {
    --main-color: #5BA01D;
    --sub-color: #EEF2EB;
    --text-color: #333333;
}

/*Saint Andrews Queen:*/
@font-face {
    font-family: "SaintAndrewsQueen";
    src: url("/wp-content/themes/swell_child/font/Saint-Andrews-Queen.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

html,
body,
button,
input,
select,
textarea,
body>* {
    /* 不要な指定は消す */
    /* 不要な指定は消す */
    font-family: "Noto Sans JP", sans-serif;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

body {
    color: var(--text-color);
    font-size: 16px;
    line-height: 1.7;
    padding-top: 120px;
    min-width: 1340px;
    font-weight: 500;
}

.wrap {
    width: 1140px;
    margin: 0 auto;
}

.wrap.mid {
    width: 1240px;
}

.wrap.lr {
    width: 1340px;
}

a[href $='.pdf'] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    text-decoration: underline;
    color: #fff;
    line-height: 1.5;
}

a[href $='.pdf']::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 30px;
    height: 38px;
    mask-image: url(/wp-content/themes/swell_child./image/icon/icon_pdf.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    margin-right: 15px;
    background: #fff;
}

a[href $='.pdf']:hover {
    text-decoration: none;
}

.c-categoryList__link {
    color: #fff !important;
}

.is-style-btn_shiny a {
    color: #fff !important;
}


/* PC固定ページ 共通設定 */
.common_page_main {
    background: #F5F5F5;
    padding-block: 100px;
}

.common_page_main .title_box {
    text-align: center;
    z-index: 3;
    position: relative;
}

.common_page_main .title_box .title {
    font-size: 40px;
    letter-spacing: .05em;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
}

.common_page_wrap {
    padding: 100px 0;
}

.page_butken_heya .common_page_wrap {
    padding: 0 0 100px;
}

.common_page_wrap.staff {
    padding: 0;
}

.not_found .text {
    text-align: center;
}

.reserve_text {
    text-align: center;
    font-size: 30px;
}

/* パンくず */
.breadcrumb {
    font-size: 12px;
    color: #3E3E3E;
    letter-spacing: .08em;
}

.breadcrumb a {
    text-decoration: none;
    color: #3E3E3E;
}

/* PC固定ページ 404ページ */
#page_404 {
    text-align: center;
}

#page_404 .num {
    font-size: 100px;
    font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#page_404 .text {
    margin-bottom: 1em;
    font-size: 16px;
}

/* ここから下を追記 */
a,
a:link,
a:visited {
    color: unset;
    transition: 0.3s;
}

a[href^="tel:"] {
    pointer-events: none;
}

.ab {
    position: absolute;
}

.re {
    position: relative;
}

.flex.column {
    flex-direction: column;
}

.flex.reverse {
    flex-direction: row-reverse;
}

.column.reverse {
    flex-direction: column-reverse;
}

.grid {
    display: grid;
}

/* h1用視覚的非表示 */
.visually_hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@supports (clip-path: inset(50%)) {
    .visually_hidden {
        clip-path: inset(50%);
        clip: auto;
    }
}

/*テキスト*/

.back_green {
    background-color: var(--main-color);
    padding: 0 8px 2px;
    border-radius: 2px;
    color: #fff;
    line-height: 1;
    margin-inline: 2px;
}

.en {
    font-family: "arial", sans-serif;
}

.writing {
    font-family: "SaintAndrewsQueen";
    color: #ACD389;
    font-weight: 100;
}

.cavea {
    font-family: "Caveat", cursive;
}

.green {
    color: var(--main-color);
}

.yellowtail {
    font-family: "Yellowtail", cursive;
    font-weight: 400;
    font-style: normal;
}

.ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
}

.under {
    text-decoration: underline;
}

/*ボタン*/

a.common_btn,
a.common_btn:visited {
    width: 320px;
    max-height: 70px;
    text-align: center;
    background-color: #EFEFEF;
    padding: 21px 0;
    color: var(--main-color);
    font-weight: 700;
    display: inline-block;
    position: relative;
    letter-spacing: 0.06em;
}

a.common_btn::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    background: url(./image/btn_arrow.png) center no-repeat;
    background-size: contain;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}


.grid_btn_area {
    justify-content: flex-start;
    gap: 6px;
}

.grid_btn_area .grid_btn {
    display: flex;
    justify-content: center;
    padding: 13px 0;
    border: solid 2px var(--main-color);
    border-radius: 3px;
    gap: 7px;
    font-size: 13px;
    color: var(--main-color);
    font-weight: 700;
    width: 160px;
}

.grid_btn_area .grid_btn.btn_green {
    color: #fff;
    background-color: var(--main-color);
}

.grid_btn_area .grid_btn.line {
    color: #fff;
    background-color: #06C755;
    border-color: #06C755;
}

.grid_btn_area .grid_btn.gray {
    color: var(--main-color);
    background-color: #EFEFEF;
    border-color: #EFEFEF;
}

.grid_btn_area .grid_btn_icon {
    height: 25px;
}


/*共通要素*/

.shop_tell .tell {
    position: relative;
    padding-left: 30px;
    font-family: "arial", sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1;
}

.shop_tell .tell::before {
    content: "";
    width: 16px;
    height: 16px;
    display: block;
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    background: url("./image/icon_tell2.png") center no-repeat;
    background-size: contain;
}

.shop_tell .mini {
    font-size: 12px;
}

.back_img_area {
    width: 100%;
    overflow-x: hidden;
    top: 0;
}

.back_img {
    width: 100%;
}


.img_area {
    overflow: hidden;
}

.img_area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    transition: .3s;
}

.hr {
    width: 100%;
    height: 1px;
    background-color: #CCCCCC;
    display: block;
}

/*タイトル*/

.title_area {
    letter-spacing: 0.01em;
    font-weight: 700;
}

.title_area .title {
    font-size: 35px;
    line-height: 0.82;
}

.title_area .en {
    font-size: 14px;
    color: var(--main-color);
    margin-top: 8px;
}

.title_area .text {
    font-weight: 500;
    margin-top: 20px;
    font-size: 14px;
}

.title_area.center {
    text-align: center;
}

.title_area.center .en {
    margin-top: 12px;
}

/* PC ヘッダー */

#pc_header {
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding-top: 13px;
    gap: 10px;
    align-items: flex-start;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 9999;
}

#pc_header .header_top {
    gap: 27px;
    justify-content: space-between;
}

#pc_header .logo_area {
    gap: 10px;
    flex-shrink: 0;
    align-items: center;
}

#pc_header .logo {
    width: 145px;
}

#pc_header .h1 {
    font-size: 12px;
    line-height: 1.5;
}

#pc_header .btn_area {
    gap: 20px;
}

#pc_header .icon_btn_area {
    gap: 15px;
    align-items: flex-end;
}

#pc_header .icon_btn {
    font-size: 12px;
    gap: 5px;
    font-weight: 700;
    align-items: center;
}

#pc_header .icon_btn_area .icon {
    width: 24px;
}

#pc_header .header_bottom {
    background-color: #FAFAFA;
    width: 100%;
}

#pc_header .header_menu_list {
    text-align: center;
}

#pc_header .header_menu {
    position: relative;
    width: calc(100% / 6);
}

#pc_header .header_menu a {
    padding: 15px 0;
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.01em;
    position: relative;
    display: block;
}

#pc_header .header_menu::before,
#pc_header .header_menu:last-child::after {
    content: "";
    width: 1px;
    height: 20px;
    background-color: #DBDBDB;
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

#pc_header .header_menu:last-child::after {
    left: unset;
    right: 0;
}

#pc_header .header_menu a::after {
    content: "";
    width: 100%;
    height: 3px;
    background-color: var(--main-color);
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: 0.3s;
    opacity: 0;
}

/* fv */

.top_fv_img {
    width: 100%;
}

/* スライダー */
#top_slide {
    margin: 100px 0;
}

.slider_area {
    position: relative;
}

.bx-wrapper {
    max-width: 100% !important;
    box-shadow: none;
    border: none;
    background: inherit;
}

.swiper {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
    padding-bottom: 28px;
}

.swiper-slide {
    width: 520px;
}

/*ページャー*/
.custom_controls {
    width: 100%;
    z-index: 100;
}

.custom_controls .slider-prev,
.custom_controls .slider-next {
    width: 50px;
    height: 50px;
    border-radius: 200px;
    background: #fff;
    border: solid 2px #CCCCCC;
    color: var(--sub-color);
    padding: 10px;
    cursor: pointer;
    font-size: 11px;
    text-align: center;
    position: absolute;
    top: 52%;
    transform: translate(50%, -50%);
    transition: .3s;
    display: block;
}

.custom_controls .slider-prev svg,
.custom_controls .slider-next svg {
    width: 9px;
}


.custom_controls .slider-prev {
    left: calc(50% - 315px);
}

.custom_controls .slider-next {
    right: calc(50% - 257px);
}

.custom_controls .slider-prev svg {
    margin-right: 2.5px;
}

.custom_controls .slider-next svg {
    margin-left: 2.5px;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    display: none;
}

.slider_area .swiper-pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3px;
    display: flex;
    justify-content: center;
}

.slider_area .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0 5px !important;
    background: #333;
    position: relative;
}

.slider_area .swiper-pagination-bullet-active {
    background: #5BA01D;
}

.slider_area .swiper-pagination-bullet-active::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: -3px;
    left: -3px;
    background-color: #DDF2CA;
    display: block;
    z-index: -1;
    border-radius: 200px;
}

/*検索エリア*/
#top_search {
    background-color: var(--sub-color);
    padding-block: 100px;
    overflow-x: hidden;
}

.search_container {
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.search_text_area {
    align-items: flex-start;
    gap: 10px;
}

.search_text_area .text {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 12px;
}

.search_area .flex {
    align-items: flex-start;
}

.search_area .search_box_title {
    gap: 20px;
    margin-bottom: 5px;
}

.search_area .search_box_title .en {
    font-size: 20px;
    font-weight: 700;

}

.search_container .form_box {
    display: flex;
    align-items: center;
    background-color: #fff;
    border: solid 2px #DDDDDD;
    border-radius: 3px;
    width: 500px;
    height: 55px;
    position: relative;
}

.search_container .form_box::before {
    width: 1px;
    height: 25px;
    background-color: #DBDBDB;
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    content: '';
    z-index: 1;
}

.search_container .form_box .search {
    width: 435px;
    height: 100%;
    padding: 0.4em 1.5em;
    flex-shrink: 0;
    position: relative;
    border: 0;
    background-color: #fff;
}

.search_container .form_box .search::placeholder {
    color: #DBDBDB;
}

.search_container .form_box .submit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 61px;
    height: 100%;
    border: none;
    cursor: pointer;
    position: relative;
    padding: 0;
    background-image: url(./image/icon_search2.png);
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0;
    border: 0;
    background-color: #fff;
}


.search_container .search_btn_area {
    gap: 25px;
}

.search_btn_area .search_btn {
    background-color: #fff;
    box-shadow: 0 5px 0 #5BA01D;
    padding: 35px 65px 30px;
    border-radius: 5px;
    gap: 15px;
    font-weight: 600;
    position: relative;
    top: 0;
    align-items: center;
}

.search_btn_area .search_btn .flex {
    gap: 15px;
    text-align: center;
}

.search_btn_area .search_btn .en {
    color: var(--main-color);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.search_btn_area .search_btn .heading:before {
    content: "・・・";
    font-size: 11.5px;
    position: absolute;
    left: 50%;
    bottom: -14px;
    transform: translateX(-50%);
    letter-spacing: -0.3em;
    color: var(--main-color);
}

.search_btn .search_icon_area {
    width: 130px;
    height: 130px;
    background-color: #F7F7F7;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
}


.search_btn .icon {
    max-width: 54px;
    max-height: 59px;
}

.search_btn_area .writing {
    bottom: -77px;
    right: -60px;
    font-size: 72px;
    transform: rotate(-5deg);
}


.scroll_btn_container {
    margin-top: 100px;
    position: relative;
    z-index: 2;
}

.scroll_btn_container .title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin-bottom: 20px;
}

.scroll_btn_area {
    width: 100%;
    grid-template-columns: repeat(6, 365px);
    gap: 23px;
    overflow-x: scroll;
    padding-inline: 10px;
}

.scroll_btn_area .scroll_btn {
    border-radius: 5px;
    background-color: #fff;
}

.scroll_btn_area .scroll_btn .img_area {
    width: 100%;
    height: 200px;
    border-radius: 5px 5px 0 0;
}

.scroll_btn_area .scroll_btn .text_area {
    padding: 20px;
    align-items: flex-start;
    gap: 10px;
}

.scroll_btn_area .scroll_btn .text_area .text {
    font-size: 14px;
    line-height: 1.6;
}

.scroll_btn_area .scroll_btn .scroll_btn_title {
    color: var(--main-color);
    transition: .3s;
    font-weight: 700;
    margin-left: 22px;
    position: relative;
}

.scroll_btn_area .scroll_btn .scroll_btn_title::before {
    width: 14px;
    height: 14px;
    background-image: url("./image/btn_arrow2.png");
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    left: -22px;
    top: 50%;
    transform: translateY(-50%);
    content: '';
}

.scroll_btn_area .scroll_btn .scroll_btn_title::after {
    width: 100%;
    height: 1px;
    background-color: var(--main-color);
    bottom: 0;
    left: 0;
    display: block;
    position: absolute;
    content: '';
    transition: .3s;
}

/*新着物件*/

#top_new {
    padding-block: 100px;
    background-color: #F8F8F8;
}

#top_new .writing {
    font-size: 64px;
    transform: rotate(-5deg);
}

#top_new .writing:nth-of-type(1) {
    top: -10px;
    right: 285px;
}

#top_new .writing:nth-of-type(2) {
    right: 0;
    top: 25px;
}

.thumbnail_container .grid {
    margin-top: 30px;
    grid-template-columns: repeat(4, 270px);
    gap: 28px 20px;
}

.thumbnail_container .thumbnail_item {
    position: relative;
}

.thumbnail_container .thumbnail_item.new::after {
    content: "NEW";
    font-family: "arial", sans-serif;
    color: #fff;
    width: 45px;
    height: 45px;
    background-color: #E83900;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    border-radius: 2px;
    position: absolute;
    align-items: center;
    justify-content: center;
    top: 10px;
    left: 10px;
}

.thumbnail_item .img_area {
    width: 100%;
    height: 200px;
    border-radius: 5px;
}

.thumbnail_item .img_area .img {
    transition: .3s;
}

.thumbnail_item .item_detail {
    padding-top: 13px;
    align-items: flex-start;
    gap: 1px;
}

.thumbnail_item .item_name {
    line-height: 1.2;
    font-weight: 700;
    position: relative;
    display: inline-block;
}

.thumbnail_item .item_name::after {
    content: "";
    width: 0;
    height: 1px;
    background-color: var(--main-color);
    bottom: 0;
    left: 0;
    position: absolute;
    display: block;
    transition: .3s;
}

.thumbnail_item .item_price {
    color: #E83900;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    margin-bottom: .8em;
}

.thumbnail_item .item_price .big {
    font-size: 1.4em;
}

.thumbnail_item .item_space,
.thumbnail_item .item_place {
    position: relative;
    padding-left: 23px;
    font-size: 13px;
    color: #727272;
}

.thumbnail_item .item_space::before,
.thumbnail_item .item_place::before {
    content: "";
    height: 14px;
    min-width: 12px;
    display: block;
    position: absolute;
    left: 2px;
    top: 54%;
    transform: translateY(-50%);
    background-size: contain;
    background-repeat: no-repeat;
}

.thumbnail_item .item_space::before {
    background-image: url("./image/icon_width.png");
}

.thumbnail_item .item_place::before {
    background-image: url("./image/icon_train2.png");
}

/*選ばれる理由*/
#top_reason {
    margin-block: 140px 60px;
}

.reason_container .title_area .writing {
    font-size: 88px;
    top: -100px;
    left: 48%;
    transform: translateX(-50%);
    opacity: 0.3;
    z-index: -1;
}

.reason_container .reason_item_area {
    gap: 20px;
    margin-top: 30px;
}

.reason_item_area .reason_item {
    width: 365px;
}

.reason_item_area .reason_item .img_area {
    width: 100%;
    height: 200px;
}

.reason_item_area .item_title {
    align-items: flex-start;
    font-weight: 700;
    margin-block: 15px;
    position: relative;
    padding-left: 15px;
    letter-spacing: 0.01em;
}

.reason_item_area .item_title::before {
    content: "";
    width: 5px;
    height: 43px;
    background-color: var(--main-color);
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.reason_item_area .item_title .en {
    font-size: 12px;
    color: #727272;
}

.reason_item_area .text {
    color: #727272;
    font-size: 14px;
}

#top_reason .common_btn {
    margin: 25px auto 0;
    display: block;
}

/*バナー*/
#top_banner {
    margin-bottom: 100px;
}

.banner_are {
    text-align: center;
}

.banner_are .banner {
    width: 840px;
    transition: .3s;
}

/*スタッフエリア*/
#top_staff {
    padding: 100px 0;
    background-color: #F8F8F8;
}

.staff_swiper_wrap {
    position: relative;
    margin-inline: auto;
}

.staff_swiper_title {
    background-color: #F8F8F8;
    width: 420px;
    height: 100%;
    top: 0;
    left: 100px;
    z-index: 5;
}

.staff_swiper_title .title_area {
    width: 320px;
    margin: 70px auto;
}

.staff_swiper_title .title_area .en {
    margin-top: 10px;
}

.staff_swiper_title .title_area .text {
    margin-bottom: 50px;
}

.staff_swiper .swiper-slide {
    width: 320px !important;
    height: 480px;
    flex: 0 0 auto;
}

.staff_card {
    margin: 0;
    display: block;
    height: 100%;
}

.staff_card .img {
    transition: .3s;
    width: 100%;
    aspect-ratio: 2/3;
    min-width: 0;
    object-fit: cover;
}

.staff_card::after {
    content: "";
    width: 100%;
    height: 100%;
    background-image: linear-gradient(0deg, rgba(51, 51, 51, 0.7), rgba(51, 51, 51, 0) 50%);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.staff_card .staff_info_area {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 3;
    padding: 20px 10px 20px 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.staff_info_area .staff_name_en {
    writing-mode: vertical-rl;
    color: #fff;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    font-size: 40px;
    flex-shrink: 0;
}

.staff_info_area .staff_info {
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: nowrap;
    color: #fff;
    flex-grow: 2;
    padding-inline: 25px 10px;
    gap: 20px;
    width: 100%;
}

.staff_info_area .staff_info .solid {
    width: 100%;
    height: 100%;
    border-left: solid 1px #fff;
    border-bottom: solid 1px #fff;
    margin-bottom: 10px;
}

.staff_info_area .staff_info .staff_name {
    text-align: left;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.staff_info_area .staff_info .job {
    background-color: var(--sub-color);
    color: var(--main-color);
    padding: 2px 15px 3px;
    font-weight: 500;
}

.staff_info_area .staff_info .name {
    font-size: 24px;
    font-weight: 700;
}


/*ブログエリア*/

#top_blog {
    margin: 100px auto 105px;
}


#top_blog .text.flex {
    align-items: flex-end;
    justify-content: space-between;
    margin: 0 auto 30px;
}

.blog_list {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.blog_list .blog {
    box-shadow: 0 3px 8px rgba(51, 51, 51, 0.1);
    border-radius: 5px;
}

.blog .blog_detail {
    padding: 25px 20px;
    gap: 8px;
    align-items: flex-start;
}

.blog .blog_day {
    color: #656565;
    font-size: 13px;
    position: relative;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.blog .blog_day::before,
.blog .blog_day::after {
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    position: relative;
}

.blog .blog_day::before {
    content: "";
    width: 12px;
    height: 12px;
    background-image: url("./image/icon_sche3.png");
    transition: .3s;
}

.blog .blog_day::after {
    content: "";
    width: 14px;
    height: 14px;
    background-image: url("./image/btn_arrow2.png");
    flex-grow: 10;
    background-position: right;
}

.blog .blog_title {
    color: var(--main-color);
    font-weight: 600;
}

.blog .text.ellipsis {
    -webkit-line-clamp: 2;
    font-size: 14px;
}

.blog .img_area {
    width: 100%;
    height: 180px;
    border-radius: 5px 5px 0 0;
}

.blog_container .writing {
    font-size: 64px;
    letter-spacing: 0.01em;
    transform: rotate(-5deg);
    right: -50px;
    bottom: -80px;
}


/*店舗紹介*/

#top_shop {
    background-color: var(--sub-color);
    padding-block: 100px 130px;
}

.shop_area {
    margin-top: 30px;
}

.shop_area .shop {
    background-color: #fff;
    width: 555px;
    height: 335px;
}

.shop .img_area {
    width: 280px;
    height: 100%;
    flex-shrink: 0;
}

.shop:nth-of-type(1) .img_area img {
    transform: scale(1.3);
    object-position: 40%;
}

.shop:nth-of-type(2) .img_area img {
    object-position: 40%;
}


.shop .flex {
    align-items: flex-start;
}

.shop_info_area {
    padding: 27px 20px;
    gap: 15px;
}

.shop .common_btn {
    width: 235px;
    padding: 15px 0;
}

.shop .shop_info {
    gap: 8px;
}

.shop .shop_name {
    font-weight: 700;
    font-size: 18px;
    position: relative;
    padding-left: 10px;
}

.shop .shop_name::before {
    content: "";
    width: 3px;
    height: 26px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    background-color: var(--main-color);
}

.shop .shop_add {
    font-size: 14px;
    line-height: 1.7;
}

.shop .shop_tell {
    margin-bottom: 3px;
}

.shop .shop_tell .tell {
    margin-block: 8px 5px;
}

.shop .shop_tell .telll_title {
    font-weight: 700;
    letter-spacing: 0.01em;
}

.shop_container .writing {
    font-size: 96px;
    letter-spacing: 0.01em;
    transform: rotate(-5deg);
    right: 75px;
    bottom: 25px;
    opacity: 0.5;
}

/*footer*/

#main_footer {
    padding-top: 100px;
}

.footer_top {
    padding-bottom: 79px;

}

.footer_top .group {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    gap: 60px;
}

.footer_top .group .hr {
    width: 1px;
    height: 201px;
    display: block;
    background-color: #CCCCCC;
    margin-left: 33px;
}


.footer_logo {
    gap: 28px;
    align-items: flex-end;
}

.footer_logo .logo {
    width: 270px;
}

.footer_logo .shop_tell {
    text-align: right;
}

.footer_logo .shop_tell .tell {
    font-size: 32px;
}

.footer_logo .tell::before {
    background: url("./image/icon_tell.png") center no-repeat;
    background-size: contain;
    width: 22px;
    height: 22px;
}

.footer_logo .shop_tell .mini {
    font-size: 14px;
}

.footer_top .grid_btn_area {
    grid-template-columns: repeat(3, 230px);
    gap: 10px;
}

.footer_top .grid_btn_area .grid_btn {
    width: 100%;
    justify-content: flex-start;
    padding-left: 20px;
    font-size: 14px;
}

.shop_text .catch {
    font-size: 20px;
    font-weight: 700;
}

.shop_text .catch_text {
    font-size: 14px;
}

.footer_bottom {
    background-color: #F8F8F8;
    width: 100%;
    padding-block: 80px 60px;
}

.footer_search_area {
    align-items: unset;
    gap: 20px;
    flex-wrap: wrap;
}

.footer_search {
    background-color: #fff;
    padding: 25px 37px 20px 20px;
    width: 560px;
    flex-grow: 3;
}

.footer_search:last-child {
    padding: 25px 45px 20px 35px;
}

.footer_search_title {
    font-weight: 700;
    margin-bottom: 15px;
}

.footer_info_container {
    justify-content: space-between;
    border-top: 1px #ccc solid;
    margin-top: 60px;
    padding-top: 60px;
}

.footer_info_container .hr {
    height: 310px;
    width: 1px;
}

.footer_search .search_list {
    gap: 8px;
    font-size: 14px;
    flex-wrap: wrap;
}

.search_list .search_item {
    position: relative;
}

.search_list .search_item::after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: var(--main-color);
    display: block;
    position: relative;
    bottom: 3px;
    transition: .3s;
    opacity: 0;
}

.footer_info_area,
.footer_info_area .flex {
    align-items: flex-start;
}

.footer_info_area {
    gap: 15px;
    position: relative;
}

.footer_info {
    gap: 5px;
    font-size: 14px;
}

.footer_info .name {
    line-height: 1.11;
    margin-bottom: 5px;
}

.footer_info .add_num,
.footer_info .add {
    line-height: 1.8;
}

.footer_info_area .map {
    width: 350px;
    height: 220px;
}

.footer_menu_container {
    gap: 25px;
    padding-top: 30px;
}

.footer_menu_container .footer_menu_area {
    justify-content: flex-end;
    align-items: flex-start;
    gap: 90px;
}

.footer_menu_list {
    gap: 28px;
    align-items: flex-start;
    justify-content: space-between;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.01em;
}

.footer_menu_list.sub {
    gap: 20px;
    margin-left: 35px;
}

.footer_menu.child_list {
    gap: 18px;
}

.footer_menu_list.sub,
.footer_menu.child {
    font-weight: 500;
}

.footer_menu {
    position: relative;
}

.footer_menu::after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: var(--main-color);
    display: block;
    position: relative;
    bottom: 3px;
    transition: .3s;
    opacity: 0;
}

.footer_menu.child_list::after {
    display: none;
}

.sns_area {
    gap: 20px;
    font-weight: 700;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

.sns_area .cavea {
    font-size: 14px;
}

.sns_area .icon {
    width: 45px;
}


.copyright {
    width: 100%;
    text-align: center;
    display: inline-block;
    margin-top: 35px;
    font-size: 10px;
}

/*固定ボタン*/

#fixed {
    position: fixed;
    right: 0;
    bottom: 30px;
    z-index: 1001;
}

.fix_area {
    background-color: var(--main-color);
    padding: 21px 13px 21px 16px;
    border-radius: 5px 0 0 5px;
    gap: 15px;
}

.fix_area img {
    width: 24px;
}

.fix_title {
    writing-mode: vertical-rl;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
}

.fix_title {
    writing-mode: vertical-rl;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
}

/*======内部ページ======*/

.page_top_img,
.common_page_main .page_top_img::after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.common_page_main .page_top_img::after {
    content: "";
    background-color: #0C3300;
    opacity: .5;
    display: block;
    position: absolute;
}

.img_text_container {
    gap: 135px;
}

.img_text {
    gap: 95px;
    flex-wrap: nowrap;
}

.img_text .title_area {
    margin-bottom: 30px;
}

.img_text .title_area .en {
    margin-top: 15px;
}

.img_text .text {
    font-size: 18px;
    letter-spacing: .03em;
    line-height: 1.66;
}

.img_text .img_area {
    width: 541px;
    height: 392px;
    flex-shrink: 0;
}

/*パンくずリスト*/
.breadcrumbs {
    background-color: var(--main-color);
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    padding-block: 7px;
    display: flex;
}

.breadcrumbs ul {
    display: flex;
    gap: 40px;
}

.breadcrumbs .breadcrumbs_link {
    position: relative;
}

.breadcrumbs .breadcrumbs_link::after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: #fff;
    display: block;
    position: relative;
    bottom: 3px;
}

.breadcrumbs .breadcrumbs_link::before {
    width: 14px;
    height: 14px;
    background-image: url(/wp-content/themes/swell_child/image/btn_arrow2.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    display: block;
    content: '';
    position: absolute;
    right: -29px;
    top: 50%;
    transform: translateY(-50%);
}

.breadcrumbs .breadcrumbs_link:last-child:before {
    display: none;
}

.breadcrumbs.site .separator {
    display: inline-block;
    width: 14px;
    aspect-ratio: 1;
    min-width: 0;
    background-image: url(/wp-content/themes/swell_child/image/btn_arrow2.png);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin: 0 6px;
}

/*スタッフ一覧ページ*/
.common_page_main.staff {
    margin: 0;
}

#page_staff {
    background-color: #F8F8F8;
}

.staff_swiper.grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

#page_staff .staff_swiper_title {
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
    padding-block: 0 50px;
}

#page_staff .staff_swiper_title .title_area {
    margin: 10px 0 0;
}

#page_staff .staff_swiper_title .text {
    width: 60%;
}


/*スタッフ詳細*/

.staff_profile_container {
    padding-bottom: 81px;
}

.staff_profile_container .back_img_area {
    background-color: var(--sub-color);
    height: 454px;
    top: unset;
    bottom: 0;
    z-index: -1;
    overflow: hidden;
    padding-top: 6px;
    border-radius: 10px;
}

.staff_profile_area {
    gap: 64px;
}

.staff_profile_area .writing {
    font-size: 64px;
    transform: rotate(-5deg);
    bottom: -30px;
    left: 140px;
}

.staff_profile_area .img_area {
    width: 360px;
    height: 540px;
}

.staff_profile_area .text_area {
    align-items: flex-start;
    justify-content: space-between;
    gap: 110px;
    flex-grow: 10;
}

.staff_profile_area .staff_name {
    align-items: flex-start;
}

.staff_profile_area .job {
    padding: 0 15px;
    background-color: var(--sub-color);
    font-weight: 500;
    font-size: 20px;
}

.staff_profile_area .name {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.5;
}

.staff_profile_area .staff_profile {
    gap: 22px;
    width: 100%;
    flex-wrap: nowrap;
    align-items: center;
}

.staff_profile_area .profile_title {
    writing-mode: vertical-rl;
    gap: 45px;
    background-color: #fff;
    padding-inline: 20px;
    font-weight: 500;
    align-items: center;
}

.profile_title .en {
    font-weight: 700;
    font-size: 20px;
}

.profile_title .en::after {
    content: "";
    width: 20px;
    height: 1px;
    background-color: #DBDBDB;
    display: block;
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
}

.profil_list {
    gap: 10px;
    font-weight: 500;
    width: 100%;
}

.profil_list li {
    padding: 12px 23px;
    width: 100%;
    position: relative;
}

.profil_list li::before {
    content: "";
    width: 3px;
    height: 30px;
    background-color: var(--main-color);
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.profil_list li:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.5);
}

.profil_list li .title {
    width: 180px;
    font-weight: 700;
}

#page_staff_profile .img_text_container {
    margin-block: 90px 160px;
}

#page_staff_profile .text {
    font-size: 16px;
    font-weight: 600;
}

.message_container {
    border: solid 2px var(--main-color);
    border-radius: 5px;
    height: 450px;
    box-shadow: 0 5px 0 #5BA01D;
}

.message_container .message_area {
    gap: 60px;
    padding-inline: 50px;
    align-items: flex-end;
    bottom: 60px;
    flex-wrap: nowrap;
}

.message_container .img_area {
    width: 360px;
    height: 460px;
    flex-shrink: 0;
}

.message_container .text_area {
    gap: 50px;
    align-items: flex-start;
    padding-bottom: 30px;
}

.message_container .text_area .title {
    font-size: 32px;
    font-weight: 700;
}

.message_container .text_area .title::before {
    content: "Message";
    font-family: "SaintAndrewsQueen";
    font-size: 88px;
    position: absolute;
    left: 80px;
    top: -0.4em;
    transform: rotate(-5deg);
    color: #DEEFCF;
    font-weight: 100;
    z-index: -1;
}

.message_container .text_area .title::after {
    content: "・・・";
    font-size: 0.9em;
    position: absolute;
    left: -5px;
    bottom: -40px;
    letter-spacing: -0.2em;
    color: var(--main-color);
}

/*店舗紹介*/

#page_shop .shop_area {
    margin: 0;
    gap: 150px;
}


#page_shop .shop_area .shop {
    width: 100%;
    height: inherit;
    align-items: flex-start;
    gap: 50px;
}

#page_shop .shop_info_area {
    padding: 0;
}

#page_shop .shop_info {
    align-items: center;
    gap: 15px;
}

#page_shop .shop_area .shop_name {
    background-color: var(--main-color);
    color: #fff;
    padding: 5px 20px;
    font-size: 28px;
    margin-bottom: 10px;
}

#page_shop .shop_area .en {
    font-weight: 900;
}

#page_shop .swiper.shop_swiper {
    overflow: inherit;
    width: 450px;
    margin: 0;
    flex-shrink: 0;
}

#page_shop .swiper.shop_swiper .swiper-wrapper {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

#page_shop .shop .img_area {
    width: 100% !important;
    height: 450px;
}

#page_shop .shop .shop_info_area {
    width: 640px;
}

#page_shop .shop .profil_list li {
    align-items: center;
    border-top: solid 2px #EFEFEF;
    padding-block: 15px 5px;
    flex-wrap: nowrap;
}

#page_shop .shop .profil_list li:first-child {
    border: none;
}

#page_shop .shop .profil_list li:before {
    top: calc(50% + 5px);
}

#page_shop .shop .profil_list li.map {
    padding: 0 0 20px;
    border: none;
    text-align: right;
}

#page_shop .shop .profil_list li.map::before {
    display: none;
}

#page_shop .shop .profil_list li.map iframe {
    width: 460px;
    height: 230px;
}

#page_shop .profil_list li .title {
    flex-shrink: 0;
    width: 156px;
}

/*選ばれる理由*/
#page_reason .title {
    line-height: 1.6;
}

#page_reason .text {
    font-size: 16px;
    line-height: 1.8;
}

/*手数料0円*/
#page_brokerage .text {
    font-size: 16px;
    line-height: 1.8;
}


@media (hover: hover) {

    a.common_btn:hover::after {
        background-image: url(./image/btn_arrow2.png);
    }

    a.common_btn:hover {
        background-color: var(--main-color);
        color: #fff;
    }

    .grid_btn_area .grid_btn:hover,
    #pc_header .icon_btn:hover,
    .tiktoc:hover {
        opacity: 0.7;
    }

    #pc_header .header_menu:hover {
        color: var(--main-color);
    }

    #pc_header .header_menu:hover a::after {
        opacity: 1;
    }

    .search_btn_area .search_btn:hover {
        top: 5px;
        box-shadow: 0 0px 0 rgba(0, 0, 0, 0);
    }

    .scroll_btn_area .scroll_btn:hover {
        background-color: var(--main-color);
        color: #fff;
    }

    .scroll_btn_area .scroll_btn:hover .scroll_btn_title {
        color: #fff;
    }

    .scroll_btn_area .scroll_btn:hover .scroll_btn_title::after {
        background-color: #fff;
    }

    .thumbnail_item:hover .item_name {
        color: var(--main-color);
        position: relative;
    }

    .thumbnail_item:hover .item_name::after {
        width: 100%;
    }

    .thumbnail_item:hover .img_area .img {
        transform: scale(1.1);
    }

    .staff_card:hover .img {
        transform: scale(1.1);
    }

    .staff_card:hover::after {
        background-image: linear-gradient(0deg, rgba(51, 51, 51, 0), rgba(51, 51, 51, 0) 50%);
    }

    .blog_list .blog:hover {
        background-color: var(--main-color);
    }

    .blog_list .blog:hover .blog_day,
    .blog_list .blog:hover .blog_title,
    .blog_list .blog:hover .text {
        color: #fff;
    }

    .blog_list .blog:hover .img_area .img {
        transform: scale(1.3);
    }

    .blog:hover .blog_day::before {
        background-image: url("./image/icon_sche2.png");
    }

    .search_list .search_item:hover,
    .footer_menu:hover {
        color: var(--main-color);
    }

    .footer_menu.child_list:hover {
        color: var(--text-color);
    }

    .search_list .search_item:hover::after,
    .footer_menu:hover::after {
        opacity: 1;
    }

    .banner_are a:hover .banner {
        opacity: .7;
    }

    .fix_area:hover {
        background-color: #DEC500;
    }
}


@media (max-width: 750px) {

    /* 弊社のハンバーガーメニュー */
    header#sp_header {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        background: #fff;
        box-shadow: 0 3px 8px rgba(51, 51, 51, 0.06);
        z-index: 9999;
        height: 60px;
    }

    header#sp_header .logo {
        position: absolute;
        left: 10px;
        top: 10px;
        line-height: 0;
    }

    header#sp_header .logo img {
        height: 40px;
    }

    header#sp_header a.icon {
        color: #000;
        position: absolute;
    }

    header#sp_header a.mail {
        right: 70px;
        top: 13px;
        font-size: 25px;
    }

    header#sp_header a.tel {
        right: 110px;
        top: 15px;
        font-size: 20px;
    }

    /*　ハンバーガーボタン　*/
    .hamburger {
        display: block;
        position: fixed;
        z-index: 99999;
        right: 13px;
        top: 20px;
        width: 25px;
        height: 16px;
        cursor: pointer;
        text-align: center;
    }

    .hamburger span {
        display: block;
        position: absolute;
        width: 25px;
        height: 2px;
        left: 0px;
        background: var(--main-color);
        -webkit-transition: 0.5s ease-in-out;
        -moz-transition: 0.5s ease-in-out;
        transition: 0.5s ease-in-out;
    }

    .hamburger span:nth-child(1) {
        top: 0px;
    }

    .hamburger span:nth-child(2) {
        top: 7px;
    }

    .hamburger span:nth-child(3) {
        top: 14px;
    }

    /* sideの場合,popup1の場合ここから */
    .hamburger.active span:nth-child(1) {
        top: 7px;
        left: 0;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }

    .hamburger.active span:nth-child(2),
    .hamburger.active span:nth-child(3) {
        top: 7px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }

    /* sideの場合,popup1の場合ここまで */

    /* sideの場合ここから */
    nav.globalMenuSp {
        position: fixed;
        z-index: 1001;
        top: 0;
        left: 0;
        color: #000;
        text-align: center;
        transform: translateX(100%);
        transition: all 0.6s;
        width: 100%;
        height: 100vh;
        align-items: center;
        background: var(--sub-color);
        overflow: scroll;
        flex-wrap: nowrap;
    }

    /* sideの場合ここまで */

    nav.globalMenuSp ul {
        margin: 0 auto;
        padding: 0;
        width: 100%;
    }

    nav.globalMenuSp ul li {
        list-style-type: none;
        padding: 0;
        width: 100%;
        border-bottom: 1px solid #DBDBDB;
        transition: .4s all;
    }

    nav.globalMenuSp .child li {
        border-bottom: none;
    }

    nav.globalMenuSp ul .child_title {
        padding-bottom: 2.5vw;
    }


    nav.globalMenuSp ul li a {
        display: block;
        color: #000;
        padding: 3.8vw 0;
        text-decoration: none;
    }

    nav.globalMenuSp ul li.child {
        padding: 3.8vw 0;
    }

    nav.globalMenuSp ul li.child a {
        color: #333;
    }

    nav.globalMenuSp.active {
        transform: translateX(0%);
    }

    /* ここまで弊社のハンバーガーメニュー */

    .wrap,
    .wrap.lr,
    .wrap.mid {
        max-width: 90%;
    }

    a[href $='.pdf']::before {
        width: 7vw;
        height: 8vw;
        margin-right: 2.5vw;
    }

    a[href $='.pdf']:hover {
        text-decoration: underline;
    }

    a[href^="tel:"] {
        pointer-events: inherit;
    }

    body {
        font-size: 13px;
        padding-top: 60px;
        min-width: unset;
    }

    /* SP固定ページ 共通設定 */
    .common_page_main {
        padding-block: 20vw;
    }

    .common_page_main .title_box .title {
        font-size: 6.4vw;
    }

    .common_page_main .title_box .title.mark {
        font-size: 5.6vw;
    }

    .common_page_wrap {
        padding: 15vw 0;
    }

    .reserve_text {
        font-size: 6vw;
    }

    /* パンくず */
    .breadcrumb {
        font-size: 2.5vw;
    }


    /* SP固定ページ 404ページ */
    #page_404 .num {
        font-size: 20vw;
        line-height: 1.5;
    }

    #page_404 .text {
        font-size: 3.5vw;
    }

    /* SP固定ページ サイトマップ */
    ul#sitemap_list li {
        margin: 0;
    }

    body #sitemap_list li a {
        font-size: 4vw;
        padding: 1vw 2vw;
        line-height: 9vw;
        margin-bottom: 1vw;
    }

    body #sitemap_list li.home-item {
        margin-bottom: 4vw;
    }

    body #sitemap_list {
        padding: 0;
    }

    /*ボタン*/
    a.common_btn,
    a.common_btn:visited {
        width: 82vw;
        padding: 6.1vw 0;
        font-size: 4.1vw;
    }

    a.common_btn::after {
        width: 6.15vw;
        height: 6.15vw;
        left: 5.12vw;
    }


    /*共通要素*/
    .shop_tell .tell {
        padding-left: 7.6vw;
        font-size: 8.2vw;
    }

    .shop_tell .tell::before {
        width: 4.6vw;
        height: 4.6vw;
        left: 5px;
    }

    .shop_tell .mini {
        font-size: 3.3vw;
    }

    /*タイトル*/

    .title_area .title {
        font-size: 6.15vw;
        line-height: 1.2;
    }

    .title_area .en {
        font-size: 3.58vw;
        line-height: 1;
    }

    .title_area .text {
        margin-top: 3.7vw;
        font-size: 3.58vw;
    }



    /* SP ヘッダー */
    #sp_header .icon_btn_area {
        gap: 5px;
        right: 14.6vw;
        top: 50%;
        transform: translateY(-50%);
    }

    #sp_header .icon_btn_area .icon_btn {
        width: 50px;
        height: 50px;
        background-color: #EFEFEF;
        justify-content: center;
        align-items: center;
        gap: 2px;
        font-weight: 700;
    }

    #sp_header .icon_btn_area .icon {
        width: 18px;
    }

    #sp_header .icon_btn_area .btn_title {
        font-size: 9px;
    }

    /* sp ヘッダーメニュー*/

    nav.globalMenuSp {
        padding: 28.7vw 5%;
        gap: 7.69vw;
        color: #333333;
    }

    nav.globalMenuSp .title_area .en {
        margin: 0;
    }

    .sp_header_btn {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.56vw;
        width: 100%;
    }

    .sp_header_btn .grid_btn {
        width: 100%;
        font-weight: 700;
        font-size: 3vw;
        border: solid 2px var(--main-color);
        padding: 2.8vw 2.5vw;
        background-color: #fff;
        color: var(--main-color);
        position: relative;
        justify-content: space-between;
        gap: 1.6vw;
        border-radius: 3px;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .sp_header_btn .grid_btn .en {
        margin-block: 0 0.5em;
    }

    .child .sp_header_btn .grid_btn {
        border: unset;
    }


    .sp_header_btn .grid_btn.btn_green {
        background-color: var(--main-color);
        color: #fff;
    }

    .sp_header_btn .grid_btn::after,
    .sp_header_btn .search_btn::after {
        width: 3.58vw;
        height: 3.58vw;
        background-image: url(./image/btn_arrow2.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
        display: block;
        content: '';
        flex-shrink: 0;
    }

    .sp_header_btn .grid_btn .grid_btn_icon {
        width: 4.1vw;
    }

    .sp_header_middle {
        width: 100%;
        align-items: flex-start;
        gap: 2.5vw;
    }

    .sp_header_middle .title {
        font-size: 4.6vw;
    }

    .sp_header_middle .search_container {
        width: 100%;
        text-align: left;
    }

    .globalMenuSp .title_area {
        gap: 2vw;
        font-weight: 700;
        align-items: flex-end;
    }

    .sp_header_btn .search_btn {
        background-color: #fff;
        border-radius: 5px;
        padding: 2.5vw;
        gap: 5px;
        position: relative;
        font-weight: 600;
        align-items: center;
    }

    .sp_header_btn .search_btn .search_icon_area {
        width: 7.69vw;
        height: 7.69vw;
    }

    .sp_header_btn .search_btn .icon {
        max-width: 3.07vw;
        max-height: 3.84vw;
    }

    .sp_header_bottom {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        flex-direction: column;
    }

    .sp_header_bottom .title_area {
        width: 100%;
        text-align: left;
    }

    .sp_header_bottom li .grid_btn {
        font-size: 3.5vw;
        padding: 2vw 2.5vw;
        font-weight: 500;
        height: 12.9vw;
    }

    .sp_header_bottom .img_btn_container .grid_btn {
        padding: 0 2.5vw 0 0;
        font-size: 3.33vw;
        font-weight: 700;
        gap: 2.5vw;
    }

    .sp_header_bottom .title_area {
        display: flex;
    }

    .sp_header_bottom .menu_title {
        font-size: 4.1vw;
        letter-spacing: 0.01em;
    }

    nav.globalMenuSp .sp_header_bottom .title_area .en {
        margin-bottom: 0.2em;
    }

    .globalMenuSp .grid_btn .img_area {
        width: 11.6vw;
        height: 100%;
        border-radius: 5px 0 0 5px;
    }

    .globalMenuSp li:nth-child(1) .grid_btn .img_area img {
        object-position: 57% 50%;
    }

    .img_btn_container li:nth-child(6) .grid_btn .title {
        margin-left: 2.5vw;
    }

    .img_btn_container li:nth-child(6) .grid_btn {
        gap: 0;
    }

    nav.globalMenuSp ul.menu_bottom {
        margin-top: 1.28vw;
    }

    nav.globalMenuSp ul.menu_bottom li {
        border-bottom: none;
        width: fit-content;
        margin-top: 3.8vw;
    }

    nav.globalMenuSp ul.menu_bottom li a {
        padding: 0;
        font-size: 3vw;
    }

    nav.globalMenuSp .sns_area {
        justify-content: flex-start;
    }


    /* スライダー */
    #top_slide {
        margin: 12.8vw 0;
    }

    .custom_controls .slider-prev,
    .custom_controls .slider-next {
        transform: translate(0, -50%);
        top: 56%;
    }

    .custom_controls .slider-prev {
        left: 10px;
    }

    .custom_controls .slider-next {
        right: 10px;
    }

    /*検索エリア*/
    #top_search {
        padding-block: 50px;
    }

    .search_container {
        justify-content: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .search_text_area,
    .search_area {
        width: 100%;
    }

    .search_text_area .text {
        font-size: 3.58vw;
        margin-bottom: 5px;
    }

    .search_area .search_box_title {
        gap: 5.12vw;
        margin-bottom: 1.25vw;
        align-items: center;
    }

    .search_area .search_box_title .en {
        font-size: 5.12vw;
    }

    .search_container .form_box {
        width: 100%;
        height: 12.8vw;
    }

    .search_container .form_box .search::placeholder {
        font-size: 3.6vw;
    }


    .search_container .form_box .search {
        width: 87%;
        padding: 0.4em .8em;
    }

    .search_container .form_box .submit {
        width: 13%;
        background-size: 5vw;
    }

    .search_container .form_box::before {
        right: 13%;
        height: 5vw;
    }

    .search_container .search_box button::after {
        width: 5.12vw;
        height: 5.12vw;
        margin-right: 0;
    }

    .search_container .search_btn_area {
        gap: 3.8vw;
        flex-direction: column;
        width: 100%;
    }

    .search_btn_area .search_btn {
        padding: 3.84vw 6.4vw;
        width: 100%;
        flex-direction: row;
        gap: 4.6vw;
    }

    .search_btn_area .search_btn::after {
        width: 5.12vw;
        height: 5.12vw;
        background-image: url(./image/btn_arrow2.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
        display: block;
        content: '';
        flex-grow: 3;
    }

    .search_btn_area .search_btn .group {
        gap: 5px;
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .search_btn_area .search_btn .en {
        font-size: 5.12vw;
    }

    .search_btn_area .search_btn .heading {
        padding-left: 7.7vw;
        font-size: 3.58vw;
    }

    .search_btn_area .search_btn .heading:before {
        left: -5px;
        top: 50%;
        bottom: inherit;
        transform: translateY(-50%);
        letter-spacing: -0.3em;
    }

    .search_btn .search_icon_area {
        width: 17.9vw;
        height: 17.9vw;
    }


    .search_btn .icon {
        max-width: 8.97vw;
        max-height: 9.48vw;
    }

    .search_btn_area .writing {
        bottom: -1.2em;
        right: 5%;
        font-size: 10.2vw;
    }

    .scroll_btn_container {
        margin-top: 17.9vw;
    }

    .scroll_btn_container .title {
        font-size: 5.12vw;
        margin-bottom: 15px;
    }

    .scroll_btn_area {
        grid-template-columns: repeat(6, 82vw);
        gap: 2.56vw;
    }

    .scroll_btn_area .scroll_btn .img_area {
        height: 180px;
    }

    .scroll_btn_area .scroll_btn .text_area {
        padding: 5.12vw;
    }


    .scroll_btn_area .scroll_btn .scroll_btn_title {
        margin-left: 1.37em;
        font-size: 4.1vw;
    }

    .scroll_btn_area .scroll_btn .scroll_btn_title::before {
        left: -1.37em;
        top: 55%;
    }

    /*新着物件*/
    #top_new {
        padding-block: 12.8vw;
    }

    #top_new .writing {
        font-size: 8.2vw;
    }

    #top_new .writing:nth-of-type(1) {
        top: inherit;
        bottom: -30px;
        right: 29vw;
    }

    #top_new .writing:nth-of-type(2) {
        top: inherit;
        bottom: -55px;
        right: -3%;
    }

    #top_new .back_img {
        width: 350%;
        max-width: inherit;
    }

    .thumbnail_container .grid {
        margin-top: 50px;
        grid-template-columns: repeat(8, 69.2vw);
        gap: 2.56vw;
        overflow-x: scroll;
    }

    .thumbnail_container .thumbnail_item.new::after {
        width: 11.5vw;
        height: 11.5vw;
    }

    .thumbnail_item .img_area {
        height: 51.2vw;
    }


    .thumbnail_item .item_detail {
        padding-top: 3vw;
    }


    .thumbnail_item .item_price {
        font-size: 3.33vw;
    }

    .thumbnail_item .item_space,
    .thumbnail_item .item_place {
        padding-left: 5.9vw;
        font-size: 3.33vw;
    }

    .thumbnail_item .item_space::before,
    .thumbnail_item .item_place::before {
        height: 3.58vw;
        min-width: 3vw;
    }

    /*選ばれる理由*/
    #top_reason {
        margin-block: 15.4vw 8.97vw;
    }

    .reason_container .title_area .writing {
        font-size: 8.2vw;
        top: -40px;
    }

    .reason_container .reason_item_area {
        flex-direction: column;
        gap: 6.4vw;
        margin-top: 6.41vw;
    }

    .reason_item_area .reason_item {
        width: 100%;
    }

    .reason_item_area .reason_item .img_area {
        width: 100%;
        height: 51.2vw;
    }

    .reason_item_area .item_title {
        margin-block: 3.84vw;
        padding-left: 3.84vw;
    }

    .reason_item_area .item_title::before {
        height: 11vw;
    }

    .reason_item_area .item_title .en {
        font-size: 3vw;
    }

    .reason_item_area .item_title .item_name {
        font-size: 4.1vw;
        text-wrap-mode: nowrap;
    }

    .reason_item_area .text {
        font-size: 3.58vw;
    }

    #top_reason .common_btn {
        margin: 6.4vw auto 0;
    }

    /*バナー*/
    #top_banner {
        margin-bottom: 12.8vw;
    }

    .banner_are .banner {
        width: 90%;
        margin: 0 auto;
    }



    /*スタッフエリア*/

    #top_staff {
        padding: 12.8vw 0 38.4vw;
    }

    .staff_swiper_wrap {
        width: 90%;
    }

    .staff_swiper_title {
        position: relative;
        background-color: inherit;
        width: 100%;
        height: 100%;
        left: 0;
    }

    .staff_swiper_title .title_area {
        width: 100%;
        margin: 0;
    }

    .staff_swiper_title .writing {
        font-size: 8vw;
        position: absolute;
        bottom: -5.12vw;
        right: 0;
        transform: rotate(-8deg);
    }

    .staff_swiper_title .title_area .text {
        margin-bottom: 6.8vw;
    }

    .staff_swiper_title .common_btn {
        position: absolute;
        top: 162vw;
        left: 50%;
        transform: translateX(-50%);
    }

    .staff_swiper .swiper-slide {
        width: 71.7vw !important;
        height: 102.5vw;
    }


    .staff_card .staff_info_area {
        padding: 5.12vw 2.5vw 2.56vw 0;
        gap: 5.12vw;
    }

    .staff_info_area .staff_name_en {
        font-size: 8.2vw;
        margin-left: 0.7vw;
    }

    .staff_info_area .staff_info {
        padding-inline: 6.4vw 2.5vw;
        gap: 5.12vw;
    }

    .staff_info_area .staff_info .solid {
        margin-bottom: 2.5vw;
    }

    .staff_info_area .staff_info .staff_name {
        gap: 0.5vw;
    }

    .staff_info_area .staff_info .job {
        padding: 0 3.5vw;
    }

    .staff_info_area .staff_info .name {
        font-size: 6.15vw;
    }

    /*スクロールヒント*/
    .scroll_hint {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 30.7vw;
        height: 33.8vw;
        border-radius: 10px;
        background: rgba(51, 51, 51, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        opacity: 1;
        transform: translate(-50%, -50%);
        transition: .3s;
        pointer-events: none;
    }

    .scroll_hint img {
        width: 100%;
        /* 内側に収める用 */
        height: auto;
        display: block;
    }

    .scroll_hint.is-hidden {
        opacity: 0;
    }

    #top_new .scroll_hint {
        top: 65%;
    }

    /*ブログエリア*/
    #top_blog {
        margin: 12.3vw auto;
        padding-bottom: 25.4vw;
    }


    #top_blog .text.flex {
        margin: 3.84vw auto 6.15vw;

    }

    #top_blog .common_btn {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -25vw;
    }

    .blog_list {
        grid-template-columns: repeat(4, 69vw);
        gap: 2.5vw;
        overflow-x: scroll;
        padding-bottom: 5px;
    }

    .blog .blog_title {
        font-size: 4.1vw;
    }

    .blog .blog_detail {
        padding: 6vw 5vw;
        gap: 1vw;
    }

    .blog .blog_day {
        font-size: 3.33vw;
        gap: 2vw;
    }

    .blog .blog_day::before {
        width: 3vw;
        height: 3vw;
    }

    .blog .blog_day::after {
        width: 3.58vw;
        height: 3.58vw;
    }


    .blog .img_area {
        height: 46vw;
    }

    .blog_container .writing {
        font-size: 8vw;
        right: 0;
        bottom: -32vw;
    }


    /*店舗紹介*/

    #top_shop {
        background-color: var(--sub-color);
        padding-block: 13.5vw;
    }

    .shop_area {
        margin-top: 6.41vw;
        flex-direction: column;
        gap: 2.56vw;
    }

    .shop_area .shop {
        width: 100%;
        height: inherit;
        flex-direction: column;
    }

    .shop .img_area {
        width: 100%;
        height: 51.2vw;
    }

    .shop:nth-of-type(1) .img_area img {
        transform: unset;
        object-position: unset;
    }

    .shop:nth-of-type(2) .img_area img {
        object-position: unset;
    }

    .shop_info_area {
        padding: 5.12vw;
        gap: 2.56vw;
        width: 100%;
    }

    .shop .common_btn {
        width: 71.7vw;
        margin: 0 auto;
        padding: 3.3vw 0;
    }

    .shop .shop_info {
        gap: 2vw;
    }

    .shop .shop_name {
        font-size: 4.61vw;
        padding-left: 3.33vw;
    }

    .shop .shop_name::before {
        height: 6.66vw;
    }

    .shop .shop_add {
        font-size: 3.58vw;
    }

    .shop .shop_tell {
        margin-bottom: .7vw;
    }

    .shop .shop_tell .tell {
        margin-block: 1vw .5vw;
    }

    .shop .shop_tell .telll_title {
        font-size: 4.1vw;
    }

    .shop_container .writing {
        font-size: 8.2vw;
        letter-spacing: 0.01em;
        right: 3%;
        bottom: 5.12vw;
        opacity: .7;
    }

    #top_shop .img_container.is-snap {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 0;
    }

    #top_shop .img_container.is-snap>.img_area {
        min-width: 100%;
        flex: 0 0 100%;
        scroll-snap-align: start;
    }


    /*footer*/

    #main_footer {
        padding-top: 12.8vw;
    }

    .footer_top {
        padding-bottom: 12.8vw;

    }

    .footer_top .group {
        margin-bottom: 6.41vw;
        flex-direction: column;
        gap: 8.97vw;
    }

    .footer_top .group .hr {
        width: 100%;
        height: 1px;
        margin-left: unset;
    }

    .footer_logo {
        gap: 5.12vw;
        align-items: center;
    }

    .footer_logo .logo {
        width: 56.4vw;
    }


    .footer_logo .shop_tell .tell {
        font-size: 8.2vw;
    }

    .footer_logo .tell::before {
        width: 5.64vw;
        height: 5.64vw;
    }

    .footer_logo .shop_tell .mini {
        font-size: 3.5vw;
    }

    .footer_top .grid_btn_area {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.56vw;
        width: 100%;
    }

    .footer_top .grid_btn_area .grid_btn {
        padding-left: 2vw;
        padding-right: 2vw;
        font-size: 3.33vw;
        justify-content: center;
    }

    .shop_text .catch {
        font-size: 5.12vw;
        line-height: 1.44;
        margin-bottom: 10px;
    }

    .shop_text .catch_text {
        font-size: 3.58vw;
    }

    .footer_bottom {
        padding-block: 12.8vw 100px;
    }

    .footer_search_area {
        gap: 2.56vw;
    }

    .footer_search,
    .footer_search:last-child {
        width: 100%;
        padding: 5.12vw 3.84vw 5.12vw 4.84vw;
    }

    .footer_search_title {
        font-size: 3.58vw;
        margin-bottom: 1.84vw;
    }

    .footer_search .search_list {
        gap: .5vw 2.56vw;
        font-size: 3vw;
    }

    .footer_info_container {
        flex-direction: column;
        margin-top: 8.97vw;
        padding-top: 8.97vw;
        align-items: center;
    }

    .footer_info_container .hr {
        display: none;
    }

    .footer_info_area {
        gap: 3.8vw;
        align-items: center;
        width: 100%;
    }

    .footer_info_area::after {
        display: none;
    }

    .footer_info_area .flex.footer_info {
        font-size: 3.58vw;
        align-items: center;
    }

    .footer_info_area .map {
        width: 100%;
        height: 56.4vw;
    }

    .footer_menu_container {
        gap: 5vw;
        padding-top: 7vw;
    }

    .footer_menu_list.sub {
        gap: 2.56vw;
        flex-direction: row;
        font-size: 3vw;
        margin-left: 0;
    }

    .sns_area {
        gap: 3.84vw;
        justify-content: center;
    }

    .sns_area .icon {
        width: 11.5vw;
    }

    /*固定ボタン*/

    #fixed {
        bottom: 0;
        width: 100%;
    }

    .fix_area {
        background-color: #EFEFEF;
        padding: 5px;
        border-radius: 0;
        gap: 5px;
    }

    .fix_area img {
        width: 18px;
    }

    .fix_area .tell img {
        width: 21px;
    }

    .fix_area .tell .fix_title {
        margin-top: -2px;
    }

    .fix_area .mail img {
        padding-top: 2px;
    }

    .fix_area .mail .fix_title {
        padding-top: 2px;
    }

    .fix_title {
        writing-mode: inherit;
        color: #fff;
        font-size: 10px;
    }

    .fix_btn_container {
        gap: 5px;
    }

    .fix_area .fix_btn {
        gap: 7px;
        width: 100%;
        flex-wrap: nowrap;
    }

    .fix_btn .flex {
        width: calc(100% / 4);
        height: 55px;
        justify-content: flex-start;
        border-radius: 3px;
        gap: 5px;
        padding: 10px;
        flex-wrap: nowrap;
        align-items: center;
    }

    .fix_btn .flex.tell {
        background-color: #EFC43A;
    }

    .fix_btn .flex.mail {
        background-color: #DF8933;
    }

    .fix_btn .flex.line {
        background-color: #0DC754;
    }

    .fix_btn .flex.yoyaku {
        background-color: #E04646;
    }

    .fix_bottom {
        background-color: #fff;
        border-radius: 10px;
        padding: 0 5px;
        width: 100%;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
    }

    /*======内部ページ======*/
    .img_text_container {
        gap: 17.9vw;
    }

    .img_text {
        flex-direction: column;
        gap: 8vw;
    }

    .img_text.reverse {
        flex-direction: column;
    }

    .img_text .title_area {
        margin-bottom: 5.12vw;
    }

    .img_text .title_area .en {
        margin-top: 2.56vw;
    }

    .img_text .text {
        font-size: 4.6vw;
        letter-spacing: .03em;
        line-height: 1.66;
    }

    .img_text .img_area {
        width: 100%;
        height: 51.2vw;
        flex-shrink: 0;
    }

    /*パンくずリスト*/
    .breadcrumbs {
        font-size: 3.4vw;
    }

    .breadcrumbs ul {
        gap: 1vw 10.2vw;
    }

    .breadcrumbs .breadcrumbs_link::before {
        width: 3.4vw;
        height: 3.4vw;
        right: -7.1vw;
    }

    .breadcrumbs.site .separator {
        width: 3.4vw;
    }

    /*スタッフ一覧ページ*/
    .staff_swiper.grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1vw;
    }

    #page_staff .staff_swiper_title {
        flex-direction: column;
        padding-block: 0 8vw;
    }

    #page_staff .staff_swiper_title .title_area {
        margin: 0 0 3vw;
    }

    #page_staff .staff_swiper_title .text {
        width: 100%;
    }

    #page_staff .staff_info_area .staff_name_en {
        font-size: 6.2vw;
        margin-left: 0.7vw;
    }

    #page_staff .staff_info_area .staff_info {
        padding-inline: 4.4vw 2.5vw;
        gap: 2vw;
    }

    #page_staff .staff_info_area .staff_info .name {
        font-size: 4.8vw;
    }

    #page_staff .staff_info_area .staff_info .job {
        padding: 0 3vw;
        line-height: 1.5;
        font-size: 3.2vw;
    }


    /*スタッフ詳細*/

    .staff_profile_container {
        padding-bottom: 16vw;
    }

    .staff_profile_container.wrap.lr {
        max-width: 95%;
    }

    .staff_profile_container .back_img_area {
        height: 100%;
        top: 42.5vw;
        bottom: unset;
        padding-top: unset;
    }

    .staff_profile_area {
        gap: 10.2vw;
        flex-direction: column;
    }

    .staff_profile_area .writing {
        font-size: 12.3vw;
        bottom: unset;
        top: 60vw;
        left: unset;
        right: 0;
    }

    .staff_profile_area .img_area {
        width: 100%;
        height: 71.7vw;
    }

    .staff_profile_area .img_area .img {
        object-position: 50% 23%;
    }

    .staff_profile_area .text_area {
        gap: 5.12vw;
        justify-content: flex-start;
        width: 100%;
    }

    .staff_profile_area .job {
        font-size: 4.1vw;
    }

    .staff_profile_area .name {
        font-size: 6.15vw;
        line-height: 1.75;
    }

    .staff_profile_area .staff_profile {
        gap: 5px;
        flex-direction: column;
    }

    .staff_profile_area .profile_title {
        writing-mode: inherit;
        gap: 10.25vw;
        padding-inline: 5.12vw;
        width: 100%;
    }

    .profile_title .en {
        font-size: 5.12vw;
    }

    .profile_title .en::after {
        content: "";
        width: 1px;
        height: 5.12vw;
        bottom: 50%;
        left: unset;
        right: -5.12vw;
        transform: translateY(50%);
    }

    .profil_list {
        gap: 5px;
    }

    .profil_list li {
        padding: 3.84vw 6.41vw;
    }

    .profil_list li .title {
        width: 39.4%;
        font-weight: 700;
    }

    .profil_list li .item {
        flex-grow: 5;
    }

    #page_staff_profile .img_text_container {
        margin-block: 10vw 20vw;
        gap: 20vw;
    }

    #page_staff_profile .img_text_container .img_text {
        flex-direction: column-reverse;
    }

    #page_staff_profile .text {
        font-size: 4.1vw;
    }

    .message_container {
        height: unset;
        padding-block: 6.15vw 7vw;
    }

    .message_container.wrap.mid {
        max-width: 95%;
    }

    .message_container .message_area {
        gap: 6.15vw;
        padding-inline: 0;
        align-items: center;
        bottom: 0;
        flex-direction: column-reverse;
    }

    .message_container .img_area {
        width: 100%;
        height: 71.7vw;
    }

    .message_container .text_area {
        gap: 6.15vw;
        padding-bottom: 0;
    }

    .message_container .text_area .title {
        font-size: 6.15vw;
    }

    .message_container .text_area .title::before {
        font-size: 15.3vw;
        left: 42.5vw;
        font-weight: 100;
    }

    .message_container .text_area .title::after {
        bottom: -5.75vw;
    }

    /*店舗紹介*/

    #page_shop .shop_area {
        gap: 20.5vw;
    }


    #page_shop .shop_area .shop {
        width: 100%;
        gap: 8.8vw;
    }

    #page_shop .shop_info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5vw;
    }

    #page_shop .shop_area .shop_name {
        padding-inline: 5.12vw;
        font-size: 6.4vw;
    }

    #page_shop .swiper.shop_swiper {
        overflow: hidden;
        width: 100%;
        padding-bottom: 0;
    }

    #page_shop .swiper.shop_swiper .swiper-wrapper {
        flex-direction: row;
        gap: unset;
    }

    #page_shop .shop .img_area {
        width: 100%;
        height: 51.28vw;
    }

    #page_shop .shop .shop_info_area {
        width: 100%;
    }

    #page_shop .shop .profil_list li.flex {
        flex-direction: column;
        align-items: self-start;
        padding: 2vw 5vw 1.25vw;
    }

    #page_shop .shop .profil_list li.flex::before {
        height: 3em;
        top: 52%;
    }

    #page_shop .shop .profil_list li.map {
        padding: 5.12vw 0 2.5vw;
        width: 100%;
    }

    #page_shop .shop .profil_list li.map iframe {
        width: 100%;
        height: 59vw;
    }

    /*選ばれる理由*/
    #page_reason .text {
        font-size: 4.1vw;
        line-height: unset;
    }

    /*手数料0円*/
    #page_brokerage .text {
        font-size: 4.1vw;
        line-height: unset;
    }

    #page_brokerage .img_text:nth-child(2) {
        gap: 10vw;
    }

    #page_brokerage .img_text:nth-child(2) .img_area {
        width: 79%;
    }

}