/* ===== products.css 製品情報ページ専用スタイル ===== */ /* ---- 2カラムレイアウト（メイン + サイドバー） ---- */ .mainWrapper { display: grid; width: min(calc(100% - 40px), 1310px); margin: 0 auto; padding: 60px 0 0; grid-template-columns: 211px 1fr; gap: 0 50px; align-items: start;} .productsPageMain { min-width: 0;} .productsPageSidebar { padding: 0; align-self: start;} @media (max-width: 1100px) { .mainWrapper { grid-template-columns: 100%;} .productsPageSidebar { display: none;} } /* ---- サイドバー内部 ---- */ .products_sidebar .sec_title { font-size: 14px; font-weight: 500; line-height: 1.5; max-width: 174px; margin-bottom: 22px; padding-bottom: 4px; color: #333; border-bottom: 2px solid; border-image: linear-gradient(90deg, #1c9f91 0%, #0d787e 84.62%, #00546c 100%) 1;} .products_sidebar .sec_title_middle { font-size: 12px; font-weight: 500; line-height: 1.5; margin-bottom: 22px;} .products_sidebar .sec_title_middle::after { display: block; width: 30px; height: 2px; margin-top: 5px; content: ''; background: linear-gradient(90deg, #1c9f91 0%, #0d787e 84.62%, #00546c 100%);} .products_sidebar .link_list { max-width: 177px;} .products_sidebar .link_list li { font-size: 12px; line-height: 1;} .products_sidebar .link_list a { font-size: 12px; font-weight: 500; line-height: 1.5;} .products_sidebar .link_list a:has(.option_label) { display: flex; align-items: center;} .products_sidebar .link_list a:has(.option_label) .option_label { font-size: 6px; display: flex; width: 52px; height: 12px; margin: 0 0 0 auto; color: #259a8d; border: 1px solid #d3d3d3; border-radius: 6px; align-items: center; justify-content: center; flex-shrink: 0;} .products_sidebar .link_list li + li { margin-top: 3px;} .products_sidebar .link_list li:has(.child_list) > a { color: #259a8d;} .products_sidebar .link_list .child_list { margin: 6px 0 16px; padding-left: 10px;} .products_sidebar .link_list .child_list a::before { content: '└';} .products_sidebar .link_list .child_list .max_contents { width: max-content;} .products_sidebar .dots_list > li > a { display: inline-flex; align-items: center;} .products_sidebar .dots_list > li > a::before { width: 6px; height: 6px; margin-right: 4px; content: ''; border-radius: 50%; background: #259a8d;} .products_sidebar .btn_link_list { display: grid; max-width: 170px; grid-template-columns: 1fr 1fr; gap: 5px 10px;} .products_sidebar .btn_link_list a { font-size: 10px; font-weight: 500; line-height: 1.2; display: grid; min-height: 20px; padding: 3px 0; color: #333; border: 1px solid #dadada; border-radius: 10px; place-content: center;} .products_sidebar .btn_link_list .small8 { font-size: 8px;} .products_sidebar .btn_link_list .small9 { font-size: 9px;} .products_sidebar .btn_link_list + .btn_link_list { position: relative; margin-top: 19px;} .products_sidebar .btn_link_list + .btn_link_list::before { position: absolute; top: -9px; left: 50%; width: 80px; height: 1px; content: ''; background: #ccc; translate: -50% 0;} .products_sidebar .sidebar_section { padding:60px 0 0;} .products_sidebar .sidebar_section .inner_sec .link_list li { font-size: 10px;} .products_sidebar .sidebar_section .inner_sec .link_list a { font-size: 10px;} .products_sidebar .sidebar_section .inner_sec .link_list li + li { margin-top: 6px;} .products_sidebar .sidebar_section .inner_sec + .inner_sec { margin-top: 38px;} .products_sidebar .sidebar_section + .sidebar_section { margin-top: 57px;} .products_sidebar .function_sec .sec_title { margin-bottom: 42px;} .products_sidebar .function_sec .link_list_short { max-width: 165px;} .products_sidebar .sidebar_banner { display: flex; margin-top: 50px; flex-flow: column; gap: 10px;} .products_sidebar .sidebar_banner img { width: 100%; height: auto; vertical-align: bottom;} /* ---- リンク共通 ---- */ .productsTopPage a { color: #333; text-decoration: none;} .productsTopPage a.btn-select { color: white;} .productsTopPage a.btn-select:hover { color: #1C9F91;} /* ---- 共通コンテナ ---- */ .productsTopPage .container { max-width: 1200px; margin: 0 auto; padding: 0 32px;} @media (max-width: 767px) { .productsTopPage .container { padding: 0 16px;} } /* ---- topSection ---- */ .productsTopPage .topSection { width: 100%; max-width: 995px; margin: 0 0 0 auto;} .productsTopPage .topSection img { width: 50%; float: right;} .productsTopPage .topSection h2 { font-size: 28px; font-weight: 500; line-height: 1.5; text-align: left; margin-bottom: 14px;} .productsTopPage .topSection h2 .line { display: flex; align-items: baseline; gap: 0 .3em;} .productsTopPage .topSection p { font-size: 16px; font-weight: 350; line-height: 1.5;} .productsTopPage .topSection .gradBtn { margin-top: 39px;} .productsTopPage .topSection .gradBtn + p { margin-top: 34px;} @media (max-width: 1000px) { .productsTopPage .topSection .pcShow { display: none;} } @media (max-width: 767px) { .productsTopPage .topSection { max-width: 91.6%; margin-inline: auto;} .productsTopPage .topSection img { width: 100%; float: none;} .productsTopPage .topSection h2 { font-size: 16px; margin-bottom: 14px;} .productsTopPage .topSection h2 img { width: 54%;} .productsTopPage .topSection h2 .line { gap: 0;} .productsTopPage .topSection p { font-size: 14px;} .productsTopPage .topSection .gradBtn { margin-top: 14px;} .productsTopPage .topSection .gradBtn + p { margin-top: 62px;} } /* ---- グラデーションボタン ---- */ .productsPage .gradBtn { position: relative; display: grid; width: 402px; height: 64px; border-radius: 50px; box-shadow: 0 4px 4px 0 rgba(0,0,0,.25); grid-template-columns: 100%; grid-template-rows: auto; align-items: stretch; text-decoration: none;} .productsPage .gradBtn span { font-size: 32px; font-weight: 500; z-index: 3; display: grid; color: #fff; grid-column: 1; grid-row: 1; place-content: center; transition: color .2s linear;} .productsPage .gradBtn::before { z-index: 2; content: ''; transition: opacity .2s linear; border-radius: 50px; background: linear-gradient(90deg, #079 0%, #259a8d 60.2%); grid-column: 1; grid-row: 1;} .productsPage .gradBtn::after { z-index: 1; content: ''; border: 2px solid #0d787e; border-radius: 50px; background: #fff; grid-column: 1; grid-row: 1;} @media (hover: hover) { .productsPage .gradBtn:hover span { color: #0d787e;} .productsPage .gradBtn:hover::before { opacity: 0;} } @media (max-width: 767px) { .productsPage .gradBtn { width: 91.4%; height: 60px; border-radius: 50px;} .productsPage .gradBtn span { font-size: 24px;} } /* ---- ページナビ ---- */ .productsTopPage .pageNav { width: 100%; max-width: 995px; margin: 35px 0 0 auto;} .productsTopPage .pageNavPC { display: grid; max-width: 888px; list-style: none; margin: 0 0 36px 0; padding: 0; grid-template-columns: repeat(3, 1fr); gap: 15px 40px;} @media (max-width: 1180px) { .productsTopPage .pageNavPC { gap: 15px 20px;} } .productsTopPage .pageNavPC a { font-size: 14px; font-weight: 500; line-height: 1.5; display: grid; height: 100%; padding: 0 24px 15px; color: #333; text-decoration: none; background-image: linear-gradient(to right, #ccc 3px, transparent 3px); background-repeat: repeat-x; background-position: left bottom; background-size: 5px 2px; grid-template-columns: 1fr 19px; align-items: center; gap: 0 1em;} .productsTopPage .pageNavPC a span { grid-column: 1; grid-row: 1;} .productsTopPage .pageNavPC a::before { z-index: 1; box-sizing: border-box; width: 19px; height: 19px; content: ''; transition: background-color .2s; border: 1px solid #259a8d; border-radius: 50%; background-color: #fff; grid-column: 2; grid-row: 1;} .productsTopPage .pageNavPC a::after { z-index: 2; box-sizing: border-box; width: 19px; height: 19px; content: ''; border: 1px solid #259a8d; border-radius: 50%; background-color: #259a8d; grid-column: 2; grid-row: 1; -webkit-mask-image: url('/common/images/products/pagenavi_arrow.svg'); mask-image: url('/common/images/products/pagenavi_arrow.svg'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 9px auto; mask-size: 9px auto;} .productsTopPage .pageNavPC a:hover::before { background-color: #259a8d;} .productsTopPage .pageNavPC a:hover::after { background-color: #fff;} .productsTopPage .pageNavPC li:nth-child(1) a, .productsTopPage .pageNavPC li:nth-child(4) a { padding-right: 5px; padding-left: 7px;} .productsTopPage .pageNavSP { display: none;} @media (max-width: 767px) { .productsTopPage .pageNav { max-width: none; margin: 19px 0 0 0; background: #f3f6f8;} .productsTopPage .pageNavPC { display: none;} .productsTopPage .pageNavSP { position: relative; display: block; padding: 18px 0;} .productsTopPage .pageNavSP .selectText { font-size: 12px; font-weight: 500; display: flex; width: 81.4%; height: 50px; padding: 0 16px; cursor: pointer; border: 6px solid #e8f0f2; border-radius: 25px; background-color: #fff; box-shadow: 0 1px 4px 0 rgba(0,0,0,.25); margin-inline: auto; align-items: center;} .productsTopPage .pageNavSP .selectText::after { width: 19px; height: 19px; margin-left: 20px; content: ''; transition: rotate .2s linear; background: url('/common/images/products/pagenavi_arrow_sp.svg') no-repeat center center / contain; flex-shrink: 0;} .productsTopPage .pageNavSP .rotated::after { rotate: 180deg;} .productsTopPage .pageNavSP .slideDownBox { position: absolute; z-index: 10; top: 68px; left: 50%; display: none; width: 81.4%; padding: 21px 0 31px; border: 6px solid #e8f0f2; border-radius: 10px; background-color: #fff; translate: -50% 0; list-style: none; margin: 0;} .productsTopPage .pageNavSP .slideDownBox li + li { margin-top: 22px;} .productsTopPage .pageNavSP .slideDownBox li { font-size: 12px; line-height: 1.5; text-align: center;} .productsTopPage .pageNavSP .slideDownBox a { font-size: 12px; font-weight: 500; line-height: 1.5; display: inline-flex; text-align: center; color: #333; text-decoration: none; align-items: center;} .productsTopPage .pageNavSP .slideDownBox a::after { width: 11px; height: 7px; margin-left: 10px; content: ''; background: url('/common/images/products/pagenavi_arrow_sp2.svg') no-repeat center center / contain;} } /* ========================================================================== borderWrapper ========================================================================== */ .productsTopPage .borderWrapper { position: relative; /*margin-top: 84px;*/ padding-left: 10px;} .uketsuke_page .borderWrapper { margin-top: 0;} .yoyaku_page .borderWrapper, .uketsuke_page .borderWrapper { margin-top: 0;} .productsTopPage .borderWrapper::before { position: absolute; z-index: 1; top: 0; left: 0; width: 8px; height: 100%; content: ''; border: 1px solid #d4e3f2; background: #f5f7f9;} /* ========================================================================== headingH2 ========================================================================== */ .productsTopPage .headingH2 { position: relative;} .productsTopPage .headingH2::before { position: absolute; z-index: 1; top: 0; left: 0; width: 300px; height: 10px; content: ''; transform: rotate(90deg); transform-origin: left top; background: linear-gradient(90deg, #1c9f91 0%, #0d787e 100%);} .productsTopPage .headingH2 h2 { font-size: 28px; font-weight: 500; line-height: 1.5; position: relative; display: flex; min-height: 116px; padding-left: 44px; color: #0d787e; align-items: center;} /* 見出し昇格ページ（旧H2→新H1）共通: ivr/vaccine/language/statistics/sms/karte/customize/cashless/linejunban の9ページで .headingH2 内が h1 に置き換わっており、全ページで32px固定のため共通化 */ .productsPage h1 { font-size: 32px; padding: 20px 40px;} /* 見出し昇格ページ（旧H3→新H2）共通: セクション見出し（中央寄せ・太字）。 ivr/vaccine/karte/cashless/language の該当h2に共通クラス.section-headingを付与して共通化。 （statistics/sms/customizeは左寄せ・別配色の独自デザインのため対象外） */ .section-heading { font-size: 24px; font-weight: bold; text-align: center; margin-bottom: 20px;} /* 見出し昇格ページ（旧H4→新H3）共通: カード見出しはfont-size:22px/font-weight:boldのみ 9ページ全ての該当h3に共通クラス.card-headingを付与して共通化。 色・余白・text-alignはページごとに異なるため個別ルールに残置 */ .card-heading { font-size: 22px; font-weight: bold;} .productsTopPage .headingH2 h2::before, .productsTopPage .headingH2 h2::after { position: absolute; left: 0; width: 100vw; height: 1px; content: ''; background: #d4e3f2;} .productsTopPage .headingH2 h2::before { top: 0;} .productsTopPage .headingH2 h2::after { bottom: 0;} .productsTopPage .headingH2 .for { font-size: 24px; position: relative; margin-left: 50px; color: #0d787e;} .productsTopPage .headingH2 .for::before { position: absolute; bottom: -17px; left: 0; width: 200px; height: 2px; content: ''; background: linear-gradient(90deg, #1c9f91 0%, #0d787e 84.62%, #00546c 100%);} .productsTopPage .headingH2 .for::after { position: absolute; top: 50%; left: 200px; content: ''; background-repeat: no-repeat; background-position: center center; background-size: contain; translate: 0 -50%;} /* ========================================================================== 背景水色セクション ========================================================================== */ .productsTopPage .backBlueSection { position: relative; z-index: 1; background: #f5f7f9;} .productsTopPage .backBlueSection::before { position: absolute; z-index: -1; top: 0; left: 0; width: 100vw; height: 100%; content: ''; background: #f5f7f9;} /* ========================================================================== 医療現場のご要望から生まれたソリューション群 ========================================================================== */ .productsTopPage .solutionsSection .headingH2 { margin-bottom: 86px;} .productsTopPage .solutionsSection .headingH2 h2 br { display: none;} .productsTopPage .solutionsSection .headingH2 p { font-size: 16px; font-weight: 500; line-height: 1.5; max-width: 929px; margin-top: 53px; margin-left: 44px;} .productsTopPage .solutionsSection .row { position: relative; z-index: 1; padding-bottom: 73px; padding-left: 44px;} .productsTopPage .solutionsSection .solutionsInnerSec1 { position: relative;} .productsTopPage .solutionsSection .solutionsInnerSec1::before { position: absolute; z-index: 1; top: -33px; left: -24px; width: calc(100% + 52px); max-width: 912px; height: 952px; content: ''; background: url('/common/images/products/solutions_waku.svg') no-repeat center center / 100% 100%;} @media (max-width: 1280px) { .productsTopPage .solutionsSection .solutionsInnerSec1::before { width: calc(100% + 43px);} } .productsTopPage .solutionsSection .solutionsInnerSec { display: grid; max-width: 925px; min-height: 276px; margin-left: auto; padding: 18px 22px 0; border-radius: 10px 0 0 10px; background: #e5eef4; grid-template-columns: 185px 1fr; grid-template-rows: auto 1fr; gap: 28px 22px;} @media (max-width: 920px) { .productsTopPage .solutionsSection .solutionsInnerSec { grid-template-columns: calc(calc(150/925) * 100vw) 1fr;} } .productsTopPage .solutionsSection .solutionsInnerSec > h3 { font-size: 24px; font-weight: 500; line-height: 1.5; text-align: center; color: #259a8d; grid-column: 1; grid-row: 1 / 3;} .productsTopPage .solutionsSection .solutionsInnerSec > h3::after { display: block; content: ''; background-repeat: no-repeat; background-position: center center; background-size: contain; margin-inline: auto;} .productsTopPage .solutionsSection .solutionsInnerSec > p { font-size: 16px; line-height: 1.5; position: relative; z-index: 3; max-width: 494px; margin-left: 50px; grid-column: 2; grid-row: 1;} .productsTopPage .solutionsSection .solutionsInnerSec .innerBox { position: relative; z-index: 3; display: flex; max-width: 629px; padding: 41px 23px 17px 23px; border-radius: 10px 10px 0 0; background: #fff; grid-column: 2; grid-row: 2; align-self: end; gap: 0 15px;} .productsTopPage .solutionsSection .solutionsInnerSec .kihon { position: relative; align-self: center;} .productsTopPage .solutionsSection .solutionsInnerSec .kihon::after { position: absolute; top: 50%; left: 30px; width: 36px; height: 31px; content: ''; background: url('/common/images/products/plus.svg') no-repeat center center / contain; translate: 0 -50%;} .productsTopPage .solutionsSection .solutionsInnerSec .kihon a { font-size: 12px; font-weight: 700; display: flex; width: 24px; height: 90px; margin-right: 68px; padding-top: .5em; transition: background-color .2s; text-decoration: none; letter-spacing: .5em; color: #fff; border: 1px solid #259a8d; border-radius: 4px; background: #259a8d; writing-mode: vertical-rl; flex-shrink: 0; justify-content: center; align-items: center;} @media (max-width: 1220px) { .productsTopPage .solutionsSection .solutionsInnerSec .kihon a { margin-right: 30px;} } .productsTopPage .solutionsSection .solutionsInnerSec .kihon a:hover { color: #259a8d; background: #fff;} .productsTopPage .solutionsSection .solutionsInnerSec .listBox { position: relative;} .productsTopPage .solutionsSection .solutionsInnerSec .listBox figcaption { font-size: 16px; font-weight: 500; line-height: 1.12; position: absolute; top: -66px; left: -25px; display: flex; width: -moz-max-content; width: max-content; align-items: center;} .productsTopPage .solutionsSection .solutionsInnerSec .listBox figcaption::before { content: ''; background-repeat: no-repeat; background-position: center center; background-size: contain; flex-shrink: 0;} .productsTopPage .solutionsSection .solutionsInnerSec .listBox .line2 { align-items: flex-end;} .productsTopPage .solutionsSection .solutionsInnerSec .listBox li { line-height: 1;} .productsTopPage .solutionsSection .solutionsInnerSec .listBox li > a { font-size: 12px; font-weight: 500; line-height: 1.91; display: inline-flex; align-items: center;} .productsTopPage .solutionsSection .solutionsInnerSec .listBox li > a::before { width: 8px; height: 8px; margin-right: 6px; content: ''; border-radius: 50%; background: #259a8d;} .productsTopPage .solutionsSection .solutionsInnerSec + .solutionsInnerSec { margin-top: 29px;} .productsTopPage .solutionsSection .solutionsInnerSec1 h3::after { max-width: 140px; height: 157px; margin-top: 8px; background: url('/common/images/products/solutions_illu1.svg') no-repeat center center / contain;} .productsTopPage .solutionsSection .solutionsInnerSec1 .listBox1 { flex: 0 1 168px;} .productsTopPage .solutionsSection .solutionsInnerSec1 .listBox1 figcaption::before { width: 48px; height: 54px; margin-right: 10px; background-image: -webkit-image-set( url('/common/images/products/solutions_mark1@0.5x.webp') 1x, url('/common/images/products/solutions_mark1.webp') 2x ); background-image: image-set( url('/common/images/products/solutions_mark1@0.5x.webp') 1x, url('/common/images/products/solutions_mark1.webp') 2x );} .productsTopPage .solutionsSection .solutionsInnerSec1 .listBox2 { flex: 0 1 187px;} .productsTopPage .solutionsSection .solutionsInnerSec1 .listBox2 figcaption::before { width: 60px; height: 54px; margin-right: 5px; background-image: -webkit-image-set( url('/common/images/products/solutions_mark2@0.5x.webp') 1x, url('/common/images/products/solutions_mark2.webp') 2x ); background-image: image-set( url('/common/images/products/solutions_mark2@0.5x.webp') 1x, url('/common/images/products/solutions_mark2.webp') 2x );} .productsTopPage .solutionsSection .solutionsInnerSec1 .listBox3 { flex: 0 1 133px;} .productsTopPage .solutionsSection .solutionsInnerSec1 .listBox3 figcaption::before { width: 48px; height: 54px; margin-right: 9px; background-image: -webkit-image-set( url('/common/images/products/solutions_mark3@0.5x.webp') 1x, url('/common/images/products/solutions_mark3.webp') 2x ); background-image: image-set( url('/common/images/products/solutions_mark3@0.5x.webp') 1x, url('/common/images/products/solutions_mark3.webp') 2x );} .productsTopPage .solutionsSection .solutionsInnerSec2 h3::after { max-width: 140px; height: 146px; margin-top: 18px; background-image: -webkit-image-set( url('/common/images/products/solutions_illu2.webp') 1x, url('/common/images/products/solutions_illu2@2x.webp') 2x ); background-image: image-set( url('/common/images/products/solutions_illu2.webp') 1x, url('/common/images/products/solutions_illu2@2x.webp') 2x );} .productsTopPage .solutionsSection .solutionsInnerSec2 .listBox1 { flex: 0 1 216px;} .productsTopPage .solutionsSection .solutionsInnerSec2 .listBox1 figcaption::before { width: 48px; height: 54px; margin-right: 9px; background-image: -webkit-image-set( url('/common/images/products/solutions_mark4@0.5x.webp') 1x, url('/common/images/products/solutions_mark4.webp') 2x ); background-image: image-set( url('/common/images/products/solutions_mark4@0.5x.webp') 1x, url('/common/images/products/solutions_mark4.webp') 2x );} .productsTopPage .solutionsSection .solutionsInnerSec2 .listBox1 figcaption .small { font-size: 12px;} .productsTopPage .solutionsSection .solutionsInnerSec2 .listBox2 { flex: 0 1 265px;} .productsTopPage .solutionsSection .solutionsInnerSec2 .listBox2 figcaption::before { width: 54px; height: 54px; margin-right: 7px; background-image: -webkit-image-set( url('/common/images/products/solutions_mark5@0.5x.webp') 1x, url('/common/images/products/solutions_mark5.webp') 2x ); background-image: image-set( url('/common/images/products/solutions_mark5@0.5x.webp') 1x, url('/common/images/products/solutions_mark5.webp') 2x );} .productsTopPage .solutionsSection .solutionsInnerSec3 h3::after { max-width: 147px; height: 140px; margin-top: 25px; background: url('/common/images/products/solutions_illu3.svg') no-repeat center center / contain;} .productsTopPage .solutionsSection .solutionsInnerSec3 .listBox1 { flex: 0 1 216px;} .productsTopPage .solutionsSection .solutionsInnerSec3 .listBox1 figcaption::before { width: 50px; height: 54px; margin-right: 9px; background-image: -webkit-image-set( url('/common/images/products/solutions_mark6@0.5x.webp') 1x, url('/common/images/products/solutions_mark6.webp') 2x ); background-image: image-set( url('/common/images/products/solutions_mark6@0.5x.webp') 1x, url('/common/images/products/solutions_mark6.webp') 2x );} .productsTopPage .solutionsSection .solutionsInnerSec3 .listBox2 { flex: 0 1 265px;} .productsTopPage .solutionsSection .solutionsInnerSec3 .listBox2 figcaption::before { width: 48px; height: 54px; margin-right: 7px; background-image: -webkit-image-set( url('/common/images/products/solutions_mark7@0.5x.webp') 1x, url('/common/images/products/solutions_mark7.webp') 2x ); background-image: image-set( url('/common/images/products/solutions_mark7@0.5x.webp') 1x, url('/common/images/products/solutions_mark7.webp') 2x );} /* ========================================================================== 機能一覧 ========================================================================== */ .productsTopPage .functionIconBoxList { display: grid; grid-template-columns: repeat(auto-fill,80px); gap: 14px 10px;} .productsTopPage .functionIconBoxList a { display: block;} .productsTopPage .functionIconBoxList .box { display: grid; width: 100%; height: 80px; padding: 0 0 3px; transition: background-color .2s; border: 1px solid #ddd; border-radius: 6px; background: #fff; grid-template-columns: 100%; grid-template-rows: 52px 1fr;} .productsTopPage .functionIconBoxList .box::before { width: 52px; height: 52px; content: ''; background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto; grid-column: 1; grid-row: 1; justify-self: center;} .productsTopPage .functionIconBoxList .box p { font-size: 10px; font-weight: 500; line-height: 1.2; text-align: center; grid-column: 1; grid-row: 2; align-self: center;} .productsTopPage .functionIconBoxList .opt { font-size: 6px; line-height: 1; display: flex; width: 52px; height: 12px; margin: 5px auto 0; color: #259a8d; border: 1px solid #d3d3d3; border-radius: 6px; align-items: center; justify-content: center;} .productsTopPage .functionIconBoxList a:hover { opacity: 1;} .productsTopPage .functionIconBoxList a:hover .box { background-color: #e9eeeb;} .productsTopPage .functionIconBoxList .first .box { border: 1px solid #259a8d; grid-template-rows: auto 38px 1fr;} .productsTopPage .functionIconBoxList .first .box::before { width: 38px; height: 38px; grid-row: 2;} .productsTopPage .functionIconBoxList .first .box p { color: #259a8d;} .productsTopPage .functionIconBoxList .first .box p:first-child { line-height: 1; margin-top: 5px; grid-row: 1;} .productsTopPage .functionIconBoxList .first .box p:last-child { grid-row: 3;} /* ========================================================================== 予約管理機能 ========================================================================== */ .productsTopPage .reservationFunction .headingH2 .for::after { width: 206px; height: 96px; background-image: -webkit-image-set( url('/common/images/products/reservation_clinics_title.webp') 1x, url('/common/images/products/reservation_clinics_title@2x.webp') 2x ); background-image: image-set( url('/common/images/products/reservation_clinics_title.webp') 1x, url('/common/images/products/reservation_clinics_title@2x.webp') 2x );} .productsTopPage .reservationFunction .displayList { max-width: 814px; margin-inline: auto;} .productsTopPage .reservationFunctionList { /*margin-top: 15px;*/ padding: 60px 0 33px;} /* products/index.php 以外のサブページ: margin-top を0に上書き ※ products/index.php は class="productsPage productsTopPage" のみで "_page" を含まないため除外される */ .productsTopPage[class*="_page"] .reservationFunctionList { margin-top: 0;} .productsTopPage .reservationFunctionList > header { position: relative; max-width: 930px; margin-bottom: 70px; margin-left: 44px;} .productsTopPage .reservationFunctionList > header::after { display: block; width: 289px; height: 3px; margin-top: 25px; content: ''; background: linear-gradient(90deg, #1c9f91 0%, #0d787e 84.62%, #00546c 100%);} .productsTopPage .reservationFunctionList > header h3, .productsTopPage .reservationFunctionList > header h2 { font-size: 24px; font-weight: 500; line-height: 1.83; margin-bottom: 25px; color: #0d787e;} /* 見出し昇格ページ（旧H3→新H2）共通: 9ページの導入見出しはbold・24pxで統一 （statistics/sms/customizeは元々font-weight:500だったが、他6ページに合わせてboldへ統一） */ .productsPage .reservationFunctionList > header h2 { font-size: 24px; font-weight: bold;} .productsTopPage .reservationFunctionList > header p { font-size: 16px; line-height: 1.5;} .productsTopPage .reservationFunctionList > header p span { font-size: 11px; line-height: 1.5;} .productsTopPage .reservationAmazing { display: grid; max-width: 938px; padding: 0 0 77px 44px; grid-template-columns: 1fr 1fr; gap: 0 42px;} .productsTopPage .reservationAmazing .amazingSec { border-radius: 10px; background: #e5eef4;} .productsTopPage .reservationAmazing .amazingSec a { position: relative; display: block; padding: 15px 11px 10px; text-decoration: none;} .productsTopPage .reservationAmazing .amazingSec h3 { font-size: 18px; font-weight: 500; line-height: 1.5; display: flex; margin-bottom: 10px; text-align: center; justify-content: center; align-items: center;} .productsTopPage .reservationAmazing .amazingSec h3::after { width: 14px; height: 19px; margin-left: 10px; content: ''; background: url('/common/images/products/amazing_arrow.svg') no-repeat center center / contain; flex-shrink: 0;} .productsTopPage .reservationAmazing .amazingSec .img { padding: 7px 0 18px; border-radius: 10px; background: #fff;} .productsTopPage .reservationAmazing .amazingSec .img figcaption { font-size: 12px; font-weight: 500; line-height: 1.5; margin-bottom: 8px; padding: 0 29px;} .productsTopPage .reservationAmazing .amazingSec .more { font-size: 12px; font-weight: 500; position: absolute; right: 24px; bottom: 18px; display: inline-flex; align-items: center;} .productsTopPage .reservationAmazing .amazingSec .more::before { width: 19px; height: 19px; margin-right: 5px; content: ''; background: url('/common/images/products/circle_green_arrow.svg') no-repeat center center / contain; flex-shrink: 0;} /* forクリニック */ .productsTopPage .reservationClinics { margin-top: 60px;} .uketsuke_page .reservationClinics, .yoyaku_page .reservationClinics { margin-top: 0;} .productsTopPage .reservationClinics .headingH2 { margin-bottom: 76px;} .productsTopPage .reservationClinics .headingH2 .for::after { width: 206px; height: 96px; background-image: -webkit-image-set( url('/common/images/products/reservation_clinics_title.webp') 1x, url('/common/images/products/reservation_clinics_title@2x.webp') 2x ); background-image: image-set( url('/common/images/products/reservation_clinics_title.webp') 1x, url('/common/images/products/reservation_clinics_title@2x.webp') 2x );} .productsTopPage .reservationClinics .displayList { display: flex; padding: 20px 30px; justify-content: space-between; gap: 0 20px;} .productsTopPage .reservationClinics .displayList li .img { text-align: center;} .productsTopPage .reservationClinics .displayList li p { font-size: 14px; font-weight: 500; line-height: 1.42; margin-top: 6px; text-align: center;} .productsTopPage .reservationClinics .reservationIconBoxList { max-width: 930px; margin-left: 44px;} /* 基本機能/予約の確認/メール配信/キャッシュレス決済/電子カルテ連携/ワクチン管理機能/ オンライン診療/電子同意書/医療文書DX/スマートチェックイン/再来受付機能/レシートプリンター/呼出しディスプレイ/キャンセル管理/医療連携 */ .productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(1) .box::before { background-image: image-set(url('/common/images/products/function_icon1_1.webp') 1x, url('/common/images/products/function_icon1_1@2x.webp') 2x);} .productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(2) .box::before { background-image: image-set(url('/common/images/products/function_icon1_2.webp') 1x, url('/common/images/products/function_icon1_2@2x.webp') 2x);} .productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(3) .box::before { background-image: image-set(url('/common/images/products/function_icon1_2.webp') 1x, url('/common/images/products/function_icon1_2@2x.webp') 2x);} .productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(4) .box::before { background-image: image-set(url('/common/images/products/function_icon1_3.webp') 1x, url('/common/images/products/function_icon1_3@2x.webp') 2x);} .productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(5) .box::before { background-image: image-set(url('/common/images/products/function_icon1_5.webp') 1x, url('/common/images/products/function_icon1_5@2x.webp') 2x);} .productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(6) .box::before { background-image: image-set(url('/common/images/products/function_icon1_6.webp') 1x, url('/common/images/products/function_icon1_6@2x.webp') 2x);} .productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(7) .box::before { background-image: image-set(url('/common/images/products/function_icon1_7.webp') 1x, url('/common/images/products/function_icon1_7@2x.webp') 2x);} .productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(8) .box::before { background-image: image-set(url('/common/images/products/function_icon2_8.webp') 1x, url('/common/images/products/function_icon2_8@2x.webp') 2x);} .productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(9) .box::before { background-image: image-set(url('/common/images/products/function_icon1_8.webp') 1x, url('/common/images/products/function_icon1_8@2x.webp') 2x);} .productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(10) .box::before { background-image: image-set(url('/common/images/products/all_func_icon3_11.webp') 1x, url('/common/images/products/all_func_icon3_11@2x.webp') 2x);} .productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(11) .box::before { background-image: image-set(url('/common/images/products/function_icon1_10.webp') 1x, url('/common/images/products/function_icon1_10@2x.webp') 2x);} .productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(12) .box::before { background-image: image-set(url('/common/images/products/function_icon1_15.webp') 1x, url('/common/images/products/function_icon1_15@2x.webp') 2x);} .productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(13) .box::before { background-image: image-set(url('/common/images/products/function_icon1_16.webp') 1x, url('/common/images/products/function_icon1_16@2x.webp') 2x);} .productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(14) .box::before { background-image: image-set(url('/common/images/products/all_func_icon3_18.webp') 1x, url('/common/images/products/all_func_icon3_18@2x.webp') 2x);} .productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(15) .box::before { background-image: image-set(url('/common/images/products/all_func_icon3_19.webp') 1x, url('/common/images/products/all_func_icon3_19@2x.webp') 2x);} .productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(16) .box::before { background-image: image-set(url('/common/images/products/all_func_icon3_20.webp') 1x, url('/common/images/products/all_func_icon3_20@2x.webp') 2x);} .productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(17) .box::before { background-image: image-set(url('/common/images/products/all_func_icon3_21.webp') 1x, url('/common/images/products/all_func_icon3_21@2x.webp') 2x);} .productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(18) .box::before { background-image: image-set(url('/common/images/products/all_func_icon3_22.webp') 1x, url('/common/images/products/all_func_icon3_22@2x.webp') 2x);} .productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(19) .box::before { background-image: image-set(url('/common/images/products/function_icon2_24.webp') 1x, url('/common/images/products/function_icon2_24@2x.webp') 2x);} .productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(20) .box::before { background-image: image-set(url('/common/images/products/function_icon2_25.webp') 1x, url('/common/images/products/function_icon2_25@2x.webp') 2x);} .productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(21) .box::before { background-image: image-set(url('/common/images/products/function_icon2_21.webp') 1x, url('/common/images/products/function_icon2_21@2x.webp') 2x);} /* for患者さん */ /*.productsTopPage .reservationPatient { margin-top: 53px; }*/ .yoyaku_page .reservationPatient, .uketsuke_page .reservationPatient { margin-top: 0;} /*.productsTopPage .reservationPatient .headingH2 { margin-bottom: 50px; }*/ .productsTopPage .reservationPatient .headingH2 .for::after { width: 96px; height: 96px; background-image: url('/common/images/products/reservation_patient_title.svg');} .productsTopPage .reservationPatient .displayList { display: flex; max-width: 853px; padding: 20px 30px; justify-content: space-between; gap: 0 20px;} .productsTopPage .reservationPatient .displayList li { flex: 0 1 180px;} .productsTopPage .reservationPatient .displayList li .img { text-align: center;} .productsTopPage .reservationPatient .displayList li p { font-size: 14px; font-weight: 500; line-height: 1.28; padding-top: 7px; text-align: center; border-top: 1px solid #b1b1b1;} .productsTopPage .reservationPatient .displayList li p small { font-size: 11px; font-weight: 400; line-height: 1.1; display: inline-block;} .productsTopPage .reservationPatient .reservationIconBoxList2 { max-width: 930px; margin-left: 44px;} /* 基本機能/LINEでの予約/LINE順番待ち/WEB予約/予約変更・キャンセル/家族予約/ 電話予約（IVR）/WEB問診/オンラインマップ集患/連鎖予約/多言語対応/ゲスト予約/医療連携 */ .productsTopPage .reservationPatient .reservationIconBoxList2 li:nth-child(1) .box::before { background-image: image-set(url('/common/images/products/function_icon2_1.webp') 1x, url('/common/images/products/function_icon2_1@2x.webp') 2x);} .productsTopPage .reservationPatient .reservationIconBoxList2 li:nth-child(2) .box::before { background-image: image-set(url('/common/images/products/function_icon2_4.webp') 1x, url('/common/images/products/function_icon2_4@2x.webp') 2x);} .productsTopPage .reservationPatient .reservationIconBoxList2 li:nth-child(3) .box::before { background-image: image-set(url('/common/images/products/function_icon2_5.webp') 1x, url('/common/images/products/function_icon2_5@2x.webp') 2x);} .productsTopPage .reservationPatient .reservationIconBoxList2 li:nth-child(4) .box::before { background-image: image-set(url('/common/images/products/function_icon2_15.webp') 1x, url('/common/images/products/function_icon2_15@2x.webp') 2x);} .productsTopPage .reservationPatient .reservationIconBoxList2 li:nth-child(5) .box::before { background-image: image-set(url('/common/images/products/function_icon2_2.webp') 1x, url('/common/images/products/function_icon2_2@2x.webp') 2x);} .productsTopPage .reservationPatient .reservationIconBoxList2 li:nth-child(6) .box::before { background-image: image-set(url('/common/images/products/function_icon2_3.webp') 1x, url('/common/images/products/function_icon2_3@2x.webp') 2x);} .productsTopPage .reservationPatient .reservationIconBoxList2 li:nth-child(7) .box::before { background-image: image-set(url('/common/images/products/function_icon2_6.webp') 1x, url('/common/images/products/function_icon2_6@2x.webp') 2x);} .productsTopPage .reservationPatient .reservationIconBoxList2 li:nth-child(8) .box::before { background-image: image-set(url('/common/images/products/function_icon2_7.webp') 1x, url('/common/images/products/function_icon2_7@2x.webp') 2x);} .productsTopPage .reservationPatient .reservationIconBoxList2 li:nth-child(9) .box::before { background-image: image-set(url('/common/images/products/function_icon2_9.webp') 1x, url('/common/images/products/function_icon2_9@2x.webp') 2x);} .productsTopPage .reservationPatient .reservationIconBoxList2 li:nth-child(10) .box::before { background-image: image-set(url('/common/images/products/function_icon2_12.webp') 1x, url('/common/images/products/function_icon2_12@2x.webp') 2x);} .productsTopPage .reservationPatient .reservationIconBoxList2 li:nth-child(11) .box::before { background-image: image-set(url('/common/images/products/function_icon2_14.webp') 1x, url('/common/images/products/function_icon2_14@2x.webp') 2x);} /* ========================================================================== 流用 お問い合わせ ========================================================================== */ .productsTopPage .meet_family_section * { text-align: center;} .productsTopPage .meet_family_section a { display: flex; transition: .5s all;} .productsTopPage .meet_family_section a:hover { opacity: 1;} /* ========================================================================== 診療科目別 機能紹介 ========================================================================== */ .productsTopPage .medicalDepartment { margin-top: 50px;} .productsTopPage .medicalDepartment .headingH2 { margin-bottom: 85px;} .productsTopPage .medicalDepartment .headingH2 p { font-size: 20px; font-weight: 500; line-height: 1.5; max-width: 951px; margin-top: 45px; margin-left: 44px;} @media (max-width: 1210px) { .productsTopPage .medicalDepartment .headingH2 .pcShow { display: none;} } .productsTopPage .medicalDepartment .departmentList { display: grid; max-width: 952px; margin-left: 44px; grid-template-columns: repeat(auto-fill,116px); gap: 21px 23px;} .productsTopPage .medicalDepartment .departmentList li { height: 116px;} .productsTopPage .medicalDepartment .departmentList .departmentBtn { display: grid; width: 100%; height: 100%; padding: 0; cursor: pointer; transition: background-color .2s; border: 1px solid #f2f5f7; border: none; border-radius: 10px; background: #f2f5f7; box-shadow: 0 2px 2px 0 rgba(51, 51, 51, .25); grid-template-columns: 100%; grid-template-rows: 82px 1fr;} @media (hover:hover) { .productsTopPage .medicalDepartment .departmentList .departmentBtn:hover { border: 1px solid #66c5bb; background-color: #fff;} } .productsTopPage .medicalDepartment .departmentList .departmentBtn::before { width: 64px; height: 64px; content: ''; background-repeat: no-repeat; background-position: center center; background-size: contain; grid-column: 1; grid-row: 1; justify-self: center; align-self: center;} .productsTopPage .medicalDepartment .departmentList .departmentBtn span { font-size: 12px; font-weight: 500; line-height: 1.08; padding-bottom: 8px; text-align: center; align-self: center;} .productsTopPage .medicalDepartment .departmentList .departmentBtn1::before { background-image: url('/common/images/products/department_icon1.svg');} .productsTopPage .medicalDepartment .departmentList .departmentBtn2::before { background-image: url('/common/images/products/department_icon2.svg');} .productsTopPage .medicalDepartment .departmentList .departmentBtn3::before { background-image: url('/common/images/products/department_icon3.svg');} .productsTopPage .medicalDepartment .departmentList .departmentBtn4::before { background-image: url('/common/images/products/department_icon4.svg');} .productsTopPage .medicalDepartment .departmentList .departmentBtn5::before { background-image: url('/common/images/products/department_icon5.svg');} .productsTopPage .medicalDepartment .departmentList .departmentBtn6::before { background-image: url('/common/images/products/department_icon6.svg');} .productsTopPage .medicalDepartment .departmentList .departmentBtn7::before { background-image: url('/common/images/products/department_icon7.svg');} .productsTopPage .medicalDepartment .departmentList .departmentBtn8::before { background-image: url('/common/images/products/department_icon8.svg');} .productsTopPage .medicalDepartment .departmentList .departmentBtn9::before { background-image: url('/common/images/products/department_icon9.svg');} .productsTopPage .medicalDepartment .departmentList .departmentBtn10::before { background-image: url('/common/images/products/department_icon10.svg');} .productsTopPage .medicalDepartment .departmentList .departmentBtn11::before { background-image: url('/common/images/products/department_icon11.svg');} .productsTopPage .medicalDepartment .departmentList .departmentBtn12::before { width: 66px; height: 67px; background-image: url('/common/images/products/department_icon12.svg');} .productsTopPage .medicalDepartment .departmentList .departmentBtn13::before { width: 44px; height: 51px; background-image: url('/common/images/products/department_icon13.svg');} .productsTopPage .medicalDepartment .departmentList .departmentBtn14::before { width: 41px; height: 45px; background-image: url('/common/images/products/department_icon14.svg');} .productsTopPage .medicalDepartment .departmentDialog { width: 714px; margin: auto; padding: 0; transition: opacity .6s ease; /* アニメーションの初期状態 */ opacity: 0; border: none; outline: none; background: none;} /* バックドロップのスタイル */ .productsTopPage .medicalDepartment .departmentDialog::backdrop { transition: opacity .6s ease; opacity: 0; background-color: rgba(0, 0, 0, 0);} .productsTopPage .medicalDepartment .departmentDialogShow { opacity: 1;} .productsTopPage .medicalDepartment .departmentDialogShow::backdrop { opacity: 1;} .productsTopPage .medicalDepartment .departmentDialogHide { opacity: 0;} .productsTopPage .medicalDepartment .departmentDialogHide::backdrop { opacity: 0;} .productsTopPage .medicalDepartment .dialogInner { position: relative; overflow: hidden; width: 100%; min-height: 367px; padding: 32px 50px; border: 6px solid #259a8d; border-radius: 10px; background: #fff;} .productsTopPage .medicalDepartment .dialogInner header { display: flex; margin-bottom: 13px; align-items: center;} .productsTopPage .medicalDepartment .dialogInner .departmentName { margin-right: 23px; flex-shrink: 0;} .productsTopPage .medicalDepartment .dialogInner .departmentName span { font-size: 18px; font-weight: 500; position: relative; display: flex; min-height: 50px; padding: 5px 24px 5px 19px; border-radius: 25px; background: #fff; align-items: center;} .productsTopPage .medicalDepartment .dialogInner .departmentName span::before { width: 34px; height: 34px; margin-right: 8px; content: ''; background-repeat: no-repeat; background-position: center center; background-size: contain; flex-shrink: 0;} .productsTopPage .medicalDepartment .dialogInner .departmentName span::after { position: absolute; padding: 2px; /* ボーダーの太さ */ content: ''; border-radius: inherit; background: linear-gradient(90deg, #1c9f91 0%, #0d787e 84.62%, #00546c 100%); inset: 0; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: xor;} .productsTopPage .medicalDepartment .dialogInner h2 { font-size: 24px; font-weight: 500; line-height: 1.5;} .productsTopPage .medicalDepartment .dialogInner .description { font-size: 16px; line-height: 1.5;} .productsTopPage .medicalDepartment .dialogInner ul { display: flex; margin-top: 40px; gap: 0 89px;} .productsTopPage .medicalDepartment .dialogInner ul li + li { position: relative;} .productsTopPage .medicalDepartment .dialogInner ul li + li::before { position: absolute; top: 39px; left: -71px; width: 52px; height: 44px; content: ''; background: url('/common/images/products/dialog_plus.webp') no-repeat center center / contain;} .productsTopPage .medicalDepartment .dialogInner ul .img { overflow: hidden; margin-bottom: 2px; border-radius: 10px;} .productsTopPage .medicalDepartment .dialogInner ul p { font-size: 14px; font-weight: 500; line-height: 1.5; text-align: center;} .productsTopPage .medicalDepartment .departmentDialogClose { line-height: 1; position: absolute; top: 2px; right: 0; display: block; width: 52px; height: 44px; padding: 0; cursor: pointer; transition: opcity .2s; border: none; outline: none; background: none; rotate: -44deg;} @media (hover:hover) { .productsTopPage .medicalDepartment .departmentDialogClose:hover { opacity: .8;} } .productsTopPage .medicalDepartment .departmentDialog1 .departmentName span::before { background-image: url('/common/images/products/department_icon1.svg');} .productsTopPage .medicalDepartment .departmentDialog2 .departmentName span::before { background-image: url('/common/images/products/department_icon2.svg');} .productsTopPage .medicalDepartment .departmentDialog3 .departmentName span::before { background-image: url('/common/images/products/department_icon3.svg');} .productsTopPage .medicalDepartment .departmentDialog4 .departmentName span::before { background-image: url('/common/images/products/department_icon4.svg');} .productsTopPage .medicalDepartment .departmentDialog5 .departmentName span::before { background-image: url('/common/images/products/department_icon5.svg');} .productsTopPage .medicalDepartment .departmentDialog6 .departmentName span::before { background-image: url('/common/images/products/department_icon6.svg');} .productsTopPage .medicalDepartment .departmentDialog7 .departmentName span::before { background-image: url('/common/images/products/department_icon7.svg');} .productsTopPage .medicalDepartment .departmentDialog8 .departmentName span::before { background-image: url('/common/images/products/department_icon8.svg');} .productsTopPage .medicalDepartment .departmentDialog9 .departmentName span::before { background-image: url('/common/images/products/department_icon9.svg');} .productsTopPage .medicalDepartment .departmentDialog10 .departmentName span::before { background-image: url('/common/images/products/department_icon10.svg');} .productsTopPage .medicalDepartment .departmentDialog11 .departmentName span::before { background-image: url('/common/images/products/department_icon11.svg');} .productsTopPage .medicalDepartment .departmentDialog12 .departmentName span::before { background-image: url('/common/images/products/department_icon12.svg');} .productsTopPage .medicalDepartment .departmentDialog13 .departmentName span { font-size: 14px; line-height: 1.14;} .productsTopPage .medicalDepartment .departmentDialog13 .departmentName span::before { width: 24px; height: 27px; margin-right: 13px; background-image: url('/common/images/products/department_icon13.svg');} .productsTopPage .medicalDepartment .departmentDialog14 .departmentName span { font-size: 14px; line-height: 1.14;} .productsTopPage .medicalDepartment .departmentDialog14 .departmentName span::before { width: 20px; height: 22px; margin-right: 13px; background-image: url('/common/images/products/department_icon14.svg');} /* ========================================================================== クリニックの課題別 機能紹介 ========================================================================== */ .productsTopPage .byIssue { margin-top: 121px;} .productsTopPage .byIssue .headingH2 { margin-bottom: 37px;} .productsTopPage .byIssue .headingH2 p { font-size: 20px; line-height: 1.5; max-width: 968px; margin-top: 43px; margin-left: 44px;} .productsTopPage .byIssue .wrapper { margin-left: 44px;} .productsTopPage .byIssue .row { display: grid; max-width: 892px; margin-inline: auto; grid-template-columns: repeat(5,1fr); /* grid-template-columns: repeat(auto-fit,170px); */ gap: 10px;} .productsTopPage .byIssue .byIssueSec { position: relative; display: grid; padding: 20px 10px 10px; border-radius: 10px; background: #e5eef4; grid-template-rows: subgrid; grid-row: span 2; gap: 0;} .productsTopPage .byIssue .byIssueSec::before { display: block; width: 67px; height: 61px; margin-bottom: 24px; content: ''; background-repeat: no-repeat; background-position: center center; background-size: contain; grid-column: 1; grid-row: 1; justify-self: center;} .productsTopPage .byIssue .byIssueSec h2 { font-size: 16px; font-weight: 700; line-height: 1.12; position: absolute; top: 84px; left: 50%; width: 100%; text-align: center; color: #259a8d; translate: -50% 0;} .productsTopPage .byIssue .byIssueSec .listBox { padding: 39px 5px 17px 12px; border-radius: 10px; background: #fff; grid-column: 1; grid-row: 2;} .productsTopPage .byIssue .byIssueSec .listBox .kihon { position: relative; width: 100%; padding-bottom: 33px; align-self: center;} .productsTopPage .byIssue .byIssueSec .listBox .kihon::after { position: absolute; bottom: 2px; left: 50%; width: 36px; height: 31px; content: ''; background: url('/common/images/products/plus.svg') no-repeat center center / contain; translate: -50% 0;} .productsTopPage .byIssue .byIssueSec .listBox .kihon a { font-size: 12px; font-weight: 700; display: flex; max-width: 110px; height: 24px; padding-bottom: .2em; transition: background-color .2s; text-decoration: none; color: #fff; border: 1px solid #259a8d; border-radius: 4px; background: #259a8d; margin-inline: auto; flex-shrink: 0; justify-content: center; align-items: center;} .productsTopPage .byIssue .byIssueSec .listBox .kihon a:hover { color: #259a8d; background: #fff;} .productsTopPage .byIssue .byIssueSec .listBox li { line-height: 1;} .productsTopPage .byIssue .byIssueSec .listBox li > a { font-size: 12px; font-weight: 500; line-height: 1.5; display: inline-flex;} .productsTopPage .byIssue .byIssueSec .listBox li > a::before { width: 4px; height: 1.5em; margin-right: 9px; content: ''; border-radius: 50%; background: url('/common/images/products/grenn_dots.svg') no-repeat center center / 4px auto;} .productsTopPage .byIssue .byIssueSec .listBox li + li { margin-top: 1px;} .productsTopPage .byIssue .byIssueSec1::before { background-image: -webkit-image-set( url('/common/images/products/by_issue_icon1@0.5x.webp') 1x, url('/common/images/products/by_issue_icon1.webp') 2x ); background-image: image-set( url('/common/images/products/by_issue_icon1@0.5x.webp') 1x, url('/common/images/products/by_issue_icon1.webp') 2x );} .productsTopPage .byIssue .byIssueSec2::before { background-image: -webkit-image-set( url('/common/images/products/by_issue_icon2@0.5x.webp') 1x, url('/common/images/products/by_issue_icon2.webp') 2x ); background-image: image-set( url('/common/images/products/by_issue_icon2@0.5x.webp') 1x, url('/common/images/products/by_issue_icon2.webp') 2x );} .productsTopPage .byIssue .byIssueSec3::before { background-image: -webkit-image-set( url('/common/images/products/by_issue_icon3@0.5x.webp') 1x, url('/common/images/products/by_issue_icon3.webp') 2x ); background-image: image-set( url('/common/images/products/by_issue_icon3@0.5x.webp') 1x, url('/common/images/products/by_issue_icon3.webp') 2x );} .productsTopPage .byIssue .byIssueSec4::before { background-image: -webkit-image-set( url('/common/images/products/by_issue_icon4@0.5x.webp') 1x, url('/common/images/products/by_issue_icon4.webp') 2x ); background-image: image-set( url('/common/images/products/by_issue_icon4@0.5x.webp') 1x, url('/common/images/products/by_issue_icon4.webp') 2x );} .productsTopPage .byIssue .byIssueSec5::before { background-image: -webkit-image-set( url('/common/images/products/by_issue_icon5@0.5x.webp') 1x, url('/common/images/products/by_issue_icon5.webp') 2x ); background-image: image-set( url('/common/images/products/by_issue_icon5@0.5x.webp') 1x, url('/common/images/products/by_issue_icon5.webp') 2x );} /* ========================================================================== シーン別 機能紹介 ========================================================================== */ .productsTopPage .byScene { margin-top: 90px;} .productsTopPage .byScene .headingH2 { margin-bottom: 61px;} .productsTopPage .byScene .headingH2 p { font-size: 20px; line-height: 1.5; max-width: 935px; margin-top: 48px; margin-left: 44px;} .productsTopPage .byScene .wrapper { margin-left: 44px;} .productsTopPage .byScene .row { display: grid; max-width: 892px; margin-inline: auto; grid-template-columns: repeat(5,1fr); gap: 0 10px;} .productsTopPage .byScene .row::after { display: block; width: 100%; height: 24px; margin-top: 23px; content: ''; background: url('/common/images/products/by_scene_arrow.svg') no-repeat center center / contain; grid-column: 1 / 6;} .productsTopPage .byScene .bySceneSec { position: relative; display: grid; padding: 18px 10px 10px; border-radius: 10px; background: #e5eef4; grid-template-rows: subgrid; grid-row: span 3; gap: 0;} .productsTopPage .byScene .bySceneSec::before { display: block; width: 67px; height: 59px; margin-bottom: 5px; content: ''; background-repeat: no-repeat; background-position: center center; background-size: contain; grid-column: 1; grid-row: 1; justify-self: center;} .productsTopPage .byScene .bySceneSec h2 { font-size: 16px; font-weight: 700; line-height: 1.12; margin-bottom: 17px; text-align: center; color: #259a8d; grid-column: 1; grid-row: 2;} .productsTopPage .byScene .bySceneSec .listBox { padding: 16px 0 14px; border-radius: 10px; background: #fff; grid-column: 1; grid-row: 3;} .productsTopPage .byScene .bySceneSec .listBox .read { line-height: 1; max-width: 118px; min-height: 2.5em; margin-bottom: 17px; padding: 0 2px; margin-inline: auto;} .productsTopPage .byScene .bySceneSec .listBox .read a { font-size: 12px; font-weight: 500; line-height: 1.5; text-decoration: none;} .productsTopPage .byScene .bySceneSec .listBox .kihon { position: relative; width: 100%; padding: 0 2px; padding-bottom: 33px; align-self: center;} .productsTopPage .byScene .bySceneSec .listBox .kihon::after { position: absolute; bottom: 2px; left: 50%; width: 36px; height: 31px; content: ''; background: url('/common/images/products/plus.svg') no-repeat center center / contain; translate: -50% 0;} .productsTopPage .byScene .bySceneSec .listBox .kihon a { font-size: 12px; font-weight: 700; display: flex; max-width: 110px; height: 24px; padding-bottom: .2em; transition: background-color .2s; text-decoration: none; color: #fff; border: 1px solid #259a8d; border-radius: 4px; background: #259a8d; margin-inline: auto; flex-shrink: 0; justify-content: center; align-items: center;} .productsTopPage .byScene .bySceneSec .listBox .kihon a:hover { color: #259a8d; background: #fff;} .productsTopPage .byScene .bySceneSec .listBox ul { padding: 0 2px 0 12px;} .productsTopPage .byScene .bySceneSec .listBox li { line-height: 1;} .productsTopPage .byScene .bySceneSec .listBox li > a { font-size: 12px; font-weight: 500; line-height: 1.5; display: inline-flex;} .productsTopPage .byScene .bySceneSec .listBox li > a::before { width: 4px; height: 1.5em; margin-right: 9px; content: ''; border-radius: 50%; background: url('/common/images/products/grenn_dots.svg') no-repeat center center / 4px auto;} .productsTopPage .byScene .bySceneSec1::before { background-image: -webkit-image-set( url('/common/images/products/by_scene_icon1@0.5x.webp') 1x, url('/common/images/products/by_scene_icon1.webp') 2x ); background-image: image-set( url('/common/images/products/by_scene_icon1@0.5x.webp') 1x, url('/common/images/products/by_scene_icon1.webp') 2x );} .productsTopPage .byScene .bySceneSec2::before { background-image: -webkit-image-set( url('/common/images/products/by_scene_icon2@0.5x.webp') 1x, url('/common/images/products/by_scene_icon2.webp') 2x ); background-image: image-set( url('/common/images/products/by_scene_icon2@0.5x.webp') 1x, url('/common/images/products/by_scene_icon2.webp') 2x );} .productsTopPage .byScene .bySceneSec3::before { background-image: -webkit-image-set( url('/common/images/products/by_scene_icon3@0.5x.webp') 1x, url('/common/images/products/by_scene_icon3.webp') 2x ); background-image: image-set( url('/common/images/products/by_scene_icon3@0.5x.webp') 1x, url('/common/images/products/by_scene_icon3.webp') 2x );} .productsTopPage .byScene .bySceneSec4::before { background-image: -webkit-image-set( url('/common/images/products/by_scene_icon4@0.5x.webp') 1x, url('/common/images/products/by_scene_icon4.webp') 2x ); background-image: image-set( url('/common/images/products/by_scene_icon4@0.5x.webp') 1x, url('/common/images/products/by_scene_icon4.webp') 2x );} .productsTopPage .byScene .bySceneSec5::before { background-image: -webkit-image-set( url('/common/images/products/by_scene_icon5@0.5x.webp') 1x, url('/common/images/products/by_scene_icon5.webp') 2x ); background-image: image-set( url('/common/images/products/by_scene_icon5@0.5x.webp') 1x, url('/common/images/products/by_scene_icon5.webp') 2x );} /* ========================================================================== 予約方式別 機能紹介 ========================================================================== */ .productsTopPage .reservationSystem { margin-top: 112px;} .productsTopPage .reservationSystem .headingH2 { margin-bottom: 79px;} .productsTopPage .reservationSystem .headingH2 p { font-size: 20px; line-height: 1.5; max-width: 937px; margin-top: 50px; margin-left: 44px;} .productsTopPage .reservationSystem .row { display: grid; max-width: 940px; margin-left: 44px; grid-template-columns: repeat(3,1fr); gap: 0 20px;} .productsTopPage .reservationSystem .reservationSystemSec { display: grid; padding: 16px 10px 10px; border-radius: 10px; background: #e5eef4; grid-template-rows: subgrid; grid-row: span 2; gap: 0;} .productsTopPage .reservationSystem .reservationSystemSec h2 { font-size: 18px; font-weight: 500; line-height: 1.11; display: flex; margin-bottom: 13px; text-align: center; align-self: center; justify-content: center; align-items: center; gap: 0 31px;} .productsTopPage .reservationSystem .reservationSystemSec h2::before { width: 14px; content: ''; flex-shrink: 0;} .productsTopPage .reservationSystem .reservationSystemSec h2::after { width: 14px; height: 19px; content: ''; background: url('/common/images/products/amazing_arrow.svg') no-repeat center center / contain; flex-shrink: 0;} .productsTopPage .reservationSystem .reservationSystemSec .innerBox { padding: 32px 20px 25px; border-radius: 10px; background: #fff;} .productsTopPage .reservationSystem .reservationSystemSec .innerBox .illu { display: flex; height: 90px; margin-bottom: 44px; justify-content: center; align-items: flex-end;} .productsTopPage .reservationSystem .reservationSystemSec .innerBox p { font-size: 14px; font-weight: 500; line-height: 1.5;} .productsTopPage .reservationSystem .reservationSystemSec .innerBox p + p { margin-top: 1.5em;} .productsTopPage .reservationSystem .reservationSystemSec2 .innerBox .illu, .productsTopPage .reservationSystem .reservationSystemSec3 .innerBox .illu { padding-bottom: 11px;} /* ========================================================================== 全機能一覧 ========================================================================== */ .productsTopPage .allFunction { margin-top: 68px;} .productsTopPage .allFunction .headingH2 { margin-bottom: 78px;} .productsTopPage .allFunction .headingH2 h2 { padding-left: 10px;} .productsTopPage .allFunction .headingH2 .line { display: flex; align-items: flex-end;} .productsTopPage .allFunction .allFunctionSec { display: grid; padding: 25px 26px 44px 26px; border: 1px solid #f2f5f7; grid-template-columns: 213px 1fr;} .productsTopPage .allFunction .allFunctionSec header { padding-right: 10px;} .productsTopPage .allFunction .allFunctionSec header h3 { font-size: 24px; font-weight: 500; line-height: 1.5; margin-top: -.2em; color: #0d787e;} .productsTopPage .allFunction .allFunctionSec header p { font-size: 16px; font-weight: 500; line-height: 1.5; margin-top: 6px; color: #0d787e;} .productsTopPage .allFunction .allFunctionSec + .allFunctionSec { margin-top: 20px;} .productsTopPage .allFunction .functionIconBoxList { gap: 16px 17px;} /* クリニック経営: 統計機能/AI-Board */ .productsTopPage .allFunction .allFunctionIconBoxList1 li:nth-child(1) .box::before { background-image: image-set(url('/common/images/products/all_func_icon1_1.webp') 1x, url('/common/images/products/all_func_icon1_1@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList1 li:nth-child(2) .box::before { background-image: image-set(url('/common/images/products/all_func_icon1_2.webp') 1x, url('/common/images/products/all_func_icon1_2@2x.webp') 2x);} /* 予約機能(患者コミュニケーション): 基本機能/患者情報登録/予約登録・変更キャンセル/ゲスト予約/次回予約/患者情報コンバート/紹介者管理機能/ LINEでの予約/WEB問診/家族予約/多言語対応/サポートチャット/電話予約（IVR）/オンラインマップ集患 */ .productsTopPage .allFunction .allFunctionIconBoxList2 li:nth-child(1) .box::before { background-image: image-set(url('/common/images/products/function_icon2_1.webp') 1x, url('/common/images/products/function_icon2_1@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList2 li:nth-child(2) .box::before { background-image: image-set(url('/common/images/products/function_icon2_4.webp') 1x, url('/common/images/products/function_icon2_4@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList2 li:nth-child(3) .box::before { background-image: image-set(url('/common/images/products/function_icon2_5.webp') 1x, url('/common/images/products/function_icon2_5@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList2 li:nth-child(4) .box::before { background-image: image-set(url('/common/images/products/function_icon2_15.webp') 1x, url('/common/images/products/function_icon2_15@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList2 li:nth-child(5) .box::before { background-image: image-set(url('/common/images/products/function_icon2_2.webp') 1x, url('/common/images/products/function_icon2_2@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList2 li:nth-child(6) .box::before { background-image: image-set(url('/common/images/products/function_icon2_3.webp') 1x, url('/common/images/products/function_icon2_3@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList2 li:nth-child(7) .box::before { background-image: image-set(url('/common/images/products/function_icon2_6.webp') 1x, url('/common/images/products/function_icon2_6@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList2 li:nth-child(8) .box::before { background-image: image-set(url('/common/images/products/function_icon2_7.webp') 1x, url('/common/images/products/function_icon2_7@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList2 li:nth-child(9) .box::before { background-image: image-set(url('/common/images/products/function_icon2_9.webp') 1x, url('/common/images/products/function_icon2_9@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList2 li:nth-child(10) .box::before { background-image: image-set(url('/common/images/products/function_icon2_12.webp') 1x, url('/common/images/products/function_icon2_12@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList2 li:nth-child(11) .box::before { background-image: image-set(url('/common/images/products/function_icon2_14.webp') 1x, url('/common/images/products/function_icon2_14@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(1) .box::before { background-image: image-set(url('/common/images/products/function_icon1_1.webp') 1x, url('/common/images/products/function_icon1_1@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(2) .box::before { background-image: image-set(url('/common/images/products/function_icon1_2.webp') 1x, url('/common/images/products/function_icon1_2@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(3) .box::before { background-image: image-set(url('/common/images/products/function_icon1_2.webp') 1x, url('/common/images/products/function_icon1_2@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(4) .box::before { background-image: image-set(url('/common/images/products/function_icon1_3.webp') 1x, url('/common/images/products/function_icon1_3@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(5) .box::before { background-image: image-set(url('/common/images/products/function_icon1_5.webp') 1x, url('/common/images/products/function_icon1_5@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(6) .box::before { background-image: image-set(url('/common/images/products/function_icon1_6.webp') 1x, url('/common/images/products/function_icon1_6@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(7) .box::before { background-image: image-set(url('/common/images/products/function_icon1_7.webp') 1x, url('/common/images/products/function_icon1_7@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(8) .box::before { background-image: image-set(url('/common/images/products/function_icon2_8.webp') 1x, url('/common/images/products/function_icon2_8@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(9) .box::before { background-image: image-set(url('/common/images/products/function_icon1_8.webp') 1x, url('/common/images/products/function_icon1_8@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(10) .box::before { background-image: image-set(url('/common/images/products/all_func_icon3_11.webp') 1x, url('/common/images/products/all_func_icon3_11@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(11) .box::before { background-image: image-set(url('/common/images/products/function_icon1_10.webp') 1x, url('/common/images/products/function_icon1_10@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(12) .box::before { background-image: image-set(url('/common/images/products/function_icon1_15.webp') 1x, url('/common/images/products/function_icon1_15@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(13) .box::before { background-image: image-set(url('/common/images/products/function_icon1_16.webp') 1x, url('/common/images/products/function_icon1_16@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(14) .box::before { background-image: image-set(url('/common/images/products/all_func_icon3_18.webp') 1x, url('/common/images/products/all_func_icon3_18@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(15) .box::before { background-image: image-set(url('/common/images/products/all_func_icon3_19.webp') 1x, url('/common/images/products/all_func_icon3_19@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(16) .box::before { background-image: image-set(url('/common/images/products/all_func_icon3_20.webp') 1x, url('/common/images/products/all_func_icon3_20@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(17) .box::before { background-image: image-set(url('/common/images/products/all_func_icon3_21.webp') 1x, url('/common/images/products/all_func_icon3_21@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(18) .box::before { background-image: image-set(url('/common/images/products/all_func_icon3_22.webp') 1x, url('/common/images/products/all_func_icon3_22@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(19) .box::before { background-image: image-set(url('/common/images/products/function_icon2_24.webp') 1x, url('/common/images/products/function_icon2_24@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(20) .box::before { background-image: image-set(url('/common/images/products/function_icon2_25.webp') 1x, url('/common/images/products/function_icon2_25@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(21) .box::before { background-image: image-set(url('/common/images/products/function_icon2_21.webp') 1x, url('/common/images/products/function_icon2_21@2x.webp') 2x);} /* 再来促進: LINEdeピンポイント配信/前日リマインドメール送信/SMSリマインダー */ .productsTopPage .allFunction .allFunctionIconBoxList4 li:nth-child(1) .box::before { background-image: image-set(url('/common/images/products/function_icon1_3.webp') 1x, url('/common/images/products/function_icon1_3@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList4 li:nth-child(2) .box::before { background-image: image-set(url('/common/images/products/function_icon1_4.webp') 1x, url('/common/images/products/function_icon1_4@2x.webp') 2x);} .productsTopPage .allFunction .allFunctionIconBoxList4 li:nth-child(3) .box::before { background-image: image-set(url('/common/images/products/all_func_icon2_16.webp') 1x, url('/common/images/products/all_func_icon2_16@2x.webp') 2x);} /* ========================================================================== end ========================================================================== */ /* @import "breakpoints/_1050max.css"; */ @media only screen and (max-width: 767px) { .productsPage img { width: 100%; max-width: none;} .productsPage .mainWrapper { width: 100%; margin: calc(calc(28/393) *100vw) auto 0; gap: 0; padding: 0;} /* 現行ページ(SP)は各セクション見出し(header)のテキストが中央寄せになっているため、 productsTopPage内のheader配下テキストを中央寄せに統一する */ .productsTopPage header { text-align: center;} /* ========================================================================== グラデーションボタン ========================================================================== */ .productsPage .gradBtn { font-size: calc(calc(24/393) *100vw); width: calc(calc(359/393) *100vw); height: calc(calc(60/393) *100vw); border-radius: calc(calc(50/393) *100vw); box-shadow: 0 calc(calc(4/393) *100vw) calc(calc(4/393) *100vw) 0 rgba(0, 0, 0, .25);} .productsPage .gradBtn span { font-size: calc(calc(24/393) *100vw);} .productsPage .gradBtn::before { border-radius: calc(calc(50/393) *100vw);} .productsPage .gradBtn::after { border: calc(calc(2/393) *100vw) solid #0d787e; border-radius: calc(calc(50/393) *100vw);} /* ========================================================================== topSection ========================================================================== */ .productsTopPage .topSection { max-width: calc(calc(359/393) *100vw); margin-inline: auto;} .productsTopPage .topSection h2 { font-size: calc(calc(16/393) *100vw); margin-bottom: calc(calc(14/393) *100vw);} .productsTopPage .topSection h2 img { width: calc(calc(211/393) *100vw);} .productsTopPage .topSection h2 .line { gap: 0;} .productsTopPage .topSection p { font-size: calc(calc(14/393) *100vw);} .productsTopPage .topSection .gradBtn { margin-top: calc(calc(14/393) *100vw);} .productsTopPage .topSection .gradBtn + p { margin-top: calc(calc(62/393) *100vw);} /* ========================================================================== pageNav ========================================================================== */ .productsTopPage .pageNav { max-width: none; margin: calc(calc(19/393) *100vw) 0 0 0; background: #f3f6f8;} .productsTopPage .pageNavPC { display: none;} .productsTopPage .pageNavSP { position: relative; display: block; padding: calc(calc(18/393) *100vw) 0;} .productsTopPage .pageNavSP .selectText { font-size: calc(calc(12/393) *100vw); font-weight: 500; display: flex; width: calc(calc(320/393) *100vw); height: calc(calc(50/393) *100vw); padding-left: calc(calc(39/393) *100vw); border: calc(calc(6/393) *100vw) solid #e8f0f2; border-radius: calc(calc(25/393) *100vw); background-color: #fff; box-shadow: 0 calc(calc(1/393) *100vw) calc(calc(4/393) *100vw) 0 rgba(0, 0, 0, .25); margin-inline: auto; align-items: center;} .productsTopPage .pageNavSP .selectText::after { width: calc(calc(19/393) *100vw); height: calc(calc(19/393) *100vw); margin-left: calc(calc(20/393) *100vw); content: ''; transition: rotate .2s linear; background: url('/common/images/products/pagenavi_arrow_sp.svg') no-repeat center center / contain; flex-shrink: 0;} .productsTopPage .pageNavSP .rotated::after { rotate: 180deg;} .productsTopPage .pageNavSP .slideDownBox { position: absolute; z-index: 10; top: calc(calc(68/393) *100vw); left: 50%; display: none; width: calc(calc(265/393) *100vw); padding: calc(calc(21/393) *100vw) 0 calc(calc(31/393) *100vw); border: calc(calc(6/393) *100vw) solid #e8f0f2; border-radius: calc(calc(10/393) *100vw); background-color: #fff; translate: -50% 0;} .productsTopPage .pageNavSP .slideDownBox li + li { margin-top: calc(calc(22/393) *100vw);} .productsTopPage .pageNavSP .slideDownBox li { font-size: calc(calc(12/393) *100vw); line-height: 1.5; text-align: center;} .productsTopPage .pageNavSP .slideDownBox a { font-size: calc(calc(12/393) *100vw); font-weight: 500; line-height: 1.5; display: inline-flex; text-align: center; align-items: center;} .productsTopPage .pageNavSP .slideDownBox a::after { width: calc(calc(11/393) *100vw); height: calc(calc(7/393) *100vw); margin-left: calc(calc(10/393) *100vw); content: ''; background: url('/common/images/products/pagenavi_arrow_sp2.svg') no-repeat center center / contain; flex-shrink: 0;} /* ========================================================================== borderWrapper ========================================================================== */ .productsTopPage .borderWrapper { overflow: hidden; margin-top: calc(calc(44/393) *100vw); padding-left: calc(calc(10/393) *100vw);} .productsTopPage .borderWrapper::before { width: calc(calc(8/393) *100vw); border: calc(calc(1/393) *100vw) solid #d4e3f2;} /* ========================================================================== headingH2 ========================================================================== */ .productsTopPage .headingH2::before { width: calc(calc(180/393) *100vw); height: calc(calc(10/393) *100vw);} .productsTopPage .headingH2 h2 { font-size: calc(calc(20/393) *100vw); min-height: calc(calc(100/393) *100vw); padding-left: calc(calc(12/393) *100vw);} .productsTopPage .headingH2 h2::before, .productsTopPage .headingH2 h2::after { height: calc(calc(1/393) *100vw);} .productsTopPage .headingH2 .for { font-size: calc(calc(15/393) *100vw); margin-left: calc(calc(12/393) *100vw);} .productsTopPage .headingH2 .for::before { bottom: calc(-1 * calc(calc(8/393) *100vw)); width: calc(calc(120/393) *100vw); height: calc(calc(2/393) *100vw);} .productsTopPage .headingH2 .for::after { left: calc(calc(120/393) *100vw);} /* ========================================================================== 背景水色セクション ========================================================================== */ .productsTopPage .backBlueSection::before { display: none;} /* ========================================================================== 医療現場のご要望から生まれたソリューション群 ========================================================================== */ .productsTopPage .solutionsSection .headingH2 { margin-bottom: calc(calc(32/393) *100vw);} .productsTopPage .solutionsSection .headingH2 h2 br { display: block;} .productsTopPage .solutionsSection .headingH2 p { font-size: calc(calc(14/393) *100vw); max-width: calc(calc(363/393) *100vw); margin-top: calc(calc(32/393) *100vw); margin-left: calc(calc(12/393) *100vw);} .productsTopPage .solutionsSection .row { padding-bottom: 0; padding-left: 0;} .productsTopPage .solutionsSection .solutionsInnerSec1::before { display: none;} .productsTopPage .solutionsSection .solutionsInnerSec { display: grid; max-width: none; min-height: 0; margin-left: 0; padding: calc(calc(21/393) *100vw) 0 0 calc(calc(11/393) *100vw); border-radius: 0; grid-template-columns: 100%; grid-template-rows: minmax(calc(calc(116/393) *100vw),auto) 1fr; gap: calc(calc(8/393) *100vw) 0;} .productsTopPage .solutionsSection .solutionsInnerSec > h3 { font-size: calc(calc(20/393) *100vw); width: -moz-max-content; width: max-content; grid-column: 1;} .productsTopPage .solutionsSection .solutionsInnerSec > h3::after { margin-inline: 0;} .productsTopPage .solutionsSection .solutionsInnerSec > p { font-size: calc(calc(12/393) *100vw); width: calc(calc(251/393) *100vw); max-width: none; margin-left: 0; padding-right: calc(calc(10/393) *100vw); grid-column: 1; align-self: end; justify-self: end;} .productsTopPage .solutionsSection .solutionsInnerSec .innerBox { width: calc(calc(319/393) *100vw); max-width: none; padding: calc(calc(16/393) *100vw) 0 calc(calc(13/393) *100vw); border-radius: calc(calc(10/393) *100vw) 0 0 0; grid-column: 1; justify-self: end; align-self: end; flex-flow: column;} .productsTopPage .solutionsSection .solutionsInnerSec .kihon { margin-bottom: calc(calc(10/393) *100vw);} .productsTopPage .solutionsSection .solutionsInnerSec .kihon::after { position: static; display: block; width: calc(calc(36/393) *100vw); height: calc(calc(31/393) *100vw); margin: 0 auto; translate: 0;} .productsTopPage .solutionsSection .solutionsInnerSec .kihon a { font-size: calc(calc(12/393) *100vw); width: calc(calc(108/393) *100vw); height: calc(calc(21/393) *100vw); margin-right: 0; padding-top: 0; letter-spacing: 0; border: calc(calc(1/393) *100vw) solid #259a8d; border-radius: calc(calc(4/393) *100vw); background: #259a8d; writing-mode: horizontal-tb;} .productsTopPage .solutionsSection .solutionsInnerSec .listBox { width: calc(calc(173/393) *100vw); align-self: flex-end;} .productsTopPage .solutionsSection .solutionsInnerSec .listBox figcaption { font-size: calc(calc(14/393) *100vw); top: 0; left: calc(-1 * calc(calc(160/393) *100vw));} .productsTopPage .solutionsSection .solutionsInnerSec .listBox .line2 { align-items: center;} .productsTopPage .solutionsSection .solutionsInnerSec .listBox li > a { font-size: calc(calc(12/393) *100vw);} .productsTopPage .solutionsSection .solutionsInnerSec .listBox li > a::before { width: calc(calc(8/393) *100vw); height: calc(calc(8/393) *100vw); margin-right: calc(calc(6/393) *100vw);} .productsTopPage .solutionsSection .solutionsInnerSec .listBox + .listBox { margin-top: calc(calc(19/393) *100vw);} .productsTopPage .solutionsSection .solutionsInnerSec + .solutionsInnerSec { margin-top: 0;} .productsTopPage .solutionsSection .solutionsInnerSec1 { border-radius: calc(calc(10/393) *100vw) 0 0 0; grid-template-rows: minmax(calc(calc(86/393) *100vw),auto) 1fr;} .productsTopPage .solutionsSection .solutionsInnerSec1 h3 { z-index: 4;} .productsTopPage .solutionsSection .solutionsInnerSec1 h3::after { max-width: calc(calc(75/393) *100vw); height: calc(calc(77/393) *100vw); margin-top: calc(calc(4/393) *100vw);} .productsTopPage .solutionsSection .solutionsInnerSec1 > p { align-self: center;} .productsTopPage .solutionsSection .solutionsInnerSec1 .listBox1 { flex: 0 1 auto;} .productsTopPage .solutionsSection .solutionsInnerSec1 .listBox1 figcaption::before { width: calc(calc(48/393) *100vw); height: calc(calc(54/393) *100vw); margin-right: calc(calc(10/393) *100vw);} .productsTopPage .solutionsSection .solutionsInnerSec1 .listBox2 { flex: 0 1 auto;} .productsTopPage .solutionsSection .solutionsInnerSec1 .listBox2 figcaption { left: calc(-1 * calc(calc(168/393) *100vw));} .productsTopPage .solutionsSection .solutionsInnerSec1 .listBox2 figcaption::before { width: calc(calc(60/393) *100vw); height: calc(calc(54/393) *100vw); margin-right: calc(calc(5/393) *100vw);} .productsTopPage .solutionsSection .solutionsInnerSec1 .listBox3 { flex: 0 1 auto;} .productsTopPage .solutionsSection .solutionsInnerSec1 .listBox3 figcaption::before { width: calc(calc(48/393) *100vw); height: calc(calc(54/393) *100vw); margin-right: calc(calc(9/393) *100vw);} .productsTopPage .solutionsSection .solutionsInnerSec2 h3::after { max-width: calc(calc(75/393) *100vw); height: calc(calc(82/393) *100vw); margin-top: calc(calc(4/393) *100vw);} .productsTopPage .solutionsSection .solutionsInnerSec2 .listBox1 { flex: 0 1 auto;} .productsTopPage .solutionsSection .solutionsInnerSec2 .listBox1 figcaption::before { width: calc(calc(48/393) *100vw); height: calc(calc(54/393) *100vw); margin-right: calc(calc(9/393) *100vw);} .productsTopPage .solutionsSection .solutionsInnerSec2 .listBox1 figcaption .small { font-size: calc(calc(12/393) *100vw);} .productsTopPage .solutionsSection .solutionsInnerSec2 .listBox2 { flex: 0 1 auto;} .productsTopPage .solutionsSection .solutionsInnerSec2 .listBox2 figcaption::before { width: calc(calc(54/393) *100vw); height: calc(calc(54/393) *100vw); margin-right: calc(calc(7/393) *100vw);} .productsTopPage .solutionsSection .solutionsInnerSec3 { padding-bottom: calc(calc(31/393) *100vw); border-radius: 0 0 0 calc(calc(10/393) *100vw);} .productsTopPage .solutionsSection .solutionsInnerSec3 h3::after { max-width: calc(calc(77/393) *100vw); height: calc(calc(75/393) *100vw); margin-top: calc(calc(4/393) *100vw);} .productsTopPage .solutionsSection .solutionsInnerSec3 .listBox1 { flex: 0 1 auto;} .productsTopPage .solutionsSection .solutionsInnerSec3 .listBox1 figcaption::before { width: calc(calc(50/393) *100vw); height: calc(calc(54/393) *100vw); margin-right: calc(calc(9/393) *100vw);} .productsTopPage .solutionsSection .solutionsInnerSec3 .listBox2 { flex: 0 1 auto;} .productsTopPage .solutionsSection .solutionsInnerSec3 .listBox2 figcaption::before { width: calc(calc(48/393) *100vw); height: calc(calc(54/393) *100vw); margin-right: calc(calc(7/393) *100vw);} /* ========================================================================== 機能一覧 ========================================================================== */ .productsTopPage .functionIconBoxList { display: grid; grid-template-columns: repeat(auto-fill,calc(calc(80/393) *100vw)); gap: calc(calc(14/393) *100vw) calc(calc(10/393) *100vw);} .productsTopPage .functionIconBoxList .box { height: calc(calc(80/393) *100vw); padding: 0 0 calc(calc(3/393) *100vw); border: calc(calc(1/393) *100vw) solid #ddd; border-radius: calc(calc(6/393) *100vw); background: #fff; grid-template-rows: calc(calc(52/393) *100vw) 1fr;} .productsTopPage .functionIconBoxList .box::before { width: calc(calc(52/393) *100vw); height: calc(calc(52/393) *100vw);} .productsTopPage .functionIconBoxList .box p { font-size: calc(calc(10/393) *100vw);} .productsTopPage .functionIconBoxList .opt { font-size: calc(calc(6/393) *100vw); width: calc(calc(52/393) *100vw); height: calc(calc(12/393) *100vw); margin: calc(calc(5/393) *100vw) auto 0; border: calc(calc(1/393) *100vw) solid #d3d3d3; border-radius: calc(calc(6/393) *100vw);} .productsTopPage .functionIconBoxList .first .box { border: calc(calc(1/393) *100vw) solid #259a8d; grid-template-rows: auto calc(calc(38/393) *100vw) 1fr;} .productsTopPage .functionIconBoxList .first .box::before { width: calc(calc(38/393) *100vw); height: calc(calc(38/393) *100vw);} .productsTopPage .functionIconBoxList .first .box p:first-child { margin-top: calc(calc(5/393) *100vw);} /* ========================================================================== 予約管理機能 ========================================================================== */ .productsTopPage .reservationFunction .displayList { max-width: calc(calc(281/393) *100vw); margin-inline: auto;} .productsTopPage .reservationFunctionList { margin-top: calc(calc(42/393) *100vw); padding: calc(calc(24/393) *100vw) calc(calc(12/393) *100vw) calc(calc(32/393) *100vw);} .productsTopPage .reservationFunctionList > header { max-width: none; margin-bottom: calc(calc(37/393) *100vw); margin-left: 0;} .productsTopPage .reservationFunctionList > header::after { width: calc(calc(289/393) *100vw); height: calc(calc(3/393) *100vw); margin-top: calc(calc(14/393) *100vw);} .productsTopPage .reservationFunctionList > header h3, .productsTopPage .reservationFunctionList > header h2 { font-size: calc(calc(20/393) *100vw); line-height: 1.5; margin-bottom: calc(calc(30/393) *100vw);} .productsTopPage .reservationFunctionList > header p { font-size: calc(calc(18/393) *100vw);} .productsTopPage .reservationAmazing { max-width: none; padding: 0 0 calc(calc(25/393) *100vw) 0; grid-template-columns: 100%; gap: calc(calc(18/393) *100vw) 0;} .productsTopPage .reservationAmazing .amazingSec { border-radius: calc(calc(10/393) *100vw);} .productsTopPage .reservationAmazing .amazingSec a { padding: calc(calc(18/393) *100vw) calc(calc(10/393) *100vw) calc(calc(20/393) *100vw);} .productsTopPage .reservationAmazing .amazingSec h3 { font-size: calc(calc(14/393) *100vw); margin-bottom: calc(calc(13/393) *100vw);} .productsTopPage .reservationAmazing .amazingSec h3::after { width: calc(calc(12/393) *100vw); height: calc(calc(16/393) *100vw); margin-left: calc(calc(25/393) *100vw);} .productsTopPage .reservationAmazing .amazingSec .img { padding: calc(calc(14/393) *100vw) 0 calc(calc(15/393) *100vw); border-radius: calc(calc(10/393) *100vw);} .productsTopPage .reservationAmazing .amazingSec .img figcaption { font-size: calc(calc(12/393) *100vw); margin-bottom: calc(calc(8/393) *100vw); padding: 0 calc(calc(28/393) *100vw);} .productsTopPage .reservationAmazing .amazingSec .more { font-size: calc(calc(10/393) *100vw); right: calc(calc(24/393) *100vw); bottom: calc(calc(28/393) *100vw);} .productsTopPage .reservationAmazing .amazingSec .more::before { width: calc(calc(13/393) *100vw); height: calc(calc(13/393) *100vw); margin-right: calc(calc(5/393) *100vw);} /* forクリニック */ .productsTopPage .reservationClinics { margin-top: calc(calc(36/393) *100vw);} .productsTopPage .reservationClinics .headingH2 { margin-bottom: calc(calc(24/393) *100vw);} .productsTopPage .reservationClinics .headingH2 .for::after { width: calc(calc(106/393) *100vw); height: calc(calc(52/393) *100vw); background-image: url('/common/images/products/sp_reservation_clinics_title.webp');} .productsTopPage .reservationClinics .displayList { display: flex; padding: 0; flex-flow: column; justify-content: flex-start; gap: calc(calc(25/393) *100vw) 0;} .productsTopPage .reservationClinics .displayList li .img { width: calc(calc(220/393) *100vw); margin-inline: auto;} .productsTopPage .reservationClinics .displayList li p { font-size: calc(calc(12/393) *100vw); line-height: 1.66; /*margin-top: calc(calc(5/393) *100vw);*/} .productsTopPage .reservationClinics .reservationIconBoxList { max-width: calc(calc(350/393) *100vw); margin-left: 0;} /* for患者さん */ .productsTopPage .reservationPatient { /*margin-top: calc(calc(40/393) *100vw);*/} .productsTopPage .reservationPatient .headingH2 { margin-bottom: calc(calc(28/393) *100vw);} .productsTopPage .reservationPatient .headingH2 .for::after { width: calc(calc(51/393) *100vw); height: calc(calc(51/393) *100vw);} .productsTopPage .reservationPatient .displayList { max-width: calc(calc(265/393) *100vw); padding: 0; gap: calc(calc(22/393) *100vw) calc(calc(35/393) *100vw); flex-flow: row wrap;} .productsTopPage .reservationPatient .displayList li { flex: 0 1 calc(calc(115/393) *100vw);} .productsTopPage .reservationPatient .displayList li .img img { width: calc(calc(97/393) *100vw); margin-inline: auto;} .productsTopPage .reservationPatient .displayList li p { font-size: calc(calc(12/393) *100vw); padding-top: calc(calc(11/393) *100vw); border-top: calc(calc(1/393) *100vw) solid #b1b1b1; font-feature-settings: 'palt';} .productsTopPage .reservationPatient .displayList li p small { font-size: calc(calc(12/393) *100vw);} .productsTopPage .reservationPatient .reservationIconBoxList2 { max-width: calc(calc(350/393) *100vw); margin-left: 0;} .productsTopPage .reservationPatient .reservationAmazing .amazingSec4 .img img { display: block; width: calc(calc(340/393) *100vw); margin-inline: auto;} /* ========================================================================== 流用 お問い合わせ ========================================================================== */ .productsTopPage .meet_family_section img { width: auto;} /* ========================================================================== 診療科目別 機能紹介 ========================================================================== */ .productsTopPage .medicalDepartment { margin-top: calc(calc(38/393) *100vw);} .productsTopPage .medicalDepartment .headingH2 { margin-bottom: calc(calc(24/393) *100vw);} .productsTopPage .medicalDepartment .headingH2 h2 { padding-left: calc(calc(17/393) *100vw);} .productsTopPage .medicalDepartment .headingH2 p { font-size: calc(calc(14/393) *100vw); max-width: calc(calc(348/393) *100vw); margin-top: calc(calc(34/393) *100vw); margin-left: calc(calc(17/393) *100vw);} .productsTopPage .medicalDepartment .departmentList { display: grid; max-width: calc(calc(350/393) *100vw); margin-left: calc(calc(17/393) *100vw); grid-template-columns: repeat(4,1fr); gap: calc(calc(16/393) *100vw);} .productsTopPage .medicalDepartment .departmentList li { height: calc(calc(76/393) *100vw);} .productsTopPage .medicalDepartment .departmentList .departmentBtn { border: calc(calc(1/393) *100vw) solid #f2f5f7; border-radius: calc(calc(10/393) *100vw); background: #f2f5f7; box-shadow: 0 calc(calc(2/393) *100vw) calc(calc(2/393) *100vw) 0 rgba(51, 51, 51, .25); grid-template-rows: calc(calc(50/393) *100vw) 1fr;} .productsTopPage .medicalDepartment .departmentList .departmentBtn::before { width: calc(calc(42/393) *100vw); height: calc(calc(42/393) *100vw);} .productsTopPage .medicalDepartment .departmentList .departmentBtn span { font-size: calc(calc(10/393) *100vw); line-height: 1; padding-bottom: calc(calc(2/393) *100vw);} .productsTopPage .medicalDepartment .departmentList .departmentBtn12::before { width: calc(calc(43/393) *100vw); height: calc(calc(44/393) *100vw);} .productsTopPage .medicalDepartment .departmentList .departmentBtn13::before { width: calc(calc(28/393) *100vw); height: calc(calc(33/393) *100vw); margin-top: calc(calc(13/393) *100vw); align-self: start;} .productsTopPage .medicalDepartment .departmentList .departmentBtn13 span { font-size: calc(calc(9/393) *100vw);} .productsTopPage .medicalDepartment .departmentList .departmentBtn14::before { width: calc(calc(27/393) *100vw); height: calc(calc(29/393) *100vw); margin-top: calc(calc(18/393) *100vw); align-self: start;} .productsTopPage .medicalDepartment .departmentList .departmentBtn14 span { font-size: calc(calc(9/393) *100vw);} .productsTopPage .medicalDepartment .departmentDialog { width: calc(calc(372/393) *100vw);} .productsTopPage .medicalDepartment .dialogInner { width: 100%; min-height: calc(calc(308/393) *100vw); padding: calc(calc(20/393) *100vw) calc(calc(24/393) *100vw) calc(calc(22/393) *100vw); border: calc(calc(4/393) *100vw) solid #259a8d; border-radius: calc(calc(10/393) *100vw);} .productsTopPage .medicalDepartment .dialogInner header { display: flex; margin-bottom: calc(calc(5/393) *100vw); flex-flow: column; align-items: center; gap: calc(calc(12/393) *100vw) 0;} .productsTopPage .medicalDepartment .dialogInner .departmentName { margin-right: 0; flex-shrink: 1;} .productsTopPage .medicalDepartment .dialogInner .departmentName span { font-size: calc(calc(16/393) *100vw); min-height: calc(calc(40/393) *100vw); padding: calc(calc(5/393) *100vw) calc(calc(30/393) *100vw) calc(calc(5/393) *100vw) calc(calc(19/393) *100vw); border-radius: calc(calc(25/393) *100vw);} .productsTopPage .medicalDepartment .dialogInner .departmentName span::before { width: calc(calc(26/393) *100vw); height: calc(calc(26/393) *100vw); margin-right: calc(calc(9/393) *100vw);} .productsTopPage .medicalDepartment .dialogInner .departmentName span::after { padding: calc(calc(2/393) *100vw);} .productsTopPage .medicalDepartment .dialogInner h2 { font-size: calc(calc(18/393) *100vw);} .productsTopPage .medicalDepartment .dialogInner .description { font-size: calc(calc(12/393) *100vw);} .productsTopPage .medicalDepartment .dialogInner ul { display: flex; width: calc(calc(297/393) *100vw); margin: calc(calc(10/393) *100vw) auto 0; gap: 0 calc(calc(33/393) *100vw);} .productsTopPage .medicalDepartment .dialogInner ul li + li::before { top: calc(calc(25/393) *100vw); left: calc(-1 * calc(calc(32/393) *100vw)); width: calc(calc(30/393) *100vw); height: calc(calc(26/393) *100vw);} .productsTopPage .medicalDepartment .dialogInner ul .img { margin-bottom: calc(calc(10/393) *100vw); border-radius: calc(calc(10/393) *100vw);} .productsTopPage .medicalDepartment .dialogInner ul p { font-size: calc(calc(12/393) *100vw); line-height: 1.2;} .productsTopPage .medicalDepartment .departmentDialogClose { line-height: 1; top: calc(calc(7/393) *100vw); right: calc(calc(7/393) *100vw); display: block; width: calc(calc(52/393) *100vw); height: calc(calc(44/393) *100vw); padding: 0; border: none; outline: none; background: none;} .productsTopPage .medicalDepartment .departmentDialog13 .departmentName span { font-size: calc(calc(12/393) *100vw);} .productsTopPage .medicalDepartment .departmentDialog13 .departmentName span::before { width: calc(calc(24/393) *100vw); height: calc(calc(27/393) *100vw); margin-right: calc(calc(12/393) *100vw);} .productsTopPage .medicalDepartment .departmentDialog14 .departmentName span { font-size: calc(calc(12/393) *100vw); line-height: 1.14;} .productsTopPage .medicalDepartment .departmentDialog14 .departmentName span::before { width: calc(calc(20/393) *100vw); height: calc(calc(22/393) *100vw); margin-right: calc(calc(12/393) *100vw);} /* ========================================================================== クリニックの課題別 機能紹介 ========================================================================== */ .productsTopPage .byIssue { margin-top: calc(calc(54/393) *100vw);} .productsTopPage .byIssue .headingH2 { margin-bottom: calc(calc(17/393) *100vw);} .productsTopPage .byIssue .headingH2 h2 { padding-left: calc(calc(17/393) *100vw);} .productsTopPage .byIssue .headingH2 p { font-size: calc(calc(14/393) *100vw); max-width: calc(calc(346/393) *100vw); margin-top: calc(calc(34/393) *100vw); margin-left: calc(calc(17/393) *100vw);} .productsTopPage .byIssue .wrapper { margin-left: 0;} .productsTopPage .byIssue .row { max-width: calc(calc(332/393) *100vw); margin-left: calc(calc(17/393) *100vw); grid-template-columns: 100%; gap: calc(calc(10/393) *100vw);} .productsTopPage .byIssue .byIssueSec { position: relative; padding: calc(calc(13/393) *100vw) calc(calc(14/393) *100vw) calc(calc(14/393) *100vw); border-radius: calc(calc(10/393) *100vw); grid-template-columns: 100%; grid-template-rows: auto 1fr;} .productsTopPage .byIssue .byIssueSec::before { position: absolute; top: calc(-1 * calc(calc(5/393) *100vw)); left: calc(calc(32/393) *100vw); width: calc(calc(66/393) *100vw); height: calc(calc(61/393) *100vw); margin-bottom: 0;} .productsTopPage .byIssue .byIssueSec h2 { font-size: calc(calc(16/393) *100vw); position: static; width: auto; margin: 0 0 calc(calc(10/393) *100vw) calc(calc(108/393) *100vw); text-align: left; grid-column: 1; grid-row: 1; translate: 0;} .productsTopPage .byIssue .byIssueSec .listBox { padding: calc(calc(11/393) *100vw) calc(calc(14/393) *100vw) calc(calc(14/393) *100vw); border-radius: calc(calc(10/393) *100vw); grid-column: 1; grid-row: 2;} .productsTopPage .byIssue .byIssueSec .listBox .kihon { padding-bottom: calc(calc(28/393) *100vw);} .productsTopPage .byIssue .byIssueSec .listBox .kihon::after { bottom: calc(-1 * calc(calc(2/393) *100vw)); width: calc(calc(36/393) *100vw); height: calc(calc(31/393) *100vw);} .productsTopPage .byIssue .byIssueSec .listBox .kihon a { font-size: calc(calc(12/393) *100vw); max-width: calc(calc(110/393) *100vw); height: calc(calc(24/393) *100vw); border: calc(calc(1/393) *100vw) solid #259a8d; border-radius: calc(calc(4/393) *100vw);} .productsTopPage .byIssue .byIssueSec .listBox ul { -moz-columns: 2; columns: 2; -moz-column-gap: calc(calc(9/393) *100vw); column-gap: calc(calc(9/393) *100vw);} .productsTopPage .byIssue .byIssueSec .listBox li { line-height: 1;} .productsTopPage .byIssue .byIssueSec .listBox li > a { font-size: calc(calc(12/393) *100vw);} .productsTopPage .byIssue .byIssueSec .listBox li > a::before { width: calc(calc(4/393) *100vw); margin-right: calc(calc(9/393) *100vw); background: url('/common/images/products/grenn_dots.svg') no-repeat center center / calc(calc(4/393) *100vw) auto;} .productsTopPage .byIssue .byIssueSec .listBox li + li { margin-top: calc(calc(10/393) *100vw);} .productsTopPage .byIssue .byIssueSec1::before { background-image: -webkit-image-set( url('/common/images/products/by_issue_icon1@0.5x.webp') 1x, url('/common/images/products/by_issue_icon1.webp') 2x ); background-image: image-set( url('/common/images/products/by_issue_icon1@0.5x.webp') 1x, url('/common/images/products/by_issue_icon1.webp') 2x );} .productsTopPage .byIssue .byIssueSec2::before { background-image: -webkit-image-set( url('/common/images/products/by_issue_icon2@0.5x.webp') 1x, url('/common/images/products/by_issue_icon2.webp') 2x ); background-image: image-set( url('/common/images/products/by_issue_icon2@0.5x.webp') 1x, url('/common/images/products/by_issue_icon2.webp') 2x );} .productsTopPage .byIssue .byIssueSec3::before { background-image: -webkit-image-set( url('/common/images/products/by_issue_icon3@0.5x.webp') 1x, url('/common/images/products/by_issue_icon3.webp') 2x ); background-image: image-set( url('/common/images/products/by_issue_icon3@0.5x.webp') 1x, url('/common/images/products/by_issue_icon3.webp') 2x );} .productsTopPage .byIssue .byIssueSec4::before { background-image: -webkit-image-set( url('/common/images/products/by_issue_icon4@0.5x.webp') 1x, url('/common/images/products/by_issue_icon4.webp') 2x ); background-image: image-set( url('/common/images/products/by_issue_icon4@0.5x.webp') 1x, url('/common/images/products/by_issue_icon4.webp') 2x );} .productsTopPage .byIssue .byIssueSec5::before { background-image: -webkit-image-set( url('/common/images/products/by_issue_icon5@0.5x.webp') 1x, url('/common/images/products/by_issue_icon5.webp') 2x ); background-image: image-set( url('/common/images/products/by_issue_icon5@0.5x.webp') 1x, url('/common/images/products/by_issue_icon5.webp') 2x );} /* ========================================================================== シーン別 機能紹介 ========================================================================== */ .productsTopPage .byScene { margin-top: calc(calc(41/393) *100vw);} .productsTopPage .byScene .headingH2 { margin-bottom: calc(calc(20/393) *100vw);} .productsTopPage .byScene .headingH2 h2 { padding-left: calc(calc(17/393) *100vw);} .productsTopPage .byScene .headingH2 p { font-size: calc(calc(14/393) *100vw); max-width: calc(calc(346/393) *100vw); margin-top: calc(calc(34/393) *100vw); margin-left: calc(calc(17/393) *100vw);} .productsTopPage .byScene .wrapper { max-width: calc(calc(328/393) *100vw); margin-left: calc(calc(24/393) *100vw); padding-left: calc(calc(30/393) *100vw); background: url('/common/images/products/sp_by_scene_arrow.svg') no-repeat left top / calc(calc(24/393) *100vw) 100%;} .productsTopPage .byScene .row { grid-template-columns: 100%; gap: calc(calc(10/393) *100vw) calc(calc(6/393) *100vw);} .productsTopPage .byScene .row::after { display: none;} .productsTopPage .byScene .bySceneSec { position: relative; padding: calc(calc(31/393) *100vw) calc(calc(14/393) *100vw) calc(calc(14/393) *100vw); border-radius: calc(calc(10/393) *100vw); grid-template-columns: 100%; grid-template-rows: auto 1fr;} .productsTopPage .byScene .bySceneSec::before { position: absolute; top: calc(-1 * calc(calc(20/393) *100vw)); left: calc(calc(32/393) *100vw); width: calc(calc(66/393) *100vw); height: calc(calc(61/393) *100vw); margin-bottom: 0;} .productsTopPage .byScene .bySceneSec h2 { font-size: calc(calc(16/393) *100vw); position: static; width: auto; margin: 0 0 calc(calc(10/393) *100vw) calc(calc(125/393) *100vw); text-align: left; grid-column: 1; grid-row: 1; translate: 0;} .productsTopPage .byScene .bySceneSec .listBox { padding: calc(calc(16/393) *100vw) calc(calc(14/393) *100vw) calc(calc(14/393) *100vw); border-radius: calc(calc(10/393) *100vw); grid-column: 1; grid-row: 2;} .productsTopPage .byScene .bySceneSec .listBox .read { line-height: 1; max-width: none; min-height: 0; margin-bottom: 17px; padding: 0 calc(calc(18/393) *100vw);} .productsTopPage .byScene .bySceneSec .listBox .read a { font-size: calc(calc(12/393) *100vw);} .productsTopPage .byScene .bySceneSec .listBox .kihon { padding-bottom: calc(calc(28/393) *100vw);} .productsTopPage .byScene .bySceneSec .listBox .kihon::after { bottom: calc(-1 * calc(calc(2/393) *100vw)); width: calc(calc(36/393) *100vw); height: calc(calc(31/393) *100vw);} .productsTopPage .byScene .bySceneSec .listBox .kihon a { font-size: calc(calc(12/393) *100vw); max-width: calc(calc(110/393) *100vw); height: calc(calc(24/393) *100vw); border: calc(calc(1/393) *100vw) solid #259a8d; border-radius: calc(calc(4/393) *100vw);} .productsTopPage .byScene .bySceneSec .listBox ul { padding: 0; -moz-columns: 2; columns: 2; -moz-column-gap: calc(calc(34/393) *100vw); column-gap: calc(calc(34/393) *100vw);} .productsTopPage .byScene .bySceneSec .listBox li { line-height: 1; width: -moz-max-content; width: max-content;} .productsTopPage .byScene .bySceneSec .listBox li > a { font-size: calc(calc(12/393) *100vw);} .productsTopPage .byScene .bySceneSec .listBox li > a::before { width: calc(calc(4/393) *100vw); margin-right: calc(calc(9/393) *100vw); background: url('/common/images/products/grenn_dots.svg') no-repeat center center / calc(calc(4/393) *100vw) auto;} .productsTopPage .byScene .bySceneSec .listBox li + li { margin-top: calc(calc(4/393) *100vw);} .productsTopPage .byScene .bySceneSec1::before { background-image: -webkit-image-set( url('/common/images/products/by_scene_icon1@0.5x.webp') 1x, url('/common/images/products/by_scene_icon1.webp') 2x ); background-image: image-set( url('/common/images/products/by_scene_icon1@0.5x.webp') 1x, url('/common/images/products/by_scene_icon1.webp') 2x );} .productsTopPage .byScene .bySceneSec2::before { background-image: -webkit-image-set( url('/common/images/products/by_scene_icon2@0.5x.webp') 1x, url('/common/images/products/by_scene_icon2.webp') 2x ); background-image: image-set( url('/common/images/products/by_scene_icon2@0.5x.webp') 1x, url('/common/images/products/by_scene_icon2.webp') 2x );} .productsTopPage .byScene .bySceneSec3::before { background-image: -webkit-image-set( url('/common/images/products/by_scene_icon3@0.5x.webp') 1x, url('/common/images/products/by_scene_icon3.webp') 2x ); background-image: image-set( url('/common/images/products/by_scene_icon3@0.5x.webp') 1x, url('/common/images/products/by_scene_icon3.webp') 2x );} .productsTopPage .byScene .bySceneSec4::before { background-image: -webkit-image-set( url('/common/images/products/by_scene_icon4@0.5x.webp') 1x, url('/common/images/products/by_scene_icon4.webp') 2x ); background-image: image-set( url('/common/images/products/by_scene_icon4@0.5x.webp') 1x, url('/common/images/products/by_scene_icon4.webp') 2x );} .productsTopPage .byScene .bySceneSec5::before { background-image: -webkit-image-set( url('/common/images/products/by_scene_icon5@0.5x.webp') 1x, url('/common/images/products/by_scene_icon5.webp') 2x ); background-image: image-set( url('/common/images/products/by_scene_icon5@0.5x.webp') 1x, url('/common/images/products/by_scene_icon5.webp') 2x );} /* ========================================================================== 予約方式別 機能紹介 ========================================================================== */ .productsTopPage .reservationSystem { margin-top: calc(calc(55/393) *100vw);} .productsTopPage .reservationSystem .headingH2 { margin-bottom: calc(calc(18/393) *100vw);} .productsTopPage .reservationSystem .headingH2 h2 { padding-left: calc(calc(17/393) *100vw);} .productsTopPage .reservationSystem .headingH2 p { font-size: calc(calc(14/393) *100vw); max-width: calc(calc(346/393) *100vw); margin-top: calc(calc(34/393) *100vw); margin-left: calc(calc(17/393) *100vw);} .productsTopPage .reservationSystem .row { max-width: calc(calc(342/393) *100vw); margin-left: calc(calc(17/393) *100vw); grid-template-columns: 100%; gap: calc(calc(10/393) *100vw) 0;} .productsTopPage .reservationSystem .reservationSystemSec { padding: calc(calc(9/393) *100vw) calc(calc(10/393) *100vw) calc(calc(14/393) *100vw); border-radius: calc(calc(10/393) *100vw);} .productsTopPage .reservationSystem .reservationSystemSec h2 { font-size: calc(calc(18/393) *100vw); width: calc(calc(256/393) *100vw); min-height: 2.2em; margin-bottom: calc(calc(10/393) *100vw); gap: 0 calc(calc(31/393) *100vw);} .productsTopPage .reservationSystem .reservationSystemSec h2::before { width: calc(calc(14/393) *100vw);} .productsTopPage .reservationSystem .reservationSystemSec h2::after { width: calc(calc(14/393) *100vw); height: calc(calc(19/393) *100vw);} .productsTopPage .reservationSystem .reservationSystemSec .innerBox { padding: calc(calc(19/393) *100vw); border-radius: calc(calc(10/393) *100vw);} .productsTopPage .reservationSystem .reservationSystemSec .innerBox .illu { display: flex; height: auto; margin-bottom: calc(calc(18/393) *100vw); justify-content: center; align-items: flex-end;} .productsTopPage .reservationSystem .reservationSystemSec .innerBox p { font-size: calc(calc(14/393) *100vw);} .productsTopPage .reservationSystem .reservationSystemSec2 .innerBox .illu, .productsTopPage .reservationSystem .reservationSystemSec3 .innerBox .illu { padding-bottom: 0;} .productsTopPage .reservationSystem .reservationSystemSec1 .illu img { width: calc(calc(220/393) *100vw);} .productsTopPage .reservationSystem .reservationSystemSec2 .illu img { width: calc(calc(241/393) *100vw);} .productsTopPage .reservationSystem .reservationSystemSec3 .illu img { width: calc(calc(225/393) *100vw);} /* ========================================================================== 全機能一覧 ========================================================================== */ .productsTopPage .allFunction { margin-top: calc(calc(53/393) *100vw); padding-bottom: 20px;} .productsTopPage .allFunction .headingH2 { margin-bottom: calc(calc(21/393) *100vw);} .productsTopPage .allFunction .headingH2 h2 { padding-left: calc(calc(10/393) *100vw);} .productsTopPage .allFunction .headingH2 .line img { width: calc(calc(199/393) *100vw);} .productsTopPage .allFunction .allFunctionSec { display: grid; width: calc(calc(350/393) *100vw); margin-left: calc(calc(17/393) *100vw); padding: 0; border: none; grid-template-columns: 100%;} .productsTopPage .allFunction .allFunctionSec header { margin-bottom: calc(calc(18/393) *100vw); padding-right: 0;} .productsTopPage .allFunction .allFunctionSec header h3 { font-size: calc(calc(20/393) *100vw); margin-top: 0;} .productsTopPage .allFunction .allFunctionSec header p { font-size: calc(calc(14/393) *100vw); margin-top: calc(calc(5/393) *100vw);} .productsTopPage .allFunction .allFunctionSec + .allFunctionSec { margin-top: calc(calc(50/393) *100vw);} .productsTopPage .allFunction .functionIconBoxList { gap: calc(calc(12/393) *100vw) calc(calc(10/393) *100vw);} /* ========================================================================== footer ========================================================================== */ .page-template-page-products .footer { margin-top: calc(calc(50/393) *100vw);} /*end*/ } /* ---- AOS アニメーション上書き（参考ページ準拠: 20px移動） ---- */ [data-aos=fade-up] { transform: translate3d(0, 20px, 0);} [data-aos=fade-right] { transform: translate3d(-20px, 0, 0);} [data-aos=fade-left] { transform: translate3d(20px, 0, 0);} /* ========================================================================== yoyaku/uketsuke/keiei/sairai 概要ページ 共通レイアウト カード型(水色カード＋上段:アイコン+タグ／下段:白背景の説明文) ========================================================================== */ /* 0. mainWrapper上部の余白をリセット(この4ページは共通レイアウトのpadding-top/margin-topが不要なため) */ .yoyaku_page .mainWrapper, .uketsuke_page .mainWrapper, .keiei_page .mainWrapper, .sairai_page .mainWrapper { margin-top: 0; padding-top: 0;} /* 1. 機能一覧を2列グリッド表示 */ .yoyaku_page .reservationFunctionList .functionIconBoxList, .uketsuke_page .reservationFunctionList .functionIconBoxList, .keiei_page .reservationFunctionList .functionIconBoxList, .sairai_page .reservationFunctionList .functionIconBoxList { display: grid; grid-template-columns: 1fr 1fr; gap: 16px;} /* カード全体: 水色背景の外枠 課題タグ(a.tag)がカード内リンク(.func-card-link)と別の遷移先を持つため、 liを丸ごと1つのaで囲む構成(入れ子aタグ)ではなく、 func_lowerだけを実体のaにし、::afterでカード全体をstretched-link化する構成にしている */ .yoyaku_page .reservationFunctionList .functionIconBoxList > li, .uketsuke_page .reservationFunctionList .functionIconBoxList > li, .keiei_page .reservationFunctionList .functionIconBoxList > li, .sairai_page .reservationFunctionList .functionIconBoxList > li { display: flex; flex-direction: column; position: relative; border-radius: 10px; background: #e5eef4; overflow: hidden;} .yoyaku_page .reservationFunctionList .functionIconBoxList .func-card-link, .uketsuke_page .reservationFunctionList .functionIconBoxList .func-card-link, .keiei_page .reservationFunctionList .functionIconBoxList .func-card-link, .sairai_page .reservationFunctionList .functionIconBoxList .func-card-link { display: flex; flex: 1; flex-direction: column; color: inherit; text-decoration: none;} /* カード全体（アイコン・タグ部分を含む）をクリック可能にするstretched-link。 position指定が無いため、疑似要素はfunc-card-linkの1つ上の位置指定祖先=liを基準にinset:0で広がる */ .yoyaku_page .reservationFunctionList .functionIconBoxList .func-card-link::after, .uketsuke_page .reservationFunctionList .functionIconBoxList .func-card-link::after, .keiei_page .reservationFunctionList .functionIconBoxList .func-card-link::after, .sairai_page .reservationFunctionList .functionIconBoxList .func-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1;} /* 上段: アイコン(左) + タグ一覧(右) */ .yoyaku_page .reservationFunctionList .functionIconBoxList .func_upper, .uketsuke_page .reservationFunctionList .functionIconBoxList .func_upper, .keiei_page .reservationFunctionList .functionIconBoxList .func_upper, .sairai_page .reservationFunctionList .functionIconBoxList .func_upper { display: flex; flex-direction: row; align-items: flex-start; gap: 14px; padding: 16px 16px 12px;} .yoyaku_page .reservationFunctionList .functionIconBoxList .box, .uketsuke_page .reservationFunctionList .functionIconBoxList .box, .keiei_page .reservationFunctionList .functionIconBoxList .box, .sairai_page .reservationFunctionList .functionIconBoxList .box { flex-shrink: 0; width: 60px; height: 60px;} /* タグ一覧: 基本/オプション(既存.optを流用)＋課題／利用シーンを、それぞれ独立した行で縦に並べる */ .yoyaku_page .reservationFunctionList .functionIconBoxList .func_tags, .uketsuke_page .reservationFunctionList .functionIconBoxList .func_tags, .keiei_page .reservationFunctionList .functionIconBoxList .func_tags, .sairai_page .reservationFunctionList .functionIconBoxList .func_tags { display: flex; flex: 1; flex-direction: column; gap: 5px; padding-top: 3px;} /* 課題／利用シーンの行: 先頭に見出し(枠なし)＋内容(枠あり)のタグを並べ、複数タグがある場合は行内で折り返す */ .yoyaku_page .reservationFunctionList .functionIconBoxList .tag-row, .uketsuke_page .reservationFunctionList .functionIconBoxList .tag-row, .keiei_page .reservationFunctionList .functionIconBoxList .tag-row, .sairai_page .reservationFunctionList .functionIconBoxList .tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px;} /* 見出し(課題：／利用シーン：)は枠で囲まない */ .yoyaku_page .reservationFunctionList .functionIconBoxList .tag-label, .uketsuke_page .reservationFunctionList .functionIconBoxList .tag-label, .keiei_page .reservationFunctionList .functionIconBoxList .tag-label, .sairai_page .reservationFunctionList .functionIconBoxList .tag-label { font-size: 11px; line-height: 1.4; color: #666; white-space: nowrap;} /* 内容のみを枠で囲む */ .yoyaku_page .reservationFunctionList .functionIconBoxList .tag, .uketsuke_page .reservationFunctionList .functionIconBoxList .tag, .keiei_page .reservationFunctionList .functionIconBoxList .tag, .sairai_page .reservationFunctionList .functionIconBoxList .tag { font-size: 9px; line-height: 1.4; padding: 2px 7px; color: #555; border: 1px solid #d3d3d3; border-radius: 12px; white-space: nowrap;} /* 課題タグ(/valueへのリンク)。カード全体のstretched-linkより手前に出し、独立してクリックできるようにする */ .yoyaku_page .reservationFunctionList .functionIconBoxList a.tag, .uketsuke_page .reservationFunctionList .functionIconBoxList a.tag, .keiei_page .reservationFunctionList .functionIconBoxList a.tag, .sairai_page .reservationFunctionList .functionIconBoxList a.tag { position: relative; z-index: 2; text-decoration: none; transition: .2s all;} .yoyaku_page .reservationFunctionList .functionIconBoxList a.tag:hover, .uketsuke_page .reservationFunctionList .functionIconBoxList a.tag:hover, .keiei_page .reservationFunctionList .functionIconBoxList a.tag:hover, .sairai_page .reservationFunctionList .functionIconBoxList a.tag:hover { background-color: #1C9F91; border-color: #1C9F91; color: #fff;} /* 利用シーンタグ(リンクなし)。課題タグと同様にカード全体のstretched-linkより手前に出し、 カードリンク(無関係な製品ページ)の巻き添えでクリックされないようにする */ .yoyaku_page .reservationFunctionList .functionIconBoxList .tag-row-scene .tag, .uketsuke_page .reservationFunctionList .functionIconBoxList .tag-row-scene .tag, .keiei_page .reservationFunctionList .functionIconBoxList .tag-row-scene .tag, .sairai_page .reservationFunctionList .functionIconBoxList .tag-row-scene .tag { position: relative; z-index: 2;} /* 「選ばれる理由」導線バナー(全機能一覧とCTAの間に配置) */ .productsTopPage .reasonLinkBanner { background: #f5f7f9; padding: 44px 0; text-align: center; margin-top: 50px;} .productsTopPage .reasonLinkBanner__text { margin: 0 0 16px; font-size: 16px; font-weight: bold; color: #333;} .productsTopPage .reasonLinkBanner .link.base-btn2.whiteBg.reasonLinkBanner__btn { margin: 0 auto;} /* opt/基本機能 ラベル(TOPと同一デザインをタグ列内で使用。サイズをタグに合わせ、枠線は文字色と同じ緑に。1行目に単独表示) */ .yoyaku_page .reservationFunctionList .functionIconBoxList .func_upper .opt, .uketsuke_page .reservationFunctionList .functionIconBoxList .func_upper .opt, .keiei_page .reservationFunctionList .functionIconBoxList .func_upper .opt, .sairai_page .reservationFunctionList .functionIconBoxList .func_upper .opt { flex: 0 0 auto; width: auto; align-self: flex-start; margin: 0; padding: 2px 7px; font-size: 8px; border-color: #259a8d;} /* 下段: 白背景の説明文エリア */ .yoyaku_page .reservationFunctionList .functionIconBoxList .func_lower, .uketsuke_page .reservationFunctionList .functionIconBoxList .func_lower, .keiei_page .reservationFunctionList .functionIconBoxList .func_lower, .sairai_page .reservationFunctionList .functionIconBoxList .func_lower { flex: 1; margin: 0 8px 8px; padding: 14px 16px 16px; border-radius: 8px; background: #fff;} .yoyaku_page .reservationFunctionList .functionIconBoxList .item_title, .uketsuke_page .reservationFunctionList .functionIconBoxList .item_title, .keiei_page .reservationFunctionList .functionIconBoxList .item_title, .sairai_page .reservationFunctionList .functionIconBoxList .item_title { font-size: 18px; font-weight: bold; line-height: 1.3; margin: 0 0 8px; color: #333;} .yoyaku_page .reservationFunctionList .functionIconBoxList .item_desc, .uketsuke_page .reservationFunctionList .functionIconBoxList .item_desc, .keiei_page .reservationFunctionList .functionIconBoxList .item_desc, .sairai_page .reservationFunctionList .functionIconBoxList .item_desc { font-size: 13px; line-height: 1.6; margin: 0; color: #555;} /* 説明文の下の「詳細はこちら」ボタン(サイト標準のp.link.base-btn2.whiteBgと同系統の配色・形状を、カード幅に合わせて縮小) カード自体がaタグのため、ここは実体はspan。クリックはカード全体のリンクに委ねる */ .yoyaku_page .reservationFunctionList .functionIconBoxList .detail-link-btn, .uketsuke_page .reservationFunctionList .functionIconBoxList .detail-link-btn, .keiei_page .reservationFunctionList .functionIconBoxList .detail-link-btn, .sairai_page .reservationFunctionList .functionIconBoxList .detail-link-btn { display: flex; width: fit-content; align-items: center; justify-content: center; margin-top: 12px; margin-left: auto; padding: 7px 20px; border: 1px solid #1C9F91; border-radius: 20px; color: #1C9F91; font-size: 12px; font-weight: bold; transition: .3s all;} .yoyaku_page .reservationFunctionList .functionIconBoxList .func-card-link:hover .detail-link-btn, .uketsuke_page .reservationFunctionList .functionIconBoxList .func-card-link:hover .detail-link-btn, .keiei_page .reservationFunctionList .functionIconBoxList .func-card-link:hover .detail-link-btn, .sairai_page .reservationFunctionList .functionIconBoxList .func-card-link:hover .detail-link-btn { background-color: #1C9F91; color: #fff;} @media (max-width: 767px) { /* SPでは2列だとカードが狭くなりすぎるため1列表示にする */ .yoyaku_page .reservationFunctionList .functionIconBoxList, .uketsuke_page .reservationFunctionList .functionIconBoxList, .keiei_page .reservationFunctionList .functionIconBoxList, .sairai_page .reservationFunctionList .functionIconBoxList { grid-template-columns: 1fr;} /* SPルール: h3見出しは.productsTopPage headerの中央寄せに従うが、 その下にくる長文説明文(p)は読みやすさのため中央寄せにせず左寄せに固定する */ .yoyaku_page .reservationFunctionList > header p, .uketsuke_page .reservationFunctionList > header p, .keiei_page .reservationFunctionList > header p, .sairai_page .reservationFunctionList > header p { text-align: left;} } /* ========================================================================== yoyaku_page / uketsuke_page アイコン個別指定 (TOPページの nth-child 位置と独立して、機能ごとに正しいアイコンを固定表示する) ========================================================================== */ /* 予約機能ページ: LINEでの予約/LINE順番待ち/WEB予約/予約変更・キャンセル/家族予約/ 電話予約（IVR）/WEB問診/オンラインマップ集患/連鎖予約/多言語対応/ゲスト予約/医療連携 */ .yoyaku_page .reservationPatient .reservationIconBoxList2 li:nth-child(1) .box::before { background-image: image-set(url('/common/images/products/function_icon2_4.webp') 1x, url('/common/images/products/function_icon2_4@2x.webp') 2x);} .yoyaku_page .reservationPatient .reservationIconBoxList2 li:nth-child(2) .box::before { background-image: image-set(url('/common/images/products/function_icon2_5.webp') 1x, url('/common/images/products/function_icon2_5@2x.webp') 2x);} .yoyaku_page .reservationPatient .reservationIconBoxList2 li:nth-child(3) .box::before { background-image: image-set(url('/common/images/products/function_icon2_15.webp') 1x, url('/common/images/products/function_icon2_15@2x.webp') 2x);} .yoyaku_page .reservationPatient .reservationIconBoxList2 li:nth-child(4) .box::before { background-image: image-set(url('/common/images/products/function_icon2_2.webp') 1x, url('/common/images/products/function_icon2_2@2x.webp') 2x);} .yoyaku_page .reservationPatient .reservationIconBoxList2 li:nth-child(5) .box::before { background-image: image-set(url('/common/images/products/function_icon2_3.webp') 1x, url('/common/images/products/function_icon2_3@2x.webp') 2x);} .yoyaku_page .reservationPatient .reservationIconBoxList2 li:nth-child(6) .box::before { background-image: image-set(url('/common/images/products/function_icon2_6.webp') 1x, url('/common/images/products/function_icon2_6@2x.webp') 2x);} .yoyaku_page .reservationPatient .reservationIconBoxList2 li:nth-child(7) .box::before { background-image: image-set(url('/common/images/products/function_icon2_7.webp') 1x, url('/common/images/products/function_icon2_7@2x.webp') 2x);} .yoyaku_page .reservationPatient .reservationIconBoxList2 li:nth-child(8) .box::before { background-image: image-set(url('/common/images/products/function_icon2_9.webp') 1x, url('/common/images/products/function_icon2_9@2x.webp') 2x);} .yoyaku_page .reservationPatient .reservationIconBoxList2 li:nth-child(9) .box::before { background-image: image-set(url('/common/images/products/function_icon2_12.webp') 1x, url('/common/images/products/function_icon2_12@2x.webp') 2x);} .yoyaku_page .reservationPatient .reservationIconBoxList2 li:nth-child(10) .box::before { background-image: image-set(url('/common/images/products/function_icon2_14.webp') 1x, url('/common/images/products/function_icon2_14@2x.webp') 2x);} /* 院内・受付業務ページ: 予約カレンダー/予約の確認/メール配信/キャッシュレス決済/電子カルテ連携/ワクチン管理機能/ オンライン診療/スマートチェックイン/連鎖予約/レシートプリンター/呼出しディスプレイ/キャンセル管理/ リライト診察券/間隔制御/IP制限/複数拠点/API連携/医療連携/医療文書DX/電子同意書 （人工知能はHTML側でコメントアウト中） */ .uketsuke_page .reservationClinics .reservationIconBoxList li:nth-child(1) .box::before { background-image: image-set(url('/common/images/products/function_icon1_2.webp') 1x, url('/common/images/products/function_icon1_2@2x.webp') 2x);} .uketsuke_page .reservationClinics .reservationIconBoxList li:nth-child(2) .box::before { background-image: image-set(url('/common/images/products/function_icon1_2.webp') 1x, url('/common/images/products/function_icon1_2@2x.webp') 2x);} .uketsuke_page .reservationClinics .reservationIconBoxList li:nth-child(3) .box::before { background-image: image-set(url('/common/images/products/function_icon1_3.webp') 1x, url('/common/images/products/function_icon1_3@2x.webp') 2x);} .uketsuke_page .reservationClinics .reservationIconBoxList li:nth-child(4) .box::before { background-image: image-set(url('/common/images/products/function_icon1_5.webp') 1x, url('/common/images/products/function_icon1_5@2x.webp') 2x);} .uketsuke_page .reservationClinics .reservationIconBoxList li:nth-child(5) .box::before { background-image: image-set(url('/common/images/products/function_icon1_6.webp') 1x, url('/common/images/products/function_icon1_6@2x.webp') 2x);} .uketsuke_page .reservationClinics .reservationIconBoxList li:nth-child(6) .box::before { background-image: image-set(url('/common/images/products/function_icon1_7.webp') 1x, url('/common/images/products/function_icon1_7@2x.webp') 2x);} .uketsuke_page .reservationClinics .reservationIconBoxList li:nth-child(7) .box::before { background-image: image-set(url('/common/images/products/function_icon2_8.webp') 1x, url('/common/images/products/function_icon2_8@2x.webp') 2x);} .uketsuke_page .reservationClinics .reservationIconBoxList li:nth-child(8) .box::before { background-image: image-set(url('/common/images/products/function_icon1_8.webp') 1x, url('/common/images/products/function_icon1_8@2x.webp') 2x);} .uketsuke_page .reservationClinics .reservationIconBoxList li:nth-child(9) .box::before { background-image: image-set(url('/common/images/products/all_func_icon3_11.webp') 1x, url('/common/images/products/all_func_icon3_11@2x.webp') 2x);} .uketsuke_page .reservationClinics .reservationIconBoxList li:nth-child(10) .box::before { background-image: image-set(url('/common/images/products/function_icon1_10.webp') 1x, url('/common/images/products/function_icon1_10@2x.webp') 2x);} .uketsuke_page .reservationClinics .reservationIconBoxList li:nth-child(11) .box::before { background-image: image-set(url('/common/images/products/function_icon1_15.webp') 1x, url('/common/images/products/function_icon1_15@2x.webp') 2x);} .uketsuke_page .reservationClinics .reservationIconBoxList li:nth-child(12) .box::before { background-image: image-set(url('/common/images/products/function_icon1_16.webp') 1x, url('/common/images/products/function_icon1_16@2x.webp') 2x);} .uketsuke_page .reservationClinics .reservationIconBoxList li:nth-child(13) .box::before { background-image: image-set(url('/common/images/products/all_func_icon3_18.webp') 1x, url('/common/images/products/all_func_icon3_18@2x.webp') 2x);} .uketsuke_page .reservationClinics .reservationIconBoxList li:nth-child(14) .box::before { background-image: image-set(url('/common/images/products/all_func_icon3_19.webp') 1x, url('/common/images/products/all_func_icon3_19@2x.webp') 2x);} .uketsuke_page .reservationClinics .reservationIconBoxList li:nth-child(15) .box::before { background-image: image-set(url('/common/images/products/all_func_icon3_20.webp') 1x, url('/common/images/products/all_func_icon3_20@2x.webp') 2x);} .uketsuke_page .reservationClinics .reservationIconBoxList li:nth-child(16) .box::before { background-image: image-set(url('/common/images/products/all_func_icon3_21.webp') 1x, url('/common/images/products/all_func_icon3_21@2x.webp') 2x);} .uketsuke_page .reservationClinics .reservationIconBoxList li:nth-child(17) .box::before { background-image: image-set(url('/common/images/products/all_func_icon3_22.webp') 1x, url('/common/images/products/all_func_icon3_22@2x.webp') 2x);} .uketsuke_page .reservationClinics .reservationIconBoxList li:nth-child(18) .box::before { background-image: image-set(url('/common/images/products/function_icon2_24.webp') 1x, url('/common/images/products/function_icon2_24@2x.webp') 2x);} .uketsuke_page .reservationClinics .reservationIconBoxList li:nth-child(19) .box::before { background-image: image-set(url('/common/images/products/function_icon2_25.webp') 1x, url('/common/images/products/function_icon2_25@2x.webp') 2x);} .uketsuke_page .reservationClinics .reservationIconBoxList li:nth-child(20) .box::before { background-image: image-set(url('/common/images/products/function_icon2_21.webp') 1x, url('/common/images/products/function_icon2_21@2x.webp') 2x);} /* クリニック経営分析ページ: 統計機能/AI-Board */ .keiei_page .reservationClinics .reservationIconBoxList li:nth-child(1) .box::before { background-image: image-set(url('/common/images/products/function_icon1_11.webp') 1x, url('/common/images/products/function_icon1_11@2x.webp') 2x);} .keiei_page .reservationClinics .reservationIconBoxList li:nth-child(2) .box::before { background-image: image-set(url('/common/images/products/function_icon1_12.webp') 1x, url('/common/images/products/function_icon1_12@2x.webp') 2x);} /* 再来促進ページ: LINEdeピンポイント配信/SMSリマインダー/前日リマインドメール送信 */ .sairai_page .reservationClinics .reservationIconBoxList li:nth-child(1) .box::before { background-image: image-set(url('/common/images/products/function_icon1_3.webp') 1x, url('/common/images/products/function_icon1_3@2x.webp') 2x);} .sairai_page .reservationClinics .reservationIconBoxList li:nth-child(2) .box::before { background-image: image-set(url('/common/images/products/function_icon1_4.webp') 1x, url('/common/images/products/function_icon1_4@2x.webp') 2x);} .sairai_page .reservationClinics .reservationIconBoxList li:nth-child(3) .box::before { background-image: image-set(url('/common/images/products/all_func_icon2_16.webp') 1x, url('/common/images/products/all_func_icon2_16@2x.webp') 2x);} /* ========================================================================== linejunban/index.php 専用レイアウト ========================================================================== */ /* --- page_col03: 3カラムカード --- */ .linejunban_page .page_col03 ul { display: flex; flex-wrap: wrap; padding: 16px 0; list-style: none; margin: 0; gap: 24px 0;} .linejunban_page .page_col03 ul li { width: 100%; text-align: center;} .linejunban_page .page_col03 ul li img { width: 60%; margin: 0 20%; display: block;} .linejunban_page .page_col03 ul li h3 { color: #009166; text-align: center; margin: 0.5em 0 0.4em;} .linejunban_page .page_col03 ul li p { text-align: left; font-size: 15px; line-height: 1.7; margin: 0; padding: 0 8px;} .linejunban_page .linejunban_con01_lead { font-size: 24px; /* guideline H2 */ font-weight: bold; text-align: center; margin: 0 0 16px; color: #333;} @media (min-width: 768px) { .linejunban_page .page_col03 ul { gap: 0 3%;} .linejunban_page .page_col03 ul li { width: 31%; margin-bottom: 24px;} .linejunban_page .page_col03 ul li h3 { padding: 14px 12px; margin-block-end: 0;} .linejunban_page .page_col03 ul li p { padding: 0 12px;} } /* --- reservationFunctionList header 内 お問い合わせボタン（全製品ページ共通） --- */ .reservationFunctionList header .fv_inquiry_btn { margin: 20px 0 30px 0; text-align: left;} .reservationFunctionList header .fv_inquiry_btn a:not(.base-btn) { display: inline-block; background: linear-gradient(to right, #00546C, #1C9F91); color: #fff; font-weight: bold; font-size: 18px; padding: 14px 48px; border-radius: 40px; box-shadow: 0 3px 3px #ccc; text-decoration: none; transition: opacity 0.2s, transform 0.2s;} .reservationFunctionList header .fv_inquiry_btn a:not(.base-btn):hover { opacity: 0.9; transform: scale(1.05);} /* --- linejunban reservationFunctionList header: 左テキスト＋右画像 --- */ .linejunban_page .reservationFunctionList header { display: flex; align-items: center; gap: 32px;} /* header::after を無効化し h3::after に移管 */ .linejunban_page .reservationFunctionList > header::after { display: none;} .linejunban_page .reservationFunctionList > header h2::after { display: block; width: 289px; height: 3px; margin-top: 25px; content: ''; background: linear-gradient(90deg, #1c9f91 0%, #0d787e 84.62%, #00546c 100%);} .linejunban_page .reservationFunctionList header .linejunban_header_inner { flex: 1; min-width: 0;} .linejunban_page .reservationFunctionList header .linejunban_fv_img { flex-shrink: 0; width: 30%; max-width: 407px; height: auto; display: block;} @media (max-width: 767px) { .linejunban_page .reservationFunctionList header { flex-direction: column;} .linejunban_page .reservationFunctionList > header h2::after { width: calc(289 / 393 * 100vw); height: calc(3 / 393 * 100vw); margin-top: calc(25 / 393 * 100vw);} .linejunban_page .reservationFunctionList header .linejunban_fv_img { width: 80%; max-width: 300px; margin: 0 auto;} } /* ========================================================================== linejunban/index.php タイポグラフィ（コーディングガイドライン準拠） H1:32px H2:24px H3:22px H4-6:16px Bold / SP: H1-2:20px H3-6:16px Bold ========================================================================== */ /* PC (768px〜) */ .linejunban_page .page_col03 ul li h3 { padding: 0;} /* SP (〜767px) */ @media (max-width: 767px) { .linejunban_page .linejunban_con01_lead { font-size: 24px;} } /* --- linejunban_con02: オプション機能（横長画像対応） --- */ .linejunban_page .linejunban_con02 ul li img { width: 80%; margin: 0 10%;} .linejunban_page .linejunban_con02 ul li p { text-align: left; font-size: 15px; line-height: 1.7; margin: 8px 0 0; padding: 0 8px;} .linejunban_page .opt_note { font-size: 13px; color: #009166;} @media (min-width: 768px) { .linejunban_page .linejunban_con02 ul { gap: 0 4%;} .linejunban_page .linejunban_con02 ul li { width: 48%; margin-bottom: 24px;} .linejunban_page .linejunban_con02 ul li img { width: 100%; margin: 0;} } /* ========================================================================== borderWrapper内セクション間隔（PC共通ルール） ========================================================================== */ @media (min-width: 768px) { .productsPageMain .borderWrapper > section { padding-bottom: 70px;} } /* linejunban: borderWrapper内すべてのsectionにmargin-bottom:70px */ @media (min-width: 768px) { .linejunban_page .borderWrapper section { margin-bottom: 70px;} } /* reservationFunctionList内sectionのmargin-left（全製品ページ共通ルール） */ @media (min-width: 768px) { .productsPageMain .reservationFunctionList section { margin-left: 44px;} } /* ========================================================================== ivr/index.php 専用レイアウト ========================================================================== */ /* ネストsectionのmargin（共通ルール適用） */ @media (min-width: 768px) { .ivr_page .borderWrapper section { margin-bottom: 70px;} } /* --- お悩みセクション --- */ .ivr_page .ivr_problems { position: relative;} .ivr_page .ivr_problems img { width: 60%; max-width: 240px; margin: 0 auto 20px; display: block;} .ivr_page .ivr_problems ul { list-style: none; padding: 0 0 8% 0; margin: 0;} .ivr_page .ivr_problems ul li { background-color: #ecf3f9; margin: 0 2% 2% 2%; padding: 2% 4% 1.5% 4%; font-size: 15px; line-height: 1.6;} @media (min-width: 768px) { .ivr_page .ivr_problems { margin: 0 80px;} .ivr_page .ivr_problems img { position: absolute; width: 28%; right: 0; top: 0; margin: 0;} .ivr_page .ivr_problems ul { margin-right: 34%; padding: 0 0 4% 0;} .ivr_page .ivr_problems ul li { font-size: 17px;} } /* --- IVRでできること --- */ .ivr_page .ivr_kaiketu { font-size: 24px; font-weight: bold; text-align: center; margin: 20px 0 8px;} .ivr_page .ivr_kaiketu::after { font-family: 'Material Icons'; content: '\ead0'; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; font-size: 60px; display: block; margin-top: 2%; } @media (min-width: 768px) { .ivr_page .ivr_kaiketu { font-size: 24px;} } .ivr_page .ivr_features > p:not(.ivr_kaiketu) { font-size: 15px; line-height: 1.8; margin-bottom: 12px;} .ivr_page .ivr_pc_img { display: none; width: 100%;} .ivr_page .ivr_sp_img { display: block; width: 100%; margin-bottom: 16px;} @media (min-width: 768px) { .ivr_page .ivr_pc_img { display: block; margin-bottom: 16px;} .ivr_page .ivr_sp_img { display: none;} } /* --- 3カラムリスト（共通） --- */ .ivr_page .ivr_three_col { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 40px 0;} .ivr_page .ivr_three_col li { width: 100%; padding: 0 2% 4% 2%; text-align: center; margin: 6% 0 0;} .ivr_page .ivr_three_col li img { width: 32%; margin: 0 auto 8px; display: block;} .ivr_page .ivr_three_col li p { text-align: left; font-size: 15px; line-height: 1.7; margin: 6px 0 0;} .ivr_page .ivr_three_col li p span { font-size: 12px; display: block; margin-top: 4px; color: #555;} @media (min-width: 768px) { .ivr_page .ivr_three_col li { width: 33%; margin: 0;} } /* --- 4カラムリスト --- */ .ivr_page .ivr_four_col { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 16px 0;} .ivr_page .ivr_four_col li { width: 50%; padding: 0 4px; text-align: center; margin-bottom: 20px;} .ivr_page .ivr_four_col li img { width: 36%; margin: 0 auto 8px; display: block;} .ivr_page .ivr_four_col li p { text-align: left; font-size: 14px; line-height: 1.6; margin: 0;} .ivr_page .ivr_four_col li p span { font-size: 12px; display: block; margin-top: 4px; color: #555;} @media (min-width: 768px) { .ivr_page .ivr_four_col li { width: 25%;} } /* --- FAQセクション --- */ .ivr_page .ivr_faq dl { padding: 0 10px;} .ivr_page .ivr_faq dl dt { color: #009166; font-weight: bold; font-size: 15px; margin-bottom: 8px; margin-top: 24px;} .ivr_page .ivr_faq dl dd { font-size: 15px; line-height: 1.8; margin-bottom: 0; padding-left: 8px;} @media (min-width: 768px) { .ivr_page .ivr_faq dl dt { font-size: 18px;} .ivr_page .ivr_faq dl dd { font-size: 16px;} } /* --- ivr: reservationFunctionList header 左テキスト＋右画像 --- */ .ivr_page .reservationFunctionList header { display: flex; align-items: center; gap: 32px;} .ivr_page .reservationFunctionList > header::after { display: none;} .ivr_page .reservationFunctionList > header h2::after { display: block; width: 289px; height: 3px; margin-top: 25px; content: ''; background: linear-gradient(90deg, #1c9f91 0%, #0d787e 84.62%, #00546c 100%);} .ivr_page .reservationFunctionList header .ivr_header_inner { flex: 1; min-width: 0;} .ivr_page .reservationFunctionList header .ivr_fv_img { flex-shrink: 0; width: 30%; max-width: 391px; height: auto; display: block;} @media (max-width: 767px) { .ivr_page .reservationFunctionList header { flex-direction: column;} .ivr_page .reservationFunctionList > header h2::after { width: calc(289 / 393 * 100vw); height: calc(3 / 393 * 100vw); margin-top: calc(25 / 393 * 100vw);} .ivr_page .reservationFunctionList header .ivr_fv_img { width: 80%; max-width: 300px; margin: 0 auto;} } /* ========================================================================== language/index.php 専用レイアウト ========================================================================== */ /* ネストsectionのmargin */ @media (min-width: 768px) { .language_page .borderWrapper section { margin-bottom: 70px;} } /* 対応言語一覧（デフォルトのボタン形式、リンクなし） */ .language_page .language_list { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 16px 0; gap: 12px;} .language_page .language_list li { display: flex; align-items: center; justify-content: center; height: 56px; padding: 0 24px; color: #1C9F91; border: 1px solid #1C9F91; border-radius: 40px; background-color: #fff; font-family: "noto_sans_cjk_jpbold", sans-serif; font-size: 16px;} /* タイポグラフィ（ガイドライン準拠） */ .language_page .language_prod_list li h3 { color: #009166; text-align: center; margin: 12px 0 8px;} /* --- 多言語対応リスト（2カラム） --- */ .language_page .language_prod_list { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; gap: 32px 0;} .language_page .language_prod_list li { width: 100%; text-align: center;} .language_page .language_prod_list li img { width: 60%; max-width: 200px; margin: 0 auto 12px; display: block;} .language_page .language_prod_list li p { text-align: left; font-size: 15px; line-height: 1.8;} @media (min-width: 768px) { .language_page .language_prod_list { gap: 0 4%;} .language_page .language_prod_list li { width: 48%;} .language_page .language_prod_list li img { width: 80%; max-width: 200px;} } /* ========================================================================== スマホ最適化補完（linejunban / ivr / language 共通） max-width: 767px ========================================================================== */ @media (max-width: 767px) { /* --- 共通: backBlueSection内のheader余白 --- */ .linejunban_page .reservationFunctionList > header, .ivr_page .reservationFunctionList > header, .language_page .reservationFunctionList > header { padding: 16px;} /* --- 共通: fv_inquiry_btn モバイル中央寄せ --- */ .reservationFunctionList header .fv_inquiry_btn { text-align: center;} .reservationFunctionList header .fv_inquiry_btn a.base-btn { margin: 0 auto;} /* --- linejunban: con01/con02カードの余白 --- */ .linejunban_page .page_col03 ul li { padding: 0 8px 24px;} .linejunban_page .linejunban_con02 ul li { padding-bottom: 24px;} /* --- ivr: ivr_problems リスト余白 --- */ .ivr_page .ivr_problems ul { padding-bottom: 0;} .ivr_page .ivr_problems ul li { margin: 0 0 8px 0; padding: 10px 16px;} /* --- ivr: ivr_features 説明文 --- */ .ivr_page .ivr_features > p:not(.ivr_kaiketu) { font-size: 14px;} /* --- ivr: ivr_three_col カード余白 --- */ .ivr_page .ivr_three_col li { padding: 0 8px 16px; margin-top: 24px;} /* --- ivr: ivr_four_col 画像サイズ調整 --- */ .ivr_page .ivr_four_col li img { width: 70%;} /* --- ivr: FAQ --- */ .ivr_page .ivr_faq dl { padding: 0;} /* --- language: prod_list カード余白 --- */ .language_page .language_prod_list li { padding-bottom: 8px;} .language_page .language_prod_list li img { width: 50%; max-width: 180px;} } /* ========================================================================== vaccine/index.php 専用レイアウト ========================================================================== */ /* ネストsectionのmargin（共通ルール適用） */ @media (min-width: 768px) { .vaccine_page .borderWrapper section { margin-bottom: 70px;} } /* --- reservationFunctionList header 左テキスト＋右画像 --- */ .vaccine_page .reservationFunctionList header { display: flex; align-items: center; gap: 32px;} .vaccine_page .reservationFunctionList > header::after { display: none;} .vaccine_page .reservationFunctionList > header h2::after { display: block; width: 289px; height: 3px; margin-top: 25px; content: ''; background: linear-gradient(90deg, #1c9f91 0%, #0d787e 84.62%, #00546c 100%);} .vaccine_page .reservationFunctionList header .vaccine_header_inner { flex: 1; min-width: 0;} .vaccine_page .reservationFunctionList header .vaccine_fv_img { flex-shrink: 0; width: 30%; max-width: 400px; height: auto; display: block;} @media (max-width: 767px) { .vaccine_page .reservationFunctionList header { flex-direction: column;} .vaccine_page .reservationFunctionList > header h2::after { width: calc(289 / 393 * 100vw); height: calc(3 / 393 * 100vw); margin-top: calc(25 / 393 * 100vw);} .vaccine_page .reservationFunctionList header .vaccine_fv_img { width: 80%; max-width: 300px; margin: 0 auto;} } /* --- vaccine_con02: 6アイテム3列リスト --- */ .vaccine_page .vaccine_col3 { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 16px 0;} .vaccine_page .vaccine_col3 li { width: 100%; padding: 0 2% 4% 2%; text-align: center; margin-top: 6%;} .vaccine_page .vaccine_col3 li img { width: 36%; margin: 0 auto 8px; display: block;} .vaccine_page .vaccine_col3 li p { text-align: left; font-size: 16px; line-height: 1.7; margin: 6px 0 0;} .vaccine_page .vaccine_col3 li p span { font-size: 12px; display: block; margin-top: 4px; color: #555;} @media (min-width: 768px) { .vaccine_page .vaccine_col3 li { width: 33%; margin-top: 0;} } /* --- vaccine_con03: 活用事例2列リスト --- */ .vaccine_page .vaccine_col2 { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 16px 0;} .vaccine_page .vaccine_col2 li { width: 100%; padding: 0 2% 4% 2%; text-align: center;} .vaccine_page .vaccine_col2 li img { width: 80%; max-width: 320px; margin: 0 auto 12px; display: block;} .vaccine_page .vaccine_col2 li p { text-align: left; font-size: 15px; line-height: 1.7; margin: 0;} .vaccine_page .vaccine_col2 li p span { font-size: 12px; display: block; margin-top: 4px; color: #555;} @media (min-width: 768px) { .vaccine_page .vaccine_col2 li { width: 50%;} } /* --- vaccine_con04: ご利用までの流れ3列 --- */ .vaccine_page .vaccine_col3_flow { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 16px 0;} .vaccine_page .vaccine_col3_flow li { width: 100%; padding: 0 2% 4% 2%; text-align: center; margin-bottom: 24px;} .vaccine_page .vaccine_col3_flow li img { width: 70%; max-width: 280px; margin: 0 auto 12px; display: block;} .vaccine_page .vaccine_col3_flow li p { text-align: left; font-size: 15px; line-height: 1.7; margin: 0;} @media (min-width: 768px) { .vaccine_page .vaccine_col3_flow li { width: 33%; margin-bottom: 0;} } /* --- vaccine_faq --- */ .vaccine_page .vaccine_faq dl { padding: 0 10px;} .vaccine_page .vaccine_faq dl dt { color: #009166; font-weight: bold; font-size: 15px; margin-bottom: 8px; margin-top: 24px;} .vaccine_page .vaccine_faq dl dd { font-size: 15px; line-height: 1.8; margin-bottom: 0; padding-left: 8px;} @media (min-width: 768px) { .vaccine_page .vaccine_faq dl dt { font-size: 18px;} .vaccine_page .vaccine_faq dl dd { font-size: 16px;} } /* --- vaccine: SP調整 --- */ @media (max-width: 767px) { .vaccine_page .vaccine_col3 li, .vaccine_page .vaccine_col3_flow li { padding: 0 8px 16px; margin-top: 24px;} .vaccine_page .vaccine_col2 li { padding: 0 8px 16px;} .vaccine_page .vaccine_faq dl { padding: 0;} } /* ========================================================================== omtm_page (omatomessk/index.php) 専用レイアウト ========================================================================== */ /* --- セクション余白（PC） --- */ @media (min-width: 768px) { .omtm_page .borderWrapper section { margin-bottom: 70px;} } /* --- FV画像: PC/SP切替、幅100% --- */ .omtm_page .omtm_fv_pc { display: none; width: 100%;} .omtm_page .omtm_fv_sp { display: block; width: 100%;} @media (min-width: 768px) { .omtm_page .omtm_fv_pc { display: block;} .omtm_page .omtm_fv_sp { display: none;} } /* タイポグラフィ */ .omtm_page .omtm_ttl01, .omtm_page .omtm_ttl02 { font-size: 22px; font-weight: bold; text-align: center; margin-bottom: 20px;} .omtm_page .omtm_ttl02 span { font-size: 32px;} .omtm_page .omtm_con01 h3, .omtm_page .omtm_col3 h3, .omtm_page .omtm_col2 h3 { font-size: 16px; font-weight: bold; margin: 8px 0;} @media (min-width: 768px) { .omtm_page .omtm_ttl01, .omtm_page .omtm_ttl02 { font-size: 24px;} .omtm_page .omtm_ttl02 span { font-size: 48px;} .omtm_page .omtm_col2 h3 { font-size: 20px;} } @media (max-width: 767px) { .omtm_page .omtm_ttl01, .omtm_page .omtm_ttl02 { font-size: 20px;} } /* --- omtm_sec01: イントロ文 --- */ .omtm_page .omtm_sec01 > p { font-size: 15px; line-height: 1.8; margin-bottom: 24px;} @media (max-width: 767px) { .omtm_page .omtm_sec01 > p { font-size: 14px;} } /* --- omtm_con01: 問題3列リスト --- */ .omtm_page .omtm_con01 { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 16px 0;} .omtm_page .omtm_con01 li { width: 100%; padding: 0 8px 16px; text-align: center;} .omtm_page .omtm_con01 li img { width: 25%; margin: 8px auto; display: block;} .omtm_page .omtm_con01 li p { text-align: center; font-size: 14px; line-height: 1.8;} @media (min-width: 768px) { .omtm_page .omtm_con01 li { width: 33%; padding: 0 2% 4% 2%;} .omtm_page .omtm_con01 li p { font-size: 15px;} } /* --- omtm_col3: 機能3列リスト --- */ .omtm_page .omtm_col3 { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 16px 0;} .omtm_page .omtm_col3 li { width: 100%; padding: 0 8px 16px; text-align: center;} .omtm_page .omtm_col3 li img { width: 70%; margin: 0 auto 8px; display: block;} .omtm_page .omtm_col3 li p { text-align: left; font-size: 15px; line-height: 1.7; margin: 6px 0 0;} @media (min-width: 768px) { .omtm_page .omtm_col3 li { width: 33%; padding: 0 2% 4% 2%;} } /* --- omtm_img01: セクション中央画像 --- */ .omtm_page .omtm_img01 { display: block; width: 90%; max-width: 600px; margin: 20px auto;} /* --- omtm_col2: 効果2列リスト --- */ .omtm_page .omtm_col2 { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 16px 0;} .omtm_page .omtm_col2 li { width: 100%; padding: 0 8px 16px; text-align: center;} .omtm_page .omtm_col2 li img { width: 80%; max-width: 300px; margin: 0 auto 12px; display: block;} .omtm_page .omtm_col2 li p { text-align: left; font-size: 14px; line-height: 1.7;} @media (min-width: 768px) { .omtm_page .omtm_col2 li { width: 50%; padding: 0 2% 4% 2%;} .omtm_page .omtm_col2 li p { font-size: 15px; padding: 0 10%;} } /* --- omtm_txt: 強調数字テキスト --- */ .omtm_page .omtm_txt01 { font-size: 20px; font-weight: bold; color: #009166;} .omtm_page .omtm_txt02 { font-size: 40px; font-weight: bold; color: #009166; line-height: 1.2;} @media (min-width: 768px) { .omtm_page .omtm_txt01 { font-size: 24px;} .omtm_page .omtm_txt02 { font-size: 56px;} } /* ========================================================================== cashless_page (cashless/index.php) 専用レイアウト ========================================================================== */ /* --- セクション余白（PC） --- */ @media (min-width: 768px) { .cashless_page .borderWrapper section { margin-bottom: 70px;} } /* タイポグラフィ */ .cashless_page .cashless_col2 h3 { margin: 8px 0;} /* --- cashless_presentation: お悩みセクション --- */ .cashless_page .cashless_presentation img { width: 60%; max-width: 240px; display: block; margin: 0 auto 20px;} .cashless_page .cashless_presentation ul { list-style: none; padding: 0; margin: 0;} .cashless_page .cashless_presentation ul li { background-color: #ecf3f9; margin: 0 0 8px; padding: 12px 20px; font-size: 15px; line-height: 1.6;} @media (min-width: 768px) { .cashless_page .cashless_presentation { margin: 0 80px; position: relative;} .cashless_page .cashless_presentation img { position: absolute; width: 28%; max-width: none; right: 0; top: 40px; margin: 0;} .cashless_page .cashless_presentation ul { margin-right: 34%;} .cashless_page .cashless_presentation ul li { font-size: 17px; padding: 14px 28px;} } /* --- cashless_sec02: 解決策 2列リスト --- */ .cashless_page .cashless_sec02 > p { font-size: 15px; line-height: 1.8; text-align: center; margin-bottom: 20px;} .cashless_page .cashless_col2 { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0;} .cashless_page .cashless_col2 li { width: 100%; padding: 0 8px 20px; text-align: center;} .cashless_page .cashless_col2 li img { width: 50%; max-width: 200px; margin: 0 auto 10px; display: block;} .cashless_page .cashless_col2 li p { text-align: left; font-size: 15px; line-height: 1.7; margin: 6px 0 0;} @media (min-width: 768px) { .cashless_page .cashless_col2 li { width: 50%; padding: 0 2% 4% 2%;} .cashless_page .cashless_col2 li img { width: 40%;} } @media (max-width: 767px) { .cashless_page .cashless_sec02 > p { font-size: 14px;} } /* --- cashless_sec03: グラフ・テキスト --- */ .cashless_page .cashless_sec03 { border: 12px solid #f2f2e9; border-radius: 10px; padding: 24px 16px;} .cashless_page .cashless_sec03 > p { font-size: 15px; line-height: 1.8; margin-bottom: 20px;} .cashless_page .cashless_sec03 img { display: block; width: 90%; max-width: 600px; margin: 0 auto;} @media (min-width: 768px) { .cashless_page .cashless_sec03 { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: 32px 40px;} .cashless_page .cashless_sec03 h2 { width: 100%; text-align: center;} .cashless_page .cashless_sec03 > p { flex: 1; margin-bottom: 0;} .cashless_page .cashless_sec03 img { width: 32%; max-width: 260px; margin: 0;} } /* --- cashless_sec04: 操作イメージ --- */ .cashless_page .cashless_sec04 img { display: block; width: 100%; max-width: 800px; margin: 0 auto; height: auto;} /* --- cashless_sec05: 利用開始フロー --- */ .cashless_page .cashless_sec05 > p { font-size: 15px; line-height: 1.8; margin-bottom: 20px;} .cashless_page .cashless_flow_list { list-style: none; padding: 0; margin: 0;} .cashless_page .cashless_flow_list li { background-color: #f1fcfd; margin: 0 0 10px; padding: 14px 20px; font-size: 15px; font-weight: bold; line-height: 1.5; position: relative; counter-increment: flow-step;} .cashless_page .cashless_flow_list li::before { content: counter(flow-step) ". "; color: #009166;} .cashless_page .cashless_flow_list { counter-reset: flow-step;} @media (min-width: 768px) { .cashless_page .cashless_flow_list { display: flex; flex-wrap: wrap; gap: 8px;} .cashless_page .cashless_flow_list li { flex: 1; min-width: 0; margin: 0; text-align: center; padding: 18px 12px; font-size: 14px;} .cashless_page .cashless_sec05 > p { text-align: center;} } /* --- cashless_faq --- */ .cashless_page .cashless_faq dl { padding: 0 10px;} .cashless_page .cashless_faq dl dt { color: #009166; font-weight: bold; font-size: 15px; margin-bottom: 8px; margin-top: 24px;} .cashless_page .cashless_faq dl dd { font-size: 15px; line-height: 1.8; margin-bottom: 0; padding-left: 8px;} @media (min-width: 768px) { .cashless_page .cashless_faq dl dt { font-size: 18px;} .cashless_page .cashless_faq dl dd { font-size: 16px;} } /* --- cashless: SP調整 --- */ @media (max-width: 767px) { .cashless_page .cashless_faq dl { padding: 0;} .cashless_page .cashless_sec05 > p { font-size: 14px;} } /* ========================================================================== karte_page (karte/index.php) 専用レイアウト ========================================================================== */ /* --- セクション余白（PC） --- */ @media (min-width: 768px) { .karte_page .borderWrapper section { margin-bottom: 70px;} } /* --- FV header: 背景画像 --- */ .karte_page .reservationFunctionList > header { background-image: url('/common/images/products/karte_1st_sp-min.webp'); background-repeat: no-repeat; background-size: 100%; background-position: top left; background-color: #f4f3f3; /*padding-bottom: 52vw;*/} .karte_page .reservationFunctionList > header::after { display: none;} @media (min-width: 768px) { .karte_page .reservationFunctionList > header { background-image: url('/common/images/products/karte_1st-min.webp'); background-size: 100%; min-height: 300px; padding: 2% 5% 2% 44px;} } /* タイポグラフィ */ .karte_page .karte_faq_item h3 { color: #009166;} /* --- karte_h2: グループタイトル（緑色） --- */ .karte_page .karte_h2 { font-size: 24px; font-weight: bold; color: #009166; text-align: center; margin: 16px 44px 20px; padding: 0;} @media (max-width: 767px) { .karte_page .karte_h2 { font-size: 24px; margin: 8px 0 16px;} } /* --- karte_presentation: お悩みセクション --- */ .karte_page .karte_presentation img { width: 60%; max-width: 240px; display: block; margin: 0 auto 20px;} .karte_page .karte_presentation ul { list-style: none; padding: 0; margin: 0;} .karte_page .karte_presentation ul li { background-color: #ecf3f9; margin: 0 0 8px; padding: 12px 20px; font-size: 15px; line-height: 1.6;} @media (min-width: 768px) { .karte_page .karte_presentation { position: relative; margin: 0 80px;} .karte_page .karte_presentation img { position: absolute; width: 28%; max-width: none; right: 0; top: 40px; margin: 0;} .karte_page .karte_presentation ul { margin-right: 34%;} .karte_page .karte_presentation ul li { font-size: 17px; padding: 14px 28px;} } /* --- karte_sec02: 電子カルテ機能 --- */ .karte_page .karte_lead_bold { text-align: center; font-size: 18px; margin: 20px 0 12px;} .karte_page .karte_lead_bold::after { font-family: 'Material Icons'; content: '\ead0'; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; font-size: 60px; display: block; margin-top: 2%; } .karte_page .karte_overview_img { display: block; width: 90%; max-width: 600px; margin: 16px auto 8px;} .karte_page .karte_note { font-size: 12px; color: #555; text-align: center; margin-bottom: 20px;} /* --- karte_col5: 5機能リスト（PC: 3列、SP: 1列） --- */ .karte_page .karte_col5 { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0;} .karte_page .karte_col5 li { width: 100%; padding: 0 8px 20px; text-align: center;} .karte_page .karte_col5 li img { width: 60%; max-width: 160px; margin: 0 auto 8px; display: block;} .karte_page .karte_col5 li p { text-align: left; font-size: 14px; line-height: 1.7; margin: 6px 0 0;} @media (min-width: 768px) { .karte_page .karte_col5 li { width: 33%; padding: 0 3% 4%; margin-top: 0;} .karte_page .karte_col5 li:nth-child(4) { margin-left: 15%;} .karte_page .karte_col5 li p { font-size: 15px;} } /* --- karte_img_pair: 2画像横並び --- */ .karte_page .karte_img_pair { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0;} .karte_page .karte_img_pair img { width: 100%;} @media (min-width: 768px) { .karte_page .karte_img_pair { flex-wrap: nowrap; margin-left: 10%; gap: 2%;} .karte_page .karte_img_pair img { width: 49%; max-width: 49%; height: auto;} } /* --- karte_sec04/06/07: テキスト + 画像ペア --- */ .karte_page .karte_sec04 > p, .karte_page .karte_sec06 > p, .karte_page .karte_sec07 > p { font-size: 15px; line-height: 1.8; margin-bottom: 12px;} @media (max-width: 767px) { .karte_page .karte_sec04 > p, .karte_page .karte_sec06 > p, .karte_page .karte_sec07 > p { font-size: 14px;} } /* --- karte_sec05: キャッシュレス --- */ .karte_page .karte_sec05 h3 { text-align: center; margin: 20px 0 12px; color: #0d787e;} .karte_page .karte_sec05 > p { font-size: 15px; line-height: 1.8; margin-bottom: 12px;} .karte_page .karte_flow_img { display: block; width: 80%; max-width: 320px; margin: 0 auto 20px;} @media (min-width: 768px) { .karte_page .karte_sec05 { position: relative;} .karte_page .karte_flow_img { position: absolute; right: 0; top: 60px; width: 18%; max-width: none; margin: 0;} .karte_page .karte_sec05 > p { margin-right: 22%;} } @media (max-width: 767px) { .karte_page .karte_sec05 > p { font-size: 14px;} } /* --- karte_sec08: その他の特徴（list_mini パターン） --- */ .karte_page .karte_list3 { list-style: none; padding: 0; margin: 0;} .karte_page .karte_list3 li { position: relative; padding-left: 72px; margin-bottom: 24px; min-height: 56px;} .karte_page .karte_list3 li img { position: absolute; top: 0; left: 0; width: 56px; height: 56px; object-fit: contain;} .karte_page .karte_list3 li h3 { margin: 0 0 8px; padding: 4px 0;} .karte_page .karte_list3 li p { font-size: 15px; line-height: 1.7; margin: 0;} @media (min-width: 768px) { .karte_page .karte_list3 { display: flex; flex-wrap: wrap; gap: 24px;} .karte_page .karte_list3 li { width: calc(50% - 12px); margin-bottom: 0;} } @media (max-width: 767px) { .karte_page .karte_list3 li p { font-size: 14px;} } /* --- karte_faq --- */ .karte_page .karte_faq_item { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #e0e0e0;} .karte_page .karte_faq_item:last-child { border-bottom: none; margin-bottom: 0;} .karte_page .karte_faq_item p { font-size: 15px; line-height: 1.8; padding-left: 8px; margin: 0;} @media (min-width: 768px) { .karte_page .karte_faq_item p { font-size: 16px;} } @media (max-width: 767px) { .karte_page .karte_faq_item p { font-size: 14px;} } /* ============================================= customize_page ============================================= */ /* --- セクション共通 --- */ .customize_page .customize_sec_std, .customize_page .customize_sec_web, .customize_page .customize_sec_back { margin-bottom: 70px;} .customize_page .customize_sec_std h2, .customize_page .customize_sec_web h2, .customize_page .customize_sec_back h2 { font-size: 24px; font-weight: bold; margin-bottom: 12px; color: #333;} .customize_page .customize_sec_std > p, .customize_page .customize_sec_web > p, .customize_page .customize_sec_back > p { font-size: 15px; line-height: 1.8; margin-bottom: 20px;} /* --- customize_prod_list --- */ .customize_page .customize_prod_list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 24px;} .customize_page .customize_prod_list li { width: 100%;} .customize_page .customize_prod_list li img { width: 40%; height: auto; display: block; margin: 0 auto 12px;} .customize_page .customize_prod_list li h3 { color: #009166; text-align: center; margin-bottom: 8px;} .customize_page .customize_prod_list li p { font-size: 14px; line-height: 1.8; text-align: left; margin: 0;} /* PC: 2カラム */ @media (min-width: 768px) { .customize_page .customize_sec_std h2, .customize_page .customize_sec_web h2, .customize_page .customize_sec_back h2 { font-size: 24px;} .customize_page .customize_sec_std > p, .customize_page .customize_sec_web > p, .customize_page .customize_sec_back > p { font-size: 16px;} .customize_page .customize_prod_list li { width: calc(46% - 12px); margin-right: 4%;} .customize_page .customize_prod_list li:nth-child(2n) { margin-right: 0;} .customize_page .customize_prod_list li p { font-size: 15px;} } /* ============================================= sms_page ============================================= */ /* --- sms_sec01 --- */ .sms_page .sms_sec01 { margin-bottom: 70px;} .sms_page .sms_subttl { text-align: center; font-size: 24px; font-weight: bold; color: #009166; padding: 24px 0; margin: 0;} .sms_page .sms_toplist { list-style: none; padding: 0; margin: 0 0 20px;} .sms_page .sms_toplist li { display: block; border-radius: 4px; background-color: #009166; text-align: center; color: #fff; font-weight: bold; font-size: 16px; padding: 12px 20px; margin-bottom: 6px;} .sms_page .sms_sec01 > p { font-size: 14px; line-height: 1.8; margin-bottom: 20px;} .sms_page .sms_sec01 img { width: 100%; height: auto; display: block; margin: 0 auto;} /* --- sms_sec02 --- */ .sms_page .sms_sec02 { margin-bottom: 70px;} .sms_page .sms_sec02 h2 { font-size: 24px; font-weight: bold; color: #333; margin-bottom: 12px;} .sms_page .sms_sec02 > p { font-size: 14px; line-height: 1.8; margin-bottom: 16px;} .sms_page .sms_imp_fld { background-color: #eeebe5; border-radius: 4px; padding: 16px 20px; margin: 0 0 20px;} .sms_page .sms_imp_fld p { font-size: 14px; line-height: 1.7; margin: 0 0 8px;} .sms_page .sms_imp_fld p:last-child { margin-bottom: 0;} /* PC */ @media (min-width: 768px) { .sms_page .sms_subttl { font-size: 24px;} .sms_page .sms_toplist li { font-size: 18px; padding: 14px 24px;} .sms_page .sms_sec01 > p, .sms_page .sms_sec02 > p { font-size: 16px;} .sms_page .sms_sec02 h2 { font-size: 24px;} .sms_page .sms_sec01 img { max-width: 700px;} .sms_page .sms_imp_fld p { font-size: 15px;} } /* ============================================= statistics_page ============================================= */ /* --- stat_sec01 --- */ .statistics_page .stat_sec01 { margin-bottom: 70px;} .statistics_page .stat_subttl { text-align: center; font-size: 24px; font-weight: bold; color: #009166; padding: 24px 0; margin: 0 0 12px;} .statistics_page .stat_toplist_wrap { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;} .statistics_page .stat_toplist_wrap li { display: flex; align-items: center; justify-content: center; height: 56px; padding: 0 24px; color: #1C9F91; border: 1px solid #1C9F91; border-radius: 40px; background-color: #fff; font-family: "noto_sans_cjk_jpbold", sans-serif; font-size: 16px;} .statistics_page .stat_sec01 > p { font-size: 14px; line-height: 1.8; margin: 0;} /* --- stat_sec02 --- */ .statistics_page .stat_sec02 { margin-bottom: 70px;} .statistics_page .stat_sec02 > h2 { font-size: 24px; font-weight: bold; color: #333; margin-bottom: 12px;} .statistics_page .stat_sec02 > p { font-size: 14px; line-height: 1.8; margin-bottom: 20px;} /* --- stat_list --- */ .statistics_page .stat_list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 24px;} .statistics_page .stat_list li { width: 100%; text-align: center;} .statistics_page .stat_list li img { width: 100%; height: auto; display: block; margin-bottom: 12px;} .statistics_page .stat_list li h3 { color: #009166; text-align: center; margin-bottom: 8px;} .statistics_page .stat_list li p { font-size: 14px; line-height: 1.8; text-align: left; margin: 0;} /* PC */ @media (min-width: 768px) { .statistics_page .stat_subttl { font-size: 24px;} .statistics_page .stat_sec01 > p, .statistics_page .stat_sec02 > p { font-size: 16px;} .statistics_page .stat_sec02 > h2 { font-size: 24px;} .statistics_page .stat_list li { width: calc(46% - 12px); margin-right: 4%;} .statistics_page .stat_list li:nth-child(2n) { margin-right: 0;} .statistics_page .stat_list li p { font-size: 15px;} } /* ========================================================================== yoyaku_page 「予約 機能一覧」下の理論補強セクション （TOPページ(index.astro) .fv_new_1min と全く同じ表示にするため、 style.css（ProductsLayoutでは読み込んでいない）の該当ルールをそのまま移植） ========================================================================== */ .fv_new_1min { background: #F2F4F8; padding: 88px 0 120px; overflow: hidden;} .fv_new_1min_inner { width: 1000px; margin: 0 auto; position: relative;} .fv_new_1min_bg_text { position: absolute; top: -175px; left: 0; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 152px; color: #fff; line-height: 1.6; white-space: nowrap; pointer-events: none; z-index: 0; margin: 0;} .fv_new_1min_card { position: relative; z-index: 1; background: #fff; border-radius: 16px; padding: 64px 120px; margin-top: 106px; display: flex; flex-direction: column; gap: 40px; align-items: center;} .fv_new_1min_title { font-family: "noto_sans_cjk_jpbold", sans-serif; font-size: 34px; color: #00546C; letter-spacing: 0.08em; line-height: 1.5; text-align: center; margin: 0;} .fv_new_1min_accent { font-size: 44px; color: #D1B28B;} .fv_new_1min_body { display: flex; align-items: center; gap: 32px; width: 100%;} .fv_new_1min_texts { flex: 1; display: flex; flex-direction: column; gap: 32px; font-family: "noto_sans_cjk_jpmedium", sans-serif; font-size: 16px; color: #1C1C1C; line-height: 1.6;} .fv_new_1min_texts p { margin: 0;} .fv_new_1min_img { width: 368px; height: 368px; object-fit: cover; flex-shrink: 0; display: block;} .fv_new_1min_tagline { font-family: "noto_sans_cjk_jpbold", sans-serif; font-size: 22px; color: #1C9F91; line-height: 1.5; text-align: center; margin: 0;} @media (max-width: 1023px) { .fv_new_1min_inner { width: 100%; padding: 0 16px; box-sizing: border-box;} .fv_new_1min_bg_text { font-size: 88px;} .fv_new_1min_card { margin-top: 60px; padding: 44px 32px;} } @media (max-width: 767px) { .fv_new_1min { padding: 48px 0 56px;} .fv_new_1min_inner { padding: 0 8px;} .fv_new_1min_bg_text { font-size: 56px;} .fv_new_1min_card { margin-top: 32px; padding: 28px 16px; gap: 24px;} .fv_new_1min_title { font-size: 20px;} .fv_new_1min_accent { font-size: 26px;} .fv_new_1min_body { flex-direction: column-reverse; align-items: center;} .fv_new_1min_img { width: 100%; max-width: 240px; height: 240px;} .fv_new_1min_tagline { font-size: 14px;} }