@charset "utf-8";

/* 
Theme Name: shop
*/

.bg_mv {
    z-index: 0;
}
.page_headImage img {
    object-fit: cover;
    box-shadow: 6.4px 4.8px 12.2px 0.8px rgba(52, 42, 34, 0.27);
    height:500px;
}
.page_wrapper {
    background: #f8f7f3;
    overflow: hidden;
    line-height:1;
}
.page_contentWrapper {
    margin:0;
    padding-top:122px;
}
.page_contentWrapper h2 {
    padding-top: 74px;
}
.page_contentWrapper h2.fb {
    font-weight:bold;
}
.page_head h1 {
    letter-spacing: 5.4px;
}
.shoptitle_en {
    font-size:54px;
    display: block;
    text-align: center;
    font-weight: normal;
    margin-top:16px;
}
.brown {
    background: #ddcbae;
}

.white {
    background-color: #fff;
}
#shop_menu {
    padding-bottom:84px;
}
.shop_info_wrapper {
    width: 1100px;
    margin: 74px auto 100px;
    padding: 0 0 50px;
    box-sizing: border-box;
}
.shop_info_wrapper_02 {
    width: 1100px;
    margin: 0 auto;
    padding: 74px 0 50px;
    box-sizing: border-box;
}
.shop_info_wrapper_03 {
    width: 1100px;
    margin: 0 auto;
    padding: 0 0 50px;
    box-sizing: border-box;
}
.grand_bg_w {
    position: relative;
    padding: 0 0 50px;
    background: #fff;
    z-index: 20;
}

.grand_bg_w::after {
    content: "";
    position: absolute;
    top: 0;
    width: calc((100vw - 100%) / 2);
    height: 100%;
    background: #fff;
    z-index: -10;

}

.grand_bg_w.grand_left::after {
    right: 100%;
}

.grand_bg_w.grand_right::after {
    left: 100%;
}

.shop_info_inner {
    max-width: 1000px;
    margin: 80px auto;
    text-align: center;
    font-family: VDL-V7Mincho,Noto Serif JP,serif

}

/* 店舗名 */
.shop_info_placetitle {
    font-size: 40px;
    margin-bottom: 22px;
    line-height: 1;
    font-family: VDL-V7Mincho,serif;
    font-weight:bold;

}

/* 副題 (OMOTE-SANDO (TOKYO)) */
.shop_subtitle {
    font-size: 20px;
    letter-spacing: 2px;
    color: #000;
    font-weight: bold;
    padding-bottom:25px;
    font-family: VDL-V7Mincho,Noto Serif JP,serif;
}

/* 区切り線 */
.divider {
    border: none;
    border-bottom: 1px solid #000;
    margin: 50px 0;
}

/* ラベル （OPEN - CLOSE, 最終受付など） */
.label {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 35px;
    font-family: VDL-V7Mincho,Noto Serif JP,serif;
    letter-spacing: 3.2px;


}

/* 時間 （10:00〜21:00, 20:00など） */
.time {
    font-size: 32px;
    margin-bottom: 35px;
    font-weight: bold;
    font-family: VDL-V7Mincho,Noto Serif JP,serif;
    letter-spacing: 3.2px;
}

/* 注意書き */
.note {
    font-size: 16px;
    color: #000;
    font-weight: bold;
    font-family: VDL-V7Mincho,Noto Serif JP,serif;

}

/* 定休日 */
.holiday {
    font-size: 32px;
    font-weight: bold;
    font-family: VDL-V7Mincho,Noto Serif JP,serif;
    letter-spacing: 3.2px;
}

.shop_info_text {
    padding: 70px 117px;
    background-color: #fff;
    box-shadow: 6.4px 4.8px 0 0 rgba(52, 42, 34, 0.14);
}

.shop_info_text p {
    font-size: 26px;
    line-height: 2.5;
    text-align: center;
    font-family: VDL-V7Mincho,serif;
    font-weight: bold;
}

.shop_info_link {
    padding: 68px 10px;
    width: fit-content;
    margin: 55px auto;
}

