@charset "UTF-8"; /* CSS Document */ /* Theme Name:茶屋が坂矯正歯科 成人矯正LP Description: 成人矯正LP Version: 1.0.0 */ /********************* 変数設定 ************************/ @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@400;500&display=swap"); /* 書体（確定）Adobe Fonts（Typekit）から読み込む 本文・ゴシック : 源ノ角ゴシック source-han-sans-japanese wght 300 / 400 / 500 / 700 見出し・明朝 : 源ノ明朝 source-han-serif-japanese wght 500 / 600 欧文（幾何学） : Futura PT futura-pt wght 300 / 400 / 500 欧文（可変） : Postea Variable postea-variable wght 400 読み込みは functions.php の wp_enqueue_style（静的HTMLは の ）で行う。 以降の指定は書体が読めなかった場合のフォールバック。 ※源ノ明朝は 500 と 600 しか無いので、400 は指定しない。 */ /* PC側の数値は 1920px基準の実寸rem で指定する。 カンプ（幅3333px）から採寸した値は 0.5761 倍（= 1920 / 3333）して記入する。 例: カンプ実寸 133px → 133 * 0.5761 = 76.6rem */ /********************* リセット ************************/ html, body, div, span, h1, h2, h3, h4, p, em, img, section, svg, ul, ol, li { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; background-color: transparent; list-style: none; font-style: normal; font-weight: 400; } @media (min-width: 751px) { html { font-size: 0.0625vw; } } @media (min-width: 1601px) { html { font-size: 0.0625rem; } } @media (max-width: 750px) { html { font-size: 0.1333333333vw; } } body { font-family: "source-han-sans-japanese", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif; font-weight: 400; color: #3c3c3c; } @media (min-width: 751px) { body { font-size: 16rem; max-width: 1920rem; margin: 0 auto; } } @media (max-width: 750px) { body { font-size: 28rem; } } img { max-width: 100%; height: auto; } /********************* 共通パーツ ************************/ @media (min-width: 751px) { .pc__none { display: none; } } @media (max-width: 750px) { .sp__none { display: none; } } .text__left { text-align: left; } /********************* ちょっと待ってください ************************/ .wait { position: relative; width: 100%; box-sizing: border-box; background-image: url(img/wait_bg.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; text-align: center; overflow: hidden; /* 小書きかな・長音符が行頭に来ないようにする（SPの折り返し対策） */ line-break: strict; /* 文字詰めについて font-feature-settings:"palt" を入れるとカンプより詰まりすぎたため未使用。 書体確定後、字幅がカンプと合わない場合は letter-spacing で微調整してください。 */ } @media (min-width: 751px) { .wait { padding: 120rem 0 100rem; } } @media (max-width: 750px) { .wait { padding: 110rem 40rem 120rem; } } .wait__inner { width: 100%; max-width: 100%; margin: 0 auto; } .wait { /* --- 吹き出し --- */ } .wait__balloon { position: relative; margin: 0 auto; } @media (min-width: 751px) { .wait__balloon { width: 494rem; height: 130rem; } } @media (max-width: 750px) { .wait__balloon { width: 494rem; height: 130rem; } } .wait__balloon_frame { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .wait__balloon_txt { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; /* 枠部分（viewBox 274 のうち上部 213）の中央に揃える */ height: 77.7%; color: #f4ff67; font-weight: 500; line-height: 1; letter-spacing: 0.08em; /* letter-spacing の余白ぶん左に寄せて視覚中央に合わせる */ text-indent: 0.08em; } @media (min-width: 751px) { .wait__balloon_txt { font-size: 30rem; } } @media (max-width: 750px) { .wait__balloon_txt { font-size: 32rem; } } .wait { /* --- 見出し --- */ } .wait__title { color: #fff; font-weight: 500; line-height: 1; } @media (min-width: 751px) { .wait__title { margin-top: 102rem; } } @media (max-width: 750px) { .wait__title { margin-top: 80rem; } } .wait__title_main { display: block; letter-spacing: 0.08em; text-indent: 0.08em; font-weight: 7; } @media (min-width: 751px) { .wait__title_main { font-size: 60rem; } } @media (max-width: 750px) { .wait__title_main { font-size: 44rem; /* 2行目の傍点が1行目にかからないよう、やや広めにとる */ line-height: 1.9; } } .wait__title_sub { display: block; color: #f4ff67; letter-spacing: 0.04em; text-indent: 0.04em; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; } @media (min-width: 751px) { .wait__title_sub { margin-top: 53rem; font-size: 49.7rem; } } @media (max-width: 750px) { .wait__title_sub { font-size: 40rem; line-height: 1.5; } } .wait__title_sub .color__wh { color: #fff; } .wait { /* 見出しのうち小さい文字（で／だけを） */ } @media (min-width: 751px) { .wait__sm { font-size: 51.9rem; } } @media (max-width: 750px) { .wait__sm { font-size: 35rem; } } .wait__dot { position: relative; display: inline-block; font-weight: 700; /* 親の line-height に影響されないよう固定（傍点の位置がずれるため） */ line-height: 1; /* inline-block だと親の text-indent が再適用され、文字とドットが半角ぶんズレる */ text-indent: 0; /* ★指定サイズ：1920px 表示時に 60px */ } @media (min-width: 751px) { .wait__dot { font-size: 60rem; } } .wait__dot::before { content: ""; display: block; position: absolute; left: 0; right: 0; background-repeat: repeat-x; /* font-size 60rem / letter-spacing 0.08em のとき 全角1文字の送り = 60 + 4.8 = 64.8rem。この幅でドットを繰り返す。 */ } @media (min-width: 751px) { .wait__dot::before { top: -28rem; height: 12.2rem; background-image: radial-gradient(circle 6.1rem at 50% 50%, #f4ff67 100%, transparent 0); background-size: 64.8rem 100%; background-position: -2.4rem 0; } } @media (max-width: 750px) { .wait__dot::before { top: -21rem; height: 9rem; background-image: radial-gradient(circle 4.5rem at 50% 50%, #f4ff67 100%, transparent 0); background-size: 47.5rem 100%; background-position: -1.76rem 0; } } .wait { /* --- 本文 --- */ } .wait__text { color: #fff; } @media (min-width: 751px) { .wait__text { margin-top: 57rem; font-size: 20rem; letter-spacing: 0.08em; text-indent: 0.08em; } } @media (max-width: 750px) { .wait__text { margin-top: 60rem; font-size: 26rem; letter-spacing: 0.04em; text-indent: 0.04em; } } @media (min-width: 751px) { .wait__text-second { margin-top: 55.3rem; } } @media (max-width: 750px) { .wait__text-second { margin-top: 55rem; } } .wait { /* 1行を1ブロックにする。 行送りを実寸で固定することで、文字サイズが混在しても行間が揃う。 （インラインのまま文字サイズを変えると、ベースライン揃えの分だけ行が広がる） */ } .wait__line { display: block; } @media (min-width: 751px) { .wait__line { line-height: 56.5rem; } } @media (max-width: 750px) { .wait__line { line-height: 54rem; } } .wait { /* 「」でくくられた語句のかたまり。 SPで折り返す際に語句の途中で切れないよう、かたまりごとに改行させる。 */ } .wait__ph { display: inline-block; font-weight: 500; } .wait { /* 本文中の黄色い強調（「」でくくられた行） */ } .wait__em { color: #f4ff67; letter-spacing: 0.02em; text-indent: 0.02em; font-weight: 500; } @media (min-width: 751px) { .wait__em { font-size: 25rem; } } @media (max-width: 750px) { .wait__em { font-size: 30rem; } } /********************* マウスピース矯正には「向き・不向き」があります ************************/ .check { position: relative; width: 100%; box-sizing: border-box; background-color: #454142; color: #fff; text-align: center; overflow: hidden; line-break: strict; } @media (min-width: 751px) { .check { padding: 100rem 46.1rem; } } @media (max-width: 750px) { .check { padding: 100rem 40rem 40rem; } } .check { /* 上部のＶ字の面 */ } .check__chevron { position: absolute; top: 0; left: 0; width: 100%; background-color: #403a3a; } @media (min-width: 751px) { .check__chevron { height: 518rem; clip-path: polygon(0 0, 100% 0, 100% 65%, 50% 100%, 0 65%); } } @media (max-width: 750px) { .check__chevron { height: 620rem; clip-path: polygon(0 0, 100% 0, 100% 470rem, 50% 100%, 0 470rem); } } .check { /* --- 冒頭の問いかけ --- */ } .check__lead { position: relative; z-index: 1; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; } @media (min-width: 751px) { .check__lead { line-height: 100rem; } } @media (max-width: 750px) { .check__lead { line-height: 1.7; } } .check__lead_sm, .check__lead_lg { display: block; /* カンプの字送り＝フォントサイズと同じ（ベタ組み） */ letter-spacing: 0; } @media (min-width: 751px) { .check__lead_sm { font-size: 50rem; } } @media (max-width: 750px) { .check__lead_sm { font-size: 35rem; } } @media (min-width: 751px) { .check__lead_lg { font-size: 60rem; } } @media (max-width: 750px) { .check__lead_lg { font-size: 35rem; } } .check { /* --- 4つのバッジ --- */ } @media (max-width: 750px) { .check__badge { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 24rem 20rem; margin-top: 60rem; } } .check__badge_item { display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; /* 14山のギザギザ円 */ clip-path: polygon(100% 50%, 94.41% 60.14%, 95.05% 71.69%, 85.61% 78.4%, 81.17% 89.09%, 69.76% 91.04%, 61.13% 98.75%, 50% 95.55%, 38.87% 98.75%, 30.24% 91.04%, 18.83% 89.09%, 14.39% 78.4%, 4.95% 71.69%, 5.59% 60.14%, 0% 50%, 5.59% 39.86%, 4.95% 28.31%, 14.39% 21.6%, 18.83% 10.91%, 30.24% 8.96%, 38.87% 1.25%, 50% 4.45%, 61.13% 1.25%, 69.76% 8.96%, 81.17% 10.91%, 85.61% 21.6%, 95.05% 28.31%, 94.41% 39.86%); } @media (min-width: 751px) { .check__badge_item { position: absolute; z-index: 1; width: 203rem; height: 198rem; } } @media (max-width: 750px) { .check__badge_item { width: 300rem; height: 300rem; } } .check__badge_item-01 { background-color: #755b4c; } @media (min-width: 751px) { .check__badge_item-01 { top: 430rem; left: 4%; } } .check__badge_item-02 { background-color: #47565d; } @media (min-width: 751px) { .check__badge_item-02 { top: 430rem; right: 4%; } } .check__badge_item-03 { background-color: #62505c; } @media (min-width: 751px) { .check__badge_item-03 { top: 28%; left: 12%; } } .check__badge_item-04 { background-color: #616648; } @media (min-width: 751px) { .check__badge_item-04 { top: 28%; right: 12%; } } .check__badge_lg, .check__badge_sm { display: block; line-height: 1.5; letter-spacing: 0.02em; text-indent: 0.02em; } @media (min-width: 751px) { .check__badge_lg { font-size: 20rem; } } @media (max-width: 750px) { .check__badge_lg { font-size: 26rem; } } @media (min-width: 751px) { .check__badge_sm { font-size: 20rem; } } @media (max-width: 750px) { .check__badge_sm { font-size: 20rem; } } .check { /* --- 見出し --- */ } .check__title { position: relative; z-index: 1; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; } @media (min-width: 751px) { .check__title { margin-top: 230rem; line-height: 125.6rem; } } @media (max-width: 750px) { .check__title { margin-top: 70rem; line-height: 1.7; } } .check__title_sm, .check__title_lg { display: block; /* カンプの字送り＝フォントサイズと同じ（ベタ組み） */ letter-spacing: 0; } @media (min-width: 751px) { .check__title_sm { font-size: 50rem; } } @media (max-width: 750px) { .check__title_sm { font-size: 35rem; } } @media (min-width: 751px) { .check__title_lg { font-size: 60rem; } } @media (max-width: 750px) { .check__title_lg { font-size: 35rem; } } .check__title { /* 下段の見出し（矯正治療には、／装置ごとに〜） */ } @media (min-width: 751px) { .check__title-sub { margin-top: 0; line-height: 82.4rem; } } @media (max-width: 750px) { .check__title-sub { margin-top: 0; line-height: 1.6; } } @media (min-width: 751px) { .check__title-sub .check__title_sm { font-size: 35rem; } } @media (max-width: 750px) { .check__title-sub .check__title_sm { font-size: 42rem; } } .check { /* --- 注釈・本文 --- */ } .check__note, .check__text { position: relative; z-index: 1; } @media (min-width: 751px) { .check__note, .check__text { font-size: 20rem; letter-spacing: 0.08em; text-indent: 0.08em; } } @media (max-width: 750px) { .check__note, .check__text { font-size: 25rem; letter-spacing: 0.04em; text-indent: 0.04em; } } @media (min-width: 751px) { .check__note { margin-top: 61.1rem; } } @media (max-width: 750px) { .check__note { margin-top: 40rem; } } @media (min-width: 751px) { .check__note .check__line { line-height: 51.3rem; } } @media (min-width: 751px) { .check__text { margin-top: 50rem; } } @media (max-width: 750px) { .check__text { margin-top: 40rem; } } .check__line { display: block; } @media (min-width: 751px) { .check__line { line-height: 51.8rem; } } @media (max-width: 750px) { .check__line { line-height: 50rem; } } .check { /* --- 3つのカード --- */ } .check__card { position: relative; z-index: 1; display: flex; justify-content: center; } @media (min-width: 751px) { .check__card { margin-top: 107.7rem; gap: 0 49.5rem; } } @media (max-width: 750px) { .check__card { flex-direction: column; align-items: center; gap: 100rem 0; margin-top: 130rem; } } .check__card_item { box-sizing: border-box; background-color: #d9d4d0; color: #434348; } @media (min-width: 751px) { .check__card_item { width: 440rem; padding-bottom: 61.1rem; } } @media (max-width: 750px) { .check__card_item { width: 100%; max-width: 620rem; padding-bottom: 60rem; } } .check__card_img { /* 円の上端をカードの外へはみ出させる */ } @media (min-width: 751px) { .check__card_img { width: 230rem; margin: -51.3rem auto 0; } } @media (max-width: 750px) { .check__card_img { width: 300rem; margin: -56rem auto 0; } } .check__card_img img { display: block; width: 100%; } .check__card_title { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; } @media (min-width: 751px) { .check__card_title { margin-top: 24.2rem; font-size: 30rem; line-height: 66.2rem; } } @media (max-width: 750px) { .check__card_title { margin-top: 26rem; font-size: 34rem; line-height: 1.6; } } .check__card_text { text-align: left; /* カンプは1行16文字。字送りを詰めて同じ位置で折り返す */ letter-spacing: 0.05em; text-indent: 0.05em; } @media (min-width: 751px) { .check__card_text { margin: 27.1rem 54.7rem 0; font-size: 20rem; line-height: 51.8rem; } } @media (max-width: 750px) { .check__card_text { margin: 24rem 40rem 0; font-size: 25rem; line-height: 1.9; } } .check { /* --- まとめ（人物写真つき） --- */ } .check__sum { position: relative; } @media (min-width: 751px) { .check__sum { width: 80%; margin: 100rem auto 0; } } @media (max-width: 750px) { .check__sum { margin-top: 90rem; overflow: hidden; } } @media (min-width: 751px) { .check__sum_img { position: absolute; z-index: 0; } } @media (max-width: 750px) { .check__sum_img { width: 50%; text-align: center; } } .check__sum_img img { display: block; } @media (min-width: 751px) { .check__sum_img img { width: 100%; } } @media (min-width: 751px) { .check__sum_img-l { top: 40rem; left: 0; width: 230rem; } } @media (max-width: 750px) { .check__sum_img-l { float: left; } } @media (max-width: 750px) { .check__sum_img-l img { width: 50%; margin-left: auto; } } @media (min-width: 751px) { .check__sum_img-r { top: 30rem; right: 0; width: 230.2rem; } } @media (max-width: 750px) { .check__sum_img-r { float: right; } } @media (max-width: 750px) { .check__sum_img-r img { width: 50%; margin-left: 30rem; } } /********************* 患者さまに合った矯正プランをご提案します ************************/ .plan { position: relative; width: 100%; box-sizing: border-box; background-color: #454142; text-align: center; line-break: strict; margin-top: -1rem; } @media (min-width: 751px) { .plan { padding: 66.2rem 121rem 6.9rem; } } @media (max-width: 750px) { .plan { padding: 60rem 40rem 10rem; } } .plan { /* 上辺中央のふくらみ（円の頭だけを見せる） */ } .plan__bump { position: absolute; left: 50%; transform: translateX(-50%); border-radius: 50%; background-color: #fff; } @media (min-width: 751px) { .plan__bump { top: 0.6rem; width: 564rem; height: 564rem; } } @media (max-width: 750px) { .plan__bump { top: 28rem; width: 260rem; height: 260rem; } } .plan { /* 白いボックス（下辺はＶ字に切り欠く） */ } .plan__box { position: relative; z-index: 1; box-sizing: border-box; background-color: #fff; color: #434348; } @media (min-width: 751px) { .plan__box { padding: 90rem 0 140rem; /* 下辺：両端2506 → 中央2705 */ clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%); } } @media (max-width: 750px) { .plan__box { padding: 70rem 0; clip-path: polygon(0 0, 100% 0, 100% 97%, 50% 100%, 0 97%); } } .plan { /* --- 見出し --- */ } .plan__head_sm, .plan__head_lg { display: block; line-height: 1; } .plan__head_sm { font-weight: 500; letter-spacing: 0.045em; text-indent: 0.045em; } @media (min-width: 751px) { .plan__head_sm { font-size: 35rem; } } @media (max-width: 750px) { .plan__head_sm { font-size: 34rem; } } .plan__head_lg { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; /* 明朝はベタ組み（カンプの字送り＝フォントサイズ） */ letter-spacing: 0; } @media (min-width: 751px) { .plan__head_lg { margin-top: 47.2rem; font-size: 50rem; } } @media (max-width: 750px) { .plan__head_lg { margin-top: 34rem; font-size: 50rem; line-height: 1.5; } } .plan__head_lg small { font-size: 40rem; } .plan { /* --- 本文 --- */ } @media (min-width: 751px) { .plan__text { margin-top: 56.5rem; font-size: 20rem; letter-spacing: 0.08em; text-indent: 0.08em; } } @media (max-width: 750px) { .plan__text { margin-top: 40rem; font-size: 25rem; letter-spacing: 0.04em; text-indent: 0.04em; } } .plan__line { display: block; } @media (min-width: 751px) { .plan__line { line-height: 45rem; } } @media (max-width: 750px) { .plan__line { line-height: 52rem; } } .plan { /* --- 3つの装置カード --- */ } .plan__card { display: flex; justify-content: center; } @media (min-width: 751px) { .plan__card { margin-top: 80.6rem; gap: 0 43.8rem; } } @media (max-width: 750px) { .plan__card { flex-direction: column; align-items: center; gap: 90rem 0; margin-top: 110rem; } } .plan__card_item { box-sizing: border-box; background-color: #45868c; color: #fff; } @media (min-width: 751px) { .plan__card_item { width: 381rem; padding-bottom: 60.5rem; } } @media (max-width: 750px) { .plan__card_item { width: 100%; max-width: 620rem; padding-bottom: 60rem; } } .plan__card { /* 円形写真はカード上端から外へはみ出す */ } @media (min-width: 751px) { .plan__card_img { width: 199.9rem; margin: -47.8rem auto 0; } } @media (max-width: 750px) { .plan__card_img { width: 240rem; margin: -60rem auto 0; } } .plan__card_img img { display: block; width: 100%; } .plan__card_title { font-weight: 700; letter-spacing: 0.01em; text-indent: 0.01em; } @media (min-width: 751px) { .plan__card_title { margin-top: 24.2rem; font-size: 30rem; line-height: 50rem; } } @media (max-width: 750px) { .plan__card_title { margin-top: 24rem; font-size: 34rem; line-height: 1.6; } } .plan__card_text { text-align: left; letter-spacing: 0.08em; text-indent: 0.08em; } @media (min-width: 751px) { .plan__card_text { margin: 16.1rem 50.1rem 0; font-size: 20rem; line-height: 51.8rem; } } @media (max-width: 750px) { .plan__card_text { margin: 22rem 40rem 0; font-size: 25rem; line-height: 1.9; } } .plan { /* --- 締めの一文 --- */ } .plan__conclusion { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; letter-spacing: 0; } @media (min-width: 751px) { .plan__conclusion { margin-top: 40rem; font-size: 35rem; } } @media (max-width: 750px) { .plan__conclusion { margin-top: 70rem; font-size: 34rem; } } .plan__conclusion_line { display: block; font-weight: 600; } @media (min-width: 751px) { .plan__conclusion_line { line-height: 77.8rem; } } @media (max-width: 750px) { .plan__conclusion_line { line-height: 1.7; } } .plan__em { color: #478d8d; } /********************* だからこそ 矯正は「診断力」が大切です！ ************************/ .reason { position: relative; width: 100%; box-sizing: border-box; background-color: #454142; background-image: url(img/reason_bg.png); background-repeat: no-repeat; background-position: 0 -80rem; background-size: cover; color: #fff; text-align: center; overflow: hidden; line-break: strict; margin-top: -100rem; } @media (min-width: 751px) { .reason { padding: 255rem 46.1rem 131.9rem; } } @media (max-width: 750px) { .reason { padding: 180rem 40rem 60rem; } } .reason { /* --- だからこそ（傍点つき） --- */ } .reason__lead { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; } .reason { /* 傍点。全角1文字の送り（font-size + letter-spacing）でドットを繰り返し、 1文字ずつの真上に置く。 ★書体が確定したら top の値を見直してください。 */ } .reason__dot { position: relative; display: inline-block; line-height: 1; letter-spacing: 0.05em; text-indent: 0.05em; } @media (min-width: 751px) { .reason__dot { font-size: 90rem; } } @media (max-width: 750px) { .reason__dot { font-size: 76rem; } } .reason__dot::before { content: ""; display: block; position: absolute; left: 0; right: 0; background-repeat: repeat-x; } @media (min-width: 751px) { .reason__dot::before { top: -62.8rem; height: 23.6rem; background-image: radial-gradient(circle 11.8rem at 50% 50%, #fff 100%, transparent 0); background-size: 141.4rem 100%; background-position: -3.4rem 0; } } @media (max-width: 750px) { .reason__dot::before { top: -36rem; height: 13rem; background-image: radial-gradient(circle 6.5rem at 50% 50%, #fff 100%, transparent 0); background-size: 79.8rem 100%; background-position: -1.9rem 0; } } .reason { /* --- 矯正は「診断力」が大切です！ --- */ } .reason__title { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; /* 明朝はベタ組み（カンプの字送り＝フォントサイズ） */ letter-spacing: 0; } @media (min-width: 751px) { .reason__title { margin-top: 44.9rem; font-size: 60rem; } } @media (max-width: 750px) { .reason__title { margin-top: 34rem; font-size: 35rem; line-height: 1.5; } } .reason { /* --- 本文 --- */ } @media (min-width: 751px) { .reason__text { margin-top: 96.2rem; font-size: 20rem; letter-spacing: 0.08em; text-indent: 0.08em; } } @media (max-width: 750px) { .reason__text { margin-top: 50rem; font-size: 25rem; letter-spacing: 0.04em; text-indent: 0.04em; } } .reason__line { display: block; } @media (min-width: 751px) { .reason__line { line-height: 51.3rem; } } @media (max-width: 750px) { .reason__line { line-height: 52rem; } } /********************* 無料矯正相談 受付中（CTA） ************************/ .cta { position: relative; width: 100%; box-sizing: border-box; background-color: #454142; text-align: center; line-break: strict; } @media (min-width: 751px) { .cta { padding-bottom: 130rem; } } @media (max-width: 750px) { .cta { padding-bottom: 80rem; } } @media (min-width: 751px) { .cta__inner { width: 87.875%; margin: 0 auto; } } @media (max-width: 750px) { .cta__inner { padding: 0 40rem 0; } } .cta { /* --- ミントの吹き出し --- */ } .cta__balloon { position: relative; background-color: #eafeff; box-shadow: 7rem 7rem 7rem rgba(117, 117, 117, 0.3); } @media (min-width: 751px) { .cta__balloon { padding: 69.1rem 34.6rem 0; height: 298rem; box-sizing: border-box; border-radius: 60rem; margin-bottom: 70rem; } } @media (max-width: 750px) { .cta__balloon { padding: 46rem 40rem 50rem; border-radius: 40rem; } } .cta__balloon { /* 下向きのしっぽ */ } .cta__balloon::after { content: ""; position: absolute; top: 99%; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-color: #eafeff transparent transparent transparent; } @media (min-width: 751px) { .cta__balloon::after { border-width: 30.5rem 38rem 0 38rem; } } @media (max-width: 750px) { .cta__balloon::after { border-width: 26rem 32rem 0 32rem; } } .cta__balloon_q { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; color: #434348; line-height: 1; letter-spacing: 0.03em; } @media (min-width: 751px) { .cta__balloon_q { font-size: 25rem; } } @media (max-width: 750px) { .cta__balloon_q { font-size: 26rem; } } .cta__balloon_title { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; color: #434348; line-height: 1; letter-spacing: 0.16em; text-indent: 0.16em; } @media (min-width: 751px) { .cta__balloon_title { margin-top: 50.7rem; font-size: 60rem; } } @media (max-width: 750px) { .cta__balloon_title { margin-top: 38rem; font-size: 50rem; } } @media (min-width: 751px) { .cta__balloon_sm { font-size: 45rem; } } @media (max-width: 750px) { .cta__balloon_sm { font-size: 36rem; } } .cta { /* 波線つきの語句 */ } .cta__wave { display: inline-block; background-repeat: repeat-x; background-position: left bottom; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Cpath d='M0 11 Q5 3 10 11 T20 11 T30 11 T40 11' fill='none' stroke='%233bacb0' stroke-width='5'/%3E%3C/svg%3E"); } @media (min-width: 751px) { .cta__wave { margin: 0 16.1rem; padding-bottom: 27.7rem; background-size: 23rem 9.2rem; } } @media (max-width: 750px) { .cta__wave { margin: 0 12rem; padding-bottom: 22rem; background-size: 20rem 8rem; } } .cta__em { color: #478d8d; } .cta { /* --- 白いボックス --- */ } .cta__box { box-sizing: border-box; background-color: #fff; color: #434348; } @media (min-width: 751px) { .cta__box { border-radius: 19rem; padding: 40rem; } } @media (max-width: 750px) { .cta__box { margin-top: 60rem; padding: 40rem; border-radius: 20rem; } } .cta { /* --- イラスト＋説明 --- */ } @media (min-width: 751px) { .cta__intro { display: flex; align-items: flex-start; justify-content: center; } } @media (max-width: 750px) { .cta__intro { padding: 0 0 40rem 0; } } @media (min-width: 751px) { .cta__intro_img { width: 442rem; margin-top: 3.5rem; } } @media (max-width: 750px) { .cta__intro_img { width: 440rem; margin: 0 auto; } } .cta__intro_img img { display: block; width: 100%; } .cta__intro_body { text-align: left; } @media (min-width: 751px) { .cta__intro_body { width: 780rem; margin-left: 50rem; } } @media (max-width: 750px) { .cta__intro_body { margin-top: 30rem; } } .cta__intro_title { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; letter-spacing: 0.03em; } @media (min-width: 751px) { .cta__intro_title { font-size: 35rem; } } @media (max-width: 750px) { .cta__intro_title { font-size: 36rem; text-align: center; line-height: 1.5; } } @media (min-width: 751px) { .cta__intro_text { margin-top: 20rem; font-size: 20rem; line-height: 51.3rem; letter-spacing: 0.02em; } } @media (max-width: 750px) { .cta__intro_text { margin-top: 28rem; font-size: 26rem; line-height: 1.9; letter-spacing: 0.02em; } } .cta { /* 下線つきの語句 */ } .cta__ul { border-bottom: 1px solid currentColor; } .cta { /* --- 区切り線と▼ --- */ } .cta__sep { position: relative; height: 1px; } @media (min-width: 751px) { .cta__sep { margin: 60rem 0 0; } } @media (max-width: 750px) { .cta__sep { margin-top: 70rem; } } .cta__sep span:before { background: #458289; content: ""; height: 1px; width: 46%; position: absolute; top: 10rem; left: 0; } .cta__sep span:after { background: #458289; content: ""; height: 1px; width: 46%; position: absolute; top: 10rem; right: 0; } .cta__sep::after { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-color: #478d8d transparent transparent transparent; } @media (min-width: 751px) { .cta__sep::after { border-width: 25rem 25rem 0 25rem; } } @media (max-width: 750px) { .cta__sep::after { border-width: 18rem 16rem 0 16rem; } } .cta { /* --- CONTACT --- */ } .cta__contact { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; color: #478d8d; line-height: 1; letter-spacing: 0.12em; text-indent: 0.12em; } @media (min-width: 751px) { .cta__contact { margin-top: 50rem; font-size: 60rem; } } @media (max-width: 750px) { .cta__contact { margin-top: 60rem; font-size: 60rem; } } .cta__lead { letter-spacing: 0.06em; text-indent: 0.06em; } @media (min-width: 751px) { .cta__lead { margin-top: 30rem; font-size: 25rem; } } @media (max-width: 750px) { .cta__lead { margin-top: 34rem; font-size: 30rem; } } .cta { /* --- 予約ボタン3つ --- */ } .cta__btn { display: flex; justify-content: center; align-items: center; } @media (min-width: 751px) { .cta__btn { margin-top: 40rem; gap: 0 30rem; } } @media (max-width: 750px) { .cta__btn { flex-wrap: wrap; gap: 24rem 20rem; margin-top: 46rem; } } .cta__btn_item a { display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; text-decoration: none; color: #fff; transition: 0.3s; } @media (min-width: 751px) { .cta__btn_item a { height: 143rem; border-radius: 70rem; } } @media (max-width: 750px) { .cta__btn_item a { height: 130rem; border-radius: 65rem; } } .cta__btn_item a:hover { opacity: 0.7; } .cta__btn_item img { display: block; } .cta__btn_item-tel a { background-color: #665953; } @media (min-width: 751px) { .cta__btn_item-tel a { width: 547rem; } } @media (max-width: 750px) { .cta__btn_item-tel a { width: 100%; padding: 20rem 50rem; } } .cta__btn_item-web a { background-color: #fff; border: 1px solid #cfcfcf; color: #434348; } @media (min-width: 751px) { .cta__btn_item-web a { width: 205rem; } } @media (max-width: 750px) { .cta__btn_item-web a { width: 296rem; } } .cta__btn_item-line a { background-color: #45868c; } @media (min-width: 751px) { .cta__btn_item-line a { width: 205rem; } } @media (max-width: 750px) { .cta__btn_item-line a { width: 296rem; } } @media (min-width: 751px) { .cta__btn_item-web img { width: 43.2rem; } } @media (max-width: 750px) { .cta__btn_item-web img { width: 34rem; } } @media (min-width: 751px) { .cta__btn_item-line img { width: 50.7rem; } } @media (max-width: 750px) { .cta__btn_item-line img { width: 40rem; } } .cta__btn_item-web span, .cta__btn_item-line span { letter-spacing: 0.04em; } @media (min-width: 751px) { .cta__btn_item-web span, .cta__btn_item-line span { margin-top: 5.8rem; font-size: 25.3rem; } } @media (max-width: 750px) { .cta__btn_item-web span, .cta__btn_item-line span { margin-top: 4rem; font-size: 28rem; } } .cta__btn_num { font-weight: 300; display: flex; align-items: center; justify-content: center; font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; letter-spacing: 0.04em; } @media (min-width: 751px) { .cta__btn_num { font-size: 45rem; } } @media (max-width: 750px) { .cta__btn_num { font-size: 52rem; } } @media (min-width: 751px) { .cta__btn_num img { width: 18rem; margin-right: 11.5rem; } } @media (max-width: 750px) { .cta__btn_num img { width: 22rem; margin-right: 10rem; } } .cta__btn_sub { letter-spacing: 0.02em; font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; } @media (min-width: 751px) { .cta__btn_sub { margin-top: 8.1rem; font-size: 20rem; } } @media (max-width: 750px) { .cta__btn_sub { margin-top: 6rem; font-size: 22rem; letter-spacing: 0; } } .cta { /* --- 診療時間 --- */ } .cta__hours { letter-spacing: 0.04em; text-indent: 0.04em; border-bottom: 1px solid #458289; padding-bottom: 40rem; } @media (min-width: 751px) { .cta__hours { margin-top: 48.4rem; font-size: 26.5rem; } } @media (max-width: 750px) { .cta__hours { margin-top: 34rem; font-size: 30rem; } } /********************* だから選ばれる！茶屋が坂矯正歯科の7つの理由 ************************/ .reasons { width: 100%; box-sizing: border-box; background-color: #fff; color: #434348; text-align: center; line-break: strict; } @media (min-width: 751px) { .reasons { padding: 72.6rem 46.1rem 72.6rem; } } @media (max-width: 750px) { .reasons { padding: 70rem 30rem 70rem; } } .reasons__lead { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; letter-spacing: 0.06em; text-indent: 0.06em; } @media (min-width: 751px) { .reasons__lead { font-size: 50rem; } } @media (max-width: 750px) { .reasons__lead { font-size: 40rem; } } .reasons { /* 1文字ずつ罫線で囲んだ見出し。 外枠を親に、セル間の縦罫を各マスの右ボーダーで作る。 */ } .reasons__title { display: inline-flex; vertical-align: top; /* 親の行送りぶんの余白が付かないようにする */ line-height: 0; border: 1px solid #458289; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; } @media (min-width: 751px) { .reasons__title { margin-top: 43.8rem; } } @media (max-width: 750px) { .reasons__title { margin-top: 30rem; flex-wrap: wrap; justify-content: center; } } .reasons__title span { display: flex; align-items: center; justify-content: center; box-sizing: border-box; border-right: 1px solid #458289; line-height: 1; } @media (min-width: 751px) { .reasons__title span { width: 81rem; height: 81rem; font-size: 60rem; } } @media (max-width: 750px) { .reasons__title span { width: 49rem; height: 60rem; font-size: 35rem; } } .reasons__title span.color { color: #45868c; font-size: 80rem; } .reasons__title span:last-child { border-right: none; } @media (min-width: 751px) { .reasons__note { margin-top: 76rem; font-size: 20rem; letter-spacing: 0.08em; text-indent: 0.08em; } } @media (max-width: 750px) { .reasons__note { margin-top: 40rem; font-size: 25rem; letter-spacing: 0.04em; text-indent: 0.04em; } } .reasons__line { display: block; } @media (min-width: 751px) { .reasons__line { line-height: 51.3rem; } } @media (max-width: 750px) { .reasons__line { line-height: 50rem; } } /********************* 理由01 日本矯正歯科学会認定医による矯正治療 ************************/ .rsn { position: relative; width: 100%; box-sizing: border-box; background-color: #fff; color: #434348; line-break: strict; } @media (min-width: 751px) { .rsn { padding-bottom: 48.4rem; } } @media (max-width: 750px) { .rsn { padding-bottom: 60rem; } } .rsn { /* --- 上部の写真帯 --- */ } .rsn__band_img { position: relative; } .rsn__band_img:before { clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 65% 0%); content: ""; position: absolute; left: 0; bottom: 0; height: 100%; background: rgba(69, 130, 137, 0.9); z-index: 1; } @media (min-width: 751px) { .rsn__band_img:before { width: 325rem; } } @media (max-width: 750px) { .rsn__band_img:before { width: 325rem; } } .rsn__band_img img { display: flex; width: 100%; } .rsn { /* 帯の中の番号 */ } .rsn__num { position: absolute; color: #fff; font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; font-weight: 300; /* 源ノ明朝は 500 / 600 のみ */ line-height: 1; z-index: 2; } @media (min-width: 751px) { .rsn__num { left: 92.2rem; top: 150rem; font-size: 260rem; letter-spacing: 20rem; } } @media (min-width: 1601px) { .rsn__num { top: 210rem; } } @media (max-width: 750px) { .rsn__num { left: 40rem; top: 40rem; font-size: 150rem; } } .rsn { /* 帯の中の円バッジ */ } .rsn__badge { position: absolute; display: flex; align-items: center; justify-content: center; box-sizing: border-box; border-radius: 50%; text-align: center; letter-spacing: 0.04em; } @media (min-width: 751px) { .rsn__badge { font-size: 20rem; line-height: 1.6; } } @media (max-width: 750px) { .rsn__badge { font-size: 22rem; line-height: 1.5; } } .rsn__badge { /* 塗りの円（幅広い症例に対応可能） */ } .rsn__badge-fill { background-color: #45868c; color: #fff; z-index: 1; } @media (min-width: 751px) { .rsn__badge-fill { width: 184rem; height: 184rem; right: 170rem; top: 28.2rem; } } @media (max-width: 750px) { .rsn__badge-fill { width: 150rem; height: 150rem; right: 20rem; left: auto; top: 20rem; } } .rsn__badge { /* 白抜きの円（日本矯正歯科学会認定医による矯正治療） */ } .rsn__badge-line { background-color: #fff; border: 1px solid #45868c; color: #478d8d; } @media (min-width: 751px) { .rsn__badge-line { width: 233rem; height: 233rem; right: 65rem; top: 176.3rem; } } @media (max-width: 750px) { .rsn__badge-line { width: 210rem; height: 210rem; right: 10rem; left: auto; top: 140rem; } } .rsn { /* --- 帯より下の2カラム --- */ } @media (min-width: 751px) { .rsn__inner { display: flex; justify-content: space-between; width: 87.875%; margin: 0 auto; } } @media (max-width: 750px) { .rsn__inner { padding: 0 40rem; } } @media (min-width: 751px) { .rsn__main { width: 60.5%; } } .rsn { /* 見出し */ } .rsn__title { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; letter-spacing: 0; } @media (min-width: 751px) { .rsn__title { margin-top: 133.6rem; font-size: 50rem; } } @media (max-width: 750px) { .rsn__title { margin-top: 70rem; font-size: 44rem; line-height: 1.5; margin-right: 200rem; } } @media (max-width: 750px) { .rsn__title_line { display: inline; } } @media (min-width: 751px) { .rsn__title_line { display: block; } .rsn__title_line:not(:first-child) { margin-top: 41.5rem; } } .rsn__em { color: #478d8d; } .rsn { /* ティールの帯ラベル */ } .rsn__label { display: table; box-sizing: border-box; background-color: #45868c; color: #fff; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; letter-spacing: 0.03em; } @media (min-width: 751px) { .rsn__label { margin-top: 31.1rem; padding: 23rem 46.1rem; font-size: 35rem; line-height: 1; } } @media (max-width: 750px) { .rsn__label { margin-top: 26rem; padding: 14rem 20rem; font-size: 32rem; line-height: 1.4; } } @media (min-width: 751px) { .rsn__label + .rsn__label { margin-top: 17.3rem; } } @media (max-width: 750px) { .rsn__label + .rsn__label { margin-top: 14rem; } } .rsn { /* 本文 */ } @media (min-width: 751px) { .rsn__text { margin-top: 47.2rem; font-size: 20rem; letter-spacing: 0.02em; } } @media (max-width: 750px) { .rsn__text { margin-top: 34rem; font-size: 26rem; letter-spacing: 0.02em; } } @media (min-width: 751px) { .rsn__text p { line-height: 51.3rem; } } @media (max-width: 750px) { .rsn__text p { line-height: 50rem; } } .rsn { /* --- 右カラム（人物・氏名・ボタン） --- */ } .rsn__side { text-align: center; } @media (min-width: 751px) { .rsn__side { width: 35.8125%; margin-top: 132.5rem; } } @media (max-width: 750px) { .rsn__side { margin-top: 60rem; } } .rsn__side_img img { display: block; width: 100%; } .rsn__side_role { letter-spacing: 0.06em; text-indent: 0.06em; color: #458289; } @media (min-width: 751px) { .rsn__side_role { margin-top: 40.3rem; font-size: 25rem; line-height: 1; } } @media (max-width: 750px) { .rsn__side_role { margin-top: 26rem; font-size: 32rem; } } .rsn__side_name { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; letter-spacing: 0.06em; text-indent: 0.06em; } @media (min-width: 751px) { .rsn__side_name { margin-top: 30rem; font-size: 35rem; line-height: 1; } } @media (max-width: 750px) { .rsn__side_name { margin-top: 18rem; font-size: 56rem; } } @media (min-width: 751px) { .rsn__side_btn { margin-top: 44.9rem; } } @media (max-width: 750px) { .rsn__side_btn { margin-top: 30rem; } } .rsn__side_btn a { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; margin: 0 auto; background-color: #45868c; color: #fff; text-decoration: none; letter-spacing: 0.06em; text-indent: 0.06em; transition: 0.3s; } @media (min-width: 751px) { .rsn__side_btn a { width: 395.2rem; height: 109.5rem; border-radius: 54.7rem; font-size: 28.8rem; } } @media (max-width: 750px) { .rsn__side_btn a { width: 370rem; height: 90rem; border-radius: 45rem; font-size: 26rem; } } .rsn__side_btn a:hover { opacity: 0.7; } .rsn__side { /* ボタン右端の丸い矢印 */ } .rsn__side_btn .rsn__arrow { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #fff; } @media (min-width: 751px) { .rsn__side_btn .rsn__arrow { right: 11.5rem; width: 86.4rem; height: 86.4rem; } } @media (max-width: 750px) { .rsn__side_btn .rsn__arrow { right: 10rem; width: 70rem; height: 70rem; } } .rsn__side_btn .rsn__arrow { /* 矢印の軸 */ } .rsn__side_btn .rsn__arrow::after { content: ""; position: absolute; background-color: #45868c; } @media (min-width: 751px) { .rsn__side_btn .rsn__arrow::after { width: 2px; height: 30rem; top: 26.5rem; } } @media (max-width: 750px) { .rsn__side_btn .rsn__arrow::after { width: 2px; height: 24rem; top: 22rem; } } .rsn__side_btn .rsn__arrow::before { content: ""; display: block; border-style: solid; border-color: #45868c; transform: rotate(45deg); } @media (min-width: 751px) { .rsn__side_btn .rsn__arrow::before { width: 13.8rem; height: 13.8rem; border-width: 0 2px 2px 0; margin-top: 12.2rem; margin-left: 2rem; } } @media (max-width: 750px) { .rsn__side_btn .rsn__arrow::before { width: 12rem; height: 12rem; border-width: 0 2px 2px 0; margin-top: -5rem; } } .rsn__side_note { letter-spacing: 0.02em; } @media (min-width: 751px) { .rsn__side_note { margin-top: 31.1rem; font-size: 21.9rem; line-height: 1; } } @media (max-width: 750px) { .rsn__side_note { margin-top: 20rem; font-size: 22rem; } } /********************* 一般の歯科医師との違いとは？ ************************/ .diff { width: 100%; box-sizing: border-box; background-color: #ebf3f3; color: #434348; line-break: strict; } @media (min-width: 751px) { .diff { padding: 80rem 0; } } @media (max-width: 750px) { .diff { padding: 60rem 40rem; } } .diff__card { box-sizing: border-box; background-color: #fff; } @media (min-width: 751px) { .diff__card { padding: 100rem 40rem 75rem; width: 87.5%; margin: 0 auto; } } @media (max-width: 750px) { .diff__card { padding: 60rem 40rem 70rem; } } .diff { /* --- 見出しと吹き出し --- */ } .diff__head { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; letter-spacing: 0; position: relative; display: inline-block; } @media (min-width: 751px) { .diff__head { font-size: 50rem; } } @media (max-width: 750px) { .diff__head { font-size: 40rem; text-align: center; line-height: 1.5; } } .diff__head:before { content: ""; background-image: url(./img/diff__mark.png); background-size: contain; background-repeat: no-repeat; } @media (min-width: 751px) { .diff__head:before { width: 809rem; height: 68rem; bottom: -85rem; } } @media (max-width: 750px) { .diff__head:before { width: 539.3333333333rem; height: 45.3333333333rem; bottom: -55rem; } } .diff__head:before { position: absolute; left: 0; } @media (min-width: 751px) { .diff__head_lg { font-size: 70rem; } } @media (max-width: 750px) { .diff__head_lg { font-size: 48rem; } } .diff { /* --- 2つのロゴ群 --- */ } @media (min-width: 751px) { .diff__logos { display: flex; align-items: center; justify-content: space-between; margin-top: 100rem; } } @media (max-width: 750px) { .diff__logos { margin-top: 50rem; } } .diff__logo { position: relative; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; } @media (min-width: 751px) { .diff__logo { width: 50%; } } @media (max-width: 750px) { .diff__logo + .diff__logo { margin-top: 40rem; } } .diff__logo_icon { position: absolute; z-index: 0; } @media (min-width: 751px) { .diff__logo_icon { left: 70rem; top: 86.5rem; width: 114rem; } } @media (max-width: 750px) { .diff__logo_icon { left: 60rem; top: 20rem; width: 140rem; } } .diff__logo_icon img { display: block; width: 100%; } .diff__logo_txt { position: relative; z-index: 1; line-height: 1.72; letter-spacing: 0; text-align: center; } @media (min-width: 751px) { .diff__logo_txt { font-size: 50rem; } } @media (max-width: 750px) { .diff__logo_txt { font-size: 42rem; } } .diff__logo_em { color: #4bab6a; font-size: 60rem; } .diff__logo_en { position: relative; z-index: 1; color: #41a9be; font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; font-weight: 500; line-height: 1; letter-spacing: 0.06em; } @media (min-width: 751px) { .diff__logo_en { margin-bottom: 19.6rem; text-align: left; font-size: 33.4rem; } } @media (max-width: 750px) { .diff__logo_en { margin-bottom: 14rem; text-align: center; font-size: 26rem; } } .diff__logo { /* 右側（ダイヤモンド・プロバイダー） */ } @media (min-width: 751px) { .diff__logo-r .diff__logo_icon { left: auto; right: 20rem; top: 60rem; width: 175rem; } } @media (max-width: 750px) { .diff__logo-r .diff__logo_icon { left: auto; right: 0; top: 20rem; width: 170rem; } } @media (min-width: 751px) { .diff__logo-r .diff__logo_txt { font-size: 60rem; } } @media (max-width: 750px) { .diff__logo-r .diff__logo_txt { font-size: 44rem; } } .diff { /* ⨯ マーク */ } .diff__cross { position: relative; } @media (min-width: 751px) { .diff__cross { width: 152.1rem; height: 152.1rem; } } @media (max-width: 750px) { .diff__cross { width: 90rem; height: 90rem; margin: 20rem auto; } } .diff__cross::before, .diff__cross::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background-color: #bcbcbc; } .diff__cross::before { transform: rotate(45deg); } .diff__cross::after { transform: rotate(-45deg); } .diff { /* --- 各サブセクション --- */ } @media (min-width: 751px) { .diff__sec { margin-top: 80rem; } } @media (max-width: 750px) { .diff__sec { margin-top: 70rem; } } @media (min-width: 751px) { .diff__row { display: flex; justify-content: space-between; align-items: flex-start; } } .diff { /* グレーの角丸ラベル */ } .diff__label { position: relative; display: inline-flex; align-items: center; box-sizing: border-box; background-color: #f6f6f8; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; letter-spacing: 0.02em; } @media (min-width: 751px) { .diff__label { height: 90rem; padding: 0 109.5rem 0 84.1rem; border-radius: 54.1rem; font-size: 35rem; } } @media (max-width: 750px) { .diff__label { padding: 35rem 75rem; border-radius: 40rem; font-size: 34rem; } } .diff__label:after { content: ""; width: 150rem; height: 157rem; background-image: url(./img/diff__q.png); background-size: contain; background-repeat: no-repeat; top: -65rem; right: -35rem; position: absolute; } .diff__label { /* 右側セクションのラベルは文字が大きい（1行で収める） */ } .diff__label-r { white-space: nowrap; } @media (min-width: 751px) { .diff__label-r { margin-bottom: 46.1rem; font-size: 35rem; padding: 0 109.5rem 0 63.4rem; } } @media (max-width: 750px) { .diff__label-r { margin-bottom: 24rem; font-size: 32rem; } } .diff { /* ラベル右端の「?」 */ } .diff__q { position: absolute; color: #9fe2c7; font-family: "source-han-sans-japanese", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif; font-weight: 700; line-height: 1; } @media (min-width: 751px) { .diff__q { right: -5.8rem; top: -44.4rem; font-size: 144rem; } } @media (max-width: 750px) { .diff__q { right: -6rem; top: -30rem; font-size: 96rem; } } .diff__q-b { color: #20bee3; } .diff { /* 本文 */ } @media (min-width: 751px) { .diff__body { width: 53%; margin-top: 55.3rem; font-size: 20rem; letter-spacing: 0.02em; } } @media (max-width: 750px) { .diff__body { margin-top: 30rem; font-size: 26rem; margin-bottom: 30rem; } } @media (min-width: 751px) { .diff__body p { line-height: 51.3rem; } } @media (max-width: 750px) { .diff__body p { line-height: 50rem; } } .diff { /* --- ピラミッド図 --- */ } .diff__chart { position: relative; } @media (min-width: 751px) { .diff__chart { width: 40%; } } @media (max-width: 750px) { .diff__chart { margin-top: 40rem; } } .diff__chart img { width: 100%; } .diff__chart { /* ピラミッド頂点の左横に置くリード文 */ } .diff__chart_lead { text-align: left; line-height: 1.5; } @media (min-width: 751px) { .diff__chart_lead { position: absolute; left: 0; top: 57.6rem; width: 403.2rem; font-size: 20rem; } } @media (max-width: 750px) { .diff__chart_lead { margin-left: 10rem; font-size: 24rem; } } .diff__chart_em { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; } @media (min-width: 751px) { .diff__chart_em { font-size: 33.4rem; } } @media (max-width: 750px) { .diff__chart_em { font-size: 30rem; } } .diff__chart_num { font-weight: 300; font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; } @media (min-width: 751px) { .diff__chart_num { font-size: 35rem; } } @media (max-width: 750px) { .diff__chart_num { font-size: 36rem; } } .diff__chart_note { color: #9a9a9a; text-align: right; } @media (min-width: 751px) { .diff__chart_note { position: absolute; right: 0; bottom: 0; font-size: 19.6rem; } } @media (max-width: 750px) { .diff__chart_note { margin-top: 14rem; font-size: 20rem; } } .diff { /* 点線のリーダー */ } .diff__dot { display: inline-block; vertical-align: middle; border-top: 2px dotted #8c8c8c; } @media (min-width: 751px) { .diff__dot { width: 86.4rem; margin-left: 11.5rem; } } @media (max-width: 750px) { .diff__dot { width: 70rem; margin-left: 10rem; } } @media (min-width: 751px) { .diff__pyramid { position: absolute; right: 0; top: 68rem; width: 469.5rem; } } @media (max-width: 750px) { .diff__pyramid { width: 400rem; margin: 10rem auto 0; } } .diff { /* --- 区切り線 --- */ } .diff__sep { background-color: #dcdcdc; height: 1px; } @media (min-width: 751px) { .diff__sep { margin-top: 50rem; } } @media (max-width: 750px) { .diff__sep { margin-top: 60rem; } } .diff { /* 下段は左にグラフ・右に本文 */ } @media (min-width: 751px) { .diff__sec-rev .diff__body { margin-top: 0; } } .diff__sec-rev .diff__label-r:after { background-image: url(./img/diff__q2.png); } .diff { /* --- 棒グラフ --- */ } @media (min-width: 751px) { .diff__graph { width: 40%; } } @media (max-width: 750px) { .diff__graph { margin-top: 40rem; } } .diff { /* 年間治療実績の円 */ } .diff__circle { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background-color: #f0f0f0; text-align: center; } @media (min-width: 751px) { .diff__circle { width: 262.7rem; height: 262.7rem; margin-left: 32.3rem; } } @media (max-width: 750px) { .diff__circle { width: 200rem; height: 200rem; margin-left: 0; } } @media (min-width: 751px) { .diff__circle_ttl { font-size: 21.9rem; } } @media (max-width: 750px) { .diff__circle_ttl { font-size: 18rem; } } .diff__circle_num { font-weight: 300; color: #20bee3; font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; line-height: 1; } @media (min-width: 751px) { .diff__circle_num { margin: 5.8rem 0; font-size: 74.9rem; } } @media (max-width: 750px) { .diff__circle_num { margin: 4rem 0; font-size: 58rem; } } .diff__circle_sub { color: #20bee3; } @media (min-width: 751px) { .diff__circle_sub { font-size: 20rem; } } @media (max-width: 750px) { .diff__circle_sub { font-size: 20rem; } } .diff__bars { display: flex; align-items: flex-end; } @media (min-width: 751px) { .diff__bars { margin-top: -132.5rem; gap: 0 13.8rem; } } @media (max-width: 750px) { .diff__bars { margin-top: -30rem; gap: 0 8rem; } } .diff__bars li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; box-sizing: border-box; background-color: #20bee3; color: #fff; text-align: center; } @media (min-width: 751px) { .diff__bars li { width: 69.1rem; height: calc(0.576rem * var(--h)); padding-bottom: 8.1rem; } } @media (max-width: 750px) { .diff__bars li { width: 42rem; height: calc(0.36rem * var(--h)); padding-bottom: 6rem; } } .diff__bars_rank { line-height: 1.2; } @media (min-width: 751px) { .diff__bars_rank { font-size: 12.7rem; } } @media (max-width: 750px) { .diff__bars_rank { font-size: 10rem; } } .diff__bars_val { line-height: 1; } @media (min-width: 751px) { .diff__bars_val { margin-top: 4.6rem; font-size: 27.7rem; } } @media (max-width: 750px) { .diff__bars_val { margin-top: 3rem; font-size: 22rem; } } .diff__bars { /* 1本目は棒が短いので数字を棒の下に出す */ } .diff__bars li:first-child { justify-content: flex-start; overflow: visible; } @media (min-width: 751px) { .diff__bars li:first-child .diff__bars_rank { margin-top: -34.6rem; } } @media (max-width: 750px) { .diff__bars li:first-child .diff__bars_rank { margin-top: -26rem; } } .diff__bars li:first-child .diff__bars_rank { color: #434348; } @media (min-width: 751px) { .diff__bars li:first-child .diff__bars_val { margin-top: 3.5rem; } } /********************* 理由02 矯正認定医が常駐で いつでも無料相談 ************************/ .rsn2 { position: relative; width: 100%; box-sizing: border-box; background-color: #fff; color: #434348; line-break: strict; } @media (min-width: 751px) { .rsn2 { padding: 109.5rem 0 103.7rem; } } @media (max-width: 750px) { .rsn2 { padding: 60rem 0 70rem; } } .rsn2__img:before { background: rgba(207, 180, 134, 0.9); left: auto; right: 0; clip-path: polygon(35% 0%, 100% 0%, 100% 100%, 0% 100%); } .rsn2 { /* 帯の番号（右寄せ） */ } .rsn2__num { font-weight: 300; position: absolute; color: #fff; font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; line-height: 1; z-index: 1; } @media (min-width: 751px) { .rsn2__num { right: 69.1rem; top: 250rem; font-size: 260rem; letter-spacing: 20rem; } } @media (min-width: 1601px) { .rsn2__num { top: 320rem; } } @media (max-width: 750px) { .rsn2__num { right: 40rem; top: 108rem; font-size: 138rem; } } .rsn2 { /* 帯の中の円バッジ */ } .rsn2__badge { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #c6aa82; color: #fff; text-align: center; line-height: 1.7; letter-spacing: 0.04em; } @media (min-width: 751px) { .rsn2__badge { left: 5%; top: 178rem; width: 233rem; height: 233rem; font-size: 20rem; } } @media (max-width: 750px) { .rsn2__badge { left: 20rem; top: 50rem; width: 210rem; height: 210rem; font-size: 26rem; } } .rsn2 { /* --- 帯の下（2カラム） --- */ } @media (min-width: 751px) { .rsn2__inner { display: flex; justify-content: space-between; align-items: flex-start; width: 86.5625%; margin: 0 auto; position: relative; flex-direction: row-reverse; } } @media (max-width: 750px) { .rsn2__inner { padding: 0 40rem; } } .rsn2 { /* 左カラム（キャッチ＋スタッフ写真） */ } @media (min-width: 751px) { .rsn2__side { width: 36.8125%; } } .rsn2__side_img img { width: 100%; } .rsn2 { /* 両側に斜線が付くキャッチ */ } .rsn2__catch { position: relative; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; text-align: center; color: #458289; } @media (min-width: 751px) { .rsn2__catch { margin-top: 89.3rem; font-size: 25rem; line-height: 58.8rem; } } @media (max-width: 750px) { .rsn2__catch { margin-top: 60rem; font-size: 36rem; line-height: 1.7; } } @media (min-width: 751px) { .rsn2__catch span { font-size: 30rem; } } @media (max-width: 750px) { .rsn2__catch span { font-size: 55rem; } } .rsn2__catch::before, .rsn2__catch::after { content: ""; position: absolute; top: 50%; width: 1px; background: #458289; transform-origin: center; } @media (min-width: 751px) { .rsn2__catch::before, .rsn2__catch::after { height: 121rem; margin-top: -60.5rem; } } @media (max-width: 750px) { .rsn2__catch::before, .rsn2__catch::after { height: 130rem; margin-top: -45rem; } } @media (min-width: 751px) { .rsn2__catch::before { left: 50rem; } } @media (max-width: 750px) { .rsn2__catch::before { left: 80rem; } } .rsn2__catch::before { transform: rotate(-15deg); } @media (min-width: 751px) { .rsn2__catch::after { right: 50rem; } } @media (max-width: 750px) { .rsn2__catch::after { right: 80rem; } } .rsn2__catch::after { transform: rotate(15deg); } .rsn2 { /* 右カラム */ } @media (min-width: 751px) { .rsn2__main { width: 59.125%; } } @media (max-width: 750px) { .rsn2__main { margin-top: 50rem; } } @media (max-width: 750px) { .rsn2__main .img { margin-top: 30rem; } } @media (min-width: 751px) { .rsn2__main .img { position: absolute; left: 0; bottom: 0; width: 36.8125%; } } .rsn2__main .img img { display: block; width: 100%; } .rsn2__title { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; letter-spacing: 0; margin-bottom: 30rem; } @media (min-width: 751px) { .rsn2__title { margin-top: 125.6rem; font-size: 50rem; } } @media (max-width: 750px) { .rsn2__title { font-size: 52rem; line-height: 1.5; } } .rsn2__title_line { display: block; } @media (min-width: 751px) { .rsn2__title_line:not(:first-child) { margin-top: 46.1rem; } } .rsn2__em { color: #a0864d; } .rsn2 { /* 金色の帯ラベル */ } .rsn2__label { display: table; box-sizing: border-box; background-color: #a0864d; color: #fff; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; letter-spacing: 0.03em; } @media (min-width: 751px) { .rsn2__label { margin-top: 19.6rem; padding: 25.3rem 36rem; font-size: 35rem; line-height: 1; } } @media (max-width: 750px) { .rsn2__label { margin-top: 26rem; padding: 16rem 22rem; font-size: 40rem; line-height: 1.4; } } @media (min-width: 751px) { .rsn2__label + .rsn2__label { margin-top: 17.9rem; } } @media (max-width: 750px) { .rsn2__label + .rsn2__label { margin-top: 14rem; } } @media (min-width: 751px) { .rsn2__text { margin-top: 30.5rem; font-size: 20rem; letter-spacing: 0; } } @media (max-width: 750px) { .rsn2__text { margin-top: 30rem; font-size: 26rem; } } @media (min-width: 751px) { .rsn2__text p { line-height: 51.3rem; } } @media (max-width: 750px) { .rsn2__text p { line-height: 50rem; } } /********************* 無料矯正相談でできる4つのこと ************************/ .step { width: 100%; box-sizing: border-box; background-color: #f5f3f0; color: #434348; line-break: strict; } @media (min-width: 751px) { .step { padding: 121rem 0 96rem; } } @media (max-width: 750px) { .step { padding: 60rem 40rem 60rem; } } .step__inner { background: #ece5da; border-radius: 50rem; } @media (min-width: 751px) { .step__inner { padding: 80rem 60rem; width: 80%; margin: 0 auto; } } @media (max-width: 750px) { .step__inner { padding: 40rem; } } .step { /* 白い角丸の見出し */ } .step__head { display: flex; align-items: center; justify-content: center; box-sizing: border-box; background-color: #fff; text-align: center; letter-spacing: 0.04em; text-indent: 0.04em; font-weight: 700; } @media (min-width: 751px) { .step__head { height: 98rem; border-radius: 49rem; font-size: 39rem; } } @media (max-width: 750px) { .step__head { height: 76rem; border-radius: 38rem; font-size: 32rem; } } .step__head span { font-weight: 700; color: #458289; } .step { /* --- 3カード --- */ } .step__list { display: flex; justify-content: space-between; } @media (min-width: 751px) { .step__list { margin-top: 73rem; } } @media (max-width: 750px) { .step__list { flex-direction: column; gap: 50rem 0; margin-top: 40rem; } } @media (min-width: 751px) { .step__item { width: 30.6%; } } .step__ttl { display: flex; align-items: center; font-weight: 700; letter-spacing: 0.03em; color: #424348; } @media (min-width: 751px) { .step__ttl { font-size: 25rem; } } @media (max-width: 750px) { .step__ttl { font-size: 32rem; } } .step { /* 番号の丸 */ } .step__no { font-weight: 300; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; background-color: #458289; color: #fff; font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; line-height: 1; } @media (min-width: 751px) { .step__no { width: 40rem; height: 40rem; margin-right: 14rem; font-size: 25rem; } } @media (max-width: 750px) { .step__no { width: 40rem; height: 40rem; margin-right: 12rem; font-size: 26rem; } } @media (min-width: 751px) { .step__img { margin-top: 19rem; } } @media (max-width: 750px) { .step__img { margin-top: 16rem; } } .step__img img { display: block; width: 100%; } @media (min-width: 751px) { .step__text { margin-top: 28rem; font-size: 20rem; line-height: 52rem; } } @media (max-width: 750px) { .step__text { margin-top: 18rem; font-size: 25rem; line-height: 50rem; } } .step { /* --- 4つ目（横並び） --- */ } @media (min-width: 751px) { .step__last { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 75rem; } } @media (max-width: 750px) { .step__last { margin-top: 50rem; } } @media (min-width: 751px) { .step__last_body { width: 61.125%; } } @media (min-width: 751px) { .step__last_img { width: 33.9%; } } @media (max-width: 750px) { .step__last_img { margin-top: 20rem; } } .step__last_img img { display: block; width: 100%; } /********************* 理由03 顎変形症を考慮した外科矯正にも対応 ************************/ .rsn3 { position: relative; width: 100%; box-sizing: border-box; background-color: #fff; color: #434348; line-break: strict; } @media (min-width: 751px) { .rsn3 { padding: 100rem 0 150rem; } } @media (max-width: 750px) { .rsn3 { padding: 50rem 0 60rem; } } .rsn3 { /* 写真帯（右端が斜め） */ } .rsn3__band { position: relative; background-image: url(img/reason03_band.jpg); background-repeat: no-repeat; background-position: left top; background-size: cover; } @media (min-width: 751px) { .rsn3__band { height: 415rem; /* 右端：上 x3126 → 下 x2858 */ clip-path: polygon(0 0, 93.8% 0, 85.8% 100%, 0 100%); } } @media (max-width: 750px) { .rsn3__band { height: 300rem; clip-path: polygon(0 0, 93.8% 0, 85.8% 100%, 0 100%); } } .rsn3__num { font-weight: 300; position: absolute; color: #fff; font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; line-height: 1; letter-spacing: 20rem; } @media (min-width: 751px) { .rsn3__num { left: 98rem; bottom: -20rem; font-size: 260rem; } } @media (max-width: 750px) { .rsn3__num { left: 40rem; bottom: -14rem; font-size: 150rem; } } .rsn3__badge { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #fff; color: #45868c; text-align: center; line-height: 1.7; letter-spacing: 0.04em; border: 1px solid #458289; } @media (min-width: 751px) { .rsn3__badge { right: 220rem; top: 85rem; width: 233rem; height: 233rem; font-size: 20rem; } } @media (max-width: 750px) { .rsn3__badge { right: 60rem; top: 50rem; width: 170rem; height: 170rem; font-size: 18rem; } } .rsn3 { /* 帯の下（2カラム） */ } @media (min-width: 751px) { .rsn3__inner { display: flex; justify-content: space-between; align-items: center; width: 87.875%; margin: 0 auto; } } @media (max-width: 750px) { .rsn3__inner { padding: 0 40rem; } } @media (min-width: 751px) { .rsn3__main { width: 60.5%; } } .rsn3__title { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 600; line-height: 1.75; letter-spacing: 0; } @media (min-width: 751px) { .rsn3__title { margin-top: 85rem; font-size: 50rem; } } @media (max-width: 750px) { .rsn3__title { margin-top: 60rem; font-size: 52rem; line-height: 1.5; } } .rsn3__title span { font-weight: 600; color: #458289; } .rsn3__label { display: table; box-sizing: border-box; background-color: #45868c; color: #fff; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; letter-spacing: 0.03em; } @media (min-width: 751px) { .rsn3__label { margin-top: 40rem; padding: 25rem 40rem; font-size: 35rem; line-height: 1; } } @media (max-width: 750px) { .rsn3__label { margin-top: 26rem; padding: 14rem 20rem; font-size: 33rem; line-height: 1.4; } } @media (min-width: 751px) { .rsn3__text { margin-top: 42rem; font-size: 20rem; letter-spacing: 0; } } @media (max-width: 750px) { .rsn3__text { margin-top: 30rem; font-size: 26rem; } } @media (min-width: 751px) { .rsn3__text p { line-height: 51.5rem; } } @media (max-width: 750px) { .rsn3__text p { line-height: 50rem; } } @media (min-width: 751px) { .rsn3__side { width: 49%; } } @media (max-width: 750px) { .rsn3__side { margin-top: 40rem; } } .rsn3__side img { display: block; width: 100%; } /********************* 保険適用の矯正治療にも対応しています ************************/ .hoken { width: 100%; box-sizing: border-box; background-color: #e7f8f0; color: #434348; line-break: strict; } @media (min-width: 751px) { .hoken { padding: 50rem 0 70rem; } } @media (max-width: 750px) { .hoken { padding: 50rem 40rem 50rem; } } .hoken { /* 両端に斜線がつく見出し */ } .hoken__head { position: relative; display: table; margin: 0 auto; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 600; line-height: 1; letter-spacing: 0.03em; } @media (min-width: 751px) { .hoken__head { padding: 0 46rem; font-size: 35rem; } } @media (max-width: 750px) { .hoken__head { padding: 0 30rem; font-size: 33rem; line-height: 1.5; } } .hoken__head::before, .hoken__head::after { content: ""; position: absolute; top: 50%; width: 1px; background-color: #424348; } @media (min-width: 751px) { .hoken__head::before, .hoken__head::after { height: 62rem; margin-top: -31rem; } } @media (max-width: 750px) { .hoken__head::before, .hoken__head::after { height: 44rem; margin-top: -22rem; } } .hoken__head::before { left: 0; transform: rotate(-20deg); } .hoken__head::after { right: 0; transform: rotate(20deg); } .hoken__em { color: #478d8d; } .hoken__card { box-sizing: border-box; background-color: #fff; } @media (min-width: 751px) { .hoken__card { display: flex; justify-content: space-between; align-items: flex-start; width: 86.5625%; margin: 36rem auto 0; padding: 45rem 70rem; } } @media (max-width: 750px) { .hoken__card { margin-top: 26rem; padding: 30rem 26rem; } } @media (min-width: 751px) { .hoken__body { width: 75%; font-size: 20rem; } } @media (max-width: 750px) { .hoken__body { font-size: 26rem; margin-bottom: 30rem; } } @media (min-width: 751px) { .hoken__body p { line-height: 51.5rem; } } @media (max-width: 750px) { .hoken__body p { line-height: 50rem; } } @media (min-width: 751px) { .hoken__note { margin-top: 4rem; } } @media (min-width: 751px) { .hoken__img { width: 20%; } } @media (max-width: 750px) { .hoken__img { width: 300rem; margin: 20rem auto 0; } } .hoken__img img { display: block; width: 100%; } /********************* 理由04 歯並びだけでなく、Eラインを意識した矯正治療 ************************/ .rsn4 { position: relative; width: 100%; box-sizing: border-box; background-color: #fff; color: #434348; line-break: strict; } @media (min-width: 751px) { .rsn4 { padding: 109rem 0 110rem; } } @media (max-width: 750px) { .rsn4 { padding: 50rem 0 60rem; } } .rsn4 { /* 写真帯（左端が斜め・右は全幅） */ } .rsn4__band { position: relative; background-image: url(img/reason04_band.jpg); background-repeat: no-repeat; background-position: right top; background-size: cover; } @media (min-width: 751px) { .rsn4__band { height: 416rem; /* 左端：上 x218 → 下 x456 */ clip-path: polygon(6.54% 0, 100% 0, 100% 100%, 13.68% 100%); } } @media (max-width: 750px) { .rsn4__band { height: 300rem; clip-path: polygon(6.54% 0, 100% 0, 100% 100%, 13.68% 100%); } } .rsn4__num { font-weight: 300; position: absolute; color: #fff; font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; line-height: 1; letter-spacing: 20rem; } @media (min-width: 751px) { .rsn4__num { right: 105rem; bottom: -18rem; font-size: 260rem; } } @media (max-width: 750px) { .rsn4__num { right: 40rem; bottom: -14rem; font-size: 150rem; } } .rsn4__badge { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #c6aa82; color: #fff; text-align: center; line-height: 1.7; letter-spacing: 0.04em; } @media (min-width: 751px) { .rsn4__badge { left: 200rem; top: 92rem; width: 233rem; height: 233rem; font-size: 20rem; } } @media (max-width: 750px) { .rsn4__badge { left: 350rem; top: 10rem; width: 170rem; height: 170rem; font-size: 26rem; } } .rsn4 { /* 帯の下（左に写真・右に本文） */ } @media (min-width: 751px) { .rsn4__inner { display: flex; justify-content: space-between; align-items: center; width: 86.5625%; margin: 0 auto; position: relative; } } @media (max-width: 750px) { .rsn4__inner { padding: 0 40rem; } } @media (min-width: 751px) { .rsn4__side { width: 36.8125%; position: absolute; left: 0; top: 140rem; } } @media (max-width: 750px) { .rsn4__side { margin-top: 40rem; } } .rsn4__side img { display: block; width: 100%; } @media (min-width: 751px) { .rsn4__main { width: 59.125%; margin-left: auto; } } @media (max-width: 750px) { .rsn4__main { margin-top: 40rem; } } .rsn4__title { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; letter-spacing: 0; } @media (min-width: 751px) { .rsn4__title { margin-top: 133rem; font-size: 50rem; } } @media (max-width: 750px) { .rsn4__title { font-size: 52rem; line-height: 1.5; } } .rsn4__title_line { display: block; } @media (min-width: 751px) { .rsn4__title_line:not(:first-child) { margin-top: 42rem; } } .rsn4__em { color: #a0864d; } .rsn4__label { display: table; box-sizing: border-box; background-color: #a0864d; color: #fff; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; letter-spacing: 0.03em; } @media (min-width: 751px) { .rsn4__label { margin-top: 38rem; padding: 22rem 22rem 22rem 0; font-size: 34rem; line-height: 1; } } @media (max-width: 750px) { .rsn4__label { margin-top: 26rem; padding: 14rem 20rem; font-size: 28rem; line-height: 1.4; } } @media (min-width: 751px) { .rsn4__text { margin-top: 47rem; font-size: 20rem; letter-spacing: 0; } } @media (max-width: 750px) { .rsn4__text { margin-top: 30rem; font-size: 26rem; } } @media (min-width: 751px) { .rsn4__text p { line-height: 51.5rem; } } @media (max-width: 750px) { .rsn4__text p { line-height: 50rem; } } /********************* Eラインだけを「正解」にしない、その人らしい横顔へ ************************/ .eline { width: 100%; box-sizing: border-box; background-color: #ebe4da; color: #434348; line-break: strict; } @media (min-width: 751px) { .eline { padding: 50rem 0 70rem; } } @media (max-width: 750px) { .eline { padding: 50rem 40rem 50rem; } } .eline { /* 両端に斜線がつく見出し */ } .eline__head { position: relative; display: table; margin: 0 auto; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; letter-spacing: 0.03em; } @media (min-width: 751px) { .eline__head { padding: 0 46rem; font-size: 35rem; } } @media (max-width: 750px) { .eline__head { padding: 0 30rem; font-size: 32rem; line-height: 1.5; } } .eline__head::before, .eline__head::after { content: ""; position: absolute; top: 50%; width: 1px; background-color: #434348; } @media (min-width: 751px) { .eline__head::before, .eline__head::after { height: 62rem; margin-top: -31rem; } } @media (max-width: 750px) { .eline__head::before, .eline__head::after { height: 44rem; margin-top: -22rem; } } .eline__head::before { left: 0; transform: rotate(-20deg); } .eline__head::after { right: 0; transform: rotate(20deg); } .eline__card { box-sizing: border-box; background-color: #fff; } @media (min-width: 751px) { .eline__card { display: flex; justify-content: space-between; align-items: flex-start; width: 86.5625%; margin: 36rem auto 0; padding: 45rem 70rem; } } @media (max-width: 750px) { .eline__card { margin-top: 26rem; padding: 30rem 26rem; } } @media (min-width: 751px) { .eline__body { width: 75%; font-size: 20rem; } } @media (max-width: 750px) { .eline__body { font-size: 26rem; margin-bottom: 45rem; } } @media (min-width: 751px) { .eline__body p { line-height: 51.5rem; } } @media (max-width: 750px) { .eline__body p { line-height: 50rem; } } @media (min-width: 751px) { .eline__img { width: 20%; } } @media (max-width: 750px) { .eline__img { width: 280rem; margin: 20rem auto 0; } } .eline__img img { display: block; width: 100%; } /********************* 理由05 先端デジタル機器を活用した精密検査 ************************/ .rsn5 { position: relative; width: 100%; box-sizing: border-box; background-color: #fff; color: #434348; line-break: strict; } @media (min-width: 751px) { .rsn5 { padding: 86rem 0 118rem; } } @media (max-width: 750px) { .rsn5 { padding: 50rem 0 60rem; } } .rsn5 { /* 写真帯（右端が斜め） */ } .rsn5__band { position: relative; background-image: url(img/reason05_band.jpg); background-repeat: no-repeat; background-position: left top; background-size: cover; } @media (min-width: 751px) { .rsn5__band { height: 411rem; /* 右端：上 x3107 → 下 x2877 */ clip-path: polygon(0 0, 93.2% 0, 86.3% 100%, 0 100%); } } @media (max-width: 750px) { .rsn5__band { height: 300rem; clip-path: polygon(0 0, 93.2% 0, 86.3% 100%, 0 100%); } } .rsn5__num { font-weight: 300; position: absolute; color: #fff; font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; line-height: 1; letter-spacing: 20rem; } @media (min-width: 751px) { .rsn5__num { left: 150rem; top: 190rem; font-size: 260rem; } } @media (max-width: 750px) { .rsn5__num { left: 40rem; top: 160rem; font-size: 150rem; } } .rsn5__badge { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; border: 1px solid #458289; color: #458289; text-align: center; line-height: 1.7; letter-spacing: 0.04em; } @media (min-width: 751px) { .rsn5__badge { right: 215rem; top: 90rem; width: 233rem; height: 233rem; font-size: 20rem; } } @media (max-width: 750px) { .rsn5__badge { right: 90rem; top: 80rem; width: 200rem; height: 200rem; font-size: 24rem; } } @media (min-width: 751px) { .rsn5__inner { display: flex; justify-content: space-between; align-items: center; width: 86.5625%; margin: 0 auto; } } @media (max-width: 750px) { .rsn5__inner { padding: 0 40rem; } } @media (min-width: 751px) { .rsn5__main { width: 60.5%; } } .rsn5__title { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 600; line-height: 1.5; letter-spacing: 0; } @media (min-width: 751px) { .rsn5__title { margin-top: 133rem; font-size: 50rem; } } @media (max-width: 750px) { .rsn5__title { margin-top: 50rem; font-size: 50rem; line-height: 1.5; } } .rsn5__em { color: #478d8d; font-weight: 600; } .rsn5__label { display: table; box-sizing: border-box; background-color: #45868c; color: #fff; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; letter-spacing: 0.03em; } @media (min-width: 751px) { .rsn5__label { margin-top: 40rem; padding: 25rem 40rem; font-size: 35rem; line-height: 1; } } @media (max-width: 750px) { .rsn5__label { margin-top: 26rem; padding: 14rem 20rem; font-size: 32rem; line-height: 1.4; } } @media (min-width: 751px) { .rsn5__text { margin-top: 41rem; font-size: 20rem; letter-spacing: 0; } } @media (max-width: 750px) { .rsn5__text { margin-top: 30rem; font-size: 26rem; } } @media (min-width: 751px) { .rsn5__text p { line-height: 51.5rem; } } @media (max-width: 750px) { .rsn5__text p { line-height: 50rem; } } @media (min-width: 751px) { .rsn5__side { width: 36.8125%; } } @media (max-width: 750px) { .rsn5__side { margin-top: 40rem; } } .rsn5__side img { display: block; width: 100%; } /********************* AIを活用したデンタルモニタリングを導入 ************************/ .dm { width: 100%; box-sizing: border-box; background-color: #e7f8f0; color: #434348; line-break: strict; } @media (min-width: 751px) { .dm { padding: 50rem 0 70rem; } } @media (max-width: 750px) { .dm { padding: 50rem 40rem 50rem; } } .dm__head { position: relative; display: table; margin: 0 auto; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; letter-spacing: 0.03em; } @media (min-width: 751px) { .dm__head { padding: 0 46rem; font-size: 35rem; } } @media (max-width: 750px) { .dm__head { padding: 0 30rem; font-size: 30rem; line-height: 1.5; } } .dm__head::before, .dm__head::after { content: ""; position: absolute; top: 50%; width: 1px; background-color: #434348; } @media (min-width: 751px) { .dm__head::before, .dm__head::after { height: 62rem; margin-top: -31rem; } } @media (max-width: 750px) { .dm__head::before, .dm__head::after { height: 44rem; margin-top: -22rem; } } .dm__head::before { left: 0; transform: rotate(-20deg); } .dm__head::after { right: 0; transform: rotate(20deg); } .dm__em { color: #478d8d; } .dm__card { box-sizing: border-box; background-color: #fff; } @media (min-width: 751px) { .dm__card { display: flex; justify-content: space-between; align-items: flex-start; width: 86.5625%; margin: 36rem auto 0; padding: 45rem 70rem; } } @media (max-width: 750px) { .dm__card { margin-top: 26rem; padding: 30rem 26rem; } } @media (min-width: 751px) { .dm__body { width: 75%; font-size: 20rem; } } @media (max-width: 750px) { .dm__body { font-size: 26rem; } } @media (min-width: 751px) { .dm__body p { line-height: 51.5rem; } } @media (max-width: 750px) { .dm__body p { line-height: 50rem; } } @media (min-width: 751px) { .dm__img { width: 20%; } } @media (max-width: 750px) { .dm__img { width: 280rem; margin: 20rem auto 0; } } .dm__img img { display: block; width: 100%; } /********************* 理由06・07 支払いプラン／アクセス ************************/ .two { width: 100%; box-sizing: border-box; background-color: #fff; color: #434348; line-break: strict; } @media (min-width: 751px) { .two { padding: 90rem 0 110rem; width: 86.5625%; margin: 0 auto; } } @media (max-width: 750px) { .two { padding: 50rem 0 60rem; } } .two__inner { box-sizing: border-box; background-color: #ebe4da; } @media (min-width: 751px) { .two__inner { display: flex; justify-content: space-between; padding: 60rem 50rem 50rem; } } @media (max-width: 750px) { .two__inner { padding: 40rem 30rem 50rem; } } @media (min-width: 751px) { .two__col { width: 47.5%; } } @media (max-width: 750px) { .two__col + .two__col { margin-top: 50rem; } } @media (min-width: 751px) { .two__col:nth-of-type(1) img { height: 485rem; -o-object-fit: cover; object-fit: cover; -o-object-position: left; object-position: left; } } @media (min-width: 751px) { .two__col:nth-of-type(2) { margin-top: -60rem; } } @media (min-width: 751px) { .two__col:nth-of-type(2) img { height: 550rem; -o-object-fit: cover; object-fit: cover; } } .two__img img { display: block; width: 100%; } .two__title { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; text-align: center; position: relative; z-index: 2; } @media (min-width: 751px) { .two__title { margin-top: 60rem; font-size: 35rem; line-height: 67rem; } } @media (max-width: 750px) { .two__title { margin-top: 30rem; font-size: 32rem; line-height: 1.6; } } .two__text { position: relative; } @media (min-width: 751px) { .two__text { margin-top: 25rem; font-size: 20rem; } } .two__text span { color: #ffffff; font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; position: absolute; left: 50%; transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); } @media (min-width: 751px) { .two__text span { font-size: 200rem; top: -225rem; } } @media (max-width: 750px) { .two__text span { font-size: 150rem; top: -175rem; } } @media (max-width: 750px) { .two__text { margin-top: 24rem; font-size: 26rem; } } @media (min-width: 751px) { .two__text p { line-height: 51.5rem; } } @media (max-width: 750px) { .two__text p { line-height: 50rem; } } @media (min-width: 751px) { .two__btn { margin-top: 61rem; } } @media (max-width: 750px) { .two__btn { margin-top: 30rem; } } .two__btn a { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; margin: 0 auto; background-color: #45868c; color: #fff; text-decoration: none; letter-spacing: 0.04em; transition: 0.3s; } @media (min-width: 751px) { .two__btn a { width: 542rem; height: 109rem; border-radius: 55rem; font-size: 28rem; } } @media (max-width: 750px) { .two__btn a { width: 500rem; height: 90rem; border-radius: 45rem; font-size: 26rem; } } .two__btn a:hover { opacity: 0.7; } .two__arrow { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #fff; } @media (min-width: 751px) { .two__arrow { right: 12rem; width: 85rem; height: 85rem; } } @media (max-width: 750px) { .two__arrow { right: 10rem; width: 70rem; height: 70rem; } } .two__arrow::after { content: ""; position: absolute; background-color: #45868c; } @media (min-width: 751px) { .two__arrow::after { width: 2px; height: 30rem; top: 26rem; } } @media (max-width: 750px) { .two__arrow::after { width: 2px; height: 24rem; top: 22rem; } } .two__arrow::before { content: ""; display: block; border-style: solid; border-color: #45868c; border-width: 0 2px 2px 0; transform: rotate(45deg); } @media (min-width: 751px) { .two__arrow::before { width: 14rem; height: 14rem; margin-top: 10rem; } } @media (max-width: 750px) { .two__arrow::before { width: 12rem; height: 12rem; margin-top: -5rem; } } .two__note { text-align: center; } @media (min-width: 751px) { .two__note { margin-top: 30rem; font-size: 26rem; } } @media (max-width: 750px) { .two__note { margin-top: 16rem; font-size: 20rem; } } /********************* こんな歯並びや咬み合わせでお悩みではありませんか？ ************************/ .malo { position: relative; width: 100%; box-sizing: border-box; color: #434348; text-align: center; line-break: strict; /* 上は白／下は #ededed へグラデーションでつながる */ } @media (min-width: 751px) { .malo { padding: 0 121rem 87rem; background: linear-gradient(to bottom, #fff 0, #fff 161rem, #ededed 346rem, #ededed 100%); } } @media (max-width: 750px) { .malo { padding: 0 40rem 50rem; background: linear-gradient(to bottom, #fff 0, #fff 120rem, #ededed 260rem, #ededed 100%); } } .malo:before { content: ""; width: 490rem; height: 590rem; background-image: url(./img/trouble__bg.png); background-size: contain; background-repeat: no-repeat; } @media (min-width: 751px) { .malo:before { top: 270rem; } } @media (max-width: 750px) { .malo:before { top: 310rem; } } .malo:before { left: 0; position: absolute; } .malo { /* 見出し左右の点線 */ } .malo__deco { position: absolute; background-image: radial-gradient(circle, #454142 40%, rgba(255, 255, 255, 0) 41%); background-repeat: repeat-y; } @media (min-width: 751px) { .malo__deco { top: 31rem; width: 4rem; height: 150rem; background-size: 4rem 13.1rem; } } @media (max-width: 750px) { .malo__deco { top: 46rem; width: 3rem; height: 96rem; background-size: 3rem 10rem; } } .malo__deco--l { transform: rotate(-29deg); } @media (min-width: 751px) { .malo__deco--l { left: 20%; } } @media (max-width: 750px) { .malo__deco--l { left: 42rem; } } .malo__deco--r { transform: rotate(29deg); } @media (min-width: 751px) { .malo__deco--r { right: 20%; } } @media (max-width: 750px) { .malo__deco--r { right: 42rem; } } .malo__head { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; letter-spacing: 5rem; margin-bottom: 30rem; } @media (min-width: 751px) { .malo__head { font-size: 50rem; line-height: 95rem; } } @media (max-width: 750px) { .malo__head { font-size: 42rem; line-height: 1.7; } } .malo__head_line { display: block; } .malo__em { color: #a57fb0; } @media (min-width: 751px) { .malo__em { font-size: 80rem; } } @media (max-width: 750px) { .malo__em { font-size: 58rem; } } @media (min-width: 751px) { .malo__note { margin-top: 0; font-size: 25rem; line-height: 1.7; } } @media (max-width: 750px) { .malo__note { margin-top: 20rem; font-size: 27rem; line-height: 1.7; text-align: left; } } .malo { /* 8つの円 */ } .malo__list { display: flex; flex-wrap: wrap; box-sizing: border-box; position: relative; } @media (min-width: 751px) { .malo__list { width: 1330rem; margin: 75rem auto 0; gap: 51rem 35rem; } } @media (max-width: 750px) { .malo__list { margin-top: 40rem; gap: 24rem 20rem; } } .malo__item { box-sizing: border-box; border-radius: 50%; background: rgba(125, 135, 178, 0.7); box-shadow: 5rem 5rem 5rem rgba(81, 81, 81, 0.2); color: #fff; } @media (min-width: 751px) { .malo__item { width: 304rem; height: 304rem; padding-top: 49rem; } } @media (max-width: 750px) { .malo__item { width: calc((100% - 20rem) / 2); aspect-ratio: 1/1; padding-top: 40rem; } } .malo__ill { margin: 0 auto; } @media (min-width: 751px) { .malo__ill { width: 110rem; } } @media (max-width: 750px) { .malo__ill { width: 56%; } } .malo__ill img { display: block; width: 100%; } @media (min-width: 751px) { .malo__ill img { height: 100rem; -o-object-fit: contain; object-fit: contain; } } @media (max-width: 750px) { .malo__ill img { height: 160rem; -o-object-fit: contain; object-fit: contain; } } .malo__name { font-weight: 600; } @media (min-width: 751px) { .malo__name { margin-top: 2rem; font-size: 25rem; line-height: 45rem; } } @media (max-width: 750px) { .malo__name { margin-top: 6rem; font-size: 26rem; line-height: 1.7; } } .malo__name span { display: block; } /********************* 正常歯列＝「理想的な歯並び」とは ************************/ .normal { width: 100%; box-sizing: border-box; background-color: #ededed; color: #434348; line-break: strict; } @media (min-width: 751px) { .normal { padding: 22rem 121rem 59rem; } } @media (max-width: 750px) { .normal { padding: 40rem 40rem 50rem; } } .normal { /* 白い角丸の見出し帯 */ } .normal__head { display: flex; align-items: center; justify-content: center; box-sizing: border-box; background-color: #fff; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; text-align: center; letter-spacing: 0; } @media (min-width: 751px) { .normal__head { height: 158rem; border-radius: 30rem; font-size: 50rem; } } @media (max-width: 750px) { .normal__head { padding: 26rem 20rem; border-radius: 20rem; font-size: 34rem; line-height: 1.5; } } @media (min-width: 751px) { .normal__inner { display: flex; align-items: flex-start; margin-top: 104rem; } } @media (max-width: 750px) { .normal__inner { margin-top: 40rem; } } @media (min-width: 751px) { .normal__img { width: 548rem; margin-top: 10rem; } } @media (max-width: 750px) { .normal__img { width: 55%; margin: 0 auto; } } .normal__img img { display: block; width: 100%; } @media (min-width: 751px) { .normal__body { width: 993rem; margin-left: 69rem; } } @media (max-width: 750px) { .normal__body { margin-top: 34rem; } } .normal__lead { font-weight: 700; letter-spacing: 0; } @media (min-width: 751px) { .normal__lead { font-size: 30rem; line-height: 1; } } @media (max-width: 750px) { .normal__lead { font-size: 32rem; line-height: 1.6; } } @media (min-width: 751px) { .normal__text { margin-top: 40rem; font-size: 20rem; } } @media (max-width: 750px) { .normal__text { margin-top: 24rem; font-size: 26rem; } } @media (min-width: 751px) { .normal__text p { line-height: 51.5rem; } } @media (max-width: 750px) { .normal__text p { line-height: 50rem; } } /********************* どうして矯正が必要なの？ ************************/ .ask { width: 100%; box-sizing: border-box; background-color: #ededed; color: #434348; line-break: strict; } @media (min-width: 751px) { .ask { padding: 0 0 50rem; } } @media (max-width: 750px) { .ask { padding: 0 40rem 40rem; } } .ask__card { box-sizing: border-box; background-color: #fff; } @media (min-width: 751px) { .ask__card { display: flex; align-items: flex-start; padding: 60rem 40rem; width: 86.5625%; margin: 0 auto; } } @media (max-width: 750px) { .ask__card { padding: 40rem 26rem 44rem; } } .ask { /* 吹き出し */ } .ask__q { position: relative; flex-shrink: 0; } @media (min-width: 751px) { .ask__q { width: 45%; margin-top: 0; } } @media (max-width: 750px) { .ask__q { width: 560rem; margin: 0 auto; } } .ask__q img { width: 100%; } .ask__balloon { display: block; width: 100%; height: auto; overflow: visible; } .ask { /* 薄いはてなマーク */ } .ask__mark { position: absolute; color: #f2f3eb; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; } @media (min-width: 751px) { .ask__mark { left: 434rem; top: 52rem; font-size: 282rem; } } @media (max-width: 750px) { .ask__mark { left: 288rem; top: 45rem; font-size: 242rem; } } .ask { /* イコール */ } .ask__eq { position: absolute; } @media (min-width: 751px) { .ask__eq { right: 0; top: 183rem; width: 48rem; height: 25rem; } } @media (max-width: 750px) { .ask__eq { display: none; } } .ask__eq::before, .ask__eq::after { content: ""; position: absolute; left: 0; width: 100%; background-color: #434348; } @media (min-width: 751px) { .ask__eq::before, .ask__eq::after { height: 2px; } } .ask__eq::before { top: 0; } .ask__eq::after { bottom: 0; } @media (min-width: 751px) { .ask__body { width: 50%; margin: 0 0 0 3%; } } @media (max-width: 750px) { .ask__body { margin-top: 34rem; } } .ask__lead { font-weight: 700; letter-spacing: 0; } @media (min-width: 751px) { .ask__lead { font-size: 30rem; line-height: 59rem; } } @media (max-width: 750px) { .ask__lead { font-size: 32rem; line-height: 1.6; } } .ask__lead_line { display: block; font-weight: 700; } .ask__em { color: #a57fb0; font-weight: 700; } .ask__text { letter-spacing: 0.05em; } @media (min-width: 751px) { .ask__text { margin-top: 22rem; font-size: 20rem; } } @media (max-width: 750px) { .ask__text { margin-top: 24rem; font-size: 26rem; } } @media (min-width: 751px) { .ask__text p { line-height: 51.5rem; } } @media (max-width: 750px) { .ask__text p { line-height: 50rem; } } /********************* 矯正治療で期待できる2つのメリット（BEAUTY / FUNCTION） ************************/ .merit { position: relative; width: 100%; box-sizing: border-box; background-color: #ededed; color: #434348; line-break: strict; overflow: hidden; text-align: center; /* 上部の水色三角＋白文字 */ } .merit__lead { position: relative; } @media (min-width: 751px) { .merit__lead { padding: 20rem 0 0 0; } } @media (max-width: 750px) { .merit__lead { padding: 40rem 40rem 0; } } .merit__lead:before { position: absolute; content: ""; left: 0; top: 0; width: 100%; box-sizing: border-box; background-color: #64cdd8; color: #fff; text-align: center; /* カンプ：上辺 x222〜3110、頂点 x1666 */ clip-path: polygon(6.66% 0, 93.31% 0, 50% 100%); z-index: 1; } @media (min-width: 751px) { .merit__lead:before { height: 334rem; } } @media (max-width: 750px) { .merit__lead:before { height: 360rem; clip-path: polygon(0 0, 100% 0, 50% 100%); } } .merit__lead_head { font-weight: 700; letter-spacing: 0.02em; line-height: 1; position: relative; z-index: 3; color: #fff; } @media (min-width: 751px) { .merit__lead_head { margin-top: 40rem; font-size: 30rem; } } @media (max-width: 750px) { .merit__lead_head { margin-top: 34rem; font-size: 32rem; } } .merit__lead_text { color: #424348; text-shadow: 2rem 2rem 2rem #fff; position: relative; z-index: 3; } @media (min-width: 751px) { .merit__lead_text { margin-top: 30rem; font-size: 20rem; line-height: 49rem; } } @media (max-width: 750px) { .merit__lead_text { margin-top: 18rem; font-size: 22rem; line-height: 1.9; } } @media (max-width: 750px) { .merit__lead_text br { display: none; } } .merit { /* 2カラム */ } .merit__cols { position: relative; } @media (min-width: 751px) { .merit__cols { display: flex; margin-top: -200rem; } } @media (max-width: 750px) { .merit__cols { margin-top: -210rem; } } .merit__col { position: relative; box-sizing: border-box; overflow: hidden; } @media (min-width: 751px) { .merit__col { width: 50%; padding-bottom: 82rem; } } @media (max-width: 750px) { .merit__col { width: 100%; padding-bottom: 50rem; } } .merit__col--beauty { background-color: #f9edf9; } .merit__col--beauty .merit__photo { left: 0; } @media (min-width: 751px) { .merit__col--beauty .merit__photo { width: 370rem; } } @media (max-width: 750px) { .merit__col--beauty .merit__photo { width: 300rem; } } .merit__col--beauty .merit__en { color: #f3a7cb; } .merit__col--function { background-color: #e5f2fa; } .merit__col--function .merit__photo { right: 0; } @media (min-width: 751px) { .merit__col--function .merit__photo { width: 370rem; } } @media (max-width: 750px) { .merit__col--function .merit__photo { width: 300rem; top: -40rem; } } .merit__col--function .merit__en { color: #90c8e3; } @media (max-width: 750px) { .merit__col--function .merit__en { padding-top: 120rem; } } .merit__photo { position: absolute; top: 0; } @media (min-width: 751px) { .merit__photo { height: 498rem; } } @media (max-width: 750px) { .merit__photo { height: 340rem; } } .merit__photo img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .merit__en { font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; position: relative; text-align: center; font-weight: 500; line-height: 1; letter-spacing: 0.05em; } @media (min-width: 751px) { .merit__en { padding-top: 260rem; font-size: 80rem; } } @media (max-width: 750px) { .merit__en { padding-top: 380rem; font-size: 62rem; } } .merit__title { position: relative; text-align: center; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; letter-spacing: 0; } @media (min-width: 751px) { .merit__title { margin-top: 50rem; font-size: 40rem; } } @media (max-width: 750px) { .merit__title { margin-top: 34rem; font-size: 35rem; } } @media (min-width: 751px) { .merit__title_big { font-size: 60rem; } } @media (max-width: 750px) { .merit__title_big { font-size: 52rem; } } .merit { /* カード */ } @media (min-width: 751px) { .merit__list { margin-top: 75rem; width: 666rem; margin: 75rem auto 0; } } @media (max-width: 750px) { .merit__list { margin-top: 40rem; padding: 0 40rem; position: relative; } } .merit__item { display: flex; align-items: center; box-sizing: border-box; background-color: #fff; } @media (min-width: 751px) { .merit__item { border-radius: 25rem; padding: 30rem 20rem; min-height: 350rem; } } @media (max-width: 750px) { .merit__item { border-radius: 20rem; padding: 30rem 26rem; } } @media (min-width: 751px) { .merit__item + .merit__item { margin-top: 43rem; } } @media (max-width: 750px) { .merit__item + .merit__item { margin-top: 24rem; } } .merit__ill { flex-shrink: 0; border-radius: 50%; overflow: hidden; } @media (min-width: 751px) { .merit__ill { width: 204rem; } } @media (max-width: 750px) { .merit__ill { width: 150rem; } } .merit__ill img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media (min-width: 751px) { .merit__body { width: 370rem; margin-left: 37rem; } } @media (max-width: 750px) { .merit__body { margin-left: 20rem; } } .merit__name { font-weight: 500; letter-spacing: 0; } @media (min-width: 751px) { .merit__name { font-size: 25rem; line-height: 49rem; } } @media (max-width: 750px) { .merit__name { font-size: 32rem; line-height: 1.5; } } .merit__text { letter-spacing: 0.05em; } @media (min-width: 751px) { .merit__text { margin-top: 10rem; font-size: 20rem; line-height: 44.6rem; } } @media (max-width: 750px) { .merit__text { margin-top: 12rem; font-size: 26rem; line-height: 1.8; } } /********************* 当院でできる矯正治療をご紹介！ ************************/ .howto { position: relative; width: 100%; box-sizing: border-box; background-color: #959aa1; color: #fff; text-align: center; line-break: strict; } @media (min-width: 751px) { .howto { padding: 90rem 0; } } @media (max-width: 750px) { .howto { padding: 70rem 40rem 60rem; } } .howto { /* 白い角丸の吹き出し */ } .howto__pill { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; margin: 0 auto; background-color: #fff; color: #434348; font-weight: 700; letter-spacing: 0.04em; } @media (min-width: 751px) { .howto__pill { width: 717rem; padding: 23rem; border-radius: 67rem; font-size: 35rem; } } @media (max-width: 750px) { .howto__pill { width: 100%; padding: 24rem 20rem; border-radius: 60rem; font-size: 30rem; } } .howto__pill span { font-weight: 700; } @media (min-width: 751px) { .howto__pill span { font-size: 40rem; } } @media (max-width: 750px) { .howto__pill span { font-size: 40rem; } } .howto__pill { /* 下の三角 */ } .howto__pill::after { content: ""; position: absolute; left: 50%; border-style: solid; border-color: #fff transparent transparent; } @media (min-width: 751px) { .howto__pill::after { bottom: -28rem; margin-left: -20rem; border-width: 28rem 20rem 0; } } @media (max-width: 750px) { .howto__pill::after { bottom: -20rem; margin-left: -14rem; border-width: 20rem 14rem 0; } } .howto { /* 水色のはてなマーク */ } .howto__mark { position: absolute; color: rgba(26, 182, 198, 0.7); font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; z-index: 2; transform: rotate(15deg); } @media (min-width: 751px) { .howto__mark { right: -50rem; top: -40rem; font-size: 170rem; } } @media (max-width: 750px) { .howto__mark { right: -15rem; top: -30rem; font-size: 150rem; } } .howto__head { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; letter-spacing: 0; } @media (min-width: 751px) { .howto__head { margin-top: 81rem; font-size: 50rem; } } @media (max-width: 750px) { .howto__head { margin-top: 50rem; font-size: 39rem; line-height: 1.5; } } @media (min-width: 751px) { .howto__em { font-size: 80rem; } } @media (max-width: 750px) { .howto__em { font-size: 60rem; } } @media (min-width: 751px) { .howto__text { margin-top: 55rem; font-size: 20rem; line-height: 51.8rem; } } @media (max-width: 750px) { .howto__text { margin-top: 30rem; font-size: 23rem; line-height: 1.9; } } /********************* 矯正治療一覧 ************************/ .tlist { width: 100%; box-sizing: border-box; background-color: #fff; color: #434348; line-break: strict; } @media (min-width: 751px) { .tlist { padding: 80rem 0; } } @media (max-width: 750px) { .tlist { padding: 40rem 40rem 50rem; } } .tlist__card { box-sizing: border-box; margin: 0 auto; background-color: #c1f1f5; } @media (min-width: 751px) { .tlist__card { width: 87.5%; padding: 80rem; border-radius: 90rem; } } @media (max-width: 750px) { .tlist__card { padding: 50rem 26rem 50rem; border-radius: 45rem; } } .tlist__head { text-align: center; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; letter-spacing: 0; } @media (min-width: 751px) { .tlist__head { font-size: 50rem; } } @media (max-width: 750px) { .tlist__head { font-size: 42rem; } } .tlist__rule { display: block; height: 1px; background-color: #fff; width: 100%; } @media (min-width: 751px) { .tlist__rule { margin: 30rem auto 0; } } @media (max-width: 750px) { .tlist__rule { margin: 26rem auto 0; } } @media (min-width: 751px) { .tlist__items { margin-top: 90rem; } } @media (max-width: 750px) { .tlist__items { margin-top: 34rem; } } .tlist__item { position: relative; } @media (min-width: 751px) { .tlist__item--1 { height: 471rem; } .tlist__item--2 { height: 415rem; margin-top: 89rem; } .tlist__item--3 { height: 466rem; margin-top: 135rem; } } @media (max-width: 750px) { .tlist__item + .tlist__item { margin-top: 50rem; } } @media (min-width: 751px) { .tlist__photo { position: absolute; } } @media (max-width: 750px) { .tlist__photo { width: 80%; margin: 0 auto; } } .tlist__photo img { display: block; width: 100%; } @media (min-width: 751px) { .tlist__item--1 .tlist__photo { left: 0; top: 42rem; width: 37.5%; } } @media (min-width: 751px) { .tlist__item--2 .tlist__photo { left: 0; top: 92rem; width: 37.5%; } } @media (min-width: 751px) { .tlist__item--3 .tlist__photo { left: 0; top: 39rem; width: 37.5%; } } .tlist { /* 白い丸バッジ */ } .tlist__badge { display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; border-radius: 50%; background-color: #fff; text-align: center; font-weight: 700; position: absolute; } @media (min-width: 751px) { .tlist__badge { left: 0; width: 211rem; height: 211rem; font-size: 20rem; line-height: 46rem; } } @media (max-width: 750px) { .tlist__badge { width: 210rem; height: 210rem; top: 0; left: 0; font-size: 22rem; line-height: 1.7; z-index: 2; } } .tlist__badge_em { color: #1ab6c6; font-weight: 700; } @media (min-width: 751px) { .tlist__badge_em { font-size: 25rem; } } @media (max-width: 750px) { .tlist__badge_em { font-size: 25rem; } } @media (min-width: 751px) { .tlist__item--1 .tlist__badge { top: -56rem; } } @media (min-width: 751px) { .tlist__item--2 .tlist__badge { top: -6rem; } } @media (min-width: 751px) { .tlist__item--3 .tlist__badge { top: -58rem; } } @media (min-width: 751px) { .tlist__main { margin-left: auto; width: 59.4%; } } @media (max-width: 750px) { .tlist__main { margin-top: 30rem; } } .tlist__title { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 600; line-height: 1; letter-spacing: 0; } @media (min-width: 751px) { .tlist__title { font-size: 50rem; } } @media (max-width: 750px) { .tlist__title { font-size: 40rem; line-height: 1.4; } } .tlist__title_sub { font-weight: 600; } @media (min-width: 751px) { .tlist__title_sub { font-size: 35rem; } } @media (max-width: 750px) { .tlist__title_sub { font-size: 28rem; } } @media (min-width: 751px) { .tlist__text { margin-top: 46rem; font-size: 20rem; } } @media (max-width: 750px) { .tlist__text { margin-top: 20rem; font-size: 26rem; } } @media (min-width: 751px) { .tlist__text p { line-height: 51.6rem; } } @media (max-width: 750px) { .tlist__text p { line-height: 50rem; } } .tlist { /* 茶屋が坂矯正歯科だからできる矯正治療 */ } .tlist__sub { position: relative; } @media (min-width: 751px) { .tlist__sub { margin-top: 50rem; } } @media (max-width: 750px) { .tlist__sub { margin-top: 50rem; } } .tlist__pill { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; margin: 0 auto; background-color: #fff; text-align: center; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; letter-spacing: 0; z-index: 2; } @media (min-width: 751px) { .tlist__pill { width: 883rem; height: 86rem; border-radius: 52rem; font-size: 35rem; } } @media (max-width: 750px) { .tlist__pill { width: 93%; padding: 20rem 16rem; border-radius: 50rem; font-size: 26rem; line-height: 1.5; } } .tlist__pill_em { color: #1ab6c6; } @media (min-width: 751px) { .tlist__pill_em { font-size: 40rem; } } @media (max-width: 750px) { .tlist__pill_em { font-size: 32rem; } } .tlist__pill::after { content: ""; position: absolute; left: 50%; border-style: solid; border-color: #fff transparent transparent; } @media (min-width: 751px) { .tlist__pill::after { bottom: -29rem; margin-left: -19rem; border-width: 29rem 19rem 0; } } @media (max-width: 750px) { .tlist__pill::after { bottom: -18rem; margin-left: -13rem; border-width: 18rem 13rem 0; } } .tlist__box { box-sizing: border-box; background-color: #1ab5c7; color: #fff; } @media (min-width: 751px) { .tlist__box { margin: -45rem auto 0; padding: 100rem 74rem 82rem; } } @media (max-width: 750px) { .tlist__box { margin-top: -50rem; padding: 90rem 26rem 40rem; } } .tlist__boxhead { text-align: center; font-weight: 700; line-height: 1; letter-spacing: 0.02em; } @media (min-width: 751px) { .tlist__boxhead { font-size: 36rem; } } @media (max-width: 750px) { .tlist__boxhead { font-size: 32rem; line-height: 1.5; } } .tlist__boxhead_em { color: #f5ff66; font-weight: 700; } @media (min-width: 751px) { .tlist__boxhead_em { font-size: 35rem; } } @media (max-width: 750px) { .tlist__boxhead_em { font-size: 40rem; } } .tlist__boxlead { text-align: center; font-weight: 700; line-height: 1; letter-spacing: 0; } @media (min-width: 751px) { .tlist__boxlead { margin-top: 27rem; font-size: 30rem; } } @media (max-width: 750px) { .tlist__boxlead { margin-top: 20rem; font-size: 27rem; line-height: 1.5; } } @media (min-width: 751px) { .tlist__boxinner { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 58rem; } } @media (max-width: 750px) { .tlist__boxinner { margin-top: 30rem; } } @media (min-width: 751px) { .tlist__boxtext { width: 55.5%; font-size: 20rem; } } @media (max-width: 750px) { .tlist__boxtext { font-size: 26rem; } } @media (min-width: 751px) { .tlist__boxtext p { line-height: 51.5rem; } } @media (max-width: 750px) { .tlist__boxtext p { line-height: 50rem; } } @media (min-width: 751px) { .tlist__boximg { width: 42%; } } @media (max-width: 750px) { .tlist__boximg { margin-top: 24rem; } } .tlist__boximg img { display: block; width: 100%; } /********************* インビザラインについて（CAUTION） ************************/ .caution { position: relative; width: 100%; box-sizing: border-box; background-color: #efefef; color: #434348; line-break: strict; overflow: hidden; } @media (min-width: 751px) { .caution { padding: 150rem 0 100rem; } } @media (max-width: 750px) { .caution { padding: 90rem 40rem 60rem; } } .caution { /* 背面の CAUTION */ } .caution__wm { position: absolute; left: 0; width: 100%; text-align: center; color: #e5e5e5; font-weight: 700; line-height: 1; letter-spacing: 0.04em; } @media (min-width: 751px) { .caution__wm { top: 60rem; font-size: 120rem; } } @media (max-width: 750px) { .caution__wm { top: 24rem; font-size: 80rem; } } .caution { /* 灰色の帯 */ } .caution__band { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; margin: 0 auto; background-color: #a29e9f; color: #fff; text-align: center; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; letter-spacing: 0; } @media (min-width: 751px) { .caution__band { width: 87.5%; height: 124rem; font-size: 40rem; } } @media (max-width: 750px) { .caution__band { width: 100%; padding: 20rem 16rem; font-size: 34rem; } } .caution__card { box-sizing: border-box; margin: 0 auto; background-color: #fff; box-shadow: 7rem 7rem 7rem rgba(117, 117, 117, 0.3); } @media (min-width: 751px) { .caution__card { width: 87.5%; margin: 50rem auto 0; padding: 70rem 60rem; border-radius: 80rem; } } @media (max-width: 750px) { .caution__card { margin-top: 40rem; padding: 40rem 26rem; border-radius: 30rem; } } .caution__item { position: relative; } @media (min-width: 751px) { .caution__item { padding-left: 49rem; } } @media (max-width: 750px) { .caution__item { padding-left: 34rem; } } @media (min-width: 751px) { .caution__item + .caution__item { margin-top: 60rem; } } @media (max-width: 750px) { .caution__item + .caution__item { margin-top: 34rem; } } .caution__item { /* ● */ } .caution__item::before { content: ""; position: absolute; left: 10rem; border-radius: 50%; background-color: #434348; } @media (min-width: 751px) { .caution__item::before { top: -1rem; width: 20rem; height: 20rem; } } @media (max-width: 750px) { .caution__item::before { top: 8rem; width: 20rem; height: 20rem; } } .caution__title { font-weight: 700; line-height: 1; letter-spacing: 0; } @media (min-width: 751px) { .caution__title { font-size: 20rem; } } @media (max-width: 750px) { .caution__title { font-size: 32rem; line-height: 1.5; } } @media (min-width: 751px) { .caution__text { margin-top: 14rem; font-size: 20rem; line-height: 51.6rem; } } @media (max-width: 750px) { .caution__text { margin-top: 12rem; font-size: 26rem; line-height: 50rem; } } /********************* 矯正治療の流れ（FLOW） ************************/ .flow { width: 100%; box-sizing: border-box; background-color: #e1ebed; color: #434348; line-break: strict; } @media (min-width: 751px) { .flow { padding: 152rem 0 0; } } @media (max-width: 750px) { .flow { padding: 70rem 40rem 0; } } .flow__en { font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; font-weight: 300; text-align: center; line-height: 1; letter-spacing: 0.1em; text-indent: 0.1em; } @media (min-width: 751px) { .flow__en { font-size: 40rem; } } @media (max-width: 750px) { .flow__en { font-size: 32rem; } } .flow__head { text-align: center; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; letter-spacing: 0; } @media (min-width: 751px) { .flow__head { margin-top: 43rem; font-size: 60rem; } } @media (max-width: 750px) { .flow__head { margin-top: 26rem; font-size: 52rem; } } .flow { /* --- ステップ --- */ } .flow__step { position: relative; } @media (min-width: 751px) { .flow__step { width: 87%; margin: 60rem auto 0; } } @media (max-width: 750px) { .flow__step { padding-bottom: 50rem; } } .flow__num { font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; font-weight: 500; display: flex; align-items: center; justify-content: center; box-sizing: border-box; border-radius: 50%; background-color: #46828a; color: #fff; line-height: 1; letter-spacing: 0.02em; } @media (min-width: 751px) { .flow__num { position: absolute; left: 0; top: -50rem; width: 184rem; height: 184rem; font-size: 83rem; } } @media (max-width: 750px) { .flow__num { width: 130rem; height: 130rem; font-size: 35rem; } } .flow { /* 縦のつなぎ線 */ } .flow__line { display: block; background-color: #46828a; } @media (min-width: 751px) { .flow__line { position: absolute; left: 5.5%; top: 0; width: 1px; height: 700rem; z-index: 2; } } @media (max-width: 750px) { .flow__line { display: none; } } @media (min-width: 751px) { .flow__body { width: 47%; margin-left: 17%; } } @media (max-width: 750px) { .flow__body { margin-top: 30rem; } } .flow__title { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1.5; letter-spacing: 0; color: #46828a; } @media (min-width: 751px) { .flow__title { font-size: 52rem; } } @media (max-width: 750px) { .flow__title { font-size: 42rem; line-height: 1.4; } } .flow__text { letter-spacing: 0.04em; } @media (min-width: 751px) { .flow__text { margin-top: 51rem; font-size: 20rem; } } @media (max-width: 750px) { .flow__text { margin-top: 24rem; font-size: 26rem; } } @media (min-width: 751px) { .flow__text p { line-height: 51.6rem; } } @media (max-width: 750px) { .flow__text p { line-height: 50rem; } } @media (min-width: 751px) { .flow__img { position: absolute; right: 0; top: 0; width: 32.06%; } } @media (max-width: 750px) { .flow__img { margin-top: 30rem; } } .flow__img img { display: block; width: 100%; } /********************* 無料矯正相談 受付中（FLOW内・明るい配色） ************************/ .cta2 .cta { background: #e1ebed; } @media (min-width: 751px) { .cta2 .cta { padding: 90rem 0; } } .cta2 .cta__box { background: none; } .cta2 .cta__balloon { background: #fff; } .cta2 .cta__balloon:after { border-color: #fff transparent transparent transparent; } .cta2 .cta__intro_img { background: #e1ebed; } .cta3 .cta { background: #eef4f5; } @media (min-width: 751px) { .cta3 .cta { padding: 90rem 0; } } /********************* 矯正治療の流れ STEP02（精密検査） ************************/ /* 2番目以降のステップ帯（地色が少し明るい） */ .flow--n2 { background: #eef4f5; } @media (min-width: 751px) { .flow--n2 { padding: 60rem 0 80rem; } } @media (max-width: 750px) { .flow--n2 { padding: 40rem 40rem 0; } } /********************* 精密検査の内容（顔面・口腔内の撮影／レントゲン撮影） ************************/ .det { width: 100%; box-sizing: border-box; background-color: #ecf4f6; color: #434348; line-break: strict; } @media (min-width: 751px) { .det { padding-bottom: 90rem; } } .det__card { box-sizing: border-box; background-color: #fff; position: relative; z-index: 2; } @media (min-width: 751px) { .det__card { padding: 60rem 80rem; width: 87%; margin: 0 auto; } } @media (max-width: 750px) { .det__card { padding: 40rem; } } .det { /* 「詳しくはこちら」ボタン（押すと下の内容が開く） */ } .det__more { text-align: center; } @media (min-width: 751px) { .det__more { padding: 10rem 0 0; } } @media (max-width: 750px) { .det__more { padding: 0 0 60rem; } } .det__more_btn { position: relative; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; margin: 0; border: 0; border-radius: 999rem; background-color: #458289; color: #fff; font-family: "source-han-sans-japanese", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif; font-weight: 500; line-height: 1; letter-spacing: 0.2em; text-indent: 0.2em; cursor: pointer; -moz-appearance: none; appearance: none; -webkit-appearance: none; transition: 0.3s; } @media (min-width: 751px) { .det__more_btn { width: 387rem; height: 100rem; padding: 0 94rem 0 0; font-size: 23rem; } } @media (max-width: 750px) { .det__more_btn { width: 360rem; height: 90rem; padding: 0 84rem 0 0; font-size: 24rem; } } .det__more_btn:hover { opacity: 0.7; } .det { /* 右端の白い丸と下向き矢印 */ } .det__more_arrow { position: absolute; top: 50%; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #fff; color: #458289; text-indent: 0; transform: translateY(-50%); } @media (min-width: 751px) { .det__more_arrow { right: 3rem; width: 94rem; height: 94rem; } } @media (max-width: 750px) { .det__more_arrow { right: 3rem; width: 84rem; height: 84rem; } } .det__more_arrow svg { display: block; width: 42%; height: 42%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .det { /* 開くまでは隠しておく（開くときの高さの動きは whole.js） */ } .det__fold { display: none; overflow: hidden; transition: height 0.5s ease; } .det__fold.is__open { display: block; } .det { /* ティールの見出し帯 */ } .det__pill { display: flex; align-items: center; justify-content: center; box-sizing: border-box; background-color: #46828a; color: #fff; text-align: center; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; letter-spacing: 0.04em; width: 100%; } @media (min-width: 751px) { .det__pill { margin: 0 auto; border-radius: 48rem; font-size: 36rem; padding: 10rem; } } @media (max-width: 750px) { .det__pill { padding: 18rem 16rem; border-radius: 40rem; font-size: 30rem; } } @media (min-width: 751px) { .det__pill--2 { margin-top: 60rem; } } @media (max-width: 750px) { .det__pill--2 { margin-top: 40rem; } } .det__lead { text-align: center; } @media (min-width: 751px) { .det__lead { margin-top: 30rem; font-size: 20rem; line-height: 51.6rem; } } @media (max-width: 750px) { .det__lead { margin-top: 24rem; font-size: 26rem; line-height: 1.9; text-align: left; } } .det { /* 顔面写真・口腔内写真 */ } .det__photos { box-sizing: border-box; } @media (min-width: 751px) { .det__photos { display: flex; justify-content: center; margin-top: 60rem; } } @media (max-width: 750px) { .det__photos { margin-top: 30rem; } } @media (min-width: 751px) { .det__photo { width: 48%; } } @media (min-width: 751px) { .det__photo:nth-of-type(2) { margin-left: 50rem; } } @media (max-width: 750px) { .det__photo + .det__photo { margin-top: 30rem; } } .det__photo_img img { display: block; width: 100%; } .det__photo_cap { display: flex; align-items: center; justify-content: center; background-color: #665953; color: #fff; font-weight: 700; letter-spacing: 0.04em; } @media (min-width: 751px) { .det__photo_cap { height: 63rem; font-size: 27rem; } } @media (max-width: 750px) { .det__photo_cap { height: 56rem; font-size: 24rem; } } .det { /* POINT */ } .det__point { position: relative; text-align: center; color: #46828a; line-height: 1; letter-spacing: 0.12em; text-indent: 0.12em; z-index: 2; } @media (min-width: 751px) { .det__point { margin-top: 70rem; font-size: 83rem; } } @media (max-width: 750px) { .det__point { margin-top: 50rem; font-size: 56rem; } } @media (min-width: 751px) { .det__point--2 { margin-top: 59rem; } } @media (max-width: 750px) { .det__point--2 { margin-top: 40rem; } } .det__box { box-sizing: border-box; background-color: #f7f8ea; } @media (min-width: 751px) { .det__box { width: 100%; margin: -31rem auto 0; padding: 81rem 105rem 70rem; } } @media (max-width: 750px) { .det__box { margin-top: -20rem; padding: 40rem 40rem 30rem; } } .det__box_lead { text-align: center; line-height: 1; } @media (min-width: 751px) { .det__box_lead { font-size: 26rem; } } @media (max-width: 750px) { .det__box_lead { font-size: 26rem; } } @media (min-width: 751px) { .det__box_text { font-size: 22rem; line-height: 51.6rem; } } @media (max-width: 750px) { .det__box_text { font-size: 26rem; line-height: 1.9; } } @media (min-width: 751px) { .det__box--2 { margin-top: -29rem; padding: 78rem 105rem 62rem; } } .det__list { margin: 0; } .det__list_t { color: #46828a; line-height: 1; } @media (min-width: 751px) { .det__list_t { margin-top: 68rem; font-size: 24rem; } } @media (max-width: 750px) { .det__list_t { margin-top: 30rem; font-size: 20rem; } } .det__list_d { margin: 0; } @media (min-width: 751px) { .det__list_d { margin-top: 17rem; font-size: 24rem; line-height: 51.6rem; } } @media (max-width: 750px) { .det__list_d { margin-top: 10rem; font-size: 24rem; line-height: 1.9; } } .det { /* レントゲン写真 */ } .det__xray { box-sizing: border-box; } @media (min-width: 751px) { .det__xray { display: flex; justify-content: space-between; padding: 0 40rem; margin-top: 40rem; } } @media (max-width: 750px) { .det__xray { margin-top: 30rem; } } @media (min-width: 751px) { .det__xray--2 { margin-top: 71rem; } } @media (max-width: 750px) { .det__xray--2 { margin-top: 30rem; } } @media (min-width: 751px) { .det__xray--2 .det__xray_t { margin-top: 46rem; } } @media (min-width: 751px) { .det__xray_item { width: 32%; } } @media (min-width: 751px) { .det__xray_item.adjust__width { width: 30%; } } @media (max-width: 750px) { .det__xray_item + .det__xray_item { margin-top: 30rem; } } @media (min-width: 751px) { .det__xray_item--wide { width: 63.5%; } } @media (min-width: 751px) { .det__xray_item--wide .det__xray_d { letter-spacing: -0.02em; font-size: 19rem; } } .det__xray_img img { display: block; width: 100%; } .det__xray_t { text-align: center; font-weight: 700; line-height: 1; letter-spacing: 0.04em; } @media (min-width: 751px) { .det__xray_t { margin-top: 37rem; font-size: 26rem; } } @media (max-width: 750px) { .det__xray_t { margin-top: 20rem; font-size: 32rem; } } @media (min-width: 751px) { .det__xray_d { margin-top: 39rem; font-size: 20rem; line-height: 51.6rem; } } @media (max-width: 750px) { .det__xray_d { margin-top: 14rem; font-size: 26rem; line-height: 1.9; } } /********************* 矯正治療の流れ STEP03・04 ************************/ .flow--n34 { position: relative; } @media (min-width: 751px) { .flow--n34 { padding: 54rem 0 0; /* 上 1316px までは前の地色、そこから少し明るい地色 */ background: linear-gradient(to bottom, #e1ebed 0, #e1ebed 758rem, #ecf1f4 758rem, #ecf1f4 100%); } } @media (max-width: 750px) { .flow--n34 { padding: 0 40rem; background-color: #ecf1f4; } } @media (min-width: 751px) { .flow__step--n3 { margin-top: 0; padding-bottom: 160rem; } } @media (max-width: 750px) { .flow__step--n3 { padding-top: 50rem; } } @media (min-width: 751px) { .flow__step--n3 .flow__line { top: -142rem; height: 135%; } } @media (min-width: 751px) { .flow__step--n4 { padding-bottom: 120rem; } } /********************* 矯正治療後も口腔内の健康を保つために ************************/ .after { width: 100%; box-sizing: border-box; background-color: #eef4f5; color: #434348; text-align: center; line-break: strict; } @media (max-width: 750px) { .after { padding: 0 40rem 80rem; } } .after__pill { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; margin: 0 auto; background-color: #fff; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; letter-spacing: 0; z-index: 2; } @media (min-width: 751px) { .after__pill { width: 65%; margin: 0 auto; border-radius: 25rem; font-size: 40rem; } } @media (max-width: 750px) { .after__pill { width: 92%; padding: 20rem 16rem; border-radius: 50rem; font-size: 30rem; line-height: 1.5; } } .after__pill_em { color: #46828a; } @media (min-width: 751px) { .after__pill_em { font-size: 52rem; } } @media (max-width: 750px) { .after__pill_em { font-size: 35rem; } } .after__pill::after { content: ""; position: absolute; left: 50%; border-style: solid; border-color: #fff transparent transparent; } @media (min-width: 751px) { .after__pill::after { bottom: -27rem; margin-left: -19rem; border-width: 29rem 19rem 0; } } @media (max-width: 750px) { .after__pill::after { bottom: -18rem; margin-left: -13rem; border-width: 18rem 13rem 0; } } .after__box { box-sizing: border-box; background-color: #489faa; color: #fff; } @media (min-width: 751px) { .after__box { width: 78%; margin: -50rem auto 0; padding: 90rem 0rem 30rem; } } @media (max-width: 750px) { .after__box { margin-top: -50rem; padding: 80rem 40rem 40rem; } } @media (min-width: 751px) { .after__text { font-size: 31rem; } } @media (max-width: 750px) { .after__text { font-size: 26rem; } } .after__line { display: block; } @media (min-width: 751px) { .after__line { line-height: 72rem; } } @media (max-width: 750px) { .after__line { line-height: 1.9; } } @media (min-width: 751px) { .after__line--lg { line-height: 78rem; } } .after__em { color: #f4ff67; } @media (min-width: 751px) { .after__em { font-size: 40rem; } } @media (max-width: 750px) { .after__em { font-size: 30rem; } } /********************* 無料矯正相談 受付中（FLOW末尾・明るい地色） ************************/ .cta--n3 { background-color: #ecf1f4; } @media (min-width: 751px) { .cta--n3 { padding-top: 84rem; padding-bottom: 119rem; } } @media (max-width: 750px) { .cta--n3 { padding-top: 60rem; padding-bottom: 60rem; } } /********************* 患者さまへのご案内 ************************/ .guide { width: 100%; box-sizing: border-box; background-color: #efefef; color: #434348; line-break: strict; } @media (min-width: 751px) { .guide { padding: 80rem 0 82rem; } } @media (max-width: 750px) { .guide { padding: 50rem 40rem 50rem; } } .guide__box { box-sizing: border-box; border: 2px solid #46828a; } @media (min-width: 751px) { .guide__box { width: 87%; margin: 0 auto; padding: 50rem 80rem; } } @media (max-width: 750px) { .guide__box { padding: 40rem 40rem 34rem; } } .guide__head { text-align: center; color: #46828a; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; letter-spacing: 0; } @media (min-width: 751px) { .guide__head { font-size: 41rem; } } @media (max-width: 750px) { .guide__head { font-size: 36rem; line-height: 1.5; } } @media (min-width: 751px) { .guide__head_sm { font-size: 31rem; } } @media (max-width: 750px) { .guide__head_sm { font-size: 26rem; display: block; } } @media (min-width: 751px) { .guide__text { margin-top: 46rem; font-size: 20rem; line-height: 51.6rem; } } @media (max-width: 750px) { .guide__text { margin-top: 24rem; font-size: 26rem; line-height: 1.9; } } /********************* 矯正歯科治療に伴う一般的なリスク・副作用について ************************/ .risk { width: 100%; box-sizing: border-box; background-color: #fff; color: #434348; line-break: strict; } @media (min-width: 751px) { .risk { padding: 84rem 0 0; } } @media (max-width: 750px) { .risk { padding: 50rem 40rem 0; } } .risk__box { box-sizing: border-box; background-color: #e9efef; } @media (min-width: 751px) { .risk__box { padding: 83rem 164rem 62rem 167rem; width: 87.5%; margin: 0 auto; } } @media (max-width: 750px) { .risk__box { padding: 40rem 26rem 34rem; } } .risk__head { text-align: center; color: #46828a; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; letter-spacing: 0; } @media (min-width: 751px) { .risk__head { font-size: 40rem; } } @media (max-width: 750px) { .risk__head { font-size: 30rem; line-height: 1.5; } } .risk { /* ★スクロール領域 */ } .risk__body { overflow-y: auto; overscroll-behavior: contain; } @media (min-width: 751px) { .risk__body { margin-top: 62rem; max-height: 296rem; padding-right: 30rem; font-size: 20rem; line-height: 51.6rem; } } @media (max-width: 750px) { .risk__body { margin-top: 30rem; max-height: 420rem; padding-right: 20rem; font-size: 26rem; line-height: 1.9; } } @media (min-width: 751px) { .risk__body::-webkit-scrollbar { width: 5rem; } } @media (max-width: 750px) { .risk__body::-webkit-scrollbar { width: 5rem; } } .risk__body::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0.06); } .risk__body::-webkit-scrollbar-thumb { background-color: #434348; } .risk__list { list-style: decimal; } @media (min-width: 751px) { .risk__list { margin-top: 40rem; } } @media (max-width: 750px) { .risk__list { margin-top: 30rem; } } /********************* PRICE 費用・お支払い方法について／診療費用 ************************/ .price { width: 100%; box-sizing: border-box; background-color: #fff; color: #434348; text-align: center; line-break: strict; } @media (min-width: 751px) { .price { width: 87.5%; margin: 0 auto; padding: 120rem 0 100rem; } } @media (max-width: 750px) { .price { padding: 80rem 40rem 0; } } .price__en { font-weight: 300; font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; line-height: 1; letter-spacing: 0.12em; text-indent: 0.12em; } @media (min-width: 751px) { .price__en { font-size: 40rem; } } @media (max-width: 750px) { .price__en { font-size: 34rem; } } .price__head { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; letter-spacing: 0; } @media (min-width: 751px) { .price__head { margin-top: 35rem; font-size: 60rem; } } @media (max-width: 750px) { .price__head { margin-top: 24rem; font-size: 48rem; } } .price { /* 上下に細い罫線がつく小見出し */ } .price__sub { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; letter-spacing: 0; } @media (min-width: 751px) { .price__sub { margin-top: 106rem; padding: 40rem 0; font-size: 40rem; line-height: 1; border-top: 2px solid #717173; border-bottom: 2px solid #717173; } } @media (max-width: 750px) { .price__sub { margin-top: 50rem; padding: 24rem 0; font-size: 34rem; line-height: 1; border-top: 1px solid #717173; border-bottom: 1px solid #717173; } } @media (min-width: 751px) { .price__tax { margin-top: 80rem; font-size: 24rem; line-height: 1; } } @media (max-width: 750px) { .price__tax { margin-top: 30rem; font-size: 22rem; } } .price { /* 3つのカード */ } @media (min-width: 751px) { .price__cards { display: flex; justify-content: center; margin-top: 79rem; } } @media (max-width: 750px) { .price__cards { margin-top: 30rem; } } .price__card { position: relative; box-sizing: border-box; background-color: #f7f8fa; } @media (min-width: 751px) { .price__card { width: 400rem; padding: 40rem 20rem; } } @media (max-width: 750px) { .price__card { width: 100%; padding: 30rem 20rem 30rem; } .price__card + .price__card { margin-top: 40rem; } } @media (min-width: 751px) { .price__card:nth-of-type(2) { margin: 0 90rem; } } .price__card { /* カードの間の ＋ */ } .price__card + .price__card::before, .price__card + .price__card::after { content: ""; position: absolute; background-color: #434348; } @media (min-width: 751px) { .price__card + .price__card::before, .price__card + .price__card::after { left: -46rem; top: 50%; } } @media (max-width: 750px) { .price__card + .price__card::before, .price__card + .price__card::after { left: 50%; top: -26rem; } } @media (min-width: 751px) { .price__card + .price__card::before { width: 36rem; height: 2px; margin: -1px 0 0 -18rem; } } @media (max-width: 750px) { .price__card + .price__card::before { width: 30rem; height: 2px; margin: 0 0 0 -15rem; } } @media (min-width: 751px) { .price__card + .price__card::after { width: 2px; height: 36rem; margin: -18rem 0 0 -1px; } } @media (max-width: 750px) { .price__card + .price__card::after { width: 2px; height: 30rem; margin: -14rem 0 0 -1px; } } .price__card_pill { display: flex; align-items: center; justify-content: center; box-sizing: border-box; margin: 0 auto; background-color: #46828a; color: #fff; letter-spacing: 0.04em; } @media (min-width: 751px) { .price__card_pill { border-radius: 34rem; font-size: 25rem; padding: 10rem; } } @media (max-width: 750px) { .price__card_pill { width: 100%; padding: 14rem 10rem; border-radius: 40rem; font-size: 25rem; } } @media (min-width: 751px) { .price__card_text { margin-top: 15rem; font-size: 20rem; line-height: 51.6rem; } } @media (max-width: 750px) { .price__card_text { margin-top: 16rem; font-size: 26rem; line-height: 1.9; } } /********************* 診療費用の内訳（初期費用／矯正の費用／その他・オプション費用） ************************/ .ptbl { box-sizing: border-box; background-color: #fff; color: #434348; line-break: strict; } @media (min-width: 751px) { .ptbl { width: 87.5%; margin: 0 auto; } } @media (max-width: 750px) { .ptbl { padding: 50rem 40rem 0; } } .ptbl { /* ●つきの小見出し */ } .ptbl__head { position: relative; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; letter-spacing: 0; } @media (min-width: 751px) { .ptbl__head { padding-left: 54rem; font-size: 35rem; } } @media (max-width: 750px) { .ptbl__head { padding-left: 40rem; font-size: 34rem; } } .ptbl__head::before { content: ""; position: absolute; left: 0; border-radius: 50%; background-color: #46828a; } @media (min-width: 751px) { .ptbl__head::before { top: 12rem; width: 20rem; height: 20rem; } } @media (max-width: 750px) { .ptbl__head::before { top: 10rem; width: 18rem; height: 18rem; } } @media (min-width: 751px) { .ptbl__head--2 { margin-top: 85rem; } } @media (max-width: 750px) { .ptbl__head--2 { margin-top: 50rem; } } @media (min-width: 751px) { .ptbl__head--3 { margin-top: 71rem; } } @media (max-width: 750px) { .ptbl__head--3 { margin-top: 50rem; } } .ptbl__table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; } @media (min-width: 751px) { .ptbl__table { margin-top: 64rem; } } @media (max-width: 750px) { .ptbl__table { margin-top: 30rem; } } .ptbl__table th, .ptbl__table td { box-sizing: border-box; vertical-align: middle; font-weight: 400; border-bottom: 4px solid #fff; } @media (min-width: 751px) { .ptbl__table th, .ptbl__table td { height: 170rem; } } @media (max-width: 750px) { .ptbl__table th, .ptbl__table td { display: block; width: 100%; } } .ptbl__table tr:last-child th, .ptbl__table tr:last-child td { border-bottom: 0; } .ptbl__table th { background-color: #f8f8f8; text-align: left; } @media (min-width: 751px) { .ptbl__table th { width: 55%; padding: 20rem 30rem 20rem 51rem; font-size: 25rem; line-height: 1.4; } } @media (max-width: 750px) { .ptbl__table th { padding: 20rem 20rem; font-size: 26rem; line-height: 1.5; border-bottom: 0; } } .ptbl__table td { background-color: #eef4f4; text-align: center; } @media (min-width: 751px) { .ptbl__table td { padding: 20rem 30rem; width: 45%; } } @media (max-width: 750px) { .ptbl__table td { padding: 20rem 20rem 24rem; } } .ptbl__sm { display: block; } @media (min-width: 751px) { .ptbl__sm { margin-top: 8rem; font-size: 22rem; } } @media (max-width: 750px) { .ptbl__sm { margin-top: 6rem; font-size: 26rem; } } .ptbl { /* 金額 */ } .ptbl__val { display: inline-block; letter-spacing: 0.02em; } @media (min-width: 751px) { .ptbl__val { font-size: 35rem; line-height: 1.5; } } @media (max-width: 750px) { .ptbl__val { font-size: 32rem; line-height: 1.5; } } @media (min-width: 751px) { .ptbl__val--lg { font-size: 42rem; } } @media (max-width: 750px) { .ptbl__val--lg { font-size: 34rem; } } @media (min-width: 751px) { .ptbl__yen { font-size: 27rem; } } @media (max-width: 750px) { .ptbl__yen { font-size: 24rem; } } .ptbl__row { display: block; } @media (min-width: 751px) { .ptbl__lbl { margin-right: 16rem; font-size: 27rem; } } @media (max-width: 750px) { .ptbl__lbl { margin-right: 12rem; font-size: 24rem; } } .ptbl__sep { display: block; height: 1px; background-color: rgba(0, 0, 0, 0.25); } @media (min-width: 751px) { .ptbl__sep { width: 380rem; margin: 10rem auto; } } @media (max-width: 750px) { .ptbl__sep { width: 70%; margin: 8rem auto; } } @media (min-width: 751px) { .ptbl__add { font-size: 27rem; } } @media (max-width: 750px) { .ptbl__add { font-size: 24rem; } } @media (min-width: 751px) { .ptbl__notes { margin-top: 26rem; font-size: 20rem; line-height: 51.6rem; } } @media (max-width: 750px) { .ptbl__notes { margin-top: 20rem; font-size: 26rem; line-height: 1.8; } } /********************* 保証制度について／他院から転院希望の方へ ************************/ .warranty { width: 100%; box-sizing: border-box; background-color: #fff; color: #434348; line-break: strict; } @media (min-width: 751px) { .warranty { padding: 89rem 121rem 0; } } @media (max-width: 750px) { .warranty { padding: 50rem 40rem 0; } } .warranty__box { box-sizing: border-box; /* カンプ実測値。ほぼ白に近い水色 */ background-color: #f9ffff; } @media (min-width: 751px) { .warranty__box { padding: 66rem 80rem 75rem; } } @media (max-width: 750px) { .warranty__box { padding: 40rem 26rem 34rem; } } .warranty__head { color: #46828a; line-height: 1; letter-spacing: 0.02em; } @media (min-width: 751px) { .warranty__head { font-size: 25rem; } } @media (max-width: 750px) { .warranty__head { font-size: 26rem; } } @media (min-width: 751px) { .warranty__head--2 { margin-top: 66rem; } } @media (max-width: 750px) { .warranty__head--2 { margin-top: 40rem; } } @media (min-width: 751px) { .warranty__text { margin-top: 29rem; font-size: 20rem; line-height: 51.6rem; } } @media (max-width: 750px) { .warranty__text { margin-top: 16rem; font-size: 26rem; line-height: 1.9; } } /********************* 分割払いにも対応（24回払いまで分割手数料無料） ************************/ .split { width: 100%; box-sizing: border-box; color: #434348; text-align: center; line-break: strict; } @media (min-width: 751px) { .split { padding: 117rem 121rem 0; /* 上 380px までは白、以降は薄いグレー */ background: linear-gradient(to bottom, #fff 0, #fff 219rem, #f6f6f8 219rem, #f6f6f8 100%); } } @media (max-width: 750px) { .split { padding: 60rem 40rem 0; background-color: #f6f6f8; } } .split { /* 水色の吹き出し */ } .split__balloon { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; margin: 0 auto; background-color: #1ab5c7; color: #fff; font-weight: 700; } @media (min-width: 751px) { .split__balloon { width: 635rem; height: 185rem; border-radius: 23rem; font-size: 35rem; line-height: 75rem; } } @media (max-width: 750px) { .split__balloon { width: 100%; padding: 30rem 20rem; border-radius: 20rem; font-size: 32rem; line-height: 1.7; } } .split__balloon:before { content: ""; width: 79rem; height: 58rem; background-image: url(./img/split_mark.png); background-size: contain; background-repeat: no-repeat; } @media (min-width: 751px) { .split__balloon:before { top: -55rem; right: -105rem; } } @media (max-width: 750px) { .split__balloon:before { top: -75rem; right: 15rem; } } .split__balloon:before { position: absolute; } .split__balloon::after { content: ""; position: absolute; left: 50%; border-style: solid; border-color: #1ab5c7 transparent transparent; } @media (min-width: 751px) { .split__balloon::after { bottom: -33rem; margin-left: -32rem; border-width: 43rem 32rem 0; } } @media (max-width: 750px) { .split__balloon::after { bottom: -24rem; margin-left: -20rem; border-width: 24rem 20rem 0; } } .split__lead { font-weight: 700; line-height: 1; letter-spacing: 0.02em; } @media (min-width: 751px) { .split__lead { margin-top: 122rem; font-size: 40rem; } } @media (max-width: 750px) { .split__lead { margin-top: 50rem; font-size: 27rem; line-height: 1.5; } } .split { /* 黄色のマーカー */ } .split__mark { position: relative; display: inline-block; font-weight: 700; background: linear-gradient(transparent 0, transparent 70%, #ff6 70%, #ff6 100%); } @media (min-width: 751px) { .split__mark { font-size: 50rem; } } @media (max-width: 750px) { .split__mark { font-size: 50rem; } } .split { /* 24 回払いまで（分割手数料）無料 */ } .split__big { position: relative; display: flex; justify-content: center; line-height: 1; z-index: 2; } @media (min-width: 751px) { .split__big { margin-top: 131rem; height: 254rem; align-items: flex-start; } } @media (max-width: 750px) { .split__big { flex-wrap: wrap; gap: 10rem; margin-top: 40rem; align-items: flex-end; } } .split__num { font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; color: #1ab5c7; font-weight: 500; letter-spacing: 0; } @media (min-width: 751px) { .split__num { margin: 0 59rem 0 0; font-size: 170rem; } } @media (max-width: 750px) { .split__num { font-size: 110rem; } } .split__unit { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; } @media (min-width: 751px) { .split__unit { margin: 106rem 27rem 0 0; font-size: 70rem; } } @media (max-width: 750px) { .split__unit { align-self: flex-end; font-size: 40rem; } } .split__circle { display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; background-color: #1ab5c7; color: #fff; } @media (min-width: 751px) { .split__circle { width: 207rem; height: 207rem; margin: 6rem 57rem 0 0; font-size: 40rem; line-height: 1.4; } } @media (max-width: 750px) { .split__circle { width: 110rem; height: 110rem; font-size: 24rem; line-height: 1.4; } } .split__free { color: #1ab5c7; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; letter-spacing: 0; position: relative; } @media (min-width: 751px) { .split__free { margin-top: 29rem; font-size: 175rem; } } @media (max-width: 750px) { .split__free { align-self: flex-end; font-size: 100rem; } } .split__free small { color: #b0eded; font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; position: absolute; z-index: -1; } @media (min-width: 751px) { .split__free small { font-size: 200rem; left: 130rem; top: -10rem; } } @media (max-width: 750px) { .split__free small { font-size: 130rem; left: 65rem; top: -10rem; } } .split { /* 白いカード */ } .split__card { box-sizing: border-box; background-color: #fff; } @media (min-width: 751px) { .split__card { margin-top: -100rem; padding: 131rem 0 61rem; } } @media (max-width: 750px) { .split__card { margin-top: 40rem; padding: 40rem; } } .split__eg { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; } @media (min-width: 751px) { .split__eg { font-size: 44rem; } } @media (max-width: 750px) { .split__eg { font-size: 32rem; } } .split__list { box-sizing: border-box; } @media (min-width: 751px) { .split__list { display: flex; justify-content: space-between; margin-top: 159rem; padding: 0 43rem; } } @media (max-width: 750px) { .split__list { margin-top: 100rem; } } .split__item { position: relative; box-sizing: border-box; background-color: #f6f2ef; } @media (min-width: 751px) { .split__item { width: 32.5%; padding: 90rem 25rem 40rem; } } @media (max-width: 750px) { .split__item { width: 100%; padding: 100rem 20rem 34rem; } .split__item + .split__item { margin-top: 110rem; } } .split__badge { position: absolute; left: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; color: #fff; line-height: 1.1; } @media (min-width: 751px) { .split__badge { top: -93rem; width: 155rem; height: 155rem; margin-left: -93rem; font-size: 55rem; } } @media (max-width: 750px) { .split__badge { top: -75rem; width: 150rem; height: 150rem; margin-left: -75rem; font-size: 44rem; } } @media (min-width: 751px) { .split__badge span { font-size: 30rem; } } @media (max-width: 750px) { .split__badge span { font-size: 24rem; } } .split__item--1 .split__badge { background-color: #baa2d4; } .split__item--2 .split__badge { background-color: #febf7c; } .split__item--3 .split__badge { background-color: #6099de; } .split__cond { font-weight: 700; } @media (min-width: 751px) { .split__cond { font-size: 30rem; line-height: 58rem; } } @media (max-width: 750px) { .split__cond { font-size: 30rem; line-height: 1.9; } } .split__price { line-height: 1; letter-spacing: 0; font-weight: 500; font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; } @media (min-width: 751px) { .split__price { margin-top: 21rem; font-size: 80rem; } } @media (max-width: 750px) { .split__price { margin-top: 16rem; font-size: 100rem; } } .split__item--1 .split__price { color: #9263b3; } .split__item--2 .split__price { color: #fe9c75; } .split__item--3 .split__price { color: #397fc7; } .split__unit2 { color: #434348; font-weight: 700; font-family: "source-han-sans-japanese", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif; } @media (min-width: 751px) { .split__unit2 { font-size: 35rem; } } @media (max-width: 750px) { .split__unit2 { font-size: 34rem; } } .split__note { text-align: left; } @media (min-width: 751px) { .split__note { margin-top: 39rem; font-size: 20rem; line-height: 1; margin-left: 10rem; } } @media (max-width: 750px) { .split__note { margin-top: 20rem; font-size: 22rem; text-align: center; } } /********************* デンタルローンなら最長84回まで分割可能！ ************************/ .loan { width: 100%; box-sizing: border-box; background-color: #f6f6f8; color: #434348; text-align: center; line-break: strict; } @media (min-width: 751px) { .loan { padding: 108rem 0 0; } } @media (max-width: 750px) { .loan { padding: 60rem 40rem 0; } } @media (min-width: 751px) { .loan__inner { width: 87.5%; margin: 0 auto; } } .loan { /* ＼ デンタルローンなら ／ */ } .loan__label { position: relative; display: table; margin: 0 auto; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 700; line-height: 1; letter-spacing: 0; } @media (min-width: 751px) { .loan__label { padding: 0 50rem; font-size: 40rem; } } @media (max-width: 750px) { .loan__label { padding: 0 44rem; font-size: 34rem; } } .loan__label::before, .loan__label::after { content: ""; position: absolute; top: 50%; background-color: #434348; } @media (min-width: 751px) { .loan__label::before, .loan__label::after { width: 2px; height: 58rem; margin-top: -29rem; } } @media (max-width: 750px) { .loan__label::before, .loan__label::after { width: 1px; height: 40rem; margin-top: -20rem; } } .loan__label::before { left: 0; transform: rotate(-20deg); } .loan__label::after { right: 0; transform: rotate(20deg); } .loan { /* 最長 84 回まで分割可能！ */ } .loan__big { display: flex; align-items: flex-start; justify-content: center; line-height: 1; } @media (min-width: 751px) { .loan__big { margin-top: 14rem; height: 232rem; } } @media (max-width: 750px) { .loan__big { flex-wrap: wrap; justify-content: center; gap: 6rem; margin-top: 30rem; } } .loan__lbl { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; } @media (min-width: 751px) { .loan__lbl { margin: 120rem 10rem 0 0; font-size: 70rem; } } @media (max-width: 750px) { .loan__lbl { margin: 60rem 0 0 0; font-size: 42rem; } } .loan__num { font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; color: #1ab5c7; font-weight: 300; letter-spacing: 0; } @media (min-width: 751px) { .loan__num { margin-right: 25rem; font-size: 190rem; margin-top: 30rem; } } @media (max-width: 750px) { .loan__num { font-size: 120rem; } } .loan__stack { display: flex; flex-direction: column; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; } @media (min-width: 751px) { .loan__stack { margin: 40rem 36rem 0 0; } } @media (max-width: 750px) { .loan__stack { align-self: center; } } @media (min-width: 751px) { .loan__stack_t { font-size: 58rem; } } @media (max-width: 750px) { .loan__stack_t { font-size: 30rem; } } @media (min-width: 751px) { .loan__stack_b { margin-top: 10rem; font-size: 84rem; } } @media (max-width: 750px) { .loan__stack_b { font-size: 44rem; } } .loan__ex { color: #1ab5c7; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; transform: rotate(15deg); } @media (min-width: 751px) { .loan__ex { margin-top: 21rem; font-size: 210rem; margin-left: -80rem; margin-right: -100rem; } } @media (max-width: 750px) { .loan__ex { align-self: flex-end; font-size: 100rem; } } @media (min-width: 751px) { .loan__text { margin-top: 30rem; font-size: 20rem; line-height: 51.6rem; } } @media (max-width: 750px) { .loan__text { margin-top: 30rem; font-size: 25rem; line-height: 2.5; } } .loan { /* 84回払いの例 */ } .loan__card { box-sizing: border-box; background-color: #fff; } @media (min-width: 751px) { .loan__card { display: flex; align-items: center; justify-content: center; width: 59.875%; margin: 68rem auto 0; padding: 30rem 0; } } @media (max-width: 750px) { .loan__card { margin-top: 40rem; padding: 30rem 40rem; } } .loan__badge { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; background-color: #c0b07f; color: #fff; line-height: 1.1; } @media (min-width: 751px) { .loan__badge { width: 155rem; height: 155rem; margin-right: 40rem; font-size: 60rem; } } @media (max-width: 750px) { .loan__badge { width: 140rem; height: 140rem; margin: 0 auto; font-size: 42rem; } } @media (min-width: 751px) { .loan__badge span { font-size: 25rem; } } @media (max-width: 750px) { .loan__badge span { font-size: 22rem; } } .loan__body { text-align: left; } @media (max-width: 750px) { .loan__body { margin-top: 20rem; text-align: center; } } .loan__cond { line-height: 1; font-weight: 700; } @media (min-width: 751px) { .loan__cond { font-size: 30rem; } } @media (max-width: 750px) { .loan__cond { font-size: 32rem; } } .loan__price { line-height: 1; letter-spacing: 0; color: #1ab5c7; font-weight: 700; font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; } @media (min-width: 751px) { .loan__price { margin-top: 26rem; font-size: 80rem; } } @media (max-width: 750px) { .loan__price { margin-top: 16rem; font-size: 100rem; } } .loan__price_lbl { color: #434348; font-weight: 700; } @media (min-width: 751px) { .loan__price_lbl { margin-right: 18rem; font-size: 35rem; } } @media (max-width: 750px) { .loan__price_lbl { margin-right: 12rem; font-size: 30rem; } } .loan__price_yen { color: #434348; font-weight: 700; } @media (min-width: 751px) { .loan__price_yen { margin-left: 10rem; font-size: 35rem; } } @media (max-width: 750px) { .loan__price_yen { margin-left: 8rem; font-size: 30rem; } } @media (min-width: 751px) { .loan__note { margin-top: 24rem; font-size: 20rem; line-height: 1; } } @media (max-width: 750px) { .loan__note { margin-top: 14rem; font-size: 26rem; } } .loan { /* デンタルローンとは */ } .loan__about { position: relative; box-sizing: border-box; background-color: #e0f2f4; } @media (min-width: 751px) { .loan__about { display: flex; align-items: center; margin-top: 101rem; padding: 25rem 40rem; } } @media (max-width: 750px) { .loan__about { margin-top: 40rem; padding: 34rem 40rem; } } .loan__about_head { flex-shrink: 0; text-align: center; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; } @media (min-width: 751px) { .loan__about_head { width: 35%; font-size: 40rem; line-height: 1.5; } } @media (max-width: 750px) { .loan__about_head { font-size: 34rem; line-height: 1.5; } } .loan__about_text { text-align: left; letter-spacing: 0.04em; } @media (min-width: 751px) { .loan__about_text { font-size: 20rem; line-height: 51.6rem; } } @media (max-width: 750px) { .loan__about_text { margin-top: 20rem; font-size: 26rem; line-height: 1.9; } } .loan { /* 背面の大きな ? */ } .loan__q { position: absolute; color: rgba(255, 255, 255, 0.75); font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; transform: rotate(15deg); } @media (min-width: 751px) { .loan__q { left: 25%; top: -40rem; font-size: 190rem; } } @media (max-width: 750px) { .loan__q { right: 40rem; top: -40rem; font-size: 180rem; } } /********************* お支払い方法 ************************/ .pay { width: 100%; box-sizing: border-box; background-color: #f6f6f8; color: #434348; text-align: center; line-break: strict; } @media (min-width: 751px) { .pay { padding: 115rem 0 101rem; } } @media (max-width: 750px) { .pay { padding: 60rem 40rem 60rem; } } @media (min-width: 751px) { .pay__inner { width: 87.5%; margin: 0 auto; } } .pay__head { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; letter-spacing: 0; border-top: 2px solid #717173; border-bottom: 2px solid #717173; } @media (min-width: 751px) { .pay__head { padding: 39rem 0 45rem; font-size: 51rem; line-height: 1; } } @media (max-width: 750px) { .pay__head { padding: 24rem 0; font-size: 34rem; line-height: 1; } } @media (min-width: 751px) { .pay__text { margin-top: 55rem; font-size: 24rem; line-height: 51.6rem; } } @media (max-width: 750px) { .pay__text { margin-top: 30rem; font-size: 26rem; line-height: 1.9; text-align: left; } } .pay__card { box-sizing: border-box; background-color: #fff; } @media (min-width: 751px) { .pay__card { margin-top: 52rem; padding: 40rem 140rem; } } @media (max-width: 750px) { .pay__card { margin-top: 30rem; padding: 34rem 20rem 34rem; } } .pay__pill { display: flex; align-items: center; justify-content: center; box-sizing: border-box; margin: 0 auto; background-color: #46828a; color: #fff; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; letter-spacing: 0.04em; width: 100%; } @media (min-width: 751px) { .pay__pill { border-radius: 34rem; font-size: 25rem; padding: 5rem; } } @media (max-width: 750px) { .pay__pill { padding: 14rem 10rem; border-radius: 40rem; font-size: 26rem; } } @media (min-width: 751px) { .pay__logos { width: 100%; margin: 55rem auto 0; } } @media (max-width: 750px) { .pay__logos { margin-top: 26rem; } } .pay__logos img { display: block; width: 100%; } /********************* 医療費控除について ************************/ .deduct { width: 100%; box-sizing: border-box; background-color: #fff; color: #434348; text-align: center; line-break: strict; } @media (min-width: 751px) { .deduct { padding: 117rem 121rem 0; } } @media (max-width: 750px) { .deduct { padding: 60rem 40rem 60rem; } } .deduct__head { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; letter-spacing: 0; } @media (min-width: 751px) { .deduct__head { font-size: 50rem; } } @media (max-width: 750px) { .deduct__head { font-size: 42rem; } } .deduct__lead { color: #46828a; font-weight: 700; } @media (min-width: 751px) { .deduct__lead { margin-top: 50rem; font-size: 25rem; line-height: 58rem; } } @media (max-width: 750px) { .deduct__lead { margin-top: 34rem; font-size: 26rem; line-height: 1.8; } } @media (min-width: 751px) { .deduct__text { margin-top: 7rem; font-size: 20rem; line-height: 51.6rem; } } @media (max-width: 750px) { .deduct__text { margin-top: 24rem; font-size: 26rem; line-height: 1.9; text-align: left; } } .deduct__box { box-sizing: border-box; background-color: #e0f2f4; } @media (min-width: 751px) { .deduct__box { margin-top: 49rem; padding: 45rem 110rem; } } @media (max-width: 750px) { .deduct__box { margin-top: 34rem; padding: 30rem 20rem; } } .deduct__formula { line-height: 1; letter-spacing: 0; font-weight: 500; } @media (min-width: 751px) { .deduct__formula { font-size: 25rem; } } @media (max-width: 750px) { .deduct__formula { font-size: 22rem; line-height: 1.7; } } @media (min-width: 751px) { .deduct__em { color: #46828a; font-size: 25rem; } } @media (max-width: 750px) { .deduct__em { font-size: 24rem; } } @media (min-width: 751px) { .deduct__sm { color: #424348; font-size: 20rem; } } @media (max-width: 750px) { .deduct__sm { font-size: 22rem; } } .deduct__red { color: #d16171; } @media (min-width: 751px) { .deduct__red { font-size: 25rem; } } @media (max-width: 750px) { .deduct__red { font-size: 26rem; } } .deduct__ast { color: #d16171; } @media (min-width: 751px) { .deduct__ast { font-size: 20rem; } } @media (max-width: 750px) { .deduct__ast { font-size: 22rem; } } .deduct__note { text-align: right; color: #d16171; } @media (min-width: 751px) { .deduct__note { margin-top: 43rem; font-size: 24rem; line-height: 1; } } @media (max-width: 750px) { .deduct__note { margin-top: 20rem; font-size: 20rem; text-align: left; } } @media (min-width: 751px) { .deduct__btn { margin-top: 59rem; } } @media (max-width: 750px) { .deduct__btn { margin-top: 34rem; } } .deduct__btn a { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; margin: 0 auto; background-color: #454142; color: #fff; text-decoration: none; letter-spacing: 0.04em; transition: 0.3s; font-weight: 700; } @media (min-width: 751px) { .deduct__btn a { width: 370rem; border-radius: 15rem; font-size: 20rem; padding: 20rem; } } @media (max-width: 750px) { .deduct__btn a { width: 100%; max-width: 460rem; height: 80rem; border-radius: 15rem; font-size: 24rem; } } .deduct__btn a:before { content: ""; width: 28rem; height: 17rem; background-image: url(./img/loan__mark.png); background-size: contain; background-repeat: no-repeat; top: 27rem; right: 35rem; position: absolute; } .deduct__btn a:hover { opacity: 0.7; } .deduct { /* 外部リンクアイコン */ } .deduct__ext { position: relative; display: inline-block; box-sizing: border-box; border: 2px solid #fff; } @media (min-width: 751px) { .deduct__ext { width: 30rem; height: 22rem; margin-left: 16rem; } } @media (max-width: 750px) { .deduct__ext { width: 26rem; height: 20rem; margin-left: 12rem; } } /********************* GREET ご挨拶 ************************/ .greet { position: relative; width: 100%; box-sizing: border-box; background-color: #fff; color: #434348; line-break: strict; overflow: hidden; } @media (min-width: 751px) { .greet { padding: 160rem 0 102rem; } } @media (max-width: 750px) { .greet { padding: 70rem 40rem 80rem; } } @media (min-width: 751px) { .greet__inner { width: 87.5%; margin: 0 auto; } } .greet__en { font-weight: 300; text-align: center; font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; line-height: 1; letter-spacing: 0.12em; text-indent: 0.12em; } @media (min-width: 751px) { .greet__en { font-size: 40rem; } } @media (max-width: 750px) { .greet__en { font-size: 32rem; } } .greet__head { text-align: center; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; letter-spacing: 0.06em; text-indent: 0.06em; } @media (min-width: 751px) { .greet__head { margin-top: 36rem; font-size: 60rem; } } @media (max-width: 750px) { .greet__head { margin-top: 20rem; font-size: 52rem; } } @media (min-width: 751px) { .greet__img { position: absolute; right: 0; bottom: 0; width: 48.75%; } } @media (max-width: 750px) { .greet__img { margin-top: 40rem; } } .greet__img img { display: block; width: 100%; } .greet__msg { position: relative; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; letter-spacing: 0; z-index: 2; } @media (min-width: 751px) { .greet__msg { margin-top: 150rem; font-size: 60rem; } } @media (max-width: 750px) { .greet__msg { margin-top: 40rem; font-size: 42rem; } } .greet__msg_line { display: block; } @media (min-width: 751px) { .greet__msg_line { line-height: 121rem; } } @media (max-width: 750px) { .greet__msg_line { line-height: 1.7; } } .greet__name { position: relative; z-index: 2; } @media (min-width: 751px) { .greet__name { margin-top: 90rem; padding-left: 50rem; } } @media (max-width: 750px) { .greet__name { margin-top: 40rem; padding-left: 30rem; } } .greet__name::before { content: ""; position: absolute; left: 0; width: 2px; background-color: #434348; } @media (min-width: 751px) { .greet__name::before { top: -19rem; height: 151rem; } } @media (max-width: 750px) { .greet__name::before { top: 0; } } @media (max-width: 750px) { .greet__name::before { height: 110rem; } } .greet__name_jp { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; letter-spacing: 0.04em; } @media (min-width: 751px) { .greet__name_jp { font-size: 40rem; } } @media (max-width: 750px) { .greet__name_jp { font-size: 40rem; } } @media (min-width: 751px) { .greet__name_ttl { margin-right: 32rem; font-size: 30rem; } } @media (max-width: 750px) { .greet__name_ttl { margin-right: 20rem; font-size: 30rem; } } .greet__name_en { font-weight: 300; color: #46828a; font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; line-height: 1; letter-spacing: 0.06em; } @media (min-width: 751px) { .greet__name_en { margin-top: 15rem; font-size: 30rem; } } @media (max-width: 750px) { .greet__name_en { margin-top: 16rem; font-size: 28rem; } } /********************* 院長メッセージ・略歴 ************************/ .prof { position: relative; width: 100%; box-sizing: border-box; /* ★カンプでは医院内観の写真にティールのオーバーレイ。写真が支給されたら background-image を追加してください */ background-color: #689b9c; color: #fff; line-break: strict; overflow: hidden; } @media (min-width: 751px) { .prof { padding: 119rem 121rem 100rem; } } @media (max-width: 750px) { .prof { padding: 50rem 40rem 60rem; } } .prof:after { content: ""; width: 72.75%; height: 785rem; background-image: url(./img/g__bg1.png); background-size: cover; background-repeat: no-repeat; bottom: 0; right: 0; position: absolute; } @media (min-width: 751px) { .prof__img { position: absolute; left: 0; top: 188rem; width: 33.25%; } } @media (max-width: 750px) { .prof__img { margin-bottom: 30rem; } } .prof__img img { display: block; width: 100%; } .prof__text { letter-spacing: 0.06em; } @media (min-width: 751px) { .prof__text { width: 67%; margin-left: auto; font-size: 20rem; } } @media (max-width: 750px) { .prof__text { font-size: 26rem; } } @media (min-width: 751px) { .prof__text p { line-height: 51.6rem; } } @media (max-width: 750px) { .prof__text p { line-height: 1.9; } } .prof { /* 略歴・資格の箱 */ } .prof__box { box-sizing: border-box; background-color: rgba(255, 255, 255, 0.8); color: #434348; position: relative; z-index: 2; } @media (min-width: 751px) { .prof__box { display: flex; margin-top: 121rem; padding: 60rem 70rem; justify-content: space-between; } } @media (max-width: 750px) { .prof__box { margin-top: 40rem; padding: 40rem 26rem; } } @media (min-width: 751px) { .prof__col { width: 48%; } } @media (max-width: 750px) { .prof__col + .prof__col { margin-top: 40rem; } } .prof__col_head { color: #46828a; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; letter-spacing: 0.04em; } @media (min-width: 751px) { .prof__col_head { font-size: 30rem; } } @media (max-width: 750px) { .prof__col_head { font-size: 28rem; } } .prof__career { display: flex; flex-wrap: wrap; margin: 0; } @media (min-width: 751px) { .prof__career { margin-top: 37rem; font-size: 20rem; } } @media (max-width: 750px) { .prof__career { margin-top: 20rem; font-size: 26rem; } } @media (min-width: 751px) { .prof__career dt { width: 89rem; line-height: 51.6rem; } } @media (max-width: 750px) { .prof__career dt { width: 110rem; line-height: 1.9; } } .prof__career dd { margin: 0; } @media (min-width: 751px) { .prof__career dd { width: calc(100% - 89rem); line-height: 51.6rem; } } @media (max-width: 750px) { .prof__career dd { width: calc(100% - 110rem); line-height: 1.9; } } @media (min-width: 751px) { .prof__list { margin-top: 37rem; font-size: 24rem; } } @media (max-width: 750px) { .prof__list { margin-top: 20rem; font-size: 22rem; } } @media (min-width: 751px) { .prof__list li { line-height: 51.6rem; } } @media (max-width: 750px) { .prof__list li { line-height: 1.9; } } .prof__list li::before { content: "・"; } /********************* 歯科医師紹介 ************************/ .dr { width: 100%; box-sizing: border-box; background-color: #f6eeec; color: #434348; line-break: strict; } @media (min-width: 751px) { .dr { padding: 120rem 0 100rem; } } @media (max-width: 750px) { .dr { padding: 60rem 40rem 60rem; } } .dr__head { text-align: center; color: #46828a; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; letter-spacing: 0.06em; text-indent: 0.06em; } @media (min-width: 751px) { .dr__head { font-size: 60rem; } } @media (max-width: 750px) { .dr__head { font-size: 52rem; } } @media (min-width: 751px) { .dr__list { width: 87.5%; margin: 100rem auto 0; } } @media (max-width: 750px) { .dr__list { margin-top: 40rem; } } .dr__item { box-sizing: border-box; background-color: #fff; } @media (min-width: 751px) { .dr__item { display: flex; padding: 90rem 85rem 106rem; border-radius: 30rem; } } @media (max-width: 750px) { .dr__item { padding: 34rem 40rem 34rem; border-radius: 20rem; } } @media (min-width: 751px) { .dr__item + .dr__item { margin-top: 71rem; } } @media (max-width: 750px) { .dr__item + .dr__item { margin-top: 40rem; } } @media (min-width: 751px) { .dr__item--rev { flex-direction: row-reverse; justify-content: flex-end; } } .dr__img { flex-shrink: 0; } @media (min-width: 751px) { .dr__img { width: 40%; margin-top: 16rem; } } @media (max-width: 750px) { .dr__img { width: 100%; } } .dr__img img { display: block; width: 100%; } @media (min-width: 751px) { .dr__body { width: 55%; margin-left: 50rem; } } @media (max-width: 750px) { .dr__body { margin-top: 24rem; } } @media (min-width: 751px) { .dr__item--rev .dr__body { margin: 0 50rem 0 0; } } .dr__name { display: table; } .dr__name_jp { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; letter-spacing: 0.04em; } @media (min-width: 751px) { .dr__name_jp { padding-left: 46rem; font-size: 40rem; } } @media (max-width: 750px) { .dr__name_jp { padding-left: 34rem; font-size: 36rem; } } .dr__name_jp { position: relative; /* ● */ } .dr__name_jp::before { content: ""; position: absolute; left: 0; border-radius: 50%; background-color: #46828a; } @media (min-width: 751px) { .dr__name_jp::before { top: 14rem; width: 18rem; height: 18rem; } } @media (max-width: 750px) { .dr__name_jp::before { top: 10rem; width: 16rem; height: 16rem; } } @media (min-width: 751px) { .dr__name_ttl { margin-right: 30rem; font-size: 30rem; } } @media (max-width: 750px) { .dr__name_ttl { margin-right: 20rem; font-size: 24rem; } } .dr__name_en { font-weight: 500; text-align: center; color: #46828a; font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; line-height: 1; letter-spacing: 0.06em; } @media (min-width: 751px) { .dr__name_en { margin-top: 33rem; font-size: 30rem; } } @media (max-width: 750px) { .dr__name_en { margin-top: 14rem; font-size: 26rem; } } .dr__text { letter-spacing: -0.03em; } @media (min-width: 751px) { .dr__text { margin-top: 33rem; font-size: 20rem; line-height: 51.7rem; } } @media (max-width: 750px) { .dr__text { margin-top: 20rem; font-size: 26rem; line-height: 1.9; } } .dr__tags { display: flex; } @media (min-width: 751px) { .dr__tags { margin-top: 69rem; gap: 44rem; } } @media (max-width: 750px) { .dr__tags { flex-wrap: wrap; margin-top: 24rem; gap: 14rem; } } .dr__tags li { display: flex; align-items: center; justify-content: center; box-sizing: border-box; background-color: #46828a; color: #fff; letter-spacing: 0.02em; } @media (min-width: 751px) { .dr__tags li { height: 59rem; font-size: 20rem; } } @media (max-width: 750px) { .dr__tags li { height: 60rem; padding: 0 20rem; font-size: 26rem; } } @media (min-width: 751px) { .dr__tags li:first-child { width: 414rem; } } @media (min-width: 751px) { .dr__tags li:last-child { width: 311rem; } } /********************* FAQ よくあるご質問 ************************/ .faq { width: 100%; box-sizing: border-box; background-color: #a1cee1; color: #434348; line-break: strict; } @media (min-width: 751px) { .faq { /* 下の余白にはカンプで「閉じた状態」の見本として重複表示されている1行ぶん（約300px）を含む */ padding: 100rem 0 115rem; } } @media (max-width: 750px) { .faq { padding: 60rem 40rem 60rem; } } @media (min-width: 751px) { .faq__icon { width: 150rem; margin: 0 auto; } } @media (max-width: 750px) { .faq__icon { width: 90rem; margin: 0 auto; } } .faq__icon img { display: block; width: 100%; } .faq__en { font-weight: 300; text-align: center; font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; line-height: 1; letter-spacing: 0.12em; text-indent: 0.12em; } @media (min-width: 751px) { .faq__en { margin-top: 22rem; font-size: 40rem; } } @media (max-width: 750px) { .faq__en { margin-top: 16rem; font-size: 32rem; } } .faq__head { text-align: center; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; letter-spacing: 0.06em; text-indent: 0.06em; } @media (min-width: 751px) { .faq__head { margin-top: 37rem; font-size: 60rem; } } @media (max-width: 750px) { .faq__head { margin-top: 20rem; font-size: 50rem; } } @media (min-width: 751px) { .faq__list { width: 87.5%; margin: 100rem auto 0; } } @media (max-width: 750px) { .faq__list { margin-top: 40rem; } } @media (min-width: 751px) { .faq__item + .faq__item { margin-top: 56rem; } } @media (max-width: 750px) { .faq__item + .faq__item { margin-top: 30rem; } } .faq { /* 質問（クリックで開閉） */ } .faq__q { position: relative; display: flex; align-items: center; box-sizing: border-box; margin: 0 auto; background-color: #fff; list-style: none; cursor: pointer; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; letter-spacing: 0.02em; } @media (min-width: 751px) { .faq__q { min-height: 123rem; padding: 20rem 130rem 20rem 166rem; border-radius: 25rem; font-size: 25rem; line-height: 1.4; } } @media (max-width: 750px) { .faq__q { width: 100%; padding: 20rem 60rem 20rem 70rem; border-radius: 25rem; font-size: 26rem; line-height: 1.5; } } .faq__q::-webkit-details-marker { display: none; } .faq__q { /* Q */ } .faq__q::before { content: "Q"; position: absolute; color: #54a5d4; font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; line-height: 1; } @media (min-width: 751px) { .faq__q::before { left: 63rem; top: 50%; margin-top: -35rem; font-size: 60rem; } } @media (max-width: 750px) { .faq__q::before { left: 20rem; top: 50%; margin-top: -22rem; font-size: 44rem; } } .faq__q { /* シェブロン */ } .faq__q::after { content: ""; position: absolute; border-style: solid; border-color: #434348; border-width: 0 2px 2px 0; transform: rotate(-135deg); transition: 0.3s; } @media (min-width: 751px) { .faq__q::after { right: 66rem; top: 50%; width: 22rem; height: 22rem; margin-top: -6rem; } } @media (max-width: 750px) { .faq__q::after { right: 24rem; top: 50%; width: 18rem; height: 18rem; margin-top: -5rem; } } .faq__item:not([open]) .faq__q::after { transform: rotate(45deg); } @media (min-width: 751px) { .faq__item:not([open]) .faq__q::after { margin-top: -16rem; } } @media (max-width: 750px) { .faq__item:not([open]) .faq__q::after { margin-top: -13rem; } } .faq { /* 回答 */ } .faq__a { position: relative; box-sizing: border-box; } @media (min-width: 751px) { .faq__a { margin: 40rem auto 0 170rem; padding: 0 61rem 50rem 95rem; border-bottom: 2px solid #5b636e; font-size: 20rem; line-height: 51.6rem; } } @media (max-width: 750px) { .faq__a { margin-top: 24rem; padding: 0 10rem 30rem 70rem; border-bottom: 1px solid #5b636e; font-size: 26rem; line-height: 1.9; } } .faq__a { /* A */ } .faq__a::before { content: "A"; position: absolute; color: #fff; font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; line-height: 1; } @media (min-width: 751px) { .faq__a::before { left: 0; top: 6rem; font-size: 60rem; } } @media (max-width: 750px) { .faq__a::before { left: 16rem; top: 4rem; font-size: 42rem; } } .faq__a a { color: inherit; text-decoration: underline; } .faq__a a:hover { opacity: 0.7; } /********************* 医院写真＋予約バー ************************/ .fcta { width: 100%; background-color: #3f3b3a; line-break: strict; } @media (max-width: 750px) { .fcta { overflow: hidden; } } .fcta__photos img { display: block; width: 100%; } @media (min-width: 751px) { .fcta__bar { display: flex; } } .fcta__bar { width: 100%; } .fcta__item { box-sizing: border-box; width: 33.3333%; text-align: center; } @media (min-width: 751px) { .fcta__item { height: 241rem; } } @media (max-width: 750px) { .fcta__item { width: 100%; } } .fcta__item--tel { display: flex; flex-direction: column; justify-content: center; background-color: #fff; color: #434348; } @media (max-width: 750px) { .fcta__item--tel { padding: 24rem 10rem; } } .fcta__item--web { background-color: #46828a; } .fcta__item--web .fcta__sub { position: relative; } @media (min-width: 751px) { .fcta__item--web .fcta__sub { padding-top: 40rem; } } .fcta__item--web .fcta__sub:before { content: ""; width: 41rem; height: 45rem; background-image: url(./img/f__web.svg); background-size: contain; background-repeat: no-repeat; } @media (min-width: 751px) { .fcta__item--web .fcta__sub:before { top: -15rem; left: 18rem; } } @media (max-width: 750px) { .fcta__item--web .fcta__sub:before { top: 20rem; left: -55rem; } } .fcta__item--web .fcta__sub:before { position: absolute; } .fcta__item--web .fcta__txt { position: relative; } .fcta__item--web .fcta__txt:after { content: ""; width: 57rem; height: 57rem; background-image: url(./img/f__mark.svg); background-size: contain; background-repeat: no-repeat; top: 15rem; right: -85rem; position: absolute; } .fcta__item--line { background-color: #2aad2b; } .fcta__item--line .fcta__txt { position: relative; } .fcta__item--line .fcta__txt:before { content: ""; width: 58rem; height: 55rem; background-image: url(./img/f__line.svg); background-size: contain; background-repeat: no-repeat; top: 13rem; left: -82rem; position: absolute; } .fcta__item--line .fcta__txt:after { content: ""; width: 57rem; height: 57rem; background-image: url(./img/f__mark.svg); background-size: contain; background-repeat: no-repeat; top: 15rem; right: -85rem; position: absolute; } .fcta__item--web a, .fcta__item--line a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #fff; text-decoration: none; transition: 0.3s; } @media (max-width: 750px) { .fcta__item--web a, .fcta__item--line a { padding: 24rem 10rem; } } .fcta__item--web a:hover, .fcta__item--line a:hover { opacity: 0.7; } .fcta__lbl { line-height: 1; } @media (min-width: 751px) { .fcta__lbl { font-size: 20rem; } } @media (max-width: 750px) { .fcta__lbl { font-size: 26rem; } } .fcta__tel { font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; font-weight: 300; } @media (min-width: 751px) { .fcta__tel { margin-top: 22rem; } } @media (max-width: 750px) { .fcta__tel { margin-top: 12rem; } } .fcta__tel a { display: inline-flex; align-items: center; color: inherit; text-decoration: none; line-height: 1; letter-spacing: 0.02em; position: relative; } @media (min-width: 751px) { .fcta__tel a { font-size: 55rem; } } @media (max-width: 750px) { .fcta__tel a { font-size: 60rem; } } .fcta__tel a:before { content: ""; } @media (min-width: 751px) { .fcta__tel a:before { width: 21rem; height: 40rem; top: 10rem; left: -35rem; } } @media (max-width: 750px) { .fcta__tel a:before { width: 31rem; height: 50rem; top: 5rem; left: -40rem; } } .fcta__tel a:before { background-image: url(./img/f__tel.svg); background-size: contain; background-repeat: no-repeat; position: absolute; } .fcta { /* 受話器アイコン */ } .fcta__telicon { display: inline-block; border: 2px solid currentColor; border-radius: 50% 50% 40% 40%; transform: rotate(-20deg); } @media (min-width: 751px) { .fcta__telicon { width: 24rem; height: 34rem; margin-right: 14rem; } } @media (max-width: 750px) { .fcta__telicon { width: 20rem; height: 28rem; margin-right: 10rem; } } @media (min-width: 751px) { .fcta__hours { margin-top: 20rem; font-size: 20rem; line-height: 1; } } @media (max-width: 750px) { .fcta__hours { margin-top: 10rem; font-size: 26rem; } } .fcta__ico { display: inline-block; box-sizing: border-box; border: 2px solid currentColor; } @media (min-width: 751px) { .fcta__ico { width: 34rem; height: 46rem; margin-right: 14rem; border-radius: 5rem; } } @media (max-width: 750px) { .fcta__ico { width: 28rem; height: 38rem; margin-right: 10rem; border-radius: 4rem; } } .fcta__ico--line { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background-color: #fff; color: #2aad2b; font-weight: 700; } @media (min-width: 751px) { .fcta__ico--line { width: 62rem; height: 62rem; font-size: 20rem; } } @media (max-width: 750px) { .fcta__ico--line { width: 50rem; height: 50rem; font-size: 16rem; } } @media (min-width: 751px) { .fcta__sub { margin-right: 18rem; font-size: 22rem; line-height: 1.3; } } @media (max-width: 750px) { .fcta__sub { margin-right: 12rem; font-size: 32rem; line-height: 1.3; } } .fcta__txt { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; letter-spacing: 0.04em; } @media (min-width: 751px) { .fcta__txt { font-size: 50rem; } } @media (max-width: 750px) { .fcta__txt { font-size: 50rem; } } .fcta__arw { position: relative; display: inline-block; border: 2px solid currentColor; border-radius: 50%; } @media (min-width: 751px) { .fcta__arw { width: 50rem; height: 50rem; margin-left: 30rem; } } @media (max-width: 750px) { .fcta__arw { width: 42rem; height: 42rem; margin-left: 20rem; } } .fcta__arw::before { content: ""; position: absolute; left: 50%; top: 50%; border-style: solid; border-color: currentColor; border-width: 0 2px 2px 0; transform: translate(-70%, -50%) rotate(-45deg); } @media (min-width: 751px) { .fcta__arw::before { width: 12rem; height: 12rem; } } @media (max-width: 750px) { .fcta__arw::before { width: 10rem; height: 10rem; } } /********************* 医院情報・フッター ************************/ .fin { width: 100%; box-sizing: border-box; background-color: #3f3b3a; color: #fff; text-align: center; line-break: strict; } @media (min-width: 751px) { .fin { padding: 115rem 121rem 75rem; } } @media (max-width: 750px) { .fin { padding: 60rem 40rem 50rem; } } .fin__access { font-weight: 700; line-height: 1; letter-spacing: 0.02em; margin-bottom: 45rem; } @media (min-width: 751px) { .fin__access { font-size: 25rem; } } @media (max-width: 750px) { .fin__access { font-size: 24rem; } } .fin__name img { display: block; width: 454rem; margin: 0 auto 20rem; } .fin__tag { display: flex; align-items: center; justify-content: center; box-sizing: border-box; margin: 0 auto; background: #ffffff; color: #3c3c3c; letter-spacing: 0.04em; } @media (min-width: 751px) { .fin__tag { width: 448rem; height: 44rem; margin-top: 20rem; font-size: 20rem; } } @media (max-width: 750px) { .fin__tag { width: 100%; max-width: 420rem; padding: 12rem; margin-top: 16rem; font-size: 26rem; } } @media (min-width: 751px) { .fin__addr { margin-top: 45rem; font-size: 20rem; line-height: 1; } } @media (max-width: 750px) { .fin__addr { margin-top: 20rem; font-size: 26rem; } } @media (min-width: 751px) { .fin__map { width: 1168rem; margin: 79rem auto 0; } } @media (max-width: 750px) { .fin__map { margin-top: 30rem; } } .fin__map iframe { width: 100%; } @media (min-width: 751px) { .fin__map iframe { height: 445rem; } } @media (max-width: 750px) { .fin__map iframe { height: 445rem; } } @media (min-width: 751px) { .fin__cols { display: flex; justify-content: space-between; width: 1168rem; margin: 72rem auto 0; } } @media (max-width: 750px) { .fin__cols { margin-top: 34rem; } } .fin__col { text-align: left; } @media (min-width: 751px) { .fin__col--l { width: 615rem; } } @media (min-width: 751px) { .fin__col--r { width: 510rem; } } @media (max-width: 750px) { .fin__col + .fin__col { margin-top: 34rem; } } .fin { /* 診療時間 */ } .fin__hours { width: 100%; border-collapse: collapse; margin-bottom: 25rem; } @media (min-width: 751px) { .fin__hours { font-size: 20rem; } } @media (max-width: 750px) { .fin__hours { font-size: 26rem; } } @media (min-width: 751px) { .fin__hours th { width: 160rem; } } @media (max-width: 750px) { .fin__hours th { width: 25%; } } .fin__hours th, .fin__hours td { font-weight: 400; text-align: center; vertical-align: middle; } @media (min-width: 751px) { .fin__hours th, .fin__hours td { height: 62rem; } } @media (max-width: 750px) { .fin__hours th, .fin__hours td { height: 50rem; } } .fin__hours thead th:first-child, .fin__hours tbody th { text-align: left; white-space: nowrap; } .fin__hours tbody tr:first-child th, .fin__hours tbody tr:first-child td { border-top: 1px solid rgba(255, 255, 255, 0.5); } .fin__hours tbody tr:last-child th, .fin__hours tbody tr:last-child td { border-bottom: 1px solid rgba(255, 255, 255, 0.5); } .fin__tri { color: #ffe09c; } @media (min-width: 751px) { .fin__note { font-size: 20rem; line-height: 2; } } @media (max-width: 750px) { .fin__note { font-size: 26rem; line-height: 1.6; } } .fin { /* 設備アイコン */ } .fin__facility { display: flex; justify-content: space-between; } @media (max-width: 750px) { .fin__facility { gap: 30rem; } } .fin__facility li { display: flex; align-items: center; } .fin__facility li img { width: 93rem; display: inline-block; margin-right: 20rem; } @media (min-width: 751px) { .fin__facility_txt { font-size: 20rem; line-height: 1.4; } } @media (max-width: 750px) { .fin__facility_txt { font-size: 26rem; line-height: 1.4; } } .fin__facility_txt strong { display: inline-block; font-weight: 700; } @media (min-width: 751px) { .fin__facility_txt strong { font-size: 30rem; } } @media (max-width: 750px) { .fin__facility_txt strong { font-size: 26rem; } } .fin__box { box-sizing: border-box; border: 2px solid #fff; } @media (min-width: 751px) { .fin__box { margin-top: 25rem; padding: 25rem; } } @media (max-width: 750px) { .fin__box { margin-top: 40rem; padding: 24rem; } } .fin__box_head { font-weight: 700; line-height: 1; } @media (min-width: 751px) { .fin__box_head { font-size: 20rem; } } @media (max-width: 750px) { .fin__box_head { font-size: 28rem; } } @media (min-width: 751px) { .fin__box_text { margin-top: 20rem; font-size: 20rem; line-height: 45rem; } } @media (max-width: 750px) { .fin__box_text { margin-top: 14rem; font-size: 26rem; line-height: 1.8; } } .fin { /* 提携駐車場 */ } .fin__parking { box-sizing: border-box; background-color: #fff; color: #434348; text-align: left; } @media (min-width: 751px) { .fin__parking { width: 1168rem; margin: 50rem auto 45rem; padding: 40rem; } } @media (max-width: 750px) { .fin__parking { margin-top: 34rem; padding: 30rem; } } .fin__parking_head { font-weight: 700; line-height: 1; } @media (min-width: 751px) { .fin__parking_head { font-size: 20rem; } } @media (max-width: 750px) { .fin__parking_head { font-size: 32rem; } } @media (min-width: 751px) { .fin__parking_text { margin-top: 26rem; font-size: 20rem; line-height: 45rem; } } @media (max-width: 750px) { .fin__parking_text { margin-top: 20rem; font-size: 26rem; line-height: 1.8; } } .fin { /* Instagram バナー */ } .fin__insta_lbl { position: relative; display: inline-block; margin: 0 auto; line-height: 1; } @media (min-width: 751px) { .fin__insta_lbl { padding: 0 40rem; font-size: 25rem; margin-bottom: 20rem; } } @media (max-width: 750px) { .fin__insta_lbl { margin-top: 34rem; padding: 0 30rem; font-size: 26rem; margin-bottom: 20rem; } } .fin__insta_lbl::before, .fin__insta_lbl::after { content: ""; position: absolute; top: 50%; width: 1px; background-color: #fff; } @media (min-width: 751px) { .fin__insta_lbl::before, .fin__insta_lbl::after { height: 34rem; margin-top: -17rem; } } @media (max-width: 750px) { .fin__insta_lbl::before, .fin__insta_lbl::after { height: 26rem; margin-top: -13rem; } } .fin__insta_lbl::before { left: 20rem; transform: rotate(-30deg); } .fin__insta_lbl::after { right: 20rem; transform: rotate(30deg); } .fin__banners { display: flex; justify-content: center; } @media (min-width: 751px) { .fin__banners { margin-top: 16rem; gap: 60rem; align-items: flex-end; } } @media (max-width: 750px) { .fin__banners { flex-direction: column; align-items: center; margin-top: 40rem; gap: 20rem; } } @media (min-width: 751px) { .fin__banners li:first-child { width: 540rem; } } @media (min-width: 751px) { .fin__banners li:last-child { width: 426rem; } } .fin__banners a { display: block; transition: 0.3s; } .fin__banners a:hover { opacity: 0.7; } .fin__banners img { display: block; width: 100%; } @media (min-width: 751px) { .fin__copy { margin-top: 100rem; font-size: 20rem; line-height: 1; } } @media (max-width: 750px) { .fin__copy { margin-top: 40rem; font-size: 20rem; } } /********************* ヘッダー ************************/ /* スマホのメニューボタンの背景（カンプ実測） */ .head { position: relative; width: 100%; box-sizing: border-box; background-color: #fff; color: #434348; line-break: strict; z-index: 20; } @media (min-width: 751px) { .head { padding: 18rem 40rem; } } @media (max-width: 750px) { .head { /* スマホではメインビジュアルの上に重ねる（背景は透過） */ position: absolute; left: 0; top: 0; height: 166rem; padding: 0 20rem 0 36rem; background-color: transparent; } } .head { /* メニューを開いているあいだは、閉じるボタンが押せるよう最前面に固定する */ } .is__drawer .head { position: fixed; top: 0; left: 0; z-index: 70; /* 透過のままだとドロワーの上で文字が読めないので背景を戻す */ } @media (max-width: 750px) { .is__drawer .head { background-color: #fff; } } .head__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; } .head { /* --- ロゴ --- */ } .head__logo { display: flex; align-items: center; color: inherit; text-decoration: none; } @media (min-width: 751px) { .head__logo { width: 443rem; } } @media (max-width: 750px) { .head__logo { width: 360rem; /* カンプではロゴが上下中央ではなく少し下に置かれている */ align-self: flex-start; margin-top: 37.5rem; } } .head__logo { /* 幅指定が無いと元画像のサイズではみ出すため */ } .head__logo img { display: block; width: 100%; height: auto; } .head { /* --- 電話・Web・LINE --- */ } .head__cv { display: flex; align-items: center; } @media (min-width: 751px) { .head__cv { gap: 12rem; } } @media (max-width: 750px) { .head__cv { display: none; } } .head__tel a { display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; background-color: #665953; color: #fff; text-decoration: none; transition: 0.3s; } @media (min-width: 751px) { .head__tel a { width: 340rem; height: 143rem; border-radius: 86rem; } } .head__tel a:hover { opacity: 0.7; } .head__tel_num { font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; font-weight: 300; display: flex; align-items: center; line-height: 1; letter-spacing: 0.02em; position: relative; } @media (min-width: 751px) { .head__tel_num { font-size: 40rem; } } .head__tel_num:before { content: ""; width: 18rem; height: 34rem; background-image: url(./img/h__mark1.png); background-size: contain; background-repeat: no-repeat; top: 5rem; left: -25rem; position: absolute; } @media (min-width: 751px) { .head__tel_sub { margin-top: 16rem; font-size: 16rem; line-height: 1; } } .head__btn a { display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; border-radius: 50%; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; text-decoration: none; letter-spacing: 0.04em; transition: 0.3s; font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; } @media (min-width: 751px) { .head__btn a { width: 143rem; height: 143rem; font-size: 30rem; } } .head__btn a:hover { opacity: 0.7; } @media (min-width: 751px) { .head__btn_sm { font-size: 20rem; } } .head__btn-web a { background-color: #fff; border: 1px solid rgba(102, 89, 83, 0.5); color: #434348; } .head__btn-web a img { width: 29rem; display: inline-block; margin-bottom: 10rem; } .head__btn-line a { background-color: #46828a; color: #fff; } .head__btn-line a img { width: 28rem; display: inline-block; margin-bottom: 10rem; } @media (min-width: 751px) { .head__btn .ico__web, .head__btn .ico__line { margin-bottom: 8rem; } } .head { /* --- ハンバーガー --- */ } @media (min-width: 751px) { .head__menu { display: none; } } .head__menu { /* カンプ実測：116×116rem／背景 #edeee8／角丸なし／下に MENU の文字 */ } @media (max-width: 750px) { .head__menu { position: relative; display: block; box-sizing: border-box; width: 116rem; height: 116rem; padding: 0; border: 0; border-radius: 0; background-color: #edeee8; cursor: pointer; /* ボタン下部の「MENU」 */ } .head__menu::after { content: "MENU"; position: absolute; left: 0; top: 73rem; width: 100%; color: #434348; font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; font-weight: 400; font-size: 24rem; line-height: 1; letter-spacing: 0.14em; text-indent: 0.14em; text-align: center; } } .head__menu span { position: absolute; left: 50%; display: block; transition: 0.3s; } @media (min-width: 751px) { .head__menu span { width: 46rem; height: 3rem; margin-left: -23rem; background-color: #fff; } } @media (max-width: 750px) { .head__menu span { width: 39rem; height: 1.5rem; margin-left: -19.5rem; background-color: #434348; } } @media (min-width: 751px) { .head__menu span:nth-child(1) { top: 32rem; } .head__menu span:nth-child(2) { top: 49rem; } .head__menu span:nth-child(3) { top: 66rem; } } @media (max-width: 750px) { .head__menu span:nth-child(1) { top: 26rem; } .head__menu span:nth-child(2) { top: 40rem; } .head__menu span:nth-child(3) { top: 54rem; } } /* 開いているとき「×」にする */ @media (min-width: 751px) { .is__drawer .head__menu span:nth-child(1) { top: 49rem; transform: rotate(30deg); } } @media (max-width: 750px) { .is__drawer .head__menu span:nth-child(1) { top: 40rem; transform: rotate(30deg); } } .is__drawer .head__menu span:nth-child(2) { opacity: 0; } @media (min-width: 751px) { .is__drawer .head__menu span:nth-child(3) { top: 49rem; transform: rotate(-30deg); } } @media (max-width: 750px) { .is__drawer .head__menu span:nth-child(3) { top: 40rem; transform: rotate(-30deg); } } .is__drawer .head__menu { /* ×印になったら文字も CLOSE に変える */ } @media (max-width: 750px) { .is__drawer .head__menu::after { content: "CLOSE"; } } /********************* ハンバーガーメニュー（PC・SP共通） ************************/ .drawer { position: fixed; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; background-color: #665953; color: #fff; overflow-y: auto; opacity: 0; visibility: hidden; transition: 0.3s; z-index: 60; } .is__drawer .drawer { opacity: 1; visibility: visible; } .drawer__inner { box-sizing: border-box; } @media (min-width: 751px) { .drawer__inner { padding: 270rem 121rem 100rem; } } @media (max-width: 750px) { .drawer__inner { padding: 170rem 40rem 80rem; } } .drawer__list { display: flex; flex-wrap: wrap; } @media (min-width: 751px) { .drawer__list { gap: 0; } } .drawer__list li { box-sizing: border-box; border-bottom: 1px solid rgba(255, 255, 255, 0.35); } @media (min-width: 751px) { .drawer__list li { width: 50%; } } @media (max-width: 750px) { .drawer__list li { width: 100%; } } @media (min-width: 751px) { .drawer__list li:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, 0.35); } } .drawer__list a { display: block; color: inherit; text-decoration: none; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; letter-spacing: 0.04em; transition: 0.3s; } @media (min-width: 751px) { .drawer__list a { padding: 40rem 30rem; font-size: 34rem; } } @media (max-width: 750px) { .drawer__list a { padding: 28rem 10rem; font-size: 28rem; } } .drawer__list a:hover { opacity: 0.7; } .drawer__cv { text-align: center; } @media (min-width: 751px) { .drawer__cv { margin-top: 80rem; } } @media (max-width: 750px) { .drawer__cv { margin-top: 50rem; } } .drawer__tel a { display: inline-flex; align-items: center; color: inherit; text-decoration: none; line-height: 1; } @media (min-width: 751px) { .drawer__tel a { font-size: 60rem; } } @media (max-width: 750px) { .drawer__tel a { font-size: 35rem; } } .drawer__tel a img { width: 30rem; margin-right: 15rem; } @media (min-width: 751px) { .drawer__note { margin-top: 16rem; font-size: 22rem; } } @media (max-width: 750px) { .drawer__note { margin-top: 12rem; font-size: 20rem; } } .drawer__btn { display: flex; justify-content: center; } @media (min-width: 751px) { .drawer__btn { margin-top: 40rem; gap: 30rem; } } @media (max-width: 750px) { .drawer__btn { margin-top: 30rem; gap: 20rem; } } .drawer__btn a { display: flex; align-items: center; justify-content: center; box-sizing: border-box; text-decoration: none; transition: 0.3s; } @media (min-width: 751px) { .drawer__btn a { width: 340rem; height: 90rem; border-radius: 45rem; font-size: 28rem; } } @media (max-width: 750px) { .drawer__btn a { width: 260rem; height: 80rem; border-radius: 40rem; font-size: 24rem; } } .drawer__btn a:hover { opacity: 0.7; } .drawer__btn-web a { background-color: #fff; color: #434348; } .drawer__btn-line a { background-color: #46828a; color: #fff; } /* ドロワーが開いている間は背面をスクロールさせない */ body.is__drawer { overflow: hidden; } /********************* PCフローティングバナー（上スクロールで表示） ************************/ .float { position: fixed; left: 0; top: 0; width: 100%; background-color: #fff; box-shadow: 0 2rem 12rem rgba(0, 0, 0, 0.08); transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease; z-index: 50; } @media (max-width: 750px) { .float { display: none; } } .float.is__show { transform: translateY(0); opacity: 1; visibility: visible; } .float__inner { display: flex; align-items: stretch; width: 100%; } @media (min-width: 751px) { .float__inner { height: 176rem; } } .float { /* メニュー */ } .float__list { display: flex; flex: 1; align-items: stretch; } .float__list li { display: flex; flex: 1; align-items: center; justify-content: center; border-left: 1px solid #e2e2e2; } .float__list li:last-child { border-right: 1px solid #e2e2e2; } .float__list a { display: block; color: #434348; text-decoration: none; text-align: center; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; transition: 0.3s; } @media (min-width: 751px) { .float__list a { font-size: 20rem; line-height: 1.5; } } .float__list a:hover { opacity: 0.7; } .float { /* 電話 */ } .float__tel { flex-shrink: 0; } @media (min-width: 751px) { .float__tel { width: 404rem; } } .float__tel a { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; box-sizing: border-box; background-color: #665953; color: #fff; text-decoration: none; transition: 0.3s; } .float__tel a:hover { opacity: 0.7; } .float__tel_num { font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; font-weight: 300; display: flex; align-items: center; line-height: 1; letter-spacing: 0.02em; } @media (min-width: 751px) { .float__tel_num { font-size: 44rem; } } @media (min-width: 751px) { .float__tel_sub { margin-top: 10rem; font-size: 17rem; line-height: 1.4; } } .float { /* Web・LINE */ } .float__btn { flex-shrink: 0; } @media (min-width: 751px) { .float__btn { width: 120rem; } } .float__btn a { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; box-sizing: border-box; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; text-decoration: none; letter-spacing: 0.04em; transition: 0.3s; } @media (min-width: 751px) { .float__btn a { font-size: 27rem; } } .float__btn a:hover { opacity: 0.7; } @media (min-width: 751px) { .float__btn_sm { margin-top: 4rem; font-size: 20rem; } } .float__btn-web a { background-color: #fff; color: #434348; } .float__btn-line a { background-color: #46828a; color: #fff; } @media (min-width: 751px) { .float__btn .ico__web, .float__btn .ico__line { margin-bottom: 6rem; } } /********************* メインビジュアル ************************/ .mv { position: relative; overflow: hidden; } .mv .swiper { width: 100%; } .mv { /* PC・SPで画像を出し分ける（切り替えは750px） */ } .mv__pic { display: block; } .mv__pic img { display: block; width: 100%; height: auto; /* 読み込み中に高さが変わらないようにする */ } @media (min-width: 751px) { .mv__pic img { aspect-ratio: 3333/1710; } } @media (max-width: 750px) { .mv__pic img { aspect-ratio: 1000/1408; } } .mv { /* ● のページャー */ } .mv__pager { position: absolute; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; z-index: 2; } @media (min-width: 751px) { .mv__pager { bottom: 34rem; gap: 18rem; } } @media (max-width: 750px) { .mv__pager { bottom: 26rem; gap: 16rem; } } .mv__pager .swiper-pagination-bullet { display: block; flex-shrink: 0; margin: 0; border-radius: 50%; background-color: #fff; opacity: 0.55; transition: 0.3s; cursor: pointer; } @media (min-width: 751px) { .mv__pager .swiper-pagination-bullet { width: 14rem; height: 14rem; } } @media (max-width: 750px) { .mv__pager .swiper-pagination-bullet { width: 14rem; height: 14rem; } } .mv__pager .swiper-pagination-bullet:hover { opacity: 0.8; } .mv__pager .swiper-pagination-bullet-active { opacity: 1; } /********************* メインビジュアル下のリンク ************************/ .mvnav { width: 100%; box-sizing: border-box; background-color: #efefef; color: #434348; line-break: strict; } @media (min-width: 751px) { .mvnav { padding: 0 121rem; } } @media (max-width: 750px) { .mvnav { padding: 20rem 16rem; } } .mvnav__list { display: flex; align-items: center; justify-content: space-between; } @media (min-width: 751px) { .mvnav__list { height: 115rem; } } @media (max-width: 750px) { .mvnav__list { flex-wrap: wrap; gap: 10rem 0; } } @media (max-width: 750px) { .mvnav__list li { width: 50%; text-align: center; box-sizing: border-box; padding: 6rem; } } .mvnav__list a { display: block; color: inherit; text-decoration: none; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; letter-spacing: 0.02em; transition: 0.3s; } @media (min-width: 751px) { .mvnav__list a { font-size: 20rem; } } @media (max-width: 750px) { .mvnav__list a { font-size: 26rem; } } .mvnav__list a:hover { opacity: 0.7; } /********************* PCページトップ ************************/ .pagetop { position: fixed; opacity: 0; visibility: hidden; transition: 0.3s; z-index: 40; } @media (min-width: 751px) { .pagetop { right: 40rem; bottom: 40rem; width: 140rem; height: 140rem; } } @media (max-width: 750px) { .pagetop { display: none; } } .pagetop.is__show { opacity: 1; visibility: visible; } .pagetop a { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; box-sizing: border-box; border: 2rem solid #665953; border-radius: 50%; background-color: rgba(255, 255, 255, 0.9); color: #665953; text-align: center; text-decoration: none; line-height: 1.3; letter-spacing: 0.08em; transition: 0.3s; } @media (min-width: 751px) { .pagetop a { font-size: 22rem; } } .pagetop a:hover { background-color: #665953; color: #fff; } .pagetop a:hover .pagetop__arw { border-color: currentColor; } .pagetop { /* ∧ */ } .pagetop__arw { display: block; box-sizing: border-box; border-style: solid; border-color: currentColor; border-width: 2rem 2rem 0 0; transform: rotate(-45deg); } @media (min-width: 751px) { .pagetop__arw { width: 34rem; height: 34rem; margin-bottom: 10rem; } } @media (max-width: 750px) { .pagetop__arw { width: 22rem; height: 22rem; margin-bottom: 4rem; } } /********************* SP下部固定バナー ************************/ .spfix { position: fixed; left: 0; bottom: 0; display: flex; align-items: center; width: 100%; box-sizing: border-box; z-index: 40; } @media (min-width: 751px) { .spfix { display: none; } } @media (max-width: 750px) { .spfix { padding: 10rem 12rem; gap: 10rem; background-color: rgba(255, 255, 255, 0.9); } } .spfix { /* メニューを開いているあいだは隠す */ } .is__drawer .spfix { display: none; } .spfix__tel { flex: 1; } .spfix__tel a { display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; background-color: #665953; color: #fff; text-decoration: none; } @media (max-width: 750px) { .spfix__tel a { height: 120rem; border-radius: 60rem; } } .spfix__tel_num { font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; font-weight: 300; display: flex; align-items: center; line-height: 1; letter-spacing: 0.02em; } @media (max-width: 750px) { .spfix__tel_num { font-size: 40rem; } } @media (max-width: 750px) { .spfix__tel_num img { width: 25rem; } } @media (max-width: 750px) { .spfix__tel_sub { margin-top: 8rem; font-size: 15rem; } } .spfix__btn { flex-shrink: 0; } .spfix__btn a { display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; border-radius: 50%; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; text-decoration: none; line-height: 1.2; } @media (max-width: 750px) { .spfix__btn a { width: 120rem; height: 120rem; font-size: 22rem; } } @media (max-width: 750px) { .spfix__btn_sm { font-size: 17rem; } } .spfix__btn-web a { background-color: #fff; border: 1px solid rgba(102, 89, 83, 0.5); color: #434348; } @media (max-width: 750px) { .spfix__btn-web a img { width: 40rem; } } .spfix__btn-line a { background-color: #46828a; color: #fff; } @media (max-width: 750px) { .spfix__btn-line a img { width: 40rem; } } .spfix__btn-top a { background-color: #eeecea; color: #665953; } @media (max-width: 750px) { .spfix__btn .ico__web, .spfix__btn .ico__line { margin-bottom: 4rem; } } /* SP固定バナーぶんの余白（最後のセクションが隠れないように） */ @media screen and (max-width: 750px) { body { padding-bottom: 140rem; } } /********************* 症例集（カスタム投稿タイプ case） ************************/ /* --- ページタイトル（写真の上に白抜き） --- */ .chero { display: flex; align-items: center; justify-content: center; position: relative; box-sizing: border-box; background-color: #7d8a8c; background-image: url(img/case_hero.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; color: #fff; text-align: center; } @media (min-width: 751px) { .chero { height: 384rem; } } @media (max-width: 750px) { .chero { height: 300rem; } } .chero__inner { position: relative; z-index: 1; } .chero__ja { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; /* 源ノ明朝は 500 / 600 のみ */ line-height: 1; letter-spacing: 0.08em; text-indent: 0.08em; } @media (min-width: 751px) { .chero__ja { font-size: 57.6rem; } } @media (max-width: 750px) { .chero__ja { font-size: 35rem; } } .chero__en { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; line-height: 1; letter-spacing: 0.24em; text-indent: 0.24em; } @media (min-width: 751px) { .chero__en { margin-top: 45rem; font-size: 24.2rem; } } @media (max-width: 750px) { .chero__en { margin-top: 26rem; font-size: 20rem; } } /* --- ページ全体 --- */ .cpage { background-color: #e7f1f2; color: #4b4b4b; } @media (min-width: 751px) { .cpage { padding: 90rem 0; } } @media (max-width: 750px) { .cpage { padding: 70rem 0 80rem; } } .cpage__inner { box-sizing: border-box; margin: 0 auto; } @media (min-width: 751px) { .cpage__inner { width: 87.75%; } } @media (max-width: 750px) { .cpage__inner { width: 100%; padding: 0 30rem; } } .cpage__head { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; border-bottom: 1px solid #424348; } @media (min-width: 751px) { .cpage__head { padding-bottom: 26rem; font-size: 50.7rem; } } @media (max-width: 750px) { .cpage__head { padding-bottom: 18rem; font-size: 36rem; } } .cpage__back { text-align: center; } @media (min-width: 751px) { .cpage__back { margin-top: 80rem; } } @media (max-width: 750px) { .cpage__back { margin-top: 50rem; } } .cpage__back a { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid #665953; background-color: #fff; color: #665953; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; text-decoration: none; transition: 0.3s; } @media (min-width: 751px) { .cpage__back a { width: 668rem; height: 114rem; border-radius: 57rem; font-size: 32rem; letter-spacing: 0.08em; } } @media (max-width: 750px) { .cpage__back a { width: 560rem; height: 100rem; border-radius: 50rem; font-size: 30rem; } } .cpage__back a:hover { opacity: 0.7; } .cpage__back a { /* 右端の▶ */ } .cpage__back a::after { content: ""; border-style: solid; border-color: transparent transparent transparent #665953; } @media (min-width: 751px) { .cpage__back a::after { margin-left: 40rem; border-width: 9rem 0 9rem 14rem; } } @media (max-width: 750px) { .cpage__back a::after { margin-left: 30rem; border-width: 8rem 0 8rem 12rem; } } /* --- 絞り込み検索 --- */ @media (min-width: 751px) { .csearch { margin-top: 101rem; } } @media (max-width: 750px) { .csearch { margin-top: 50rem; } } @media (min-width: 751px) { .csearch__cols { display: flex; gap: 78rem; } } @media (min-width: 751px) { .csearch__col { width: 522rem; } } @media (max-width: 750px) { .csearch__col + .csearch__col { margin-top: 34rem; } } .csearch__label { font-weight: 700; line-height: 1; } @media (min-width: 751px) { .csearch__label { font-size: 27.6rem; } } @media (max-width: 750px) { .csearch__label { font-size: 26rem; } } .csearch__select { display: block; box-sizing: border-box; width: 100%; border: 1px solid #424348; border-radius: 0; background-color: #fff; color: #4b4b4b; font-family: "source-han-sans-japanese", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif; line-height: 1.4; -moz-appearance: none; appearance: none; -webkit-appearance: none; background-repeat: no-repeat; cursor: pointer; /* 右端の「∨」 */ background-image: linear-gradient(45deg, transparent 50%, #7a7f83 50%), linear-gradient(135deg, #7a7f83 50%, transparent 50%); } @media (min-width: 751px) { .csearch__select { margin-top: 23rem; height: 65rem; padding: 0 60rem 0 35rem; font-size: 23rem; background-position: calc(100% - 34rem) center, calc(100% - 24rem) center; background-size: 10rem 10rem, 10rem 10rem; } } @media (max-width: 750px) { .csearch__select { margin-top: 16rem; height: 84rem; padding: 0 70rem 0 30rem; font-size: 26rem; background-position: calc(100% - 40rem) center, calc(100% - 28rem) center; background-size: 13rem 13rem, 13rem 13rem; } } .csearch__btn { text-align: center; } @media (min-width: 751px) { .csearch__btn { margin-top: 178rem; } } @media (max-width: 750px) { .csearch__btn { margin-top: 50rem; } } .csearch__btn button { box-sizing: border-box; border: none; background-color: #545e6a; color: #fff; font-family: "source-han-sans-japanese", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif; line-height: 1; cursor: pointer; transition: 0.3s; } @media (min-width: 751px) { .csearch__btn button { width: 499rem; height: 92rem; border-radius: 46rem; font-size: 27.6rem; } } @media (max-width: 750px) { .csearch__btn button { width: 100%; height: 96rem; border-radius: 48rem; font-size: 28rem; } } .csearch__btn button:hover { opacity: 0.7; } /* --- 症例カード --- */ @media (min-width: 751px) { .clist { margin-top: 67rem; } } @media (max-width: 750px) { .clist { margin-top: 50rem; } } .clist__empty { background-color: #fff; text-align: center; } @media (min-width: 751px) { .clist__empty { margin-top: 67rem; padding: 100rem 0; font-size: 23rem; line-height: 1.9; } } @media (max-width: 750px) { .clist__empty { margin-top: 50rem; padding: 60rem 30rem; font-size: 26rem; line-height: 1.9; } } .ccard { box-sizing: border-box; background-color: #fff; } @media (min-width: 751px) { .ccard { padding: 93rem 78rem 105rem; } .ccard + .ccard { margin-top: 104rem; } } @media (max-width: 750px) { .ccard { padding: 50rem 30rem 60rem; } .ccard + .ccard { margin-top: 50rem; } } .ccard__head { display: flex; align-items: center; font-weight: 400; line-height: 1; border-bottom: 4rem solid #46828a; } @media (min-width: 751px) { .ccard__head { padding-bottom: 25rem; font-size: 39.2rem; } } @media (max-width: 750px) { .ccard__head { padding-bottom: 20rem; font-size: 34rem; } } .ccard__head { /* 先頭の▶ */ } .ccard__head::before { content: ""; flex-shrink: 0; border-style: solid; border-color: transparent transparent transparent #46828a; } @media (min-width: 751px) { .ccard__head::before { margin-right: 25rem; border-width: 12rem 0 12rem 19rem; } } @media (max-width: 750px) { .ccard__head::before { margin-right: 18rem; border-width: 11rem 0 11rem 17rem; } } @media (min-width: 751px) { .ccard__cols { display: flex; gap: 54rem; margin-top: 55rem; } } @media (max-width: 750px) { .ccard__cols { margin-top: 40rem; } } @media (min-width: 751px) { .ccard__col--photo { width: 677rem; } } @media (min-width: 751px) { .ccard__col--detail { width: 835rem; } } @media (max-width: 750px) { .ccard__col--detail { margin-top: 40rem; } } .ccard { /* 治療前・治療後・口元の変化 */ } @media (min-width: 751px) { .ccard__photo + .ccard__photo { margin-top: 40rem; } } @media (max-width: 750px) { .ccard__photo + .ccard__photo { margin-top: 30rem; } } .ccard__photo_lbl { display: flex; align-items: center; justify-content: center; background-color: #efefef; color: #4e4e4e; line-height: 1; } @media (min-width: 751px) { .ccard__photo_lbl { height: 59rem; font-size: 23rem; } } @media (max-width: 750px) { .ccard__photo_lbl { height: 62rem; font-size: 26rem; } } .ccard__photo_img { overflow: hidden; } @media (min-width: 751px) { .ccard__photo_img { margin-top: 21rem; } } @media (max-width: 750px) { .ccard__photo_img { margin-top: 16rem; } } .ccard__photo_img img { display: block; width: 100%; height: auto; } .ccard__photo_img { /* 画像が未登録のときも枠だけ見えるように */ background-color: #efefef; } @media (min-width: 751px) { .ccard__photo_img { min-height: 319rem; } } @media (max-width: 750px) { .ccard__photo_img { min-height: 300rem; } } .ccard { /* 説明文 */ } @media (min-width: 751px) { .ccard__text { font-size: 23rem; line-height: 2.13; } } @media (max-width: 750px) { .ccard__text { font-size: 26rem; line-height: 1.9; } } .ccard { /* 選択項目のタグ */ } .ccard__tags { display: flex; flex-wrap: wrap; } @media (min-width: 751px) { .ccard__tags { gap: 23rem; margin-top: 55rem; } } @media (max-width: 750px) { .ccard__tags { gap: 16rem; margin-top: 34rem; } } .ccard__tag { display: flex; align-items: center; justify-content: center; box-sizing: border-box; border: 2rem solid #46828a; background-color: #e9f9f9; line-height: 1.3; text-align: center; } @media (min-width: 751px) { .ccard__tag { min-height: 52rem; padding: 6rem 34rem; border-radius: 26rem; font-size: 20.7rem; } } @media (max-width: 750px) { .ccard__tag { min-height: 56rem; padding: 6rem 28rem; border-radius: 28rem; font-size: 22rem; } } .ccard { /* 主訴・年齢／性別などの一覧 */ } @media (min-width: 751px) { .ccard__spec { margin-top: 44rem; } } @media (max-width: 750px) { .ccard__spec { margin-top: 34rem; } } .ccard__spec_row { display: flex; border-bottom: 1px solid #4b4b4b; } @media (min-width: 751px) { .ccard__spec_row { padding: 22rem 0 21rem; font-size: 23rem; line-height: 1.75; } } @media (max-width: 750px) { .ccard__spec_row { padding: 20rem 0; font-size: 25rem; line-height: 1.7; } } .ccard__spec_row:last-child { border-bottom: none; } .ccard__spec dt { flex-shrink: 0; } @media (min-width: 751px) { .ccard__spec dt { width: 198rem; } } @media (max-width: 750px) { .ccard__spec dt { width: 200rem; } } .ccard__spec dd { flex: 1; } .ccard { /* リスク・副作用／費用 の小見出し */ } .ccard__sub { display: flex; align-items: center; font-weight: 400; line-height: 1; } @media (min-width: 751px) { .ccard__sub { margin-top: 40rem; font-size: 25.3rem; } } @media (max-width: 750px) { .ccard__sub { margin-top: 34rem; font-size: 27rem; } } .ccard__sub::before { content: ""; flex-shrink: 0; background-color: #18b5c6; } @media (min-width: 751px) { .ccard__sub::before { width: 7rem; height: 38rem; margin-right: 21rem; } } @media (max-width: 750px) { .ccard__sub::before { width: 8rem; height: 34rem; margin-right: 16rem; } } @media (min-width: 751px) { .ccard__risk { margin-top: 25rem; } } @media (max-width: 750px) { .ccard__risk { margin-top: 20rem; } } .ccard__risk li { position: relative; } @media (min-width: 751px) { .ccard__risk li { font-size: 23rem; line-height: 2.13; } } @media (max-width: 750px) { .ccard__risk li { font-size: 25rem; line-height: 1.9; } } @media (min-width: 751px) { .ccard__fee { margin-top: 18rem; } } @media (max-width: 750px) { .ccard__fee { margin-top: 16rem; } } .ccard__fee_row { display: flex; border-bottom: 1px solid #4b4b4b; } @media (min-width: 751px) { .ccard__fee_row { padding: 22rem 0 21rem; font-size: 23rem; line-height: 1.75; } } @media (max-width: 750px) { .ccard__fee_row { padding: 20rem 0; font-size: 25rem; line-height: 1.7; } } .ccard__fee_row:last-child { border-bottom: none; } .ccard__fee dt { flex-shrink: 0; } @media (min-width: 751px) { .ccard__fee dt { width: 198rem; } } @media (max-width: 750px) { .ccard__fee dt { width: 200rem; } } .ccard__fee dd { flex: 1; } /* --- ページ送り --- */ @media (min-width: 751px) { .cpager { margin-top: 90rem; } } @media (max-width: 750px) { .cpager { margin-top: 60rem; } } .cpager ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } @media (min-width: 751px) { .cpager ul { gap: 16rem; } } @media (max-width: 750px) { .cpager ul { gap: 12rem; } } .cpager a, .cpager span { display: flex; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid #545e6a; background-color: #fff; color: #545e6a; line-height: 1; text-decoration: none; transition: 0.3s; } @media (min-width: 751px) { .cpager a, .cpager span { min-width: 62rem; height: 62rem; padding: 0 12rem; font-size: 23rem; } } @media (max-width: 750px) { .cpager a, .cpager span { min-width: 68rem; height: 68rem; padding: 0 12rem; font-size: 26rem; } } .cpager a:hover { opacity: 0.7; } .cpager .current { background-color: #545e6a; color: #fff; } .cpager .dots { border-color: transparent; background-color: transparent; } /********************* 症例集（トップページのスライダー） ************************/ .case { background-color: #f3f0e9; overflow: hidden; } @media (min-width: 751px) { .case { padding: 214rem 0 200rem; } } @media (max-width: 750px) { .case { padding: 90rem 0 100rem; } } .case__en { font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; font-weight: 300; line-height: 1; text-align: center; letter-spacing: 0.12em; text-indent: 0.12em; color: #444446; } @media (min-width: 751px) { .case__en { font-size: 35rem; } } @media (max-width: 750px) { .case__en { font-size: 34rem; } } .case__head { font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; text-align: center; letter-spacing: 0.1em; text-indent: 0.1em; color: #444446; } @media (min-width: 751px) { .case__head { margin-top: 41rem; font-size: 76rem; } } @media (max-width: 750px) { .case__head { margin-top: 30rem; font-size: 52rem; } } .case { /* --- スライダー --- */ } .case__slider { position: relative; } @media (min-width: 751px) { .case__slider { margin-top: 185rem; } } @media (max-width: 750px) { .case__slider { margin-top: 70rem; } } .case__slider { /* 左右のカードを見切れさせる */ } .case__slider .swiper { overflow: visible; } .case__slider .swiper-slide { box-sizing: border-box; height: auto; } @media (min-width: 751px) { .case__slider .swiper-slide { width: 986rem; } } @media (max-width: 750px) { .case__slider .swiper-slide { width: 640rem; } } .case { /* --- 前へ／次へ --- */ } .case__prev, .case__next { position: absolute; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0; border: none; border-radius: 50%; background-color: #665953; cursor: pointer; transition: 0.3s; z-index: 2; } @media (min-width: 751px) { .case__prev, .case__next { top: 344rem; width: 113rem; height: 113rem; } } @media (max-width: 750px) { .case__prev, .case__next { top: 150rem; width: 76rem; height: 76rem; } } .case__prev:hover, .case__next:hover { opacity: 0.7; } .case__prev, .case__next { /* ▶ の三角 */ } .case__prev::before, .case__next::before { content: ""; border-style: solid; border-color: transparent; } @media (min-width: 751px) { .case__prev::before, .case__next::before { border-width: 20rem 0 20rem 30rem; } } @media (max-width: 750px) { .case__prev::before, .case__next::before { border-width: 14rem 0 14rem 21rem; } } @media (min-width: 751px) { .case__prev { left: 50%; margin-left: -550rem; } } @media (max-width: 750px) { .case__prev { left: 12rem; } } .case__prev::before { border-left-width: 0; border-right-color: #fff; } @media (min-width: 751px) { .case__prev::before { border-width: 20rem 30rem 20rem 0; } } @media (max-width: 750px) { .case__prev::before { border-width: 14rem 21rem 14rem 0; } } @media (min-width: 751px) { .case__next { left: 50%; margin-left: 437rem; } } @media (max-width: 750px) { .case__next { right: 12rem; } } .case__next::before { border-left-color: #fff; } .case { /* --- もっと見る --- */ } .case__more { text-align: center; } @media (min-width: 751px) { .case__more { margin-top: 105rem; } } @media (max-width: 750px) { .case__more { margin-top: 60rem; } } .case__more a { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid #665953; background-color: #fff; color: #665953; font-family: "source-han-serif-japanese", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; font-weight: 500; line-height: 1; text-decoration: none; transition: 0.3s; } @media (min-width: 751px) { .case__more a { width: 668rem; height: 114rem; border-radius: 57rem; font-size: 32rem; letter-spacing: 0.08em; } } @media (max-width: 750px) { .case__more a { width: 560rem; height: 100rem; border-radius: 50rem; font-size: 30rem; } } .case__more a:hover { opacity: 0.7; } .case__more a { /* 右端の▶ */ } .case__more a::after { content: ""; border-style: solid; border-color: transparent transparent transparent #665953; } @media (min-width: 751px) { .case__more a::after { margin-left: 40rem; border-width: 9rem 0 9rem 14rem; } } @media (max-width: 750px) { .case__more a::after { margin-left: 30rem; border-width: 8rem 0 8rem 12rem; } } /* --- 1件ぶんのカード --- */ .ccase { display: block; box-sizing: border-box; background-color: #fff; color: #434348; text-decoration: none; transition: 0.3s; } @media (min-width: 751px) { .ccase { margin: 0 33rem; padding: 20rem 102rem 81rem; } } @media (max-width: 750px) { .ccase { margin: 0 15rem; padding: 24rem 40rem 50rem; } } .ccase:hover { opacity: 0.7; } .ccase__no { font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; font-weight: 300; line-height: 1; text-align: center; letter-spacing: 0.08em; text-indent: 0.08em; color: #8e8e90; } @media (min-width: 751px) { .ccase__no { font-size: 35rem; } } @media (max-width: 750px) { .ccase__no { font-size: 34rem; } } .ccase { /* 治療前・治療後の写真 */ } .ccase__photos { display: flex; } @media (min-width: 751px) { .ccase__photos { margin-top: 25rem; } } @media (max-width: 750px) { .ccase__photos { margin-top: 20rem; } } .ccase__photo { position: relative; width: 50%; margin: 0; overflow: hidden; background-color: #e5e2dc; } @media (min-width: 751px) { .ccase__photo { height: 268rem; } } @media (max-width: 750px) { .ccase__photo { height: 180rem; } } .ccase__photo img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .ccase__photo figcaption { position: absolute; left: 0; width: 100%; color: #fff; font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; font-weight: 400; line-height: 1; text-align: center; letter-spacing: 0.14em; text-indent: 0.14em; text-shadow: 0 0 8rem rgba(0, 0, 0, 0.5); } @media (min-width: 751px) { .ccase__photo figcaption { top: 22rem; font-size: 24rem; } } @media (max-width: 750px) { .ccase__photo figcaption { top: 16rem; font-size: 20rem; } } .ccase { /* 矯正治療費・治療期間 */ } .ccase__row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0; /* dl の既定マージンを消す */ } @media (min-width: 751px) { .ccase__row { margin-top: 33rem; padding-bottom: 25rem; } } @media (max-width: 750px) { .ccase__row { margin-top: 26rem; padding-bottom: 20rem; } } .ccase__row + .ccase__row { margin-top: 0; border-top: 1px dotted #8e8e90; } @media (min-width: 751px) { .ccase__row + .ccase__row { padding-top: 24rem; } } @media (max-width: 750px) { .ccase__row + .ccase__row { padding-top: 20rem; } } .ccase__row dt { color: #b9a427; font-weight: 500; line-height: 1; } @media (min-width: 751px) { .ccase__row dt { font-size: 23rem; } } @media (max-width: 750px) { .ccase__row dt { font-size: 24rem; } } .ccase__row dd { margin: 0; font-family: "futura-pt", "source-han-sans-japanese", "Century Gothic", "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif; font-weight: 300; line-height: 1; } @media (min-width: 751px) { .ccase__row dd { font-size: 65rem; } } @media (max-width: 750px) { .ccase__row dd { font-size: 35rem; } } .ccase__row { /* 万円・年・回 などの単位 */ } .ccase__row_unit { font-family: "source-han-sans-japanese", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif; font-weight: 400; } @media (min-width: 751px) { .ccase__row_unit { font-size: 23rem; } } @media (max-width: 750px) { .ccase__row_unit { font-size: 22rem; } } .ccase { /* 主訴・診断などの囲み */ } .ccase__spec { box-sizing: border-box; margin-bottom: 0; /* dl の既定マージンを消す */ border: 1px solid #8e8e90; } @media (min-width: 751px) { .ccase__spec { margin-top: 52rem; padding: 25rem 26rem; } } @media (max-width: 750px) { .ccase__spec { margin-top: 34rem; padding: 22rem 20rem; } } .ccase__spec_row { display: flex; } @media (min-width: 751px) { .ccase__spec_row { font-size: 24rem; line-height: 1.5; } } @media (max-width: 750px) { .ccase__spec_row { font-size: 23rem; line-height: 1.5; } } @media (min-width: 751px) { .ccase__spec_row + .ccase__spec_row { margin-top: 13rem; } } @media (max-width: 750px) { .ccase__spec_row + .ccase__spec_row { margin-top: 12rem; } } .ccase__spec dt { flex-shrink: 0; color: #b9a427; font-weight: 500; } @media (min-width: 751px) { .ccase__spec dt { width: 150rem; } } @media (max-width: 750px) { .ccase__spec dt { width: 150rem; } } .ccase__spec dd { flex: 1; margin: 0; }/*# sourceMappingURL=style.css.map */