@charset "UTF-8";

/* =====================================================================
 * jiyugaoka.css
 *
 * ベーステーマには「医院名・電話番号・診療時間」が画像に焼き込まれた素材が
 * 複数あり、自由が丘ではそのまま使えない（ピクセル編集不可）。
 * 自由が丘版の画像が支給されるまでの暫定として、同等の見た目を
 * HTMLテキストで再現するための追加スタイルをここにまとめる。
 *
 * 画像が支給されたら、各テンプレートの該当ブロックを <img> に戻し、
 * このファイルの対応セクションを削除すること。
 * ===================================================================== */


/* ---------------------------------------------------------------------
 * MVキャッチコピー（代替: images/top/imgpc_title_a.webp / imgsp_title_a.webp）
 * ベース版は縦組みの画像。縦中横の雰囲気を writing-mode で再現する。
 * ------------------------------------------------------------------- */
/* 縦書き(vertical-rl)ではブロック方向が右→左になるので、素の
   ブロックレイアウトのまま子要素が「右から順に列」として並ぶ。
   flex を使うと主軸まで縦になり、2行が1本の長い列に連結してしまうため使わない。 */
.tj2-mv-copy {
    writing-mode: vertical-rl;
    text-orientation: upright;
    height: 100%;
    font-family: "Zen Old Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
    color: #1b3b45;
    line-height: 1.35;
    text-shadow: 0 1px 10px rgba(255, 255, 255, .85), 0 0 28px rgba(255, 255, 255, .7);
}

.tj2-mv-copy__jp {
    margin: 0 .18em;
    font-weight: 600;
    letter-spacing: .06em;
    /* 縦組みなので折り返すと1行が2列に割れて読めなくなる。1列に固定し、
       行の長さ（最長15文字）が MV の高さに収まるサイズにする。 */
    white-space: nowrap;
    font-size: min(3.2vw, 38px);
}

.tj2-mv-copy__jp em {
    font-style: normal;
    color: #8a9a5b;
}

.tj2-mv-copy__en {
    display: block;
    text-orientation: sideways;
    margin: 0 .6em 0 0;
    font-family: "Marcellus", "Times New Roman", serif;
    font-size: clamp(9px, 1vw, 13px);
    letter-spacing: .28em;
    white-space: nowrap;
    color: #9aa7ab;
}

/* ベース版の .copyimg は画像前提で height/max-height を !important で縛っている。
   テキストに置き換えたぶん、その指定を無効化する。 */
#mainimage .slick-slide .copyimg .tj2-mv-copy {
    height: auto !important;
    max-height: none !important;
}

@media screen and (max-width: 768px) {
    .tj2-mv-copy__jp {
        font-size: min(4.4vw, 23px);
    }
    .tj2-mv-copy__en {
        font-size: 9px;
    }
    /* 自由が丘は医院名が渋谷版より2文字長く、SPヘッダーのキャッチが
       2行になってロゴを押し出していたため一回り小さくする。 */
    #sp-header-logo h1.main-01 {
        font-size: 9px;
        line-height: 1.5;
        white-space: nowrap;
    }
}


/* ---------------------------------------------------------------------
 * メインビジュアルの写真
 * ベース版は PC/SP で別画像＋ margin-left:30% を前提にしていたが、
 * 自由が丘は現行サイトの横長写真1枚に統一したので、その指定を解除する。
 * 写真の左半分が明るいので、そこに縦組みコピーを重ねる。
 * ------------------------------------------------------------------- */
/* キャッチの位置。ベース版は画像キャッチを右下に置いていたが、
   自由が丘は写真の明るい左側に縦組みテキストを重ねる。 */
#mainimage .slick-slide .copyimg {
    position: absolute;
    top: 3vmax;
    bottom: 3vmax;
    left: 10vmax;
    right: auto;
    transform: none;
    z-index: 2;
}

.tj2-mv-bg img {
    margin-left: 0 !important;
    width: 100% !important;
    height: 100%;
    max-height: none !important;
    display: block;
    /* ベース版と同じ object-fit:cover。切り取り位置は左寄りにして、
       コピーを重ねる左側の明るい器具の面を確保する（右側にドクターが残る）。 */
    object-fit: cover;
    object-position: 18% center;
}