.shop_info_link a {
    color: #fff;
    background-color: #000;
    box-shadow: 3.7px 5.9px 21px 0 rgba(0, 0, 0, 0.26);
    font-size: 30px;
   
    text-align: center;
    padding: 68px 100px;
}

.shop_info_contentwrap {
    padding: 50px 45px;
    /* カラム間のスペース */

}

.shop_menu_titlecontent {
    display: flex;
    align-items: flex-start;
    /* 上揃え */
    gap: 35px;
    margin-bottom: 70px;
    width: 100%;
}

/* 画像エリア */
.image_area {
    flex: 1;
    /* 2カラムのうちの1列 */
    max-width: 50%;
    /* 必要に応じて調整 */
}

.image_area img {
    width: 100%;
    height: auto;
    display: block;
}

/* テキストエリア */
.text_area {
    flex: 1;
    max-width: 50%;
}

/* タイトル */
.main_title {
    font-size: 50px;
    margin-top:40px;
    margin-bottom: 58px;
    letter-spacing: 0.05em;
    font-family: VDL-V7Mincho,serif;
    font-weight: bold;
}

/* 横線（タイトル下にある細線） */
#shop_menu .divider {
    border: none;
    border-bottom: 1px solid #000;
    margin-bottom: 58px 0 38px;
}

/* 文章 */
.description {
    font-size: 22px;
    line-height: 2;
}

/* 効果ボックス */
.effect_box {
    border: 2px solid #c8b191;
    /* ゴールド系の色を想定 */
    padding: 61px;
    text-align: center;
    position: relative;
    /* 後述の黒背景タイトルを位置調整する際に使用 */
    top: 0;
    left: 0;
    margin:0 auto;
    width:950px;
}

/* 効果タイトル（黒背景） */
.effect_title {
    display: inline-block;
    background: #000;
    color: #fff;
    padding: 16px 30px;
    font-size: 30px;
    margin-bottom: 20px;
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    /* タイトルを前面に */
    width: fit-content;
    font-family: VDL-V7Mincho,serif;
    font-weight:normal;
}

.effect_title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-style: solid;
    border-width: 15px 15px 0 15px;
    border-color: #000 transparent transparent transparent;
}

/* 効果リスト */
.effect_flex {
    display:flex;
}
.effect_flex .effect_list {
    text-align: start;
}
.effect_flex .effect_list ul li {
    font-size:20px;
}
.effect_list {
    font-size: 22px;
    line-height: 2;
}

.shop_info_menu_title_img {
    padding: 20px;
}

.shop_menu_card_wrapper {
    display: flex;
    gap: 20px;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
}

.shop_menu_card {
    border: 3px solid #ddcbae;
    font-size: 16px;
    /* ベース文字サイズ */
    line-height: 1.6;
    max-width: calc(50% - 20px);
    width: 500px;
    display: flex;
    flex-direction: column;
}
.info_menu_box_col {
    margin-top: auto;
}
.col_1 {
    max-width:100%;
    width:100%;
}
.shop_menu_more {
    border: none;
    line-height: 1.6;
    max-width: calc(50% - 20px);
    width: 500px;
    display: flex;
    flex-direction: column;
}

.shop_menu_more .shop_menu_card {
    border: 3px solid #ddcbae;
    max-width: fit-content;
    flex-grow: 1;
}

.shop_menu_more .more_btn {
    width: 300px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 16px;
}

/* 上部：タイトルエリア（背景色） */
.shop_menu_card_header {
    background-color: #ddcbae;
    /* ベージュ系の背景色 */
    padding: 16px;
    display: flex;
    align-items: center;
    height:110px;
}
#shop_menu_biyouhari .shop_menu_card_header {
    height:160px;
    /* padding-bottom:30px; */
}
.pl8 {
    padding-left:8px;
}
.shop_menu_circle {
    width: 110px;
    /* 円の幅 */
    height: 110px;
    /* 円の高さ */
    margin-right:33px;
}
.shop_menu_circle_badge {
    width: 110px;
    /* 円の幅 */
    height: 110px;
    /* 円の高さ */
    background-color: #fff;
    /* 背景色(白) */
    border-radius: 50%;
    /* 円形に */
    margin: 0 auto;
    /* 中央寄せ */
    display: flex;
    /* 中身のテキストを縦横中央に配置するためflexに */
    justify-content: center;
    /* 横中央揃え */
    align-items: center;
    /* 縦中央揃え */
}

