/* Scss Document */ $color:#a08f1a; //サイトで良く使う色 $text:#000; //基本的なテキストの色 //hoverアニメーションを使いたい場合に使用 //呼び出し方法(cssに指定) → @include ani; @mixin ani { transition: 0.3s ease-in-out; } //display:flex;を使用した場合等に使用(widthが30%から70%まで)画面幅が768pxで100%に変わる //呼び出し方法(htmlに指定) → .flex_30 ~ .flex_70 @for $i from 30 through 70 { .flex_#{$i} { width: 1% * $i; } } //縮めた際の最小サイズ :root { --min-size: 100px; // 最小サイズ --clamp-vw: 18vw; // 通常の基準値 } @media (max-width: 1024px) { :root { --min-size: 60px; // 最小サイズ --clamp-vw: 10vw; // スマホで適度に小さくする } } $p: 100; @while $p < 310{ .padding#{$p}{ padding-top: clamp(var(--min-size),var(--clamp-vw), #{$p}px); padding-bottom: clamp(var(--min-size),var(--clamp-vw), #{$p}px); } $p: $p + 10; } $m: 100; @while $m < 310{ .margin#{$m}{ margin-top: clamp(var(--min-size),var(--clamp-vw), #{$m}px); margin-bottom: clamp(var(--min-size),var(--clamp-vw), #{$m}px); } $m: $m + 10; } $pt: 10; @while $pt < 310{ .pt-#{$pt}{ padding-top: clamp(var(--min-size),var(--clamp-vw), #{$pt}px); } $pt: $pt + 10; } $pb: 10; @while $pb < 310{ .pb-#{$pb}{ padding-bottom: clamp(var(--min-size),var(--clamp-vw), #{$pb}px); } $pb: $pb + 10; } $mt: 10; @while $mt < 310{ .mt-#{$mt}{ margin-top: clamp(var(--min-size),var(--clamp-vw), #{$mt}px); } $mt: $mt + 10; } $mb: 10; @while $mb < 310{ .mb-#{$mb}{ margin-bottom: clamp(var(--min-size),var(--clamp-vw), #{$mb}px); } $mb: $mb + 10; } a, a:hover, a:focus, a:active, a:visited, a:focus-visible { text-decoration: none; } .pb-0 { padding-bottom: 0 !important; } /*********** common *************/ .eng_23 { font-size: clamp(18px, 1.8vw, 23px); font-weight: 400; letter-spacing: 0.04em; } .eng_26 { font-size: clamp(20px, 2vw, 26px); font-weight: 400; letter-spacing: 0.04em; } .title_38 { font-size: clamp(25px, 3.3vw, 38px); font-weight: 500; letter-spacing: 0.02em; } .title_40 { font-size: clamp(26px, 3.5vw, 40px); font-weight: 500; letter-spacing: 0.02em; } .title_44 { font-size: clamp(28px, 3.8vw, 44px); font-weight: 500; letter-spacing: 0.02em; } .title_56 { font-size: clamp(36px, 4.9vw, 56px); font-weight: 500; letter-spacing: 0.02em; } #spicon { display: none; } /*********** header *************/ .header { position: fixed; top: 0; left: 0; width: 100%; height: 120px; display: flex; justify-content: center; align-items: center; z-index: 1000; background-color: #fff; } .h_flex { display: flex; justify-content: space-between; align-items: center; gap: 30px; } #logo { width: max-content; flex-shrink: 0; } .h_right { display: flex; justify-content: space-between; align-items: flex-end; flex-grow: 2; max-width: 1110px; padding-bottom: 7px; gap: 45px; } .h_nav { flex-grow: 2; } .h_nav>ul { display: flex; justify-content: space-between; a { color: inherit; letter-spacing: 0.08em; font-weight: 600; font-size: 15px; padding: 10px; transition: 0.3s ease; } a:visited { color: #222; } a:hover { color: #ff8078; } } .headerspan { color: inherit; letter-spacing: 0.08em; font-weight: 600; font-size: 15px; padding: 10px; transition: 0.3s ease; } .header_arrow img { margin-left: 10px; position: relative; top: -2px; } .h_phone { width: max-content; } .h_on { font-size: 13px; letter-spacing: 0.08em; font-weight: 600; padding-left: 43px; } .h_tel { display: flex; align-items: center; gap: 12px; font-size: clamp(24px, 2.5vw, 40px); letter-spacing: 0.06em; line-height: 1em; text-box: trim-both cap alphabetic; margin-top: 5px; img { position: relative; top: -2px; } } .hoverlist_parent { position: relative; } .hoverlist_wrapper { display: none; position: absolute; padding-top: 10px; width: 100%; } .hoverlist { position: relative; top: 100%; left: 50%; width: max-content; padding: 15px 20px; background-color: #fff; border-radius: 12px; box-shadow: 0px 0px 14px -6px #c9c0c0; transform: translateX(-50%); } .hoverlist .hoverlist_item { display: none; min-width: 200px; a { display: flex; justify-content: space-between; align-items: center; padding: 10px; } } .hoverlist_parent:hover .hoverlist_wrapper, .hoverlist_parent:hover .hoverlist_item { display: block; } .header_smallarrow { display: inline-block; img { display: inline-block; width: 100%; height: auto; } } /*********** common main view *************/ .mainview { margin-top: 120px; padding-top: 80px; } .mainview_text { padding-left: 5.3%; display: flex; justify-content: space-between; margin-bottom: 60px; } .mainview_title { margin-top: 4px; } .breadcrumb { font-size: 16px; display: flex; align-items: flex-end; } .breadcrumb a, .breadcrumb a:hover, .breadcrumb a:visited { color: #ff8078; } .breadcrumb_bar { padding-right: 28px; } .breadcrumb_bar::after { content: ""; display: inline-block; width: 10px; border-top: 1px solid #222; position: relative; top: -6px; right: -12px; } .mainview_picture { img { display: block; width: 100%; height: auto; } } /*********** top main view *************/ .fv_mt { margin-top: 120px; } .fv_bg { background: url("../images/frontpage_mainview.webp") 50% 0/cover no-repeat; height: clamp(500px, 50vw, 900px); border-radius: 30px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 88px; } .fv_title_wrapper { width: 90%; max-width: 1600px; } .fv_title { font-size: clamp(66px, 3.9vw, 84px); font-weight: 500; color: #fff; } .fv_calendar { display: flex; background-color: #fff; border-radius: 20px 0 0 20px; padding: 18px 4px 40px 34px; position: absolute; right: 0; bottom: clamp(48px, 2.9vw, 60px); z-index: 890; } .fv_calendar_headline { writing-mode: vertical-rl; margin-right: 32px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 600; span { display: inline-block; margin-bottom: 16px; } } .fv_calendar_inner { tr { border-bottom: 1px solid #ccccca; font-weight: 600; } th, td { padding: 16px; font-weight: 600; } } .fv_calendar_table { font-size: 18px; margin-bottom: 20px; } .fv_calendar_headcell { width: fit-content; white-space: nowrap; } .fv_calender_comment { font-size: 17px; padding-left: 18px; > p { margin-top: 12px; } } .fv_calendar_hours { display: inline-block; width: 25px; height: 25px; img { width: 100%; height: auto; display: inline-block; } } .icon_adresspoint { margin-right: 8px; img { vertical-align: baseline;; } } /*********** top01 *************/ .top01_flex { display: flex; justify-content: space-between; gap: 30px 40px; padding-top: 170px; } .top01_left { width: 260px; flex-shrink: 0; min-height: 265px; } .top01_right { flex-grow: 2; max-width: 1000px; min-height: 265px; } .news { border-top: 1px solid #ccccca; } .newslist { a { display: flex; justify-content: space-between; align-items: center; color: inherit; transition: 0.3s ease; padding: 35px 20px; border-bottom: 1px solid #ccccca; position: relative; } a:visited { color: #222; } a:hover { color: #ff8078; } } .news_date { width: 125px; flex-shrink: 0; margin-right: 30px; } .news_title{ flex-grow: 2; padding-right: 30px; } .top01_title { margin-top: 8px; } .top01_btn { position: absolute; width: 260px; left:0; bottom: 36px; } .link_btn { a { max-width: 260px; height: 65px; color: #fff; border-radius: 100px; display: flex; align-items: center; padding:0 40px 1px 40px; background-color: #ff8078; position: relative; letter-spacing: 0.08em; } span { position: absolute; right: 20px; top: calc(50% - 2px); transform: translateY(-50%); } } .blog_link_btn.link_btn { a { max-width: 280px; } } .scrolltext { font-size: clamp(178px, 10.3vw, 220px); color: #faecec; white-space: nowrap; } .textmove { padding-top: 80px; width: max-content; display: flex; animation: textmove 40s linear infinite; p { margin-right: 40px; } } @keyframes textmove { to { transform: translateX(-50%); } } /*********** top02 *************/ .top02_flex { display: flex; justify-content: space-between; gap: 50px; padding-top: 120px; } .top02_left { width: 50%; max-width: max-content; img { width: 100%; height: auto; } } .top02_right { width: 50%; max-width: 925px; padding-right: 30px; min-height: 745px; padding-bottom: 70px; } .top02_width725 { max-width: 725px; font-weight: 500; letter-spacing: 0.02em; padding-top: 12px; } .top02_title { margin-top: 12px; margin-bottom: 44px; line-height: 1.8em; } .top02_right_text { margin-bottom: 32px; line-height: 2.2em; } .top02_btn { margin-top: 56px; } /*********** top03 *************/ .top03 { background-color: #fdf9f9; --clamp40: clamp(32px, 1.9vw ,40px); --listwidth: calc(33.3% - var(--clamp40)); padding-top: 170px; padding-bottom: 170px; } .top03_title { margin-top: 8px; margin-bottom: 56px; line-height: 1.8em; } .top03_list_flex { display: flex; gap: calc(1.5 * var(--clamp40)); } .top03_listitem { width: var(--listwidth); } .top03_listimage { position: relative;; } .top03_picture { width: 100%; height: auto; } .top03_listimage_text { position: absolute; padding: 20px 26px 12px 8px; left: 0; bottom: 0; font-size: clamp(36px, 2.1vw , 45px); background-color: #fdf9f9; border-radius: 0 15px 0 0; letter-spacing: 0.05em; } .top03_listhead { font-size: clamp(26px, 1.5vw, 32px); margin-top: 36px; } .top03_listtext { line-height: 2.0em; margin-top: 24px; } /*********** top04 *************/ .top04_flex { background-color: #fdf9f9; display: flex; flex-direction: column; align-items: flex-end; } .top04_wrapper { background-color: #fff; width: 97%; padding-right: 3%; padding-top: 170px; padding-bottom: 170px; border-radius: 30px 0 0 0; } .top04_inner { display: flex; justify-content: space-between; } .top04_left { width: 50%; padding-right: 4%; min-height: 520px; padding-top: 32px; } .top04_title { margin-top: 24px; margin-bottom: 48px; } .top04_left_text { margin-bottom: 32px; line-height: 2.2em; } .top04_right { width: 50%; max-width: max-content; img { display: block; width: 100%; height: auto; } } .top04_btn { margin-top: 56px; } /*********** top05 *************/ .top05 { overflow-x: clip; position: relative; } .top05::before { content: ""; display: block; position: absolute; left: 0; top: 0; height: 100%; width: 3%; background-color: #fdf9f9; z-index: 0; } @supports not (overflow: clip) { .top05 { overflow-x: hidden; } } #slick-slide .slick-list { margin: 0 -10px; } #slick-slide .slick-slide { padding: 0 10px; } .top05 .slick-slide img { display: block; max-width: 100%; height: auto; } /*********** top06 *************/ .top06 { --clamp20: clamp(16px, 0.9vw ,20px); --listwidth: calc(33.3% - var(--clamp20)); } .top06_title { margin-top: 8px; margin-bottom: 60px; line-height: 1.8em; } .top06_list_flex { display: flex; gap: calc(1.5 * var(--clamp20)); } .top06_listitem { width: var(--listwidth); background-color: #fbf9fa; border-radius: 15px; padding: clamp(52px, 3vw, 60px); } .top06_listhead_wrapper { display: flex; justify-content: space-between; border-bottom: 1px solid #efedeb; padding-bottom: 30px; } .top06_listhead_kanji { font-size: 28px; font-weight: 500; margin-top: 5px; } .top06_listhead_english { font-size: 14px; font-weight: 500; margin-top: 4px; } .top06_text { margin-top: 30px; margin-bottom: 40px; line-height: 2em; letter-spacing: 0.05em; } .top06_btn.link_btn a { max-width: 100%; } /*********** top07 *************/ .top07 { padding-top: 170px; } .top07_title { margin-top: 8px; margin-bottom: 60px; line-height: 1.8em; } .top07_list_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 24px; } .top07_list_border { border-bottom: 1px solid #e5e5e5; padding-bottom: 170px; } .top07_listcard { display: block; width: 100%; height: auto; display: flex; align-items: center; justify-content: space-between; background-color: #fbf9fa; border-radius: 10px; padding: clamp(27px, 1.7vw, 34px) clamp(29px, 1.8vw, 35px); transition: 0.3s ease; } .top07_listcard, .top07_listcard:visited, .top07_listcard:focus { color: #222; } .top07_listcard:hover { color: #ff8078; } .top07_listcard_body { display: flex; font-size: clamp(20px, 1.1vw, 22px); align-items: center; line-height: 1.5em; font-weight: 500; padding-right: 0.8em; } .top07_listcard_head { margin-right: 0.8em; margin-top: 2px; font-size: clamp(18px, 1vw, 20px); } /*********** top08 *************/ .top08 { padding-top: 60px; } .top08_title { margin-top: 6px; line-height: 1.8em; } .top08_column_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 64px; margin-top: 64px; margin-bottom: 116px; } .top08_column_card { padding-bottom: 8px; position: relative; } .top08_column_card:hover .top08_column_title { color: #ff8078; } .top08_column_card:hover .top08_column_date { color: #ff8078; } .top08_column_picture { width: 100%; height: auto; display: block; margin-bottom: 30px; } .top08_column_category { display: inline-block; font-size: 14px; font-weight: 500; line-height: 1em; padding: 7px 14px; border-radius: 14px; background-color: #faeadf; color: #ff8078; margin-bottom: 24px; } .top08_column_title { font-size: 18px; font-weight: 500; margin-bottom: 16px; transition: 0.3s ease; } .top08_column_date { font-size: 15px; transition: 0.3s ease; } .top08_column_link { display: block; position: absolute; width: 100%; height: 100%; } .top08_btn { width: 260px; } .top08_wrapper { display: flex; justify-content: space-between; align-items: center; } .top08_head { width: fit-content; } /*********** top_articles *************/ .top_articles { background-color: #fdf9f9; padding-top: 130px; padding-bottom: 130px; } .top_articles_wrapper { display: flex; justify-content: space-between; gap: 6%; } .top_articles_block { width: 47%; } .top_articles_titlesub { font-size: clamp(16px, 1.6vw, 21px); font-weight: 400; letter-spacing: 0.04em; margin-bottom: 10px; } .top_articles_title { font-size: clamp(25px, 3.4vw, 38px); font-weight: 500; letter-spacing: 0.02em; margin-bottom: 50px; } .top_articles_list { border-top: 1px solid #e5e5e5; } .top_articles_listitem { display: block; padding: 30px 20px; border-bottom: 1px solid #e5e5e5; transition: 0.3s ease; font-weight: 600; position: relative; } .top_articles_listitem::after { content: ""; display: inline-block; background: url(../images/arrow_right.webp) no-repeat center / 100%; width: 17px; height: 14px; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); } .top_articles_listitem_date { font-size: 15px; margin-bottom: 8px; } .top_articles_listitem_title { font-size: 18px; } .top_articles_link { display: flex; justify-content: flex-end; margin-top: 35px; } .top_articles_linkbutton { display: inline-block; width: fit-content; padding-left: 39px; position: relative; transition: 0.3s ease; font-weight: 600; } .top_articles_linkbutton::before { content: ""; display: inline-block; background: url(../images/arrow_footer.webp) no-repeat center / 100%; width: 23px; height: 23px; position: absolute; left: 0; top: 50%; transform: translateY(-48%); } .top_articles_listitem, .top_articles_listitem:visited, .top_articles_listitem:focus, .top_articles_linkbutton, .top_articles_linkbutton:visited, .top_articles_linkbutton:focus { color: #222; } .top_articles_listitem:hover, .top_articles_linkbutton:hover { color: #ff8078; } /*********** top09map *************/ .top09 { padding-top: 132px; padding-bottom: 132px; } .top09_inner { display: flex; } .top09_left { width: 47%; padding-right: 5%; padding-left: 1.2%; } .top09_adress { margin-top: 48px; margin-bottom: 36px; p { line-height: 2em; } } .top09_phone { margin-bottom: 42px; display: block; max-width: 357px; height: auto; img { display: block; width: 100%; height: auto; } } .top09_calendar_table { font-weight: 600; margin-bottom: 18px; border-top: 1px solid #e5e5e5; th, td { padding: 20px; } } .top09_calendar_table tr { border-bottom: 1px solid #e5e5e5; } .top09_calendar_headcell { width: fit-content; white-space: nowrap; } .top09_calender_comment { font-size: 14px; margin-top: 10px; padding-left: 18px; } .top09_calendar_yellowback { background-color: #fff6ef; } .top09_right { width: 53%; padding-right: 1.9%; position: relative; } .top09_map { width: 100%; height: auto; } .top09_map_image { display: block; width: 100%; height: auto; } .top09_maptext { position: absolute; top: -28px; right: -2px; border-radius: 50%; box-shadow: 0px 0px 14px -6px #c9c0c0; background-color: #fff; padding: 44px; text-align: center; } .top09_maptext_head { font-size: 21px; margin-bottom: 10px; } .top09_maptext_body { font-size: 28px; line-height: 1.4em; color: #ec6158; } /*********** footer image *************/ .top10_image { display: block; width: 100%; height: auto; } /*********** footer *************/ .footer { padding-top: 100px; padding-bottom: 50px; } .footer_inner { display: flex; } .footer_text { width: 50%; padding-left: 5.5%; padding-right: 5.5%; } .footer_logo { display: block; max-width: 330px; height: auto; } .footer_adress { font-weight: 500; line-height: 2em; margin-top: 24px; } .footer_nav { display: flex; justify-content: space-between; width: 50%; padding-left: 1.6%; padding-right: 3.2%; } .footer_nav_arrow { font-weight: 500; line-height: 1em; } .footer_nav_arrow .footer_nav_link::before { content: ""; display: inline; background : url('../images/arrow_footer.webp') no-repeat center / 100%; width: 23px; height: 23px; margin-right: 14px; } .footer_nav_line { font-weight: 500; font-size: 14px; line-height: 1em; } .footer_nav_line .footer_nav_link::before { content: ""; display: inline; width: 8px; height: 1px; background-color: #ff8078; margin-left: 8px; margin-right: 10px; } .footer_nav_link { display: flex; align-items: center; color: #222; transition: 0.3s ease; } a.footer_nav_link:visited { color: #222; } a.footer_nav_link:hover { color: #ff8078; } .copyright { text-align: center; font-size: 14px; margin-top: 180px; } /*********** about *************/ .about_concept { margin-top: 240px; padding-bottom: 70px; position: relative; display: flex; justify-content: flex-end; } .about_concept_image { --clamp80: clamp(64px, 4.1vw, 80px); width: 42.5%; max-width: 680px; position: absolute; left: var(--clamp80); top: calc(-1 * var(--clamp80)); z-index: 30; img { width: 100%; height: auto; display: block; } } .about_concept_textbox { position: relative; width: 64.6%; max-width: 1034px; z-index: 25; padding: 70px 6% 100px 17.6%; background-color: #FDF9F9; } .about_concept_title { margin-top: 10px; } .about_concept_text { margin-top: 64px; display: flex; flex-direction: column; gap: 35px; } .about_concept_textline { line-height: 2.2em; letter-spacing: 0.02em; } .about_intro { display: flex; justify-content: flex-end; } .about_intro_wrapper { width: 97%; padding-right: 3%; background-color: #FDF9F9; border-radius: 20px 0 0 0; padding-top: 160px; padding-bottom: 170px; } .about_intro_upper { display: flex; justify-content: space-between; margin-top: 70px; } .about_intro_textbox { width: 55%; } .about_intro_title { margin-top: 15px; } .about_intro_text { line-height: 2.2em; margin-bottom: 35px; letter-spacing: 0.02em; } .about_intro_sign { text-align: right; margin-top: 45px; } .about_intro_image { width: 37%; max-width: 530px; img { width: 100%; height: auto; display: block; } } .about_intro_lower { margin: 100px auto 0; width: 90%; display: flex; justify-content: space-between; } .about_intro_card { width: 46.1%; background-color: #fff; border-radius: 15px; padding: 60px 4.5%; } .about_intro_card_title { font-size: clamp(25px, 1.4vw, 28px); font-weight: 500; letter-spacing: 0.02em; margin-bottom: 5px; } .about_intro_card_titlesub { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; margin-bottom: 40px; } .about_intro_card_headline { font-size: 20px; font-weight: 500; letter-spacing: 0.02em; margin-bottom: 15px; } .about_intro_card_listitem::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: #FF8078; margin-right: 4px; position: relative; top: -3px; } .about_intro_card_padding { padding-left: calc(8px + 5em); margin-bottom: 10px; } .about_intro_card_list { display: grid; grid-template-columns: repeat(2, 1fr);; gap: 0 6%; } .about_intro_card_listitem { margin-bottom: 10px; } .about_features { margin-top: 160px; padding-bottom: 160px; } .about_features_title { margin-top: 15px; margin-bottom: 70px; } .about_features_list { display: flex; flex-direction: column; gap: 120px; } .about_features_listcard { display: flex; justify-content: space-between; } .about_features_listimage { width: 47%; img { width: 100%; height: auto; display: block; } } .about_features_textbox { width: 47%; padding-top: 26px; padding-bottom: 26px; } .about_features_number { font-size: clamp(39px, 2.3vw, 45px); font-weight: 500; letter-spacing: 0.02em; margin-bottom: 20px; } .about_features_texthead { font-size: clamp(26px, 1.5vw, 30px); font-weight: 500; letter-spacing: 0.02em; margin-bottom: 60px; } .about_features_text { line-height: 2.2em; margin-bottom: 50px; letter-spacing: 0.02em; } .about_features_listcard_buttonlist { display: flex; justify-content: space-between; } .about_features_listcard_button { width: 46%; } .about_features_listcard_button.link_btn a { max-width: 290px; } .about_clinic { padding-bottom: 160px; } .about_clinic_title { margin-top: 10px; margin-bottom: 70px; } .about_clinic_list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .about_clinic_listitem { position: relative; display: block; } .about_clinic_listimage { img { width: 100%; height: auto; display: block; } } .about_clinic_listtext { position: absolute; padding: 28px 28px 28px 26px; background-color: #fff; font-size: 22px; font-weight: 500; border-radius: 0 15px 0 0; z-index: 20; left: 0; bottom: 0; } /*********** Dermatology *************/ .medical_cases { margin-top: 160px; } .medical_cases_titlesub { margin-bottom: 15px; } .medical_cases_title { margin-bottom: 70px; } .medical_cases_text { line-height: 2.2em; letter-spacing: 0.02em; } .medical_cases_list { margin-top: 130px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 2vw, 40px); } .medical_cases_listcard { display: flex; flex-direction: column; height: 100%; padding: 60px 5.7%; border-radius: 15px; background: #FBF9FA; } .medical_cases_listcard_title { font-size: 30px; font-weight: 500; margin-bottom: 40px; } .medical_cases_listcard_text { line-height: 2.2em; letter-spacing: 0.02em; } .medical_cases_listcard_button { margin-top: auto; padding-top: 30px; } .medical_cases_listcard_button.link_btn a { max-width: 354px; } .medical_guide { margin-top: 160px; margin-bottom: 170px; } .medical_guide_title { margin-top: 15px; margin-bottom: 70px; } .medical_guide_list { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(45px, 2.5vw, 50px); } .medical_guide_listcard { display: flex; justify-content: space-between; padding: 40px 10% 40px 5.7%; border-radius: 15px; background: #FBF9FA; gap: 8.5%; color: #222; transition: 0.3s ease; } .medical_guide_listcard:visited { color: #222; } .medical_guide_listcard:hover { color: #ff8078; } .medical_guide_listimage { width: 46%; img { width: 100%; height: auto; display: block; } } .medical_guide_inner { width: 44%; display: flex; justify-content: space-between; align-items: center; } .medical_guide_listcard_title { font-size: 28px; font-weight: 500; margin-bottom: 5px; } .medical_guide_listcard_titlesub { font-size: 14px; font-weight: 500; } .medical_guide_listcard_icon { width: 40px; height: auto; img { width: 100%; height: auto; display: inline-block; } } /*********** Plastic surgery *************/ .surgery_treatment { margin-top: 160px; padding-top: 160px; padding-bottom: 125px; background-color: #FDF9F9; } .surgery_treatment_title { margin-top: 15px; } .surgery_treatment_title_rubi { font-size: 20px; font-weight: 500; } .surgery_treatment_inner { margin-top: 70px; display: flex; justify-content: space-between; gap: 40px; } .surgery_treatment_image { width: 47%; img { width: 100%; height: auto; display: block; } } .surgery_treatment_textbox { width: 47%; padding-top: 43px; } .surgery_treatment_text { margin-bottom: 35px; line-height: 2.2em; letter-spacing: 0.02em; } /*********** Kampo *************/ .kampo_about { margin-top: 160px; padding-bottom: 160px; } .kampo_about_title { margin-top: 15px; } .kampo_about_inner { margin-top: 70px; display: flex; justify-content: space-between; align-items: center; gap: 40px; } .kampo_about_image { width: 47%; img { width: 100%; height: auto; display: block; } } .kampo_about_textbox { width: 47%; padding-top: 20px; } .kampo_about_text { margin-bottom: 35px; line-height: 2.2em; letter-spacing: 0.02em; } .kampo_between { padding-top: 160px; padding-bottom: 160px; background-color: #FDF9F9; } .kampo_between_inner { display: flex; justify-content: space-between; gap: 40px; align-items: center; } .kampo_between_textbox { width: 47%; padding-top: 40px; } .kampo_between_title { margin-top: 15px; margin-bottom: 70px; } .kampo_between_text { margin-bottom: 35px; line-height: 2.2em; letter-spacing: 0.02em; } .kampo_between_image { width: 47%; img { width: 100%; height: auto; display: block; } } .top07.kampo_top07 { padding-top: 160px; } .kampo_alter { display: flex; justify-content: flex-end; background-color: #FDF9F9; } .kampo_alter_wrapper { width: 97%; padding-right: 3%; padding-top: 160px; padding-bottom: 110px; border-radius: 20px 0 0 0; background-color: #fff; } .kampo_alter_title { margin-top: 15px; margin-bottom: 70px; } .kampo_alter_text { margin-bottom: 70px; line-height: 2.2em; letter-spacing: 0.02em; } .kampo_alter_list { display: flex; flex-direction: column; gap: 120px; } .kampo_alter_listcard { display: flex; justify-content: space-between; gap: 40px; align-items: center; } .kampo_alter_listcard_image { width: 47%; img { width: 100%; height: auto; display: block; } } .kampo_studybox .kampo_alter_listcard_image { padding-bottom: 120px; } .kampo_alter_listcard_textbox { width: 47%; padding-top: 20px; } .kampo_studybox .kampo_alter_listcard_textbox { padding-top: 0; } .kampo_alter_listcard_number { font-size: clamp(36px, 3.6vw, 45px); font-weight: 500; letter-spacing: 0.04em; } .kampo_alter_listcard_title { font-size: clamp(26px, 2.8vw, 32px); font-weight: 500; letter-spacing: 0.02em; margin-top: 15px; margin-bottom: 60px; } .kampo_alter_listcard_text { margin-bottom: 35px; line-height: 2.2em; letter-spacing: 0.02em; } .kampo_alter_listcard_study { background-color: #FBF9FA; padding: 20px 40px; margin-bottom: 30px; } .kampo_alter_listcard_studytext { line-height: 2.6em; letter-spacing: 0.02em; font-size: 16px; } .listcard_reverse { flex-direction: row-reverse; } /*********** Acne *************/ .acne_about { margin-top: 160px; } .acne_about_title { margin-top: 15px; margin-bottom: 60px; } .acne_about_text { line-height: 2.2em; letter-spacing: 0.02em; margin-bottom: 70px; } .acne_about_detail { padding: 60px 40px; background-color: #FBF9FA; } .acne_about_detail.acne_about_detail_nail { padding: 60px 5.7%; } .acne_about_detail_title { font-size: 32px; margin-bottom: 40px; font-weight: 500; letter-spacing: 0.04em; color: #ff8078; border-bottom: 1px solid #ff8078; } .acne_about_detail_text { line-height: 2.2em; letter-spacing: 0.02em; } .acne_about_detail_titlesub { font-size: 22px; margin-top: 35px; margin-bottom: 4px; font-weight: 500; letter-spacing: 0.04em; color: #ff8078; } .acne_type { margin-top: 130px; padding-bottom: 160px; } .acne_type_title { margin-bottom: 40px; font-size: 32px; font-weight: 500; letter-spacing: 0.04em; } .acne_type_list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 70px 50px; } .acne_type_listcard_image { width: 100%; position: relative; margin-bottom: 40px; img { width: 100%; height: auto; display: block; } } .acne_type_listcard_imageindex { position: absolute; left: 0; bottom: 0; padding: 20px 32px; font-size: 45px; font-weight: 500; letter-spacing: 0.04em; z-index: 20; background-color: #fff; border-radius: 0 15px; } .acne_type_listcard_title { font-size: 28px; font-weight: 500; margin-bottom: 40px; letter-spacing: 0.04em; } .acne_type_listcard_text { line-height: 2.2em; letter-spacing: 0.02em; } .acne_cause { padding-top: 160px; padding-bottom: 160px; background-color: #FDF9F9; } .acne_cause_inner { display: flex; justify-content: space-between; align-items: center; gap: 40px; } .acne_cause_image { width: 47%; img { width: 100%; height: auto; display: block; } } .acne_cause_textbox { width: 47%; padding-bottom: 20px; } .acne_cause_title { font-size: 32px; font-weight: 500; letter-spacing: 0.04em; margin-bottom: 40px; } .acne_cause_text { line-height: 2.2em; letter-spacing: 0.02em; } .acne_cases { background-color: #fdf9f9; display: flex; flex-direction: column; align-items: flex-end; } .medical_cases.acne_cases { margin-top: 0; } .acne_cases_wrapper { background-color: #fff; width: 97%; padding-right: 3%; padding-top: 160px; border-radius: 20px 0 0 0; } .acne_cases_title { font-size: 32px; letter-spacing: 0.04em; font-weight: 500; margin-bottom: 70px; } .acne_cases_list.medical_cases_list { margin-top: 70px; } .acne_selfcare { display: flex; justify-content: flex-end; background-color: #FDF9F9; } .acne_selfcare_wrapper { padding-top: 160px; background-color: #fff; width: 97%; padding-right: 3%; } .acne_selfcare_title { font-size: 32px; font-weight: 500; letter-spacing: 0.04em; margin-bottom: 6px; } .acne_selfcare_titlesub { font-size: 18px; font-weight: 500; letter-spacing: 0.04em; } .acne_selfcare_list { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 2vw, 40px); padding-bottom: 130px; border-bottom: 1px solid #E5E5E5; } .acne_selfcare_listcard { display: flex; flex-direction: column; height: 100%; padding: 60px 8.5%; border-radius: 15px; background: #FBF9FA; } .acne_selfcare_listcard_title { font-size: 28px; font-weight: 500; letter-spacing: 0.02em; border-bottom: 1px solid #E5E5E5; vertical-align: middle; padding-bottom: 20px; margin-bottom: 40px; } .acne_selfcare_listcard_head { font-size: 34px; font-weight: 500; margin-right: 0.8em; letter-spacing: 0.02em; position: relative; top: 2px; } .acne_selfcare_listcard_text { line-height: 2.2em; letter-spacing: 0.02em; } .acne_selfcare_text { margin-top: 40px; line-height: 2.2em; letter-spacing: 0.02em; } .acne_treatment { display: flex; justify-content: flex-end; background-color: #FDF9F9; } .acne_treatment_wrapper { padding-top: 130px; padding-bottom: 160px; background-color: #fff; width: 97%; padding-right: 3%; } .acne_treatment_list { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(27px, 1.5vw, 30px); } .acne_treatment_listcard { display: flex; flex-direction: column; height: 100%; padding: 40px 8.5%; border-radius: 15px; background: #FBF9FA; } .acne_scars { padding-top: 160px; background-color: #FDF9F9; } .acne_scars_title { margin-top: 15px; margin-bottom: 60px; } .acne_scars_text { line-height: 2.2em; letter-spacing: 0.02em; margin-bottom: 70px; } .acne_scars_list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(27px, 1.5vw, 30px); } .acne_scars_listcard_image { width: 100%; position: relative; margin-bottom: 40px; img { width: 100%; height: auto; display: block; } } .acne_scars_listcard_imageindex { position: absolute; left: 0; bottom: 0; padding: 20px 32px; font-size: 45px; font-weight: 500; letter-spacing: 0.04em; z-index: 20; background-color: #fff; border-radius: 0 15px; } .acne_scars_listcard_title { font-size: 28px; font-weight: 500; margin-bottom: 40px; letter-spacing: 0.04em; } .acne_scars_listcard_text { line-height: 2.2em; letter-spacing: 0.02em; } .acne_faq { padding-top: 160px; padding-bottom: 160px; background-color: #FDF9F9; } .acne_faq_title { margin-top: 15px; margin-bottom: 60px; } .acne_faq_list { background-color: #fff; padding: 80px 5.5%; } .acne_faq_listitem { width: 78%; max-width: 1000px; margin: 0 auto; border-bottom: 1px solid #E5E5E5; } .acne_faq_listhead { position: relative; line-height: 2.2em; letter-spacing: 0.02em; font-weight: 600; vertical-align: middle; display: flex; align-items: center; padding: 25px 61px 25px 25px; } .acne_faq_listhead, .acne_faq_listhead:hover, .acne_faq_listhead:focus, .acne_faq_listhead:visited { color: #222; } .acneListMinus { position: absolute; right: 25px; top: 50%; font-size: 24px; transform: translateY(-50%); color: #EC6158; font-weight: bold; } .acne_faq_listhidden { line-height: 2.2em; letter-spacing: 0.02em; vertical-align: middle; align-items: center; padding-left: 25px; padding-right: 45px; } .acne_faq_listhead::before { content: ""; display: inline-block; width: 36px; height: 36px; background: url("../images/faq_q.webp") center /100% no-repeat; margin-right: 20px; } .acne_faq_listhidden::before { content: ""; display: inline-block; width: 36px; height: 36px; background: url("../images/faq_a.webp") center /100% no-repeat; margin-right: 20px; } .acne_faq_listtext { display: inline-block; width: calc(100% - 56px); } .acneListSub{ display: flex; /* 常にflexにしておく */ overflow: hidden; max-height: 0; opacity: 0; pointer-events: none; padding-top: 0; padding-bottom: 0; transition: max-height 360ms cubic-bezier(.4, 0, .2, 1), opacity 360ms cubic-bezier(.4, 0, .2, 1), padding 360ms cubic-bezier(.4, 0, .2, 1); will-change: max-height, opacity, padding; } .acneListSub.is-open{ max-height: 1000px; opacity: 1; pointer-events: auto; padding-top: 25px; padding-bottom: 25px; } /*********** Access *************/ .access_map { margin-top: 160px; margin-bottom: 160px; } .access_map_title { margin-top: 15px; margin-bottom: 70px; } .access_map_body { display: flex; justify-content: space-between; gap: 8.5%; } .access_map_adress { width: 38%; padding-top: 14px; } .access_map_text { line-height: 2.2em; letter-spacing: 0.02em; } .access_map_table { margin-top: 30px; display: grid; grid-template-columns: 28% 72%; width: 100%; } .access_map_table_head { display: flex; align-items: center; padding: 15px 20px; background-color: #FBF9FA; border-bottom: 1px solid #E5E5E5; line-height: 2.2em; letter-spacing: 0.02em; font-weight: 600; } .access_map_table_body { display: flex; align-items: center; padding: 15px 20px; border-bottom: 1px solid #E5E5E5; line-height: 2.2em; letter-spacing: 0.02em; font-weight: 600; } .access_map_image { width: 50%; img { width: 100%; height: auto; display: block; } } .access_parking { margin-top: 160px; margin-bottom: 160px; } .access_parking_title { margin-top: 15px; margin-bottom: 70px; } .access_parking_images { display: flex; justify-content: space-between; gap: 6%; } .access_parking_map { width: 60%; max-width: 860px; img { width: 100%; height: auto; display: block; } } .access_parking_photo { width: 34%; max-width: 480px; position: relative; margin-top: 34px; img { width: 100%; height: auto; display: block; } } .access_parking_photo_text { position: absolute; top: 0; left: 0; z-index: 20; padding: 28px 24px; background-color: #fff; color: #FF8078; font-size: 22px; font-weight: 500; border-radius: 0 0 15px 0; } /*********** Column *************/ .category_body { margin-top: 160px; } .category_body_wrapper { display: flex; justify-content: space-between; gap: 40px; } .category_block { width: 75%; max-width: 1192px; min-width: 954px; } .category_list { margin-bottom: 120px; } .category_list_head { display: flex; justify-content: space-between; gap: 160px; padding-bottom: 40px; border-bottom: 1px solid #E5E5E5; align-items: center; } .category_list_title { font-size: 32px; font-weight: 500; letter-spacing: 0.04em; color: #FF8078; width: fit-content; vertical-align: middle; } .category_list_more { font-size: 20px; letter-spacing: 0.04em; font-weight: 600; padding-right: 60px; position: relative; width: fit-content; vertical-align: middle; } .category_list_more::after { content: ""; display: inline-block; width: 30px; height: 15px; background: url("../images/arrow_column.webp") center /100% no-repeat; position: absolute; right: 0; top: 50%; transform: translateY(-46%); } .category_listindex { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 35px; padding-top: 70px; } .category_listcard_link { padding-bottom: 40px; height: 100%; } .category_listcard_image { img { width: 100%; height: auto; display: block; } } .category_listcard_taxonomy { color: #FF8078; font-size: 14px; letter-spacing: 0.02em; max-width: 100%; width: fit-content; padding: 8px 14px; border-radius: 20px; background-color: #FAEADF; margin-top: 30px; } .category_listcard_title { font-size: 18px; letter-spacing: 0.02em; margin-top: 30px; } .category_listcard_date { font-size: 16px; letter-spacing: 0.02em; margin-top: 20px; } .category_index { width: 17.5%; max-width: 280px; min-width: 273px; } .category_index_finder_head, .category_index_archive_head { color: #EC6158; background: #FDF9F9; font-size: 18px; letter-spacing: 0.04em; vertical-align: middle; padding: 20px; position: relative; } .category_index_finder_head::after { content: ""; display: inline-block; width: 46px; height: 46px; background: url("../images/finder.webp") center /100% no-repeat; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); } .category_index_finder_list { padding-left: 20px; } .category_index_finder_listitem .category_index_link::after { content: ""; display: inline-block; width: 21px; height: 8px; background: url("../images/arrow_column_list.webp") center /100% no-repeat; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .category_index_archive { margin-top: 80px; } .category_index_archive_head::after { content: ""; display: inline-block; width: 46px; height: 46px; background: url("../images/folder.webp") center /100% no-repeat; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); } .category_index_archive_list { padding-left: 20px; max-height: 300px; overflow-y: auto; } .category_list_more, .category_listcard_link, .category_index_link { transition: 0.3s ease; } .category_list_more, .category_list_more:focus, .category_list_more:visited, .category_listcard_link, .category_listcard_link:focus, .category_listcard_link:visited, .category_index_link, .category_index_link:focus, .category_index_link:visited { display: block; color: #222; } .category_list_more:hover, .category_listcard_link:hover, .category_index_link:hover { color: #ff8078; } .category_index_link { padding-top: 15px; padding-bottom: 15px; letter-spacing: 0.04em; border-bottom: 1px solid #E5E5E5; position: relative; } /*********** Single *************/ .single_body { margin-bottom: 170px; } .single_article { border-radius: 20px; background-color: #FDF9F9; padding: 80px 6.6%; } .single_article_title { font-size: 28px; font-weight: bold; letter-spacing: 0.02em; } .single_article_property { margin-top: 40px; margin-bottom: 40px; display: flex; align-items: center; } .single_article_date { font-size: 16px; letter-spacing: 0.02em; margin-right: 15px; } .single_article_taxonomy { color: #FF8078; font-size: 14px; letter-spacing: 0.02em; max-width: 100%; width: fit-content; padding: 8px 14px; border-radius: 20px; background-color: #FAEADF; } .single_article_image { margin-bottom: 30px; img { width: 100%; height: auto; display: block; } } .single_article_text { line-height: 2.2em; letter-spacing: 0.02em; margin-top: 20px; } .single_article_h2 { font-size: 24px; letter-spacing: 0.02em; padding: 20px 24px; background-color: #fff; border-bottom: 2px solid #FF8078; margin-top: 50px; } .single_article_h3 { font-size: 24px; letter-spacing: 0.02em; padding: 12px 0; border-bottom: 1px solid #FF8078; margin-top: 50px; } .single_author { margin-top: 130px; } .single_author_title { font-size: 28px; letter-spacing: 0.02em; margin-bottom: 15px; } .single_author_titlesub { font-size: 15px; letter-spacing: 0.02em; } .single_author_body { margin-top: 70px; display: flex; justify-content: space-between; gap: 2.5%; } .single_author_image { width: 22%; } .single_author_image_photo { img { width: 100%; height: auto; display: block; } } .single_author_image_name { font-size: 22px; letter-spacing: 0.02em; margin-bottom: 10px; margin-top: 40px; } .single_author_image_position { letter-spacing: 0.02em; } .single_author_career { width: 35%; p { letter-spacing: 0.02em; } .about_intro_card_headline { font-weight: 600; } } .single_author_conference { width: 38%; p, li { letter-spacing: 0.02em; } } .single_author_career_title, .single_author_conference_title { font-size: 22px; letter-spacing: 0.02em; padding-bottom: 20px; border-bottom: 1px solid #E5E5E5; margin-bottom: 40px; } .single_author_career_headline { font-size: 20px; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 15px; } .single_author_career_listitem { margin-bottom: 10px; padding-left: 10px; position: relative; } .single_author_career_padding { padding-left: calc(10px + 4.6em); margin-bottom: 10px; } .single_author_career_listitem::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: #FF8078; position: absolute; left: 0; top: 0.6em; } .single_author_career_list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 6%; } /*********************************************************** しみ・そばかす ***********************************************************/ /************************/ .blemish_media_block { align-items: center; } .blemish_media_text { width: 50%; padding-bottom: 0; } .blemish_media_image { width: 42.2%; margin-left: auto; } .blemish_laser_block { align-items: flex-start; } .blemish_text_panel { margin-top: 40px; padding: 50px 5.7%; border-radius: 15px; background-color: #FBF9FA; } .blemish_panel_text { margin-top: 0; } .blemish_panel_text_last { margin-top: 24px; } .blemish_point_list { margin-top: 30px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .blemish_keycard { display: flex; align-items: center; justify-content: center; min-height: 96px; padding: 24px 8%; border: 1px solid #F0E4E2; border-radius: 14px; background-color: #fff; line-height: 1.9em; letter-spacing: 0.02em; font-weight: 500; text-align: center; } .blemish_flow_panel { margin-top: 50px; } .blemish_flow_title { margin-top: 0; } .blemish_flow_list { margin-top: 30px; } .blemish_flow_card { padding: 34px 8.5%; border: 1px solid #F0E4E2; background-color: #fff; } .blemish_flow_number { font-size: clamp(24px, 2vw, 30px); line-height: 1; letter-spacing: 0.04em; padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid #EAE3E1; } .blemish_consult_list { margin-top: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .blemish_consult_panel { width: 78%; margin-left: auto; margin-right: auto; } .blemish_consult_text { margin-bottom: 0; } .blemish_treatment_list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .blemish_consult_list { grid-template-columns: repeat(2, minmax(0, 1fr)); } /*********************************************************** やけどのケガ ***********************************************************/ /************************/ .burn_type_list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .burn_type_detail { padding: 20px 7%; border: 1px solid #FFD8D3; border-radius: 15px; background-color: #FBF9FA; } .burn_type_detail_title { display: inline-block; padding: 6px 16px; font-size: 20px; font-weight: 500; letter-spacing: 0.04em; border-radius: 999px; background-color: #fff; } .burn_type_detail_text { margin-top: 16px; line-height: 2.1em; letter-spacing: 0.02em; } .burn04_panel { padding: 54px 5.7%; border-radius: 20px; background-color: #FBF9FA; } .burn04_text { line-height: 2.2em; letter-spacing: 0.02em; } .burn04_label { font-size: 22px; font-weight: 500; letter-spacing: 0.04em; } .burn04_list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; } .burn04_card { min-height: 118px; padding: 30px 7%; border: 1px solid #FFD8D3; border-radius: 15px; background-color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; } .burn04_card_text { font-size: 22px; font-weight: 500; line-height: 1.8em; letter-spacing: 0.04em; } /* PC用 ------------------------------------------------------------*/ @media only screen and (max-width: 1440px) { .single_author_career_list { grid-template-columns: repeat(1, 1fr); gap: 0; } } @media only screen and (max-width: 1200px) { #logo a { display: inline-block; width: clamp(264px, 17.1vw ,330px); img { width: 100%; height: auto; display: inline-block; } } .h_nav > ul a, .headerspan { letter-spacing: 0.05em; font-size: 14px; padding: 8px; } .header_arrow img { width: 18px; height: 18px; } .h_on { font-size: 12px; } /*********** (<1200px) top mainview *************/ .fv_title { font-size: clamp(51px, 3.5vw, 84px); } .fv_calendar_headline { margin-right: 26px; font-size: 18px; } .fv_calendar { display: flex; padding: 14px 4px 32px 26px; bottom: clamp(36px, 2.9vw, 60px); } .fv_calendar_table { font-size: 16px; margin-bottom: 16px; } .fv_calendar_inner th, .fv_calendar_inner td { padding: 13px; } .fv_calender_comment { font-size: 15px; padding-left: 14px; } /*********** (<1200px) top *************/ .newslist { font-size: 17px; } .scrolltext { font-size: clamp(148px, 9.6vw, 220px); } .top02_right_text { font-size: 17px; } .top03_listtext { font-size: 17px; } .top04_left_text { font-size: 17px; } .top06_text { font-size: 17px; } .top07_listcard_body { font-size: clamp(18px, 1vw, 20px); } .top07_listcard_head { font-size: clamp(16px, 0.9vw, 18px); } .top08_column_grid { gap: 28px 44px; } .top09_inner { justify-content: space-between; } .top09_left { width: 54%; } .top09_right { width: 46%; } .footer_nav_arrow { font-size: 15px; letter-spacing: 0.05em; } .footer_nav_line { letter-spacing: 0.05em; } .footer_nav_arrow .footer_nav_link::before { margin-right: 10px; } /*********** (<1200px) category *************/ .category_listindex { grid-template-columns: repeat(2, 1fr); gap: 40px 60px; } .category_block { width: 70%; max-width: none; min-width: auto; } .category_index { width: 26%; max-width: none; min-width: auto; } /*********** (<1200px) single *************/ .single_author_body { gap: 0; flex-wrap: wrap; margin-top: 40px; } .single_author_image { width: 100%; margin-bottom: 40px; padding-left: 4%; } .single_author_image_wrapper{ width: 30%; } .single_author_career { width: 48%; margin-right: 4%; } .single_author_conference { width: 48%; } } @media only screen and (max-width: 1024px) { #spicon { display: flex; } .header { height: 108px; } .h_right { display: none; } .fv_bg { padding-bottom: 52px; } .fv_mt { padding-bottom: 276px; margin-top: 108px; } .fv_calendar { top: 100%; right: auto; bottom: auto; padding : 32px 0; } .fv_calendar_headline { display: none; } .fv_chalendar_hours_sp::before { content: ""; display: inline-block; width: 21px; height: 21px; background : url('../images/hours.webp') no-repeat center / cover; margin-right: 2px; transform: translate(-4px, 2px); } /*********** (<1024px) mainview *************/ .breadcrumb { padding-right: 3.3%; } .mainview { margin-top: 108px; padding-top: 20px; } .mainview_text { margin-bottom: 30px; } /*********** (<1024px) top01 *************/ .top01_flex { flex-direction: column; padding-top: 94px; } .top01_left { width: 100%; min-height: auto; text-align: center; } .newslist { font-size: 15px; } .top01_btn { position: relative; width: 260px; left: auto; bottom: auto; margin: 50px auto 0; } /*********** (<1024px) scroll text *************/ .textmove { padding-top: 36px; } .scrolltext { font-size: clamp(118px, 6.5vw, 134px); } /*********** (<1024px) top02 *************/ .top02_flex { padding-top: 60px; flex-direction: column; gap: 40px; } .top02_left { width: 50%; max-width: none; margin: 0 auto; } .top02_right { width: 80%; max-width: none; padding-right: 0; min-height: auto; padding-bottom: 60px; margin: 0 auto; } .top02_right_text { font-size: 15px; } .top02_title { margin-bottom: 36px; } .top02_right_text { margin-bottom: 24px; } .top02_btn { margin-top: 48px; } /*********** (<1024px) top03 *************/ .top03 { padding-top: 64px; padding-bottom: 64px; } .top03_title { margin-bottom: 40px; } .top03_listtext { font-size: 15px; } .top03_list_flex { gap: var(--clamp40); } .top03_listimage_text { font-size: clamp(28px, 1.6vw, 36px); } .top03_listhead { font-size: clamp(23px, 1.3vw, 26px); } /*********** (<1024px) top04 *************/ .top04_wrapper { padding-top: 68px; padding-bottom: 68px; } .top04_left { width: 56%; min-height: auto; padding-top: 16px; } .top04_right { width: 44%; } .top04_title { margin-top: 16px; margin-bottom: 28px; } .top04_left_text { font-size: 15px; margin-bottom: 24px; } .top04_btn { margin-top: 36px; } /*********** (<1024px) top06 *************/ .top06 { padding-top: 68px; } .top06_title { margin-bottom: 40px; } .top06_listhead_kanji { font-size: 24px; } .top06_listhead_english { font-size: 13px; } .top06_text { font-size: 15px; } .top06_list_flex { flex-direction: column; gap: 40px; } .top06_listitem { width: 68%; padding: clamp(52px, 3vw, 60px); margin: 0 auto; } .top06_btn.link_btn a { max-width: 260px; margin-left: auto; margin-right: auto; } /*********** (<1024px) top07 *************/ .top07 { padding-top: 80px; } .top07_title { margin-bottom: 40px; } .top07_list_grid { grid-template-columns: repeat(2, 1fr); gap: 20px; padding-bottom: 64px; } /*********** (<1024px) top08 *************/ .top08 { padding-bottom: 68px; } .top08_title { margin-bottom: 40px; } .top08_column_grid { grid-template-columns: repeat(2, 1fr); gap: 36px 60px; margin-top: 48px; margin-bottom: 60px; } /************ (<1024px) top09 ************/ .top09 { padding-top: 68px; padding-bottom: 92px; } .top09_inner { flex-direction: column; } .top09_left { width: fit-content; padding-right: 0; padding-left: 0; margin: 0 auto 84px; } .top09_right { width: 68%; padding-right: 0; margin: 0 auto; } .top09_adress { margin-top: 0; } .top09_maptext { right: -40px; padding: 38px; } .top09_maptext_head { font-size: 18px; margin-bottom: 10px; } .top09_maptext_body { font-size: 24px; } /*********** (<1024px) footer *************/ .footer { padding-top: 80px; } .footer_inner { flex-direction: column; } .footer_text { width: fit-content; padding-left: 0; padding-right: 0; margin: 0 auto 68px; } .footer_nav { width: 80%; padding-left: 0; padding-right: 0; margin: 0 auto; } .footer_nav .mt-20 { margin-top: 20px; } .footer_nav .mt-30 { margin-top: 16px; } .copyright { margin-top: 80px; } /*********** (<1024px) about *************/ .about_concept { margin-top: 80px; padding-bottom: 0; flex-direction: column; justify-content: flex-start; } .about_concept_image { position: relative; left: auto; top: auto; width: 50%; margin-left: auto; margin-right: auto; } .about_concept_textbox { position: relative; width: 89%; max-width: none; padding: 30px 6% ; margin-left: auto; margin-right: auto; margin-top: 40px; } .about_concept_title { margin-top: 5px; } .about_concept_text { margin-top: 25px; gap: 25px; font-size: 15px; } .about_intro_wrapper { padding-top: 30px; padding-bottom: 45px; } .about_intro_title { margin-top: 5px; } .about_intro_upper { margin-top: 30px; } .about_intro_text { font-size: 15px; } .about_intro_lower { margin: 100px auto 0; width: 90%; display: flex; justify-content: space-between; } .about_intro_lower { margin: 45px auto 0; width: 100%; flex-direction: column; gap: 30px; } .about_intro_card { width: 100%; padding: 30px 4.5%; } .about_intro_card_titlesub { margin-bottom: 20px; } .about_features { margin-top: 40px; padding-bottom: 40px; } .about_features_title { margin-top: 5px; margin-bottom: 40px; } .about_features_listcard { flex-direction: column; } .about_features_title, .about_features_titlesub { text-align: center; } .about_features_listimage { width: 50%; margin-left: auto; margin-right: auto; } .about_features_textbox { width: 89%; padding: 30px 6%; margin-left: auto; margin-right: auto; } .about_features_textwrapper { display: flex; align-items: center; margin-bottom: 20px; } .about_features_number { margin-bottom: 0; } .about_features_texthead { margin-bottom: 0; margin-left: 1em; } .about_features_text { margin-bottom: 40px; } .about_features_listcard_buttonlist { flex-direction: column; gap: 25px; } .about_features_listcard_button { width: 290px; margin-left: auto; margin-right: auto; } .about_features_list { gap: 30px; } .about_clinic { padding-bottom: 30px; } .about_clinic_listtext { padding: 20px 20px 20px 19px; font-size: 18px; } /*********** (<1024px) dermatology *************/ .medical_cases { margin-top: 40px; } .medical_cases_list { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 2vw, 40px); } .medical_cases_title { margin-bottom: 40px; } .medical_cases_listcard { padding: 20px 5.7%; } .medical_cases_listcard_title { font-size: 24px; margin-bottom: 10px; } .medical_cases_listcard_text { font-size: 15px; } .medical_cases_listcard_button { padding-top: 20px; } .medical_cases_text { width: 89%; margin-left: auto; margin-right: auto; } .medical_guide { margin-top: 50px; margin-bottom: 0; } .medical_guide_list { grid-template-columns: repeat(1, 1fr); width: 61.8%; margin-left: auto; margin-right: auto; gap: 45px; } .medical_guide_title { margin-bottom: 40px; } .medical_guide_listcard_title { font-size: 24px; } .medical_guide_listcard { padding: 40px 5.7%; gap: 5.3%; } .medical_guide_inner { width: 47.4%; } /*********** (<1024px) Plastic surgery *************/ .surgery_treatment { margin-top: 50px; padding-top: 40px; padding-bottom: 15px; } .surgery_treatment_inner { margin-top: 40px; flex-direction: column; align-items: center; gap: 40px; } .surgery_treatment_image { width: 50%; } .surgery_treatment_textbox { width: 89%; padding-top: 0; } .surgery_treatment_text { font-size: 15px; margin-bottom: 25px; } /*********** (<1024px) Kanpo *************/ .kampo_about { margin-top: 40px; padding-bottom: 15px; } .kampo_about_inner { flex-direction: column; margin-top: 40px; } .kampo_about_image { width: 50%; } .kampo_about_textbox { width: 89%; padding-top: 0; } .kampo_about_text { margin-bottom: 25px; } .kampo_between { padding-top: 40px; padding-bottom: 50px; } .kampo_between_title { text-align: center; margin-bottom: 40px; } .kampo_between_titlesub { text-align: center; } .kampo_between_inner { flex-direction: column; margin-top: 0; gap: 15px; } .kampo_between_textbox { width: 89%; padding-top: 0; } .kampo_between_image { width: 50%; } .kampo_between_text { margin-bottom: 25px; } .kampo_alter_wrapper { padding-top: 40px; padding-bottom: 15px; } .kampo_alter_titlesub { text-align: center; } .kampo_alter_title { margin-bottom: 40px; text-align: center; } .kampo_alter_text { width: 94.6%; margin-left: auto; margin-right: auto; margin-bottom: 40px; } .kampo_alter_list { gap: 35px; } .kampo_alter_listcard { flex-direction: column; gap: 40px; } .kampo_alter_listcard_image { width: 50%; } .kampo_alter_listcard_textbox { width: 94.6%; padding-top: 0; } .kampo_alter_listcard_textwrapper { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .kampo_alter_listcard_title { margin-left: 1em; margin-top: 0; margin-bottom: 0px; } .kampo_alter_listcard_text { margin-bottom: 25px; } .kampo_studybox .kampo_alter_listcard_image { padding-bottom: 0; } .kampo_alter_listcard_study { margin-bottom: 20px; padding: 20px 25px; } .top07.kampo_top07 { padding-top: 50px; } .top07_list_grid { padding-bottom: 0; } /*********** (<1024px) Acne *************/ .acne_about { margin-top: 40px; } .acne_about_title { margin-bottom: 40px; } .acne_about_text { width: 89%; margin-left: auto; margin-right: auto; margin-bottom: 40px; } .acne_about_detail { padding: 40px 5.5%; } .acne_about_detail.acne_about_detail_nail { padding: 60px 5.7%; } .acne_type { margin-top: 40px; padding-bottom: 40px; } .acne_type_title { width: 89%; margin-left: auto; margin-right: auto; } .acne_type_listcard_imageindex { padding: 10px 20px; font-size: 32px; border-radius: 0 10px; } .acne_type_listcard_title { font-size: 26px; margin-bottom: 30px; } .acne_type_list { gap: 40px; width: 89%; margin-left: auto; margin-right: auto; } .acne_cause { padding-top: 50px; padding-bottom: 40px; } .acne_cause_inner { flex-direction: column; gap: 40px; } .acne_cause_image { width: 50%; } .acne_cause_textbox { width: 89%; padding-bottom: 0; text-align: center; } .acne_cause_title { margin-bottom: 30px; } .acne_cases_wrapper { padding-top: 40px; } .acne_cases_title { margin-bottom: 30px; } .acne_cases .medical_cases_text { width: 94.6%; } .acne_cases_list.medical_cases_list { margin-top: 40px; } .acne_selfcare_wrapper { padding-top: 40px; } .acne_selfcare_title { text-align: center; } .acne_selfcare_titlesub { text-align: center; } .acne_selfcare_list { width: 94.6%; margin-left: auto; margin-right: auto; grid-template-columns: repeat(1, 1fr); padding-bottom: 50px; } .acne_selfcare_listcard { padding: 30px 8.5%; } .acne_selfcare_listcard_title { margin-bottom: 30px; font-size: 24px; } .acne_selfcare_listcard_head { font-size: 28px; } .acne_treatment_wrapper { padding-top: 40px; padding-bottom: 50px; } .acne_selfcare_text { width: 94.6%; margin-left: auto; margin-right: auto; } .acne_treatment_list { width: 94.6%; margin-left: auto; margin-right: auto; margin-top: 30px; grid-template-columns: repeat(1, 1fr); } .acne_treatment_listcard { padding: 30px 8.5%; } .acne_scars { padding-top: 40px; } .acne_scars_title { margin-bottom: 40px; } .acne_scars_text { margin-bottom: 40px; width: 89%; margin-left: auto; margin-right: auto; } .acne_scars_list { width: 89%; margin-left: auto; margin-right: auto; grid-template-columns: repeat(1, 1fr); gap: 40px; } .acne_scars_listcard_image { width: 77%; margin-left: auto; margin-right: auto; margin-bottom: 30px; } .acne_scars_listcard_imageindex { padding: 14px 28px; font-size: 38px; } .acne_scars_listcard_title { font-size: 26px; margin-bottom: 30px; } .acne_faq { padding-top: 50px; padding-bottom: 50px; } .acne_faq_title { margin-bottom: 40px; } .acne_faq_list { padding: 20px 5.5%; } .acne_faq_listitem { width: 100%; } .acne_faq_listitem:last-of-type { border-bottom: none; } /******************************************************** しみ・そばかす ********************************************************/ .blemish_media_text { width: 89%; } .blemish_media_image { width: 56%; margin-left: auto; margin-right: auto; } .blemish_text_panel { width: 94.6%; margin-left: auto; margin-right: auto; padding: 40px 5.5%; } .blemish_thought_panel { width: 94.6%; } .blemish_flow_panel { margin-top: 30px; } .blemish_point_list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .blemish_keycard { min-height: 88px; padding: 20px 6%; font-size: 15px; } .blemish_flow_card { padding: 28px 7%; } .blemish_flow_number { margin-bottom: 18px; } .blemish_consult_list { gap: 14px; } .blemish_consult_panel { width: 94.6%; } .blemish_treatment_list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .blemish_consult_list { width: 94.6%; margin-left: auto; margin-right: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; } /******************************************************** やけどのケガ ********************************************************/ .burn_type_list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .burn_type_detail { padding: 18px 6%; } .burn_type_detail_title { font-size: 18px; } .burn04_panel { padding: 44px 4.8%; } .burn04_list { gap: 18px 20px; } .burn04_card { min-height: 108px; padding: 26px 6%; } .burn04_card_text { font-size: 20px; } /*********** (<1024px) Access *************/ .access_map { margin-top: 40px; margin-bottom: 50px; } .access_map_title { margin-bottom: 40px; } .access_map_body { flex-direction: column; align-items: center; gap: 50px; } .access_map_adress { width: 89%; padding-top: 0; } .access_map_image { width: 68%; } .access_parking { margin-top: 50px; margin-bottom: 0; } .access_parking_title { margin-bottom: 40px; } .access_parking_images { flex-direction: column; align-items: center; gap: 40px; } .access_parking_map { width: 68%; } .access_parking_photo { width: 40%; margin-top: 0; } /*********** (<1024px) category *************/ .category_body { margin-top: 40px; } .category_body_wrapper { flex-direction: column; align-items: center; gap: 10px; } .category_block { width: 100%; } .category_index { width: 89%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 60px; } .category_index_archive { margin-top: 0; } .category_list { margin-bottom: 30px; } .category_listindex { gap: 20px 60px; } .category_listcard_link { padding-bottom: 20px; } .category_list_head { padding-bottom: 20px; gap: 40px; } .category_listindex { padding-top: 40px; } .category_listcard_title { margin-top: 20px; } .category_listcard_date { margin-top: 10px; } /*********** (<1024px) single *************/ .single_article { padding: 40px 6.6%; } .single_article_property { margin-top: 30px; margin-bottom: 30px; } .single_article_h2 { margin-top: 30px; } .single_article_h3 { margin-top: 20px; } .single_author_image { padding-left: 0; } .single_author_image_wrapper { width: 33%; margin-left: auto; margin-right: auto; } .single_author { margin-top: 40px; } .single_body { margin-bottom: 50px; } .single_author_body { margin-top: 30px; } } @media only screen and (max-width: 768px) { @for $i from 30 through 70 { .flex_#{$i} { width: 100%; } } .fv_bg { height: clamp(320px, 18.8vw, 400px); padding-bottom: 20px; } .fv_title { font-size: clamp(32px, 1.9vw, 44px); } .link_btn a { margin-left: auto; margin-right: auto; } .fv_calender_comment { font-size: 14px; } /*********** (<768px) mainview *************/ .mainview { padding-top: 12px; } .mainview_text { padding-left: 4%; flex-direction: column; } .mainview_headline { margin-bottom: 20px; } /*********** (<768px) top01 *************/ .top01_flex { padding-top: 54px; } .newslist a { position: relative; flex-direction: column; justify-content: center; align-items: flex-start; .arrow { position: absolute; right:18px; top: 50%; transform: translateY(-50%); } } .news_date { margin-bottom: 12px; } .top01_btn { margin-top: 46px; } /*********** (<768px) top02 *************/ .scrolltext { font-size: clamp(44px, 2.5vw, 55px); } .textmove { padding-top: 36px; } .top02_flex { padding-top: 40px; gap: 30px; } .top02_left { width: 61%; } .top02_title { margin-bottom: 30px; } .top02_right { padding-bottom: 52px; } .top02_right_text { font-size: 14px; } .top02_btn { margin-top: 36px; } .top02_title { font-size: 24px; } /*********** (<768px) top03 *************/ .top03 { padding-top: 48px; padding-bottom: 48px; } .top03_list_flex { flex-direction: column; } .top03_listitem { width: 100%; } .top03 .container1440 { width: 80%; } .top03_listimage { width: 76.3%; margin-left: auto; margin-right: auto; } .top03_listhead { font-size: 24px; } .top03_listtext { font-size: 14px; } /*********** (<768px) top04 *************/ .top04_inner { flex-direction: column-reverse; } .top04_wrapper { padding-top: 50px; padding-bottom: 54px; width: 95%; padding-right: 5%; } .top04_inner.top04_inner { width: 89%; } .top04_left { width: 100%; padding-right: 0; padding-top: 40px; } .top04_right { width: 76.3%; margin-left: auto; margin-right: auto; } .top04_title.top04_title { font-size: 24px; margin-bottom: 26px; } .top04_left_text { font-size: 14px; margin-bottom: 25px; } /*********** (<768px) top06 *************/ .top06 { padding-top: 54px; } .top06_title { margin-bottom: 32px; } .top06_listitem { width: 100%; padding: 5.5vw 5.5%; } .top06_listhead_wrapper { padding-bottom: 22px; } .top06_text { margin-top: 18px; margin-bottom: 22px; font-size: 15px; } /*********** (<768px) top07 *************/ .top07 { padding-top: 48px; } .top07_title { margin-bottom: 32px; } .top07_list_grid { grid-template-columns: repeat(1, 1fr); padding-bottom: 40px; gap: 12px; } .top07_listcard { padding: clamp(16px, 0.9vw, 20px) clamp(24px, 1.3vw, 28px); } .top07_listcard_body { font-size: clamp(16px, 0.9vw, 18px); } /************ (<768px) top08 ************/ .center_sp { text-align: center; } .top08 { padding-top: 40px; padding-bottom: 44px; } .top08_wrapper { flex-direction: column; margin-bottom: 48px; } .top08_title { margin-bottom: 32px; } .top08_column_grid { grid-template-columns: repeat(1, 1fr); gap: 32px; width: 89%; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: 40px; } .top08_column_picture { margin-bottom: 20px; } .top08_column_category { margin-bottom: 14px; } .top08_column_title { font-size: 16px; margin-bottom: 10px; } .top08_column_card { padding-bottom: 0; } /*********** (<768px) top_articles *************/ .top_articles { padding-top: 44px; padding-bottom: 44px; } .top_articles_wrapper { flex-direction: column; gap: 44px; } .top_articles_block { width: 89%; margin-left: auto; margin-right: auto; } .top_articles_titlesub { text-align: center; } .top_articles_title { margin-bottom: 40px; text-align: center; } .top_articles_listitem_date { font-size: 15px; } .top_articles_listitem_title { font-size: 18px; } .top_articles_link { margin-top: 30px; } .top_articles_listitem { padding: 20px 20px; } /*********** (<768px) top09 *************/ .top09 { padding-top: 44px; padding-bottom: 44px; } .top09_left { width: 89%; margin-bottom: 44px; } .top09_right { width: 89%; } .top09_calendar_table { font-size: 14px; } .top09_calendar_table th, .top09_calendar_table td { padding: 10px; } .top09_calender_comment { padding-left: 10px; } .top09_adress { margin-bottom: 26px; } .top09_phone { margin-bottom: 32px; } .top09_maptext { right: -14px; top: -26px; padding: 30px 28px 28px 28px; } .top09_maptext_head { font-size: 16px; margin-bottom: 6px; } .top09_maptext_body { font-size: 22px; } /*********** (<768px) footer *************/ .footer { padding-top: 48px; padding-bottom: 132px; } .footer_text { font-size: 16px; margin-bottom: 40px; } .footer_nav { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); width: 89%; } .footer_nav_column.column1 { margin-bottom: 20px; } .footer_nav_column.column2 { grid-column-start: 1; grid-row-start: 2; } .footer_nav_column.column3 { grid-column-start: 2; grid-row-start: 1; } .footer_nav .mt-20 { margin-top: 18px; } .footer_nav .mt-30 { margin-top: 18px; } .copyright { margin-top: 16px; } /************ (<768px) about ************/ .about_concept { margin-top: 40px; } .about_concept_textbox { width: 100%; padding: 20px 5%; margin-top: 30px; } .about_concept_text { font-size: 14px; } .about_intro { margin-top: 10px; } .about_intro_upper { flex-direction: column; gap: 35px; } .about_intro_inner { width: 95.8%; margin-left: auto; margin-right: auto; } .about_intro_textbox { width: 100%; } .about_intro_text { font-size: 14px; } .about_intro_image { width: 61%; margin-left: auto; margin-right: auto; } .about_intro_wrapper { padding-top: 20px; } .about_intro_lower { margin: 35px auto 0; } .about_intro_card { padding: 20px 4.5%; } .about_intro_card_listitem, .about_intro_card_padding { font-size: 14px; letter-spacing: 0.02em; } .about_intro_card_list { gap: 0 2.4%; } .about_features_title { margin-bottom: 30px; } .about_features_textbox { width: 100%; padding: 20px 5%; } .about_features_number { font-size: clamp(31px, 1.8vw, 36px); } .about_features_texthead { font-size: clamp(21px, 1.2vw, 24px); } .about_features_textwrapper { justify-content: center; margin-bottom: 15px; } .about_features_text { font-size: 14px; margin-bottom: 25px; } .about_features_list { gap: 15px; } .about_clinic { padding-bottom: 10px; } .about_clinic_list { display: grid; width: 68%; margin-left: auto; margin-right: auto; grid-template-columns: repeat(1, 1fr); gap: 30px; } .about_clinic_title { margin-top: 5px; margin-bottom: 30px; } /************ (<768px) dermatology ************/ .medical_cases_titlesub { margin-bottom: 5px; } .medical_cases_title { margin-bottom: 30px; } .medical_cases_list { margin-top: 40px; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 25px; } .medical_cases_text { font-size: 14px; } .medical_cases_listcard_title { font-size: 22px; } .medical_cases_listcard_text { font-size: 14px; } .medical_guide { margin-top: 40px; } .medical_guide_title { margin-top: 5px; margin-bottom: 30px; } .medical_guide_listcard_title { font-size: 22px; } .medical_guide_listcard { padding: 20px 3.5% 20px 5.7%; gap: 5.7%; } .medical_guide_inner { width: 48%; } .medical_guide_list { width: 100%; gap: 25px; } /*********** (<768px) Plastic surgery *************/ .surgery_treatment_text { font-size: 14px; } .surgery_treatment_title { margin-top: 5px; } .surgery_treatment_inner { margin-top: 30px; gap: 30px; } /*********** (<768px) Kampo *************/ .kampo_about_title { margin-top: 5px; } .kampo_about_inner { margin-top: 30px; } .kampo_about_inner { gap: 30px; } .kampo_about_text { font-size: 14px; } .kampo_between_title { margin-top: 5px; margin-bottom: 30px; } .kampo_between_text { font-size: 14px; } .kampo_between_inner { gap: 5px; } .kampo_alter_list { gap: 15px; } .kampo_alter_title { margin-top: 5px; margin-bottom: 30px; } .kampo_alter_text { font-size: 14px; } .kampo_alter_listcard { gap: 30px; } .kampo_alter_listcard_number { font-size: 26px; } .kampo_alter_listcard_title { font-size: 22px; } .kampo_alter_listcard_text { font-size: 14px; } .kampo_alter_listcard_study { margin-bottom: 15px; padding: 15px 20px 5px; } .kampo_alter_listcard_studytext { line-height: 2.2em; font-size: 14px; margin-bottom: 10px; } .top07.kampo_top07 { padding-top: 40px; } .kampo_top07 .top07_list_grid { padding-bottom: 10px; } /*********** (<768px) Acne *************/ .acne_about_title { margin-top: 5px; margin-bottom: 30px; } .acne_about_text { font-size: 14px; } .acne_about_detail.acne_about_detail_nail { padding: 30px 5.5%; } .acne_about_detail_title { font-size: 26px; margin-bottom: 30px; } .acne_about_detail_text { font-size: 14px; } .acne_about_detail_titlesub { font-size: 18px; margin-top: 30px; margin-bottom: 8px; } .acne_type { margin-top: 40px; padding-bottom: 40px; } .acne_type_title { margin-bottom: 30px; font-size: 26px; } .acne_type_list { grid-template-columns: repeat(1, 1fr); gap: 40px; } .acne_type_listcard_imageindex { padding: 10px 20px; font-size: 28px; } .acne_type_listcard_image { margin-bottom: 30px; width: 77%; margin-left: auto; margin-right: auto; } .acne_type_listcard_title { font-size: 24px; margin-bottom: 20px; } .acne_type_listcard_text { font-size: 14px; } .acne_cause_title { font-size: 26px; margin-bottom: 30px; } .acne_cause_text { font-size: 14px; } .acne_cases_title { font-size: 26px; } .acne_selfcare_title { font-size: 26px; margin-bottom: 5px; } .acne_selfcare_text { margin-top: 30px; font-size: 14px; } .acne_selfcare_list { width: 100%; gap: 30px; padding-bottom: 40px; } .acne_selfcare_listcard { padding: 30px 5.7%; } .acne_selfcare_listcard_title { margin-bottom: 20px; font-size: 20px; } .acne_selfcare_listcard_head { font-size: 24px; } .acne_selfcare_listcard_text { font-size: 14px; } .acne_treatment_list { width: 100%; gap: 30px; padding-bottom: 40px; } .acne_treatment_wrapper { padding-top: 30px; padding-bottom: 10px; } .acne_treatment_listcard { padding: 30px 5.7%; } .acne_scars_title { margin-bottom: 30px; margin-top: 5px; } .acne_scars_text { font-size: 14px; margin-bottom: 30px; } .acne_scars_listcard_title { font-size: 24px; margin-bottom: 20px; } .acne_scars_listcard_text { font-size: 14px; } .acne_scars_listcard_imageindex { padding: 10px 20px; font-size: 28px; } .acne_faq_title { margin-top: 5px; margin-bottom: 30px; } .acne_faq_list { padding: 0 5.5%; } .acne_faq_listhead { padding: 20px 46px 20px 0; } .acneListMinus { right: 8px; font-size: 24px; } .acne_faq_listhidden { padding-left: 0px; padding-right: 46px; } .acneListSub.is-open { padding-top: 20px; padding-bottom: 20px; } /******************************************************** しみ・そばかす ********************************************************/ .blemish_media_text { width: 89%; } .blemish_media_image { width: 77%; } .blemish_text_panel { width: 89%; margin-left: auto; margin-right: auto; padding: 30px 5.5%; } .blemish_thought_panel { width: 89%; } .blemish_flow_panel { margin-top: 30px; } .blemish_panel_text_last { margin-top: 20px; } .blemish_point_list { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 12px; margin-top: 20px; } .blemish_keycard { min-height: auto; padding: 18px 6%; font-size: 14px; } .blemish_flow_list { margin-top: 20px; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 16px; } .blemish_flow_card { padding: 24px 6%; } .blemish_flow_number { font-size: 24px; padding-bottom: 14px; margin-bottom: 16px; } .blemish_consult_list { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 12px; margin-top: 20px; } .blemish_consult_panel { width: 89%; } .blemish_treatment_list { grid-template-columns: repeat(1, minmax(0, 1fr)); } .blemish_consult_list { width: 100%; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 10px; } /******************************************************** やけどのケガ ********************************************************/ .burn_type_list { grid-template-columns: repeat(1, minmax(0, 1fr)); } .burn_type_detail { padding: 16px 6%; } .burn_type_detail_title { padding: 6px 14px; font-size: 17px; } .burn_type_detail_text { margin-top: 12px; font-size: 14px; } .burn04_panel { padding: 30px 5.5%; } .burn04_text { font-size: 14px; } .burn04_label { font-size: 18px; } .burn04_list { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 14px; } .burn04_card { min-height: auto; padding: 18px 6%; } .burn04_card_text { font-size: 18px; } /*********** (<768px) Access *************/ .access_map_body { gap: 30px; } .access_map_title { margin-top: 5px; margin-bottom: 30px; } .access_map_text { font-size: 14px; } .access_map_table { grid-template-columns: 33% 67%; } .access_map_table_head { padding: 15px; font-size: 14px; } .access_map_table_body { padding: 15px; font-size: 14px; } .access_map_image { width: 89%; } .access_parking_images { gap: 30px; } .access_parking_title { margin-top: 5px; margin-bottom: 30px; } .access_parking_map { width: 89%; } .access_parking_photo { width: 68%; } .access_parking_photo_text { padding: 24px 20px; } /*********** (<768px) category *************/ .category_body_wrapper { gap: 0; } .category_listindex { grid-template-columns: repeat(1, 1fr); gap: 20px; } .category_list_head { gap: 20px; padding-bottom: 10px; } .category_list_title { font-size: 22px; } .category_list_more { font-size: 15px; padding-right: 32px; } .category_list_more::after { width: 24px; height: 12px; } .category_listindex { padding-top: 30px; } .category_listcard_taxonomy { margin-top: 20px; } .category_listcard_title { font-size: 16px; margin-top: 10px; } .category_listcard_date { font-size: 15px; } .category_index { grid-template-columns: repeat(1, 1fr); gap: 0; } .category_index_archive { margin-top: 40px; } /*********** (<768px) single *************/ .single_article { padding: 20px 5%; } .single_article_property { margin-top: 20px; margin-bottom: 20px; } .single_article_title { font-size: 22px; } .single_article_date { font-size: 15px; } .single_article_image { margin-bottom: 20px; } .single_article_text { font-size: 14px; } .single_article_h2 { margin-top: 12px; padding: 12px 15px; font-size: 20px; } .single_article_h3 { margin-top: 10px; font-size: 20px; } .single_author { margin-top: 30px; } .single_author_title { font-size: 22px; margin-bottom: 5px; } .single_author_image { margin-bottom: 30px; } .single_author_image_wrapper { width: 100%; } .single_author_image_photo { width: 61.8%; margin-left: auto; margin-right: auto; } .single_author_image_name { font-size: 18px; margin-bottom: 10px; margin-top: 20px; } .single_author_image_position { font-size: 15px; } .single_author_career { width: 100%; margin-right: 0; margin-bottom: 20px; } .single_author_conference { width: 100%; } .single_author_career_title, .single_author_conference_title { font-size: 22px; padding-bottom: 15px; margin-bottom: 20px; font-weight: 500; } .single_author_career_headline { font-size: 18px; } .single_author_career_listitem, .single_author_career_padding { font-size: 15px; } .single_body { margin-bottom: 40px; } } /* スマートフォン 縦(ポートレート) */ @media only screen and (max-width: 480px) { } /******************************************************** 爪 ********************************************************/ /************************/ .nail01 { margin-top: 160px; } .nail01_title { margin-bottom: 60px; } .nail01_lead { line-height: 2.2em; letter-spacing: 0.02em; } .nail01_panel { margin-top: 70px; padding: 60px 5.7%; border-radius: 15px; background-color: #FBF9FA; } .nail01_panel_body { margin-top: 40px; display: flex; justify-content: space-between; align-items: center; gap: 40px 5.7%; } .nail01_panel_textbox { flex-grow: 2; } .nail01_panel_title { font-size: 32px; font-weight: 500; letter-spacing: 0.04em; padding-bottom: 20px; border-bottom: 1px solid #FF8078; } .nail01_panel_text { line-height: 2.2em; letter-spacing: 0.02em; } .nail01_panel_image { width: 42.2%; max-width: max-content; flex-shrink: 0; } .nail01_panel_image img { width: 100%; height: auto; } .nail02 { margin-top: 130px; } .nail02_primary { margin-bottom: 40px; } .nail02_list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px 40px; } .nail02_card { display: flex; flex-direction: column; } .nail02_card_primary { width: 100%; } .nail02_primary_body { display: flex; justify-content: space-between; align-items: center; gap: 40px 5.7%; } .nail02_primary_textbox { flex-grow: 2; } .nail02_image { width: 100%; margin-bottom: 40px; } .nail02_image.nail02_primary_image { width: 42.2%; max-width: max-content; margin-bottom: 0; flex-shrink: 0; } .nail02_image img { width: 100%; height: auto; } .nail02_title { font-size: 28px; font-weight: 500; letter-spacing: 0.04em; margin-bottom: 40px; } .nail02_text { line-height: 2.2em; letter-spacing: 0.02em; } .nail03 { display: flex; justify-content: flex-end; background-color: #FDF9F9; } .nail03_wrapper { width: 97%; padding-top: 160px; padding-right: 3%; border-radius: 20px 0 0 0; background-color: #fff; } .nail03_title { font-size: 32px; font-weight: 500; letter-spacing: 0.04em; } .nail03_text { margin-top: 70px; line-height: 2.2em; letter-spacing: 0.02em; } .nail03_list { margin-top: 70px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 2vw, 40px); } .nail03_card { padding: 60px 5.7%; border-radius: 15px; background-color: #FBF9FA; } .nail03_card_title { font-size: 30px; font-weight: 500; letter-spacing: 0.04em; margin-bottom: 40px; } .nail03_card_text { line-height: 2.2em; letter-spacing: 0.02em; } .nail04 { padding-top: 160px; padding-bottom: 160px; background-color: #FDF9F9; } .nail04_body { display: flex; justify-content: space-between; align-items: center; gap: 40px; } .nail04_image { width: 47%; } .nail04_image img { width: 100%; height: auto; } .nail04_textbox { width: 47%; padding-bottom: 20px; } .nail04_title { font-size: 32px; font-weight: 500; letter-spacing: 0.04em; } .nail04_text { margin-top: 40px; line-height: 2.2em; letter-spacing: 0.02em; } .nail04_subtitle { margin-top: 40px; font-size: 22px; font-weight: 500; letter-spacing: 0.04em; } .nail05 { display: flex; justify-content: flex-end; background-color: #FDF9F9; } .nail05_wrapper { width: 97%; padding-top: 130px; padding-right: 3%; padding-bottom: 160px; background-color: #fff; } .nail05_title { font-size: 32px; font-weight: 500; letter-spacing: 0.04em; } .nail05_text { margin-top: 10px; line-height: 2.2em; letter-spacing: 0.02em; } .nail05_list { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(27px, 1.5vw, 30px); } .nail05_card { padding: 40px 8.5%; border-radius: 15px; background-color: #FBF9FA; } .nail05_card_title { font-size: 28px; font-weight: 500; letter-spacing: 0.02em; padding-bottom: 20px; margin-bottom: 40px; border-bottom: 1px solid #E5E5E5; } .nail05_card_text { line-height: 2.2em; letter-spacing: 0.02em; } .nail05_subtitle { margin-top: 40px; font-size: 22px; font-weight: 500; letter-spacing: 0.04em; } .nail06 { padding-top: 160px; padding-bottom: 160px; background-color: #FDF9F9; } .nail06_title { margin-bottom: 60px; } /******************************************************** 爪 ********************************************************/ @media only screen and (max-width: 1024px) { .nail01 { margin-top: 120px; } .nail01_panel_image { width: 54%; } .nail01_panel_body { gap: 30px 4%; } .nail02_primary { margin-bottom: 30px; } .nail02_primary_body { align-items: flex-start; gap: 30px 4%; } .nail02_image.nail02_primary_image { width: 46%; } .nail02_list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 50px 36px; } .nail03_wrapper { padding-top: 120px; } .nail03_text { margin-top: 50px; } .nail03_list { margin-top: 50px; } .nail04 { padding-top: 120px; padding-bottom: 120px; } .nail05_wrapper { padding-top: 110px; padding-bottom: 120px; } .nail06 { padding-top: 120px; padding-bottom: 120px; } } /******************************************************** 爪 ********************************************************/ @media only screen and (max-width: 768px) { .nail_page .nail01_panel_image { order: 1; } .nail_page .nail01_panel_textbox { order: 2; } .nail_page .nail02_image.nail02_primary_image { order: 1; } .nail_page .nail02_primary_textbox { order: 2; } .nail_page .nail04_image { order: 1; } .nail_page .nail04_textbox { order: 2; } .burn_page .acne_cause_image { order: 1; } .burn_page .acne_cause_textbox { order: 2; } .blemish_page .acne_cause_image { order: 1; } .blemish_page .acne_cause_textbox { order: 2; } .nail01 { margin-top: 40px; } .nail01_title { margin-bottom: 30px; } .nail01_lead { font-size: 14px; } .nail01_panel { margin-top: 40px; padding: 30px 5.5%; } .nail01_panel_body { margin-top: 30px; flex-direction: column; gap: 30px; } .nail01_panel_title { font-size: 26px; } .nail01_panel_text { font-size: 14px; } .nail01_panel_image { width: 77%; margin-left: auto; margin-right: auto; } .nail02 { margin-top: 40px; } .nail02_primary { margin-bottom: 30px; } .nail02_primary_body { flex-direction: column; gap: 30px; } .nail02_list { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 40px; } .nail02_image.nail02_primary_image { width: 77%; margin-bottom: 0; margin-left: auto; margin-right: auto; } .nail02_image { width: 77%; margin-bottom: 30px; margin-left: auto; margin-right: auto; } .nail02_title { font-size: 24px; margin-bottom: 20px; } .nail02_text { font-size: 14px; } .nail03_wrapper { width: 95%; padding-top: 44px; padding-right: 5%; } .nail03_title { font-size: 26px; } .nail03_text { margin-top: 30px; font-size: 14px; } .nail03_list { margin-top: 30px; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 25px; } .nail03_card { padding: 30px 5.7%; } .nail03_card_title { font-size: 22px; margin-bottom: 20px; } .nail03_card_text { font-size: 14px; } .nail04 { padding-top: 44px; padding-bottom: 44px; } .nail04_body { flex-direction: column; gap: 30px; } .nail04_image { width: 89%; } .nail04_textbox { width: 100%; padding-bottom: 0; } .nail04_title { font-size: 26px; } .nail04_text { margin-top: 30px; font-size: 14px; } .nail04_subtitle { margin-top: 30px; font-size: 18px; } .nail05_wrapper { width: 95%; padding-top: 40px; padding-right: 5%; padding-bottom: 44px; } .nail05_title { font-size: 26px; } .nail05_text { font-size: 14px; } .nail05_list { margin-top: 30px; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 30px; } .nail05_card { padding: 30px 5.7%; } .nail05_card_title { margin-bottom: 20px; font-size: 20px; } .nail05_card_text { font-size: 14px; } .nail05_subtitle { margin-top: 30px; font-size: 18px; } .nail06 { padding-top: 44px; padding-bottom: 44px; } .nail06_title { margin-bottom: 30px; } } /************************/ .page_mt_reset { margin-top: 0; } .page_pt_reset { padding-top: 0; } .page_text_reset { margin-top: 0; margin-bottom: 0; }