@media screen and (max-width: 768px) {
    /* 横長写真をSPでそのまま出すと帯のように薄くなるため、高さを与えて
       明るい左側を中心にトリミングする。 */
    /* SPは縦長に切り取るため原画の横4割しか映らない。
       28%だとドクターとマイクロスコープが画面外に出て器具しか残らないので、
       被写体が入り、かつ左側の明るい面にコピーが乗る位置へ寄せる。 */
    #mainimage .slick-slide .bgimg.tj2-mv-bg img {
        width: 100% !important;
        height: 62vh;
        max-height: 560px !important;
        object-fit: cover;
        object-position: 58% center;
    }
    /* #sp-header は高さ80pxの position:fixed。その下から始めないと
       縦組みキャッチの1文字目がヘッダーに隠れる。 */
    #mainimage .slick-slide .copyimg {
        top: 96px;
        bottom: 24px;
        left: 24px;
        right: auto;
        transform: none;
    }
}


/* ---------------------------------------------------------------------
 * グローバルナビ
 * 「症例紹介」を足して7項目になり、1280幅では項目幅の合計(817px)が
 * ナビ幅(815px)をわずかに超えて折り返していた。左右の余白を詰めて1行に収める。
 * ------------------------------------------------------------------- */
@media screen and (min-width: 992px) {
    /* ベース側の指定（1.2rem）より詳細度を上げる必要があるので #gnav から書く */
    #gnav #gnav-menu > li > a {
        padding-left: 13px;
        padding-right: 13px;
    }
}


/* ---------------------------------------------------------------------
 * 本文内の電話CTA
 * 下層ページ本文にあったCTA画像（first-cta-01_2.png / orthodontic-cta-02.png）は
 * 電話番号と診療時間が画像に焼き込まれていて流用できないため、
 * 同じ見た目をHTMLテキストで再現している（タップ可・読み上げ可）。
 * ------------------------------------------------------------------- */
.tj2-ctatel {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 431px;
    max-width: 100%;
    min-height: 141px;
    padding: 18px 24px;
    background: #2b7f96;
    color: #fff;
    text-decoration: none;
    line-height: 1.45;
    text-align: center;
    transition: opacity .25s ease;
}

.tj2-ctatel:hover {
    text-decoration: none;
    color: #fff;
    opacity: .88;
}

.tj2-ctatel__num {
    display: block;
    font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Times New Roman", serif;
    font-size: clamp(26px, 3.4vw, 38px);
    letter-spacing: .02em;
    white-space: nowrap;
}

.tj2-ctatel__num .fa {
    font-size: .62em;
    margin-right: .15em;
    vertical-align: .08em;
}

.tj2-ctatel__hours {
    display: block;
    margin-top: .5em;
    font-size: clamp(11px, 1.2vw, 13px);
    letter-spacing: .01em;
}

.tj2-ctatel__lead {
    display: block;
    font-size: clamp(12px, 1.3vw, 14px);
    letter-spacing: .04em;
}

.tj2-ctatel--sm {
    width: 341px;
    min-height: 111px;
    padding: 14px 20px;
}

.tj2-ctatel--sm .tj2-ctatel__num {
    font-size: clamp(22px, 2.6vw, 30px);
    margin-top: .2em;
}


/* ---------------------------------------------------------------------
 * 料金訴求バナー（画像版が渋谷表記のため差し替え）
 * ------------------------------------------------------------------- */
.tj2-pricebnr {
    list-style: none;
    margin: 0 auto;
    padding: 0 20px;
    max-width: 1200px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
}

.tj2-pricebnr > li {
    display: flex;
    margin: 0;
}

@media screen and (max-width: 991px) {
    .tj2-pricebnr {
        grid-template-columns: 1fr;
        max-width: 520px;
        gap: 16px;
    }
}

.tj2-pricebnr__card {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 28px 26px 24px;
    border-radius: 10px;
    text-align: left;
    text-decoration: none;
    color: #16323a;
    background: #f2f7f8;
    border: 1px solid #d8e6e9;
    transition: box-shadow .25s ease, transform .25s ease;
}