.shop_menu_circle_text {
    background: linear-gradient(to top, rgba(168, 108, 46, 1), #a86c2e);

    /* ベンダープレフィックス込みでクリップと文字色を透明化 */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-size: 26px;
    line-height: 1.3;
    text-align: center;
}

/* タイトルテキスト */
.shop_menu_card_header_title {
    margin: 0;
    /* 余白リセット */
    font-size: 30px;
    line-height: 1.4;
    text-align: center;
    font-family: VDL-V7Mincho,serif;
    font-weight: bold;
}
.shop_menu_card_header_title.text_left{
    text-align: left;
}
.ribbon_shop_img {
    padding:0 50px;
    margin-top:-25px;
}
/* 下部：本文エリア（白背景） */
.shop_menu_card_content {
    background-color: #fff;
    padding: 16px 40px;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    flex-grow: 1; /* 内容部分を均等に伸ばす */
}

/* 説明文 */

.shop_menu_card_description {
    margin-bottom: 20px;
    font-size: 22px;
}
.shop_menu_card_description_2 {
    margin-bottom: 20px;
    text-align: center;
    font-size: 22px;
}

.info_menu_box {
    display: flex;
}

/* 時間／料金それぞれのカード */
.info_menu_item {
    display: flex;
    text-align: center;
    border: 1px solid #c8b191;
    width: 380px;
    margin: 0 auto;
    margin-bottom: 10px;
    align-items: center;
}

/* ラベル（「時間」「料金」） */
.info_menu_label {
    background-color: #ddcbae;
    /* ベージュ */
    color: #333;
    padding: 32px 26px 32px 38px;
    font-weight: bold;
    position: relative;
    font-size: 22px;
    width: 113px;
    margin: 2px 0;
}

.info_menu_label::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -25px;
    transform: translateY(-50%);
    border-style: solid;
    border-width: 48.5px 0 48.5px 26px;
    border-color: transparent transparent transparent #ddcbae;
}

/* 値（「90分」「22,000円」） */
.info_menu_value {
    flex: 1;
    width: 240px;
    text-align: center;
    /* テキスト中央揃え */
    font-size: 26px;
    padding: 32px;
    font-weight: bold;
    line-height:1;
}
.info_menu_value span {
    font-size: 18px;
    line-height:1;
}
.effect_box_2 {
    margin:32px auto;
    
}
.pd20 {
    padding:20px;
}
.f16 {
    font-size:16px;
    
}
.circle_small {
    width:90px;
    height:90px;
}
.shop_info_menu_note {
    text-align: center;
    font-size:18px;
}
.shop_info_staffreservationfee {
    display:flex;
    gap:20px;
    justify-content:center ;
    margin-top:67px;
    margin-bottom:100px;
}
.staff_fee_card {
    width:240px;
    height:240px;
    padding:53px 30px 48px;
    box-shadow: 1.6px 1.2px 7px 0 rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
}
.staff_fee_name {
    text-align: center;
    font-size: 22px;
    margin: 0;
    padding-bottom: 25px;
    border-bottom: 1px solid #ddcbae;
    font-family: VDL-V7Mincho,serif;
}
.staff_fee_price {
    text-align: center;
    font-size: 30px;
    margin: 45px 0 0;
    font-family: VDL-V7Mincho,serif;

}
.shop_info_campaign_wrapper{
    position: relative;
    top:0;
    left:0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

}
.campaign_info .content_inner {
    z-index: 1;
}
.shopcampaign_en_title {
    writing-mode: vertical-rl;
    display: flex;
    align-items: center;
    font-size: 100px;
    line-height: 1;
    letter-spacing: 3px;
    color: #fff;
    width: 73px;
    margin-right: 12px;
    font-family: BodoniSvtyTwoITCTT, serif;
    margin-top:40px;
}
.shopcampaign_content_flex {
    display:flex;
    margin-top:127px;
}
.campanign_info_bg {
    position: absolute;
    left:0;
    width:580px;
    height:1600px;
    background-color: #ddcbae;
    z-index: 0;
}
.campaign_post_list {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 3rem;
}

/* 1つ1つのニュースカード */
.campaign_post_item {
    display: flex;
    border: 1px solid #000;
    /* 全体の枠線 */
    background-color: #fff;
    margin-bottom: 2rem;
    position: relative;
    /* 日付リボン用にrelative */
    /* padding: 1rem; */
}

/* 左側の画像枠 */
.campaign_post_image_wrapper {
    width: 35%;
    padding: 27px 0 27px 35px;

    overflow: hidden;
    /* リボンがはみ出す場合は調整 */
}

.campaign_post_image_wrapper img {
    width: 100%;
    height: auto;
    display: block;
    height: 300px;
    object-fit: cover;
}

/* 日付を斜めリボンにする例 */
.campaign_post_date {
    position: absolute;
    top: 0;
    right:0;
    background-color:#000;
    padding:18px 32px;
    width:170px;
}

.campaign_post_date span {
    color: #fff;
    font-size: 18px;


}

/* 右側テキスト */
.campaign_post_text_wrapper {
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    padding: 88px 0 55px 35px;
}


.campaign_post_category {
    display: inline-block;
    border: 2px solid #000;
    padding: 12px 35px;
    font-size: 18px;
    width: fit-content;
    text-transform: uppercase;
    line-height:1;
}

.campaign_post_text_wrapper .campaign_post_title {
    font-size: 30px;
    font-weight: 600;
    margin: 0;
    line-height: 1.67;
    letter-spacing: 1.5px;
    /* font-family: HiraginoSans-W5; */
}

.campaign_post_text_wrapper h3 a {
    color: #333;
    text-decoration: none;
}

.shopcampaign_more_link {
    display: flex;
    width: 300px;
    margin:0 auto;
}

.more_link:hover {
    opacity: 0.5;
}

.shop_info_medical_wrapper {
    position: relative;
    padding-top:300px;
   
}
.shop_info_medical_pin {
    max-width:1400px;
    background-color:#f8f7f3;
    margin: 0px auto; /* 上下50px、左右中央配置 */
    text-align: center; /* 中央揃え */
    border: solid 1px #ddcbae;
}
.grandtherapuclinic.medical_pin {
    top:160px;
}
.shop_info_medical_title {
    font-size: 50px;
    font-weight: bold;
    margin-bottom: 74px;
    padding-top:125px;
    font-family: VDL-V7Mincho,serif;
}

.shop_info_medical_text {
    font-size: 22px;
    line-height: 2;
    padding-bottom: 66px;
    text-align: center;
    margin:0 auto;

    width:970px;
}

.shop_info_medical_text_bottom {
    font-size: 22px;
    line-height: 2;
    padding-top:60px;
    padding-bottom:121px;
    margin:0 auto;
    text-align: center;
    width:970px;

}
.shop_info_medical_pin img {
    max-width:1100px;
    height: auto;
    margin-top: 20px;
}
.shop_info_access_wrapper {
    padding-top:122px;
    
}
.station_access {
    font-size:26px;
    line-height:1.8;
    font-weight:bold;
}
.access_youtube {
    padding-top:80px;
}
.access_youtube_movie {
    width:650px;
    height:400px;
    margin:0 auto;
    display: block;
}
.youtube_title {
    text-align: center;
    font-size: 40px;
    margin-top:87px;
    font-family: VDL-V7Mincho,serif;
}
.access_num {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    column-gap:60px;
    width:1100px;
    margin:0 auto;
    border-top:1px solid #000;
    padding-top:65px;
    padding-bottom:130px;
    margin-top:66px;
}
.access_num_box {
    width:calc(50% - 60px);
    padding-bottom:44px;
}