.tj2-pricebnr__card:hover {
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    transform: translateY(-2px);
}

.tj2-pricebnr__card--ortho { background: #fdf3f6; border-color: #f0d7e0; }
.tj2-pricebnr__card--allon { background: #f7f4ec; border-color: #e6dcc4; }

.tj2-pricebnr__lead {
    display: block;
    font-family: "Zen Old Mincho", "Yu Mincho", serif;
    font-size: clamp(15px, 1.5vw, 18px);
    letter-spacing: .04em;
    margin-bottom: .3em;
}

.tj2-pricebnr__price {
    display: block;
    line-height: 1.1;
    color: #12707f;
    margin-bottom: .5em;
}

.tj2-pricebnr__card--ortho .tj2-pricebnr__price { color: #c2568a; }

/* 価格はバナーの主役なので大きく出す */
.tj2-pricebnr__price strong {
    font-family: "Marcellus", "Times New Roman", serif;
    font-size: clamp(40px, 5.4vw, 60px);
    font-weight: 400;
    letter-spacing: .02em;
}

.tj2-pricebnr__unit { font-size: clamp(15px, 1.6vw, 20px); margin-right: .15em; }
.tj2-pricebnr__yen { font-size: clamp(16px, 1.8vw, 22px); margin-left: .1em; }
.tj2-pricebnr__tax { font-size: clamp(11px, 1.1vw, 13px); margin-left: .3em; color: #555; }
.tj2-pricebnr__from { font-size: clamp(14px, 1.4vw, 17px); margin-left: .3em; }

.tj2-pricebnr__sub {
    display: block;
    font-size: clamp(13px, 1.35vw, 16px);
    line-height: 1.6;
    color: #16323a;
    margin-bottom: .15em;
}

.tj2-pricebnr__sub em {
    font-style: normal;
    font-weight: 700;
    color: #12707f;
}

.tj2-pricebnr__card--ortho .tj2-pricebnr__sub em { color: #c2568a; }

.tj2-pricebnr__note {
    display: block;
    font-size: clamp(11px, 1.1vw, 13px);
    line-height: 1.6;
    color: #4a5a5e;
    margin-bottom: 1em;
    /* CTAを3枚とも同じ高さに揃えるため、注記で余白を吸収する */
    flex: 1 1 auto;
}

.tj2-pricebnr__card--ortho .tj2-pricebnr__note { color: #7a5a68; }
.tj2-pricebnr__card--allon .tj2-pricebnr__note { color: #6b6150; }
.tj2-pricebnr__card--allon .tj2-pricebnr__price { color: #8a7433; }
.tj2-pricebnr__card--allon .tj2-pricebnr__sub em { color: #8a7433; }
.tj2-pricebnr__card--allon .tj2-pricebnr__cta { background: #8a7433; }

.tj2-pricebnr__cta {
    display: block;
    text-align: center;
    padding: .7em 1em;
    border-radius: 999px;
    background: #12707f;
    color: #fff;
    font-size: clamp(13px, 1.3vw, 15px);
    letter-spacing: .06em;
}

.tj2-pricebnr__card--ortho .tj2-pricebnr__cta { background: #c2568a; }

@media screen and (max-width: 767px) {
    .tj2-pricebnr li { margin-bottom: 16px; }
}


/* ---------------------------------------------------------------------
 * 電話番号ブロック
 * 代替: images/cta-01_2.png / images/footer-tel.png / images/lower-header-time.png
 * ------------------------------------------------------------------- */
.tj2-telblock {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: #1b7fa3;
    line-height: 1.5;
}

.tj2-telblock:hover {
    text-decoration: none;
    opacity: .8;
}

.tj2-telblock__num {
    display: block;
    font-family: "Marcellus", "Times New Roman", serif;
    font-size: clamp(26px, 4vw, 42px);
    letter-spacing: .04em;
    white-space: nowrap;
}

.tj2-telblock__hours {
    display: block;
    margin-top: .4em;
    font-size: clamp(11px, 1.3vw, 14px);
    color: #333;
    letter-spacing: .02em;
}

/* 下層ヘッダー内はスペースが狭いので一回り小さく */
.tj2-telblock--inline .tj2-telblock__num {
    font-size: clamp(16px, 1.8vw, 24px);
}

.tj2-telblock--inline .tj2-telblock__hours {
    font-size: 11px;
    line-height: 1.4;
}

/* Contact セクションの電話CTAとWEB予約CTAの縦位置を揃える。
   ベース版は .footer-cta-btn を2列グリッドにしつつ li{display:inline-block} なので、
   中身の高さがそのまま出る。自由が丘は診療時間が平日＋土日祝の2行ぶんあり、
   画像CTA（高さ141px固定）と縦位置がズレていた。
   li をflexにして中身を上下中央に置き、a に枠と同じ最低高さを与えて揃える。 */
.footer-cta-btn > li {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.footer-cta-btn > li > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 141px;
    padding: 14px 18px;
    box-sizing: border-box;
}

.footer-cta-btn > li > a > img {
    display: block;
    max-width: 100%;
    height: auto;
}

.footer-cta-btn .tj2-telblock__hours {
    white-space: normal;
    line-height: 1.6;
}

@media screen and (max-width: 768px) {
    .footer-cta-btn > li > a {
        min-height: 110px;
    }
}

/* 本文内のCTA並び（/first-visit/ の .step-01-cta など）。
   電話CTAをHTMLテキストにしたぶん高さが画像CTAと変わり、
   画像CTAと上端・下端が揃わなくなるため、列の高さを揃えて中身を上下中央に置く。
   ページ別CSS（#first ...）が後に読み込まれるので !important で確実に当てる。 */
.entry-content .step-01-cta {
    align-items: stretch !important;
}

.entry-content .step-01-cta > a {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.entry-content .step-01-cta > a > img {
    display: block;
    max-width: 100%;
    height: auto;
}


/* 本文の画像カラムが固定幅画像のぶん縮まないのを防ぐ */
.entry-content .d-lg-flex > .image,
.entry-content .d-md-flex > .image,
.entry-content .d-flex > .image {
    min-width: 0;
}

.entry-content .image img {
    max-width: 100%;
    height: auto;
}

/* /concept/ の画像カラムは装飾として right:-10vmax / left:-10vmax でずらしてある。
   1920幅では収まるが、992〜1439px では画面外へ62pxはみ出して横スクロールが出る
   （渋谷本体でも同じ）。収まらない幅だけオフセットを解除する。 */
@media screen and (min-width: 992px) and (max-width: 1439px) {
    #info #concept .image {
        right: 0 !important;
    }

    #info #concept #concept-02 .image {
        left: 0 !important;
        right: auto !important;
    }
}


/* フッターの大きめ電話表記（代替: images/footer-tel.png） */
.tj2-tel-lg {
    font-family: "Marcellus", "Times New Roman", serif;
    font-size: clamp(22px, 2.6vw, 32px);
    letter-spacing: .04em;
    color: #1b7fa3;
    text-decoration: none;
    white-space: nowrap;
}

.tj2-tel-lg:hover {
    text-decoration: none;
    opacity: .8;
}


/* ---------------------------------------------------------------------
 * ロゴ
 * ベース版のロゴ画像は医院名が焼き込まれているため、自由が丘のカスタムロゴ
 * （メディアID 221）に差し替えている。元画像と縦横比が違うので上限を与える。
 * ------------------------------------------------------------------- */
#header-logo img,
#sp-header-logo img,
#lower-header .logo img,
.footer-logo img {
    max-width: 100%;
    height: auto;
}

#header-logo img { max-height: 64px; width: auto; }
#lower-header .logo img { max-height: 52px; width: auto; }
#sp-header-logo img { max-height: 44px; width: auto; }
.footer-logo img { max-width: 280px; }

/* ベース版の #sp-header は下15%が透明になるグラデーション。
   自由が丘のロゴは縦幅があるため、下層ページの灰色帯が透けてロゴの
   下端が切れて見える。白の範囲を広げてロゴの背面を白で覆う。 */
#sp-header {
    background: linear-gradient(to bottom, #fff 0%, #fff 94%, rgba(255, 255, 255, 0) 100%);
}