.access_num_box p {
    font-size: 16px;
    margin:8px 22px;
}
.pt40 {
    padding-top:40px;
}
.pb0 {
    padding-bottom:0;
}
.white_nowrap {
    white-space: nowrap;
}
/* オンライン鍼灸院　流れ */
.shop_online_link_adtxt {
    text-align: center;
    font-size: 18px;
    margin-top:-25px;
}
.shop_flow_inner {
    display:flex;
    width: 100%;
    flex-wrap: wrap;
    column-gap:62px;
    row-gap:35px;
}
.shop_flow_num {
    width:100%;
    font-family: BodoniSvtyTwoITCTT;
    font-size: 36px;
    letter-spacing: 3.6px;
}
.shop_flow_image {
    width:33%;
}
.shop_flow_text {
    width:60%;
    line-height:2;
    font-size: 22px;
    margin-top:30px;
}
.shop_flow_note {
    color:#da0000;
}
.shop_flow_divider {
    position: relative;
    border: none;
    border-bottom: 1px solid #000;
    margin: 85px 0;
}
.shop_flow_divider::after {
    content:"";
    position: absolute;
    left:50%;
    transform: translateX(-50%);
    border-style:solid;
    border-width: 30px 17px 0 17px;
    border-color: #000000 transparent transparent transparent;
}
/* レスポンシブ対応 */

@media screen and (max-width: 1100px) {
    .page_contentWrapper {
        width:100%;
    }
    .shop_info_wrapper_02 {
        width:100%;
    }
    .shop_info_wrapper,.shop_info_wrapper_03 {
        width: 100%;
        padding: 0 10px 50px;
    }
    .access_num {
        width:100%;
    }
    .shop_info_medical_pin {
        width:90%;
    }
    .shop_info_medical_text,.shop_info_medical_text_bottom {
        width:90%;
    }
    #shop_menu {
        padding:16px;
    }
    .effect_box {
        width:100%;
    }
    .shop_menu_more .shop_menu_card {
        width:100%;
    }
    .shop_menu_card_header_title {
        font-size: 24px;
    }
    .info_menu_item {
        width:auto;
    }
}

@media screen and (max-width: 768px) {
    .page_headImage img {
        height:280px;
    }
    .shop_info_access_wrapper {
        padding-top:60px;
    }
    .bg_mv {
        height:800px;
    }
    .shop_info_staffreservationfee {
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        margin:32px 0;
    }
    .effect_box {
        width:100%;
    }
    .effect_box_2 {
        padding:60px 32px 32px;
    }
    .effect_box_2 .effect_title{
        font-size: 24px;
    }
    .info_menu_box {
        flex-direction: column;
    }
    .info_menu_item {
        width:80%;
    }
    .shop_menu_card_wrapper {
        flex-direction: column;
    }
    .shop_menu_card {
        max-width:100%;
        width:100%;
    }
    .shop_menu_more {
        width:100%;
        max-width: 100%;
    }

    .shopcampaign_en_title {
        font-size: 65px;
    }
    .campaign_post_item {
        flex-direction: column;
    }
    .campaign_post_image_wrapper {
        width:100%;
    }
    .campaign_post_text_wrapper {
        width:100%;
        padding:32px;
    }
    .more_link{
        margin:18px auto;
    }
    .shop_flow_inner {
        flex-direction: column;
        row-gap: 18px;
        column-gap: 30px;
    }
    .shop_flow_num {
        font-size:24px;
    }
    .shop_flow_image,.shop_flow_text  {
        width:100%;
    }
    .shop_flow_text {
        font-size:16px;
        margin-top:0;
    }
    .shop_info_link a {
        padding:45px 50px;
        font-size: 24px;

    }
}
@media screen and (max-width: 480px) {
    .page_headImage img {
        height:180px;
    }
    .shop_info_access_wrapper {
        padding-top:32px;
    }
    .page_contentWrapper {
        padding-top:32px;
    }
    .page_contentWrapper h2 {
        padding-top:32px;
    }
    .shoptitle_en { 
        font-size:16px;
    }
    #shop_menu {
        padding:16px;
    }
    .shop_info_wrapper,.shop_info_wrapper_03 {
        width: 100%;
        padding: 8px;
        margin-top:32px;
        margin-bottom:32px;
    }

    .shop_info_inner {
        margin:32px auto;
    }
    .shop_info_contentwrap {
        padding:16px;
    }
    .shop_info_text {
        padding:32px;

    }
    .shop_info_text p {
    font-size:18px;
    }
    .shop_info_link {
        padding:24px 0;
        font-size:16px;
    }
    .shop_info_link a{
        padding:32px;
        font-size:16px;

    }
    .shop_menu_titlecontent {
        flex-direction: column;
    }
    .image_area,.text_area {
        max-width:100%;
    }
    .description {
        font-size:16px;
    }
    .main_title {
        font-size:24px;
        margin:32px 0;
    }
    .effect_title {
        font-size:20px;
        width:100%;
    }
    .effect_box {
        padding: 45px 32px 32px;
        width:90%;
    }
    .effect_box_2  .effect_title {
        font-size:20px;
        width:100%;
    }
    .effect_flex {
        flex-direction:column ;
        gap:32px;
    }
    .effect_flex .effect_list ul li {
        font-size:16px;
    }
    .effect_list {
        font-size:16px;
    }
    .shop_menu_card_wrapper {
        padding:16px;
    }
    .shop_menu_circle {
        width:80px;
        height:80px;
        margin:0;
    }
    .shop_menu_circle_badge {
        width:80px;
        height:80px;
    }
    .shop_menu_circle_text {
        font-size: 14px;
    }
    .ribbon_shop_img {
        padding:0 ;
        margin:0;
    }
    #shop_menu_biyouhari .shop_menu_card_header {
        height:100%;
        padding:16px;
        gap:8px;
    }
    .shop_menu_card_header_title {
        font-size:18px;
    }
    .shop_menu_card_description,  .shop_menu_card_description_2 {
        font-size:16px;
    }
    .info_menu_value {
        font-size: 20px;
        padding-left:24px;
        padding-right:16px;
    }
    .info_menu_value span {
        font-size:16px;
    }
    .info_menu_label {
        font-size: 18px;
        width:65px;
        padding:32px 10px;
    }

    .shop_menu_card_content {
        padding:16px;
    }
    .staff_fee_card {
        width:200px;
        height:200px;
        padding:32px 16px;
        justify-content: space-evenly;
    }
    .staff_fee_name {
        font-size:18px;

    }
    .staff_fee_price {
        font-size:20px;
        margin-top:32px;
    }
    .shopcampaign_content_flex {
        flex-direction: column;
        margin-top:16px;
    }
    .shopcampaign_en_title {
        font-size: 45px;
    }
    .shop_info_medical_title {
        font-size:24px;
        margin-bottom:32px;
    }
    .shop_info_medical_text, .shop_info_medical_text_bottom {
        font-size:16px;
        padding-bottom:32px;
    }
    .shop_info_medical_text_bottom {
        padding-top:32px;
    }
    .info_menu_item {
        width:100%;
    }
    .shop_info_placetitle {
        font-size:24px;
    }
    .time,.station_access {
        font-size:16px;
    }
    .holiday {
        font-size:18px;
    }
    .divider {
        margin:32px 0;
    }
    .access_youtube_movie {
        height:200px;
    }
    .access_youtube_movie,.access_num_box {
        width:80%;
    }
    .campaign_post_image_wrapper {
        padding:16px;
    }
    .campaign_post_text_wrapper{
        padding:16px;
    }
    .campaign_post_text_wrapper .campaign_post_title {
        font-size:20px;
    }
    
    .more_link {
        width:180px;
        
    }
    .shop_info_medical_title {
        font-size:36px;
     }
     .shop_flow_divider {
        margin:45px 0;
     }
}