/*common*/ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box;} /* ============================================ User Agent Stylesheet Reset ============================================ */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline;} h1, h2, h3, h4, h5, h6 { margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0; font-size: inherit; font-weight: inherit; unicode-bidi: normal;} p { margin-block-start: 0; margin-block-end: 0;} ol, ul { list-style: none; margin-block-start: 0; margin-block-end: 0; padding-inline-start: 0;} blockquote, q { quotes: none;} blockquote::before, blockquote::after, q::before, q::after { content: ''; content: none;} table { border-collapse: collapse; border-spacing: 0;} a { text-decoration: none; color: inherit;} img, svg, video, canvas, audio, iframe, embed, object { max-width: 100%;} img { height: auto; display: block;} button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; margin: 0;} button, select { text-transform: none;} button { border: none; background: none; cursor: pointer; padding: 0;} /* ============================================ 共通スタイル ============================================ */ /* 全ページ共通ベーススタイル（style.css より統合） */ * { font-family: "noto_sans_cjk_jp_regularRg", sans-serif;} html { scroll-behavior: smooth;} small, .small { font-size: 11px; font-weight: normal; line-height: 1.5;} a:hover { opacity: 0.7;} body { margin: 0; overflow-x: hidden;} div, p, p a, section, ul li, ul li a, dl dt, dl dd, table tr td, table tr td span, label { font-size: 15px; line-height: 1.5; margin: 0; padding: 0; list-style: none;} /* 見出し PC */ h1 { font-size: 32px; font-weight: bold; line-height: 1.5;} h2 { font-size: 24px; font-weight: bold; line-height: 1.5;} h3 { font-size: 22px; font-weight: bold; line-height: 1.5;} h4, h5, h6 { font-size: 16px; font-weight: bold; line-height: 1.5;} @media only screen and (max-width: 767px) { body { font-size: 14px;} /* 見出し SP */ h1, h2 { font-size: 20px;} h3, h4, h5, h6 { font-size: 16px;} /* ボックス SP */ .mainbox { padding: 0 8px;} } .mainbox { margin: 0 auto; width: 100%; padding: 4% 2%;} /* リンク行 p.link */ p.link { text-align: right; margin: 8px 0 0 0;} p.link a { display: inline-block; color: #009166; font-size: 14px; font-weight: bold; padding: 14px 28px; text-decoration: none; transition: opacity 0.2s;} p.link a:hover { opacity: 0.75;} /* p.link 標準ボタンデザイン（p.link.base-btn2.whiteBg として使用。サイトマップ・各ページFV・LPページを除く本文内リンクボタンの基準） ページ固有の `p` 汎用スタイル（font-size/marginの上書き等）に負けないよう、値は明示指定する */ p.link.base-btn2.whiteBg { margin: 20px 0 40px auto; padding-right: 0; /* base-btn2本体のアイコン用余白を、アイコンなしの標準ボタンでは無効化してセンタリングする */} p.link.base-btn2.whiteBg a { color: #1C9F91; font-size: 18px; font-weight: normal; padding: 0; transition: none;} p.link.base-btn2.whiteBg a:hover { opacity: 1;} p.link.base-btn2.whiteBg:hover a { color: #FFFFFF;} @media print, screen and (min-width: 1250px) { .post_main { flex: 1; max-width: 790px;} .post_side { width: 280px; margin-left: 100px; padding: 0 2px 50px 0;} } section.breadcrumbs .st-aside { padding: 1% 0 0 0; font-size: 12px; line-height: 1.2;} section.breadcrumbs .st-aside span, section.breadcrumbs .st-aside span a { font-size: 12px; color: #666;} section.breadcrumbs .st-aside span br { display: none;} @media only screen and (min-width: 768px) { section.breadcrumbs .st-aside { max-width: 1250px;} } /**/ .radius_btns { width: auto; height: 100%; line-height: 1.25; display: flex; justify-content: flex-end; align-items: center; color: #1C9F91; border: 1px solid #1C9F91; text-decoration: none; background-color: white; border-radius: 40px; font-family: "noto_sans_cjk_jpbold", sans-serif; font-weight: bold; font-size: 14px; padding: 14px 18px; height: 48px; transition :all 0.5s ease 0s; position: relative;} .radius_btns.fill::after { content: ""; background-image: linear-gradient(77deg, rgba(0,84,108,1) 0%, rgba(0,126,143,1) 28%, rgba(28,159,145,1) 90%); position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 40px; overflow: hidden; z-index: 0; transition:all 0.5s ease-out;} .radius_btns.fill:hover::after { opacity: 0; visibility: hidden;} .radius_btns.fill span { color: #fff; z-index: 1; position: relative; transition:all 0.5s ease-out; /* transition-delay:0.3ms; */} .radius_btns.fill:hover span { background: linear-gradient(90deg, #00546C -2.01%, #1C9F91 103.87%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;} /**/ .navigationWrap { display: flex; gap: 20px; align-items: center; position: relative;} ul.main-nav { list-style-type: none; padding: 0px; font-size: 0px; max-width: 1000px; margin: 0 auto;} ul.main-nav > li { display: inline-block; padding: 0;} ul.main-nav > li > a { display: block; padding: 25px 9px; position: relative; color: #333; font-size: 13px; font-weight: bold; font-family: "noto_sans_cjk_jpbold", sans-serif; box-sizing: border-box;} ul.main-nav > li:hover { background-color: #f9f9f9;} ul.main-nav > li:hover > a { color: #333; font-weight: 400;} /* ul.main-nav > li ul.sub-menu-lists { margin: 0px; padding: 0px; list-style-type : none; display:block; } ul.main-nav > li ul.sub-menu-lists > li { padding: 2px 0; } ul.main-nav > li ul.sub-menu-lists > li > a { font-size: 14px; } */ *:focus { outline: none;} .aside-form-wrap { background-color: #ffffff;} .aside-form-wrap .aside-form { padding: 26px 44px 36px 44px; overflow-y: auto; box-shadow: 1px 0px 10px rgba(0, 0, 0, .2);} .aside-form-wrap .aside-form #div_contact_fix #mr_form .mr_form_inner { background-color: #f3f4f8; margin-top: 15px; margin-bottom: 34px; /* border: 1px #000 solid;*/ border-radius: 5px;} .aside-form-wrap .aside-form #div_contact_fix #mr_form .mr_form_inner .frow { padding: 15px 15px 8px 15px; border-bottom: 1px #c8c8c8 solid;} .aside-form-wrap .aside-form #div_contact_fix #mr_form .mr_form_inner .frow:first-child input:not([type="submit"]):not([type=checkbox]):not([type=radio]) { margin-top: 20px;} .aside-form-wrap .aside-form #div_contact_fix #mr_form .mr_form_inner .frow input:not([type="submit"]):not([type=checkbox]):not([type=radio]) { width: 100%; margin-top: 12px; border: none; background-color: transparent;} .aside-form-wrap .aside-form #div_contact_fix #mr_form .mr_form_inner .frow input:focus { border: none;} .aside-form-wrap .aside-form #div_contact_fix #mr_form .mr_form_inner .frow:last-child { border-bottom: 0px;} .aside-form-wrap .aside-form #div_contact_fix #mr_form .mr_form_inner .mr_require_checkbox.label_cb { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 5px; margin-left: -4px;} .form_body { font-size: 12px; line-height: 1.35;} #send_button_pre { font-family: "noto_sans_cjk_jp_regularRg", sans-serif; background: linear-gradient(77deg, rgba(0, 84, 108, 1) 0%, rgba(0, 126, 143, 1) 28%, rgba(28, 159, 145, 1) 90%); color: white !important; padding: 21px 0 19px; border-radius: 40px; text-align: center; margin-top: 11px; border: 1px solid #1C9F91;} #send_button { font-family: "noto_sans_cjk_jpbold", sans-serif; font-size: 16px; background: linear-gradient(77deg, rgba(0, 84, 108, 1) 0%, rgba(0, 126, 143, 1) 28%, rgba(28, 159, 145, 1) 90%); color: white !important; padding: 17px 0 13px; border-radius: 40px; text-align: center; margin-top: 11px; border: 1px solid #1C9F91; width: 100%;} #send_button_pre:hover, #send_button:hover { background: white; color: #1C9F91 !important; cursor: pointer;} .aside-form-wrap .valid_icon { display: none;} /*.aside-form-wrap .aside-form #div_contact_fix #mr_form .mr_form_inner .imp{ background-color: #1c9f91; color: #ffffff; font-size: 9px; padding: 0px 4px; }*/ .aside-form-wrap .imp { background-color: #1c9f91; color: #ffffff; font-size: 9px; padding: 0px 4px;} .form_body a { color: #000000; text-decoration: none;} .aside-form-wrap .aside-form .title { margin-bottom: 22px;} /* CSS bY TRP dated 24-06-2024 */ /* Support System */ .support_systems {} .support_systems .rel_logo { width: 100px; margin-left: auto; margin-right: auto;} .support_systems .rel_logo img { vertical-align: middle;} header .radius_btn:hover span { color: #1C9F91; -webkit-text-fill-color: #1C9F91;} /* */ .radius_btns { width: auto; height: 100%; line-height: 1.25; display: flex; justify-content: flex-end; align-items: center; color: #1C9F91; border: 1px solid #1C9F91; text-decoration: none; background-color: white; border-radius: 40px; font-family: "noto_sans_cjk_jpbold", sans-serif; font-weight: bold; font-size: 14px; padding: 14px 18px; /*height: 48px;*/ transition :all 0.5s ease 0s; position: relative;} .radius_btns.fill::after { content: ""; background-image: linear-gradient(77deg, rgba(0,84,108,1) 0%, rgba(0,126,143,1) 28%, rgba(28,159,145,1) 90%); position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 40px; overflow: hidden; z-index: 0; transition:all 0.5s ease-out;} .radius_btns.fill:hover::after { opacity: 0; visibility: hidden;} .radius_btns.fill span { color: #fff; z-index: 1; position: relative; transition:all 0.5s ease-out; /* transition-delay:0.3ms; */} .radius_btns.fill:hover span { background: linear-gradient(90deg, #00546C -2.01%, #1C9F91 103.87%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;} /******************************************************************/ .supporList a { overflow: hidden;} .supporList a:hover { background: transparent;} .supporList a span.sl-hover-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; background: linear-gradient(77deg, rgba(0, 84, 108, 1) 0%, rgba(0, 126, 143, 1) 28%, rgba(28, 159, 145, 1) 90%); transition: all .4s ease-in;} .supporList a:hover span.sl-hover-bg { opacity: 1; transition: all .4s ease-out;} /******************************************************************/ /***********************Navigation CSS*****************************/ @media only screen and (min-width: 769px){ ul.main-nav > li:hover > div.sub-menu-block { background-color: rgba(28, 159, 145, 0.95); border: 1px #1c9f91 solid; /*margin-top: 12px;*/} .main-nav .top-level-link:hover { background-color: transparent;} .main-nav .top-level-link:hover a span { position: relative;} .main-nav .top-level-link:hover a span:after { content: ""; background-color: #1C9F91; height: 1px; width: 100%; position: absolute; left: 0; bottom: -6px; /*border-bottom: 1px #1c9f91 solid;*/} ul.main-nav ul.sub-menu li a { color: #ffffff; text-decoration: none; font-family: 'noto_sans_cjk_jpmedium'; font-size: 14px; white-space: nowrap;} ul.main-nav ul.sub-menu li li a { font-size: 12px;} ul.main-nav ul.sub-menu li { background-color: transparent; color: #ffffff;} ul.main-nav ul.sub-menu li { float: none; width: 100%; border-right:1px #fff solid; border-radius: 0px;} ul.main-nav ul.sub-menu li a { position: relative;} ul.main-nav ul.sub-menu li:last-child { border-right: 0px;} ul.main-nav ul.sub-menu { display: grid; grid-template-columns: 285px 265px 240px 190px; gap: 18px;} ul.main-nav ul.sub-menu li li { border-right:0px;} ul.main-nav ul.sub-menu li div.submenu-level-2 { margin-top: 21px;} ul.main-nav ul.sub-menu li .submenu-section + .submenu-section { margin-top: 24px;} ul.main-nav ul.sub-menu li.col-uketsuke div.submenu-level-2 ul li, ul.main-nav ul.sub-menu li.col-yoyaku div.submenu-level-2 ul li { margin: 0px;} /* col-yoyaku列: 見出し(予約機能)の上に「製品情報TOP」リンクを別行で追加 */ ul.main-nav ul.sub-menu li.col-yoyaku > a { display: block;} ul.main-nav ul.sub-menu li.col-yoyaku > a:first-child { margin-bottom: 22px;} ul.main-nav > li.top-level-link { /*position: relative;*/} ul.main-nav > li.top-level-link a span { font-size: 12px;} ul.main-nav > li.top-level-link:hover:after { /*content: ""; background-image: url(../images/polygon2.png); background-size: contain; background-repeat: no-repeat; position: absolute; bottom: -12px; left: 50%; width: 14px; height: 10px; transform: translate(-50%, 0);*/} ul.main-nav ul.sub-menu li a:after { /*content: ""; background-image: url(../images/arrow_forward.svg); background-size: 100%; background-repeat: no-repeat; position: absolute; right: -28px; top: -2px; width: 20px; height: 20px;*/} ul.main-nav ul.sub-menu li li a:after { display: none;} ul.main-nav ul.sub-menu li li { padding-left: 25px;} ul.main-nav ul.sub-menu li li a:before { content: ""; background-image: url(../images/chevron_right.svg); background-size: 100%; background-repeat: no-repeat; position: absolute; left: -23px; top: -2px; width: 20px; height: 20px;} ul.main-nav ul.sub-menu li.sub-menu-top li a:before { content:none;} ul.main-nav ul.sub-menu li.sub-menu-top li { padding-left: 0px;} /********************************************************/ ul.main-nav li.top-level-link2 ul.sub-menu { display: grid; grid-template-columns: 70% 30%; gap: 20px;} ul.main-nav li.top-level-link2 ul.sub-menu li:nth-child(1) div.submenu-level-2 ul { display: grid; grid-template-columns: 30% 30% 40%;} ul.main-nav li.top-level-link2 ul.sub-menu li:nth-child(1) div.submenu-level-2 ul li { border-right:1px #fff solid; margin: 0px;} ul.main-nav li.top-level-link2 ul.sub-menu li:nth-child(1) div.submenu-level-2 ul li:nth-child(2), ul.main-nav li.top-level-link2 ul.sub-menu li:nth-child(1) div.submenu-level-2 ul li:nth-child(3), ul.main-nav li.top-level-link2 ul.sub-menu li:nth-child(1) div.submenu-level-2 ul li:nth-child(5), ul.main-nav li.top-level-link2 ul.sub-menu li:nth-child(1) div.submenu-level-2 ul li:nth-child(6), ul.main-nav li.top-level-link2 ul.sub-menu li:nth-child(1) div.submenu-level-2 ul li:nth-child(8), ul.main-nav li.top-level-link2 ul.sub-menu li:nth-child(1) div.submenu-level-2 ul li:nth-child(9), ul.main-nav li.top-level-link2 ul.sub-menu li:nth-child(1) div.submenu-level-2 ul li:nth-child(11), ul.main-nav li.top-level-link2 ul.sub-menu li:nth-child(1) div.submenu-level-2 ul li:nth-child(12) { padding-left: 51px;} ul.main-nav li.top-level-link2 ul.sub-menu li:nth-child(1) div.submenu-level-2 ul li:nth-child(3), ul.main-nav li.top-level-link2 ul.sub-menu li:nth-child(1) div.submenu-level-2 ul li:nth-child(6), ul.main-nav li.top-level-link2 ul.sub-menu li:nth-child(1) div.submenu-level-2 ul li:nth-child(9) { border-right:0px;} ul.main-nav li.top-level-link2 ul.sub-menu li:nth-child(1) div.submenu-level-2 { margin-top: 0px;} ul.main-nav li.top-level-link2 ul.sub-menu li a:after { display:none;} } /************************Index Banner2 Design**********************/ .banner_header.style2 { padding-top: 72px;} .banner_header.style2 .base-btn { margin-left: 48px;} @media all and (max-width:1080px){ .banner_header.style2 .good-design-wrap h3 { font-family: 'noto_sans_cjk_jp_regularRg'; font-size: 18px;} .banner_header.style2 .gmo_row { grid-template-columns: 1fr;} .banner_header.style2 .bannerImg { margin-left: 0;} .banner_header.style2 .gmo_row { text-align: center;} } .ic { position: fixed; cursor: pointer; display: inline-block; right: 25px; width: 32px; height: 24px; text-align: center; top:0px; outline: none;} .ic.close { opacity: 0; font-size: 0px; font-weight: 300; color: #333; top:8px; height:40px; display: block; outline: none;} /* Menu Icons for Devices*/ .ic.menu { top:25px; z-index : 20;} .ic.menu .line { height: 4px; width: 100%; display: block; margin-bottom: 6px;} .ic.menu .line-last-child { margin-bottom: 0px;} .banners-area { margin-top: 20px; padding-top: 15px;} .banners-area img { width: 150px;} @media only screen and (max-width:768px) { .ic.menu { display: block;} header.dark .ic.menu .line { background-color: #fff;} header.light .ic.menu .line { background-color: #000;} .ic.menu .line { -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center;} .ic.menu:focus .line { background-color: #fff !important;} .ic.menu:focus .line:nth-child(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);} .ic.menu:focus .line:nth-child(2) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); margin-top: -10px;} .ic.menu:focus .line:nth-child(3) { transform: translateY(15px); opacity: 0;} .ic.menu:focus { outline: none;} .ic.menu:focus ~ .ic.close { opacity: 1; z-index : 21; outline: none;} /* .ic.menu:focus ~ .ic.close { opacity: 1.0; z-index : 21; } .ic.close:focus { opacity: 0; } */ .ic.menu:hover, .ic.menu:focus { opacity: 1;} /* Main Menu for Handheld Devices */ ul.main-nav { z-index:2; padding: 50px 0; position: fixed; right: 0px; top: 0px; width: 0px; background-color:rgba(0,0,0,1); height: 100%; overflow: auto; /*CSS animation applied : Slide from Right*/ -webkit-transition-property: background, width; -moz-transition-property: background, width; -o-transition-property: background, width; transition-property: background, width; -webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; -o-transition-duration: 0.6s; transition-duration: 0.6s;} .ic.menu:focus ~ .main-nav { width: 300px; background-color:rgba(0,0,0,1);} ul.main-nav > * { -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; -o-transition-duration: 0.4s; transition-duration: 0.4s; opacity: 0;} .ic.menu:focus ~ .main-nav > * { opacity: 1;} ul.main-nav > li > a:after { display: none;} ul.main-nav > li:first-child { border-radius: 0px;} ul.main-nav > li { display: block; border-bottom: 1px solid #444;} ul.main-nav > li > a { font-weight: 600;} ul.main-nav > li ul.sub-menu-lists > li a { color: #eee; font-size: 14px;} ul.main-nav > li:hover { background-color: transparent;} ul.main-nav > li:hover > a { color: #fff; text-decoration: none; font-weight: 600;} /* sub-menu-block: モバイルではデフォルト非表示 */ ul.main-nav > li > div.sub-menu-block { visibility: hidden; opacity: 0; transition: opacity 0.3s ease, visibility 0.3s ease;} .ic.menu:focus ~ ul.main-nav > li > div.sub-menu-block { border-left: 0px solid #ccc; border-right: 0px solid #ccc; border-bottom: 0px solid #ccc; position: relative; visibility: visible; opacity: 1.0;} .sub-menu-block { padding: 0 30px;} /* sub-menu-block 配下メニュー：モバイル用 */ .sub-menu-block ul, .sub-menu-block ul.sub-menu { list-style: none; margin: 0; padding: 0; display: block;} .sub-menu-block ul.sub-menu > li { border-bottom: 1px solid #444; padding: 8px 0;} .sub-menu-block ul.sub-menu > li > a { color: #eee; font-size: 14px; text-decoration: none; display: block; padding: 4px 0;} .sub-menu-block ul.sub-menu li li a { color: #ccc; font-size: 13px; padding-left: 15px; text-decoration: none; display: block; padding: 4px 0 4px 15px;} .sub-menu-block .submenu-level-2 { margin-top: 10px; padding-left: 0;} .sub-menu-block .submenu-level-2 ul { list-style: none; margin: 0; padding: 0;} .sub-menu-block p.other_function { color: #fff; padding: 15px 0 10px; font-size: 14px; margin: 0;} .sub-menu-block ul.sub-menu li.sub-menu-top li { padding-left: 0;} .sub-menu-block ul.sub-menu li.sub-menu-top li a { padding-left: 0;} .banners-area { padding-bottom: 0px;} .banners-area div { margin-bottom: 15px;} .banners-area { border-top: 1px solid #444;} } @media only screen and (max-width: 480px) { .sub-menu-block { padding: 0 20px;} .sub-menu-block ul.sub-menu > li > a { font-size: 13px;} .sub-menu-block ul.sub-menu li li a { font-size: 12px;} } @media only screen and (min-width:769px) { .ic.menu { display: none;} /* Main Menu for Desktop Devices */ ul.main-nav { display: block;} ul.main-nav > li { position: relative;} .sub-menu-block { padding: 15px;} .sub-menu-block ul { list-style: none; margin: 0; padding: 0;} /* Sub Menu */ ul.main-nav > li > div.sub-menu-block { visibility: hidden; position: absolute; left: 50%; right: auto; margin-top: 0px; color: #fff; box-sizing: border-box; z-index: 100; font-size: 14px; border-left: 1px #1c9f91 solid; border-right: 1px #1c9f91 solid; border-bottom: 1px #1c9f91 solid; width: min(1145px, calc(100vw - 80px)); padding: 40px 44px; background: rgba(28, 159, 145, 0.95); border-radius: 20px; opacity: 0; /*CSS animation applied for sub menu : Slide from Top */ -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; -webkit-transform: translateX(-50%) rotateX(90deg); -moz-transform: translateX(-50%) rotateX(90deg); -ms-transform: translateX(-50%) rotateX(90deg); transform: translateX(-50%) rotateX(90deg); -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center;} /* sub-menu-block 内メニュー：緑背景・白文字（TOPページ custom-style.css と同一） */ ul.main-nav ul.sub-menu { display: grid; grid-template-columns: 285px 265px 240px 190px; gap: 18px;} ul.main-nav ul.sub-menu li { float: none; width: 100%; border: none; text-align: left; height: auto; background-color: transparent; color: #ffffff; margin: 0; padding: 0; border-right: 1px #fff solid; border-radius: 0;} ul.main-nav ul.sub-menu li:last-child { border-right: 0;} ul.main-nav ul.sub-menu li a { color: #ffffff; text-decoration: none; font-family: 'noto_sans_cjk_jpmedium', sans-serif; font-size: 14px; background: none; border: none; position: relative; white-space: nowrap;} ul.main-nav ul.sub-menu li li a { font-size: 12px;} ul.main-nav ul.sub-menu li li { border-right: 0; padding-left: 25px;} ul.main-nav ul.sub-menu li div.submenu-level-2 { margin-top: 21px;} ul.main-nav ul.sub-menu li .submenu-section + .submenu-section { margin-top: 24px;} ul.main-nav ul.sub-menu li.col-uketsuke div.submenu-level-2 ul li, ul.main-nav ul.sub-menu li.col-yoyaku div.submenu-level-2 ul li { margin: 0;} ul.main-nav ul.sub-menu li.col-yoyaku > a { display: block;} ul.main-nav ul.sub-menu li.col-yoyaku > a:first-child { margin-bottom: 22px;} ul.main-nav p.other_function { padding-top: 40px; color: #ffffff; font-weight: normal;} ul.main-nav > li:hover > div.sub-menu-block { background-color: rgba(28, 159, 145, 0.95); border-left: 1px #1c9f91 solid; border-right: 1px #1c9f91 solid; border-bottom: 1px #1c9f91 solid; visibility: visible; opacity: 1; -webkit-transform: translateX(-50%) rotateX(0deg); -moz-transform: translateX(-50%) rotateX(0deg); -ms-transform: translateX(-50%) rotateX(0deg); transform: translateX(-50%) rotateX(0deg);} ul.main-nav > li > div.sub-menu-block > * { -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; -o-transition-duration: 0.4s; transition-duration: 0.4s; opacity: 0;} ul.main-nav > li:hover > div.sub-menu-block > * { opacity: 1;} /* List Separator: Outer Border */ header.dark ul.main-nav > li > a { border-right: 1px solid #bbb;} header.light ul.main-nav > li > a { border-right: 1px solid #666;} /* List Separator: Inner Border */ ul.main-nav > li > a.mega-menu:before { content: ''; width: 1px; height: 62px; opacity: 0; transition: all 0.2s ease 0s; position: absolute; left:calc(50% - 12px); bottom: 0; z-index : 2; width: 0px; height: 0px; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 12px solid #1C9F91;} ul.main-nav > li > a:after { content: ''; width: 1px; height: 62px; position: absolute; right:0px; top: 0px; z-index : 2;} .main-nav .top-level-link:hover a.mega-menu:before { opacity: 1;} header.dark ul.main-nav > li > a:after { background-color: #777;} header.light ul.main-nav > li > a:after { background-color: #999;} /* Drop Down/Up Arrow for Mega Menu */ ul.main-nav > li > a.mega-menu > span { display: block; vertical-align: middle;} /* ul.main-nav > li > a.mega-menu > span:after { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #000; content: ''; background-color: transparent; display: inline-block; margin-left: 10px; vertical-align: middle; } ul.main-nav > li:hover > a.mega-menu span:after{ border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 0px solid transparent; border-bottom: 5px solid #666; }*/ .banners-area { border-top: 1px solid #ccc;} } @media screen and (min-width: 769px) and (max-width: 1099px) { ul.main-nav > li > div.sub-menu-block { width: calc(100vw - 48px); max-width: 1100px; left: 50%; right: auto; -webkit-transform: translateX(-50%) rotateX(90deg); -moz-transform: translateX(-50%) rotateX(90deg); -ms-transform: translateX(-50%) rotateX(90deg); transform: translateX(-50%) rotateX(90deg); box-sizing: border-box;} ul.main-nav > li:hover > div.sub-menu-block { -webkit-transform: translateX(-50%) rotateX(0deg); -moz-transform: translateX(-50%) rotateX(0deg); -ms-transform: translateX(-50%) rotateX(0deg); transform: translateX(-50%) rotateX(0deg);} } @media screen and (min-width: 1100px) and (max-width: 1200px) { ul.main-nav > li > div.sub-menu-block { width: 1044px;} } /* 「製品情報」ポップアップのみ、ブラウザ幅の80%で中央寄せ表示（参考: https://www.keihi.com/invoice/ のサービス一覧）。 他のメガメニュー(診療科等)はこの上の共通ルールのまま。位置は position:fixed(ビューポート基準)にして、 li(position:relative)の位置に依存する left:50%/translateX(-50%)の中央寄せ計算を回避している。 中央寄せ自体はfixedの性質上、通常のleft:50%+translateX(-50%)でビューポート基準に正しく機能する。 */ @media screen and (min-width: 769px) { ul.main-nav > li:has(.product-col) > div.sub-menu-block { position: fixed; left: 50%; right: auto; top: 110px; width: min(1140px, calc(100vw - 80px)); max-width: none; margin-top: 0; border-left: none; border-right: none; -webkit-transform: translateX(-50%) rotateX(90deg); -moz-transform: translateX(-50%) rotateX(90deg); -ms-transform: translateX(-50%) rotateX(90deg); transform: translateX(-50%) rotateX(90deg);} ul.main-nav > li:has(.product-col):hover > div.sub-menu-block { -webkit-transform: translateX(-50%) rotateX(0deg); -moz-transform: translateX(-50%) rotateX(0deg); -ms-transform: translateX(-50%) rotateX(0deg); transform: translateX(-50%) rotateX(0deg);} } /* 「診療科」ポップアップも同じ理由(li基準のleft:50%は真の中央寄せにならない)でposition:fixedに変更し、 ビューポート基準で確実に中央寄せする。幅は共通ルールのままで位置のみ上書き。 */ @media screen and (min-width: 769px) { ul.main-nav li.top-level-link2 > div.sub-menu-block { position: fixed; left: 50%; right: auto; top: 110px; -webkit-transform: translateX(-50%) rotateX(90deg); -moz-transform: translateX(-50%) rotateX(90deg); -ms-transform: translateX(-50%) rotateX(90deg); transform: translateX(-50%) rotateX(90deg);} ul.main-nav li.top-level-link2:hover > div.sub-menu-block { -webkit-transform: translateX(-50%) rotateX(0deg); -moz-transform: translateX(-50%) rotateX(0deg); -ms-transform: translateX(-50%) rotateX(0deg); transform: translateX(-50%) rotateX(0deg);} } #send_button_pre, #send_button { /* -webkit-text-stroke: 1px black; */ font-size: 16px; font-weight: bold;} .form_body #mr_form .label_cb a { text-decoration: underline;} .aside-form-wrap .imp { padding: 2px 4px !important;} .good-design-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 50px; padding: 20px 0 32px 0;} .banner_header .good-design-wrap h3 { padding: 0;} .good-design-img { width: 75px;} .headerBanner2.bannerImg { margin-top: 20px;} .banner_header.title-style { background-position: top; padding: 0px;} .banner_header.title-style .page-title-container { display: flex; justify-content: center; align-items: center; align-content: center; height: 140px;} /* 下層バナー（title-style）のタイトルエリア高さをページごとに調整するモディファイア * 既定は上記 .page-title-container の 140px（ceomessage / sitemap 等と同じ） * カスタム値: 親要素に --banner_title_area_height を指定して banner_title_area_custom を併用 */ .banner_header.title-style .page-title-container.banner_title_area_ref { height: 140px;} .banner_header.title-style .page-title-container.banner_title_area_compact { height: 120px;} .banner_header.title-style .page-title-container.banner_title_area_medium { height: 260px;} .banner_header.title-style .page-title-container.banner_title_area_large { height: 360px;} .banner_header.title-style .page-title-container.banner_title_area_xl { height: 450px;} .banner_header.title-style .page-title-container.banner_title_area_custom { height: var(--banner_title_area_height, 140px);} /* 選ばれる理由ページなど：SP 450px / タブレット以上 360px（旧 .reason バナー相当） */ .banner_header.title-style .page-title-container.banner_title_area_reason { height: 450px; align-items: flex-start;} /* Value（/value/01〜04）: 旧ヒーロー相当。横幅は共通 title-style、高さのみ独自 */ .banner_header.title-style .page-title-container.banner_title_area_value { height: 400px; align-items: flex-start; padding-top: 48px; padding-bottom: 48px;} @media screen and (min-width: 768px) { .banner_header.title-style .page-title-container.banner_title_area_value { min-height: 440px; height: auto; padding-top: 80px; padding-bottom: 100px;} } @media screen and (max-width: 767px) { .banner_header.title-style .page-title-container.banner_title_area_medium, .banner_header.title-style .page-title-container.banner_title_area_large, .banner_header.title-style .page-title-container.banner_title_area_xl, .banner_header.title-style .page-title-container.banner_title_area_reason, .banner_header.title-style .page-title-container.banner_title_area_value { height: auto; min-height: 200px; align-items: flex-start; padding-top: 24px; padding-bottom: 24px;} /* 選ばれる理由: FVの人物画像が文字と重ならないよう下に大きく伸びているため、 下paddingを広げてパンくず(breadcrum-wrapper)を画像の下まで押し下げる */ .banner_header.title-style .page-title-container.banner_title_area_reason { padding-bottom: 90px;} } .banner_header.title-style .gmo_row { grid-template-columns: 1fr;} .banner_header.title-style h1 { font-size: 34px; color: #fff;} .banner_header .breadcrum-wrapper { min-height: 36px; background-color: rgba(255, 255, 255, 0.2);} .banner_header .breadcrum { display: inline-flex; font-size: 12px; gap: 8px 5px; padding: 12px 0px 12px 8px; flex-wrap: wrap;} .breadcrum, .breadcrum a { color: #fff; font-size: 12px;} /*.breadcrum span{ padding-right: 12px; position: relative; }*/ /*.breadcrum span:after{ content: '>'; position: absolute; right: 0px; } .breadcrum span:last-child:after{ content: none; }*/ .main-content { min-height: 300px;} ul.main-nav > li > a { cursor: pointer; text-decoration: none;} .banner_header.style2 { padding-bottom: 0px;} .banner_header.style2 .container { max-width: 1100px;} .banner_header.style2 .gmo_row { align-items: end;} .banner_header.style2 .gmo_row { /* grid-template-columns: 41% 1fr; */ grid-template-columns: 458px 678px;} .banner_header.style2 .base-btnWrap { margin-bottom: 98px;} .banner_header.style2 .bannerImg .bannerImg1 img { margin-bottom: -3px;} @media only screen and (min-width : 768px){ .banner_header .breadcrum { padding: 12px 0px;} } @font-face { font-family: 'noto_sans_cjk_jpbold'; src: url('../fonts/NotoSansCJKjp-Bold.eot'); src: url('../fonts/NotoSansCJKjp-Bold.eot?#iefix') format('embedded-opentype'), /*url('../NotoSansCJKjp-Bold.woff') format('woff'),*/ url('../fonts/NotoSansCJKjp-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; font-display: swap;} @font-face { font-family: 'noto_sans_cjk_jpmedium'; src: url('../fonts/notosanscjkjp-medium.woff2') format('woff2'), url('../fonts/notosanscjkjp-medium.woff') format('woff'); font-weight: normal; font-style: normal;} @font-face { font-family: 'noto_sans_cjk_jp_regularRg'; src: url('../fonts/notosanscjkjp-regular-webfont.woff2') format('woff2'), url('../fonts/notosanscjkjp-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal;} .spo { display: block !important;} .pco { display: none !important;} @media only screen and (min-width : 768px){ .spo { display: none !important;} .pco { display: block !important;} } body { display: block; background-color: white; font-family: "noto_sans_cjk_jp_regularRg", sans-serif; overflow-x: hidden;} img { max-width: 100%;} .text-center { text-align: center;} .display-block { display: block;} .seaGreen-color { color: #1C9F91 !important;} .radius_btn { width: auto; line-height: 1.25; display: flex; justify-content: flex-end; align-items: center; color: #1C9F91; border: 1px solid #1C9F91; text-decoration: none; background-color: white; border-radius: 40px; font-family: "noto_sans_cjk_jpbold", sans-serif; font-weight: bold; font-size: 14px; padding:14px 18px; /* height: 48px; */ transition: .5s all;} .radius_btn span { color: #1C9F91; display: inline-block; transition: .5s all;} .radius_btn.active, .radius_btn:hover { background: linear-gradient(77deg, rgba(0,84,108,1) 0%, rgba(0,126,143,1) 28%, rgba(28,159,145,1) 90%);} .radius_btn.active span, .radius_btn:hover span { background: transparent; color: white; -webkit-text-fill-color: #FFFFFF;} .radius_btn:hover svg path { stroke: white;} header .radius_btn:hover { background: #f2f4f8; /*color: #00546c;*/} /* header .radius_btn:hover span{color: #00546c; -webkit-text-fill-color: #00546c;} */ .radius_btn.active:hover { background: white;} .radius_btn.active:hover span { background: linear-gradient(77deg, rgba(0,84,108,1) 0%, rgba(0,126,143,1) 28%, rgba(28,159,145,1) 90%); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent;} .gmo_row { display: flex;} .space-between { justify-content: space-between;} .container { width: 100%; max-width: 1150px; margin-left: auto; margin-right: auto;} .container-max1000 { max-width: 1000px;} @media screen and (max-width: 767px) { /* スマホ標準の左右マージン(全ページ共通のデフォルト)。 ページ側でより詳細度の高い.container指定(products.css/価値ページ/reason等)がある場合はそちらが優先される */ .container { padding-left: 20px; padding-right: 20px;} } .headerTop { display: flex; justify-content: space-between; border-bottom: #c8c8c8 1px solid; background-color: #fafafa; padding: 0 10px;} header nav { display: flex; justify-content: space-between; padding: 6px 40px; font-family: "noto_sans_cjk_jpbold", sans-serif; align-items: center; z-index: 0;} /* Header scroll / remove animation（全ページ共通、/common/js/header_scroll.jsと対） */ @media screen and (min-width: 768px) { header.remove nav { position: fixed; transition: 0.6s ease-in-out; animation-name: anime2; box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.5); z-index: 99; width: 100%; background-color: #fff; opacity: 0;} header.scroll nav { position: fixed; transition: 0.6s ease-in-out; animation-name: anime; box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.5); z-index: 99; width: 100%; background-color: #fff;} } @keyframes anime { 0% { opacity: 0;} 100% { opacity: 1;}} @keyframes anime2 { 0% { opacity: 1;} 100% { opacity: 0;}} .logoSlogan { font-size: 11px; line-height: 1.546; font-family: "noto_sans_cjk_jp_regularRg", sans-serif; padding-bottom: 4px;} @keyframes ainm_gmologo { 0% { opacity: 1; visibility: visible; z-index: 3;} 30% { opacity: 1; visibility: visible; z-index: 3;} 40% { opacity: 0.5; visibility: visible; z-index: 3;} 50% { opacity: 0; z-index: 2;} 100% { opacity: 0; z-index: 2;} } @keyframes anim_sustainable { 0% { opacity: 0; z-index: 2;} 50% { opacity: 0; z-index: 2;} 60% { opacity: 0.5; visibility: visible; z-index: 2;} 70% { opacity: 1; visibility: visible; z-index: 3;} 100% { opacity: 1; visibility: visible; z-index: 3;} } .mobileMenuHead { display: none; gap: 15px;} .mobile_hamburger { cursor: pointer;} /*Mobile Side nav*/ .gmomobileNav { margin: 0; position: fixed; text-transform: uppercase; width: 375px; padding:14px 25px; height: 100%; right: -375px; opacity: 0; top: 0; z-index: 10000; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); background: #007E8F; -moz-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in;} .navigation-is-open .gmomobileNav { right:0; opacity: 1; overflow-y: auto;} .mobnav_overlay { position: fixed; width: 100%; height: 100%; left: 0; top: 0; opacity: .6; background: black; z-index: 1001; visibility: hidden; cursor: pointer;} .navigation-is-open .mobnav_overlay { visibility: visible;} .gmomobileNavHeader { text-align: right; cursor: pointer;} ul.sideNavMobile { margin-bottom: 50px;} ul.sideNavMobile li { border-bottom: 1px #5AC7C0 solid;} ul.sideNavMobile li a { color: white; display: block; padding: 13px 0; text-decoration: none;} .gmomobileNav .base-btn { width: 100%; font-size: 16px;} .gmomobileNav p.other_function { color: #ffffff; padding: 20px 0 10px 0;} /* モバイルサイドナビ：アコーディオン（トップページと同じ） */ .gmomobileNavSide .parent-menu + .sub-menu-block, .gmomobileNavSide .sub-parent-menu + .submenu-level-2 { max-height: 0; overflow: hidden; transition: max-height 0.35s ease-in-out;} .gmomobileNavSide .parent-menu.active + .sub-menu-block, .gmomobileNavSide .sub-parent-menu.active + .submenu-level-2 { max-height: 2000px; transition: max-height 0.35s ease-in-out;} ul.sideNavMobile li .parent-menu.active + .sub-menu-block, ul.sideNavMobile li .sub-parent-menu.active + .submenu-level-2 { border-top: 1px #5AC7C0 solid;} .gmomobileNavSide .sub-menu-block { padding: 0 15px;} .gmomobileNavSide .submenu-level-2 ul { list-style: none; margin: 0; padding: 0;} .gmomobileNavSide .submenu-level-2 a { color: white; display: block; padding: 10px 0; text-decoration: none;} .gmomobileNavSide .sub-menu-block .sub-menu { list-style: none; margin: 0; padding: 0;} .gmomobileNavSide .sub-menu-block .sub-menu li a { color: rgba(255,255,255,0.95); padding: 10px 0;} .gmomobileNavSide .submenu-level-2 li a { color: rgba(255,255,255,0.9); padding: 8px 0;} /* 製品情報TOPを他の4カテゴリ(予約機能・院内受付業務・クリニック経営分析・再来促進)と同じ階層の見た目に揃える */ .gmomobileNavSide .product-col.col-yoyaku > a.sub-parent-menu:first-child { border-bottom: 1px #5AC7C0 solid;} .header_contact { display: flex; gap: 8px; align-items: center;} .header_contact .header_contact__tel { display: flex; flex-direction: column; gap: 3px;} .header_contact .header_contact__tel a { color: #1c1c1c; text-decoration: none; font-size: 17px; font-family: "Montserrat", sans-serif; font-weight: 600; display: flex; align-items: center; line-height: 20px; padding-left: 6px;} .header_contact .header_contact__tel span img { display: inline-block; width: 17px; margin-right: 4px;} .header_contact .header_contact__tel strong { font-weight: 500 !important; line-height: 19px;} .header_contact .header_contact__tel small { font-size: 10px; line-height: 1.35; font-family: "noto_sans_cjk_jp_regularRg", sans-serif;} /* navRight：トップページと同じ表示（タブレット・スマホ） */ .navRight { display: flex; align-items: center; gap: 8px;} @media screen and (min-width: 1201px) and (max-width: 1420px) { header nav .navRight .navigationWrap { gap: 15px;} header nav { padding-left: 20px; padding-right: 20px;} header nav .navLeft img { width: 220px;} header nav .navRight .header_contact { gap: 6px;} header nav .navRight .header_contact .header_contact__tel a { font-size: 19px;} header nav .navRight .header_contact .header_contact__tel small { font-size: 10px;} } @media screen and (min-width: 992px) and (max-width: 1200px) { header nav { padding: 18px 20px;} header nav .navRight .header_contact .header_contact__tel { display: none;} header nav .navLeft img { width: 220px;} } @media only screen and (max-width: 1100px) { .mobileMenuHead { display: flex;} header nav .navRight .navigationWrap { display: none;} } @media only screen and (max-width: 991px) { header nav { padding: 15px 20px;} header nav .navLeft img { width: 220px;} } .banner_header { padding:40px 24px 0 24px; color: white; background-color: #007c84; position: relative; background-size: cover; background-position: center;} .banner_header .gmo_row { display: grid; grid-template-columns: 48% 1fr; align-items: center;} .banner_header h1 { font-size: 36px; padding:0; line-height: 1; font-family: "noto_sans_cjk_jpbold", sans-serif;} .bannerLargHeading { font-size: 60px; padding: 0; line-height: 1.4; font-family: "noto_sans_cjk_jpbold", sans-serif; color:#DEBC36; /*#D1B28B*/} .bannerLargHeading small { font-size: 40px; color: white;} .banner_header h3 { font-size: 22px; padding: 10px 0 20px 0; line-height: 1.5; font-family: "noto_sans_cjk_jpbold", sans-serif;} .banner_header .good-design { position: absolute; bottom: 80px; z-index: 99; left: calc(48% - 46px); line-height: 0;} .banner_header .fv_img01 { margin: 20px 0 10px 0; width: 80%;} .banner_header .fv_img02 { margin: 6px 0 10px 0; width: 80%;} .banner_header .fv_txt01 { font-size:9px;} .bannerImg { position: relative;} .bannerImg2, .bannerImg3, .bannerImg4 { position: absolute; top: 0; left: 0;} .base-btn { width: 360px; height: 72px; position: relative; line-height: 1.25; display: flex; justify-content: center; align-items: center; color: #1C9F91; border: 1px solid #1C9F91; text-decoration: none; background-color: white; border-radius: 40px; font-family: "noto_sans_cjk_jpbold", sans-serif; font-size: 16px; padding-right: 15px; transition: .5s all;} .base-btn svg { position: absolute; right: 18px;} .base-btn span { /*background: rgb(0,84,108);*/ padding-right: 15px; background: linear-gradient(77deg, rgba(0,84,108,1) 0%, rgba(0,126,143,1) 28%, rgba(28,159,145,1) 90%); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent; display: inline-block; padding-top: 5px; transition: .5s all;} .base-btn:hover { background: linear-gradient(77deg, rgba(0,84,108,1) 0%, rgba(0,126,143,1) 28%, rgba(28,159,145,1) 90%); border-color: #ffffff; color: white;} .base-btn:hover span { background: transparent; color: white; -webkit-text-fill-color: #FFFFFF;} .base-btn:hover svg path { stroke: white;} .base-btn2 { width: 240px; height: 56px; line-height: 1.25; display: flex; justify-content: center; align-items: center; position: relative; color: #FFFFFF; border: 1px solid white; text-decoration: none; border-radius: 36px; font-family: "noto_sans_cjk_jpbold", sans-serif; font-size: 18px; padding-right: 15px; transition: .5s all;} .base-btn2 svg { position: absolute; right: 12px;} .base-btn2 svg path { stroke: white;} .base-btn2:hover { background-color: white; color: #1C9F91;} .base-btn2:hover svg path { stroke: #1C9F91;} .base-btn2.whiteBg { border-color: #1C9F91; color: #1C9F91;} .base-btn2.whiteBg svg path { stroke: #1C9F91;} .base-btn2.whiteBg:hover { background-color: #1C9F91; color: #FFFFFF;} .base-btn2.whiteBg:hover svg path { stroke: #FFFFFF;} .base-btn2.SeaGreen { border-color: #1C9F91; background-color: #1C9F91; color: #FFFFFF;} .base-btn2.SeaGreen svg path { stroke: white;} .base-btn2.SeaGreen:hover { background-color: #0b9183; color: #FFFFFF;} .base-btn2.SeaGreen:hover svg path { stroke: #FFFFFF;} .base-btn2.Peacock { border-color: #00546c; background-color: #00546c; color: #FFFFFF;} .base-btn2.Peacock svg path { stroke: white;} .base-btn2.Peacock:hover { background-color: #026480; color: #FFFFFF;} .base-btn2.Peacock:hover svg path { stroke: #FFFFFF;} .base-btn.btn-gradient { background: linear-gradient(77deg, rgba(0,84,108,1) 0%, rgba(0,126,143,1) 28%, rgba(28,159,145,1) 90%); color: white !important;} .base-btn.btn-gradient svg path { stroke: white;} .base-btn.btn-gradient:hover { background: white; color: #1C9F91 !important;} .base-btn.btn-gradient:hover svg path { stroke: #1C9F91;} /* FVボタン共通デザイン（B）: .base-btn.btn-round-arrow.btn-select lp.css/style.cssにのみ存在していたためProductsLayout系ページで未適用だった分をcommon.cssに追加し、全レイアウトで動作するようにした */ .btn-round-arrow svg { transition: transform .3s linear;} .btn-round-arrow svg g.arrow { transition: transform .3s linear;} .btn-round-arrow:hover svg g.arrow { transform: translateX(5px);} .btn-select { background: linear-gradient(77deg, rgba(0,84,108,1) 0%, rgba(0,126,143,1) 28%, rgba(28,159,145,1) 90%); border-color: #ffffff; color: white;} .btn-select span { background: transparent; color: white; -webkit-text-fill-color: #FFFFFF;} .btn-select svg path { stroke: white;} .btn-select:hover { color: #1C9F91; border: 1px solid #1C9F91; background: white;} .btn-select:hover svg path { stroke: #1C9F91;} .btn-select:hover span { color: #1C9F91; -webkit-text-fill-color: #1C9F91;} .achievement_sectionWrap { background-color: #FFFFFF; padding-bottom: 26px;} .achievement_sectionWrap .container { max-width: 800px;} .achievement_section { background-color: #FFFFFF; border-radius: 16px; box-shadow:0px 8px 24px rgb(0 0 0 / 15%); margin-top: -40px; position: relative; padding:40px 48px;} .achievement_section p.annotation { font-size: 11px; text-align: right; color:#666; margin-top: 8px;} .achievementList { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: center; align-items: center;} .achievementList>.achievementListItem:first-child { grid-column: 1 / -1;} .achievementList>.achievementListItem:first-child img { max-width: 402px; width: 100%;} .logo_slider { padding: 14px 0;} .logo_slider .owl-carousel .owl-item img { max-height: 64px; object-fit: contain;} @media only screen and (max-width: 767px) { .logo_slider .owl-carousel .owl-item img { max-height: 45px; width: auto;} } .asideFormWrap { position: fixed; right: -440px; right: 0; height: 100%; top: 0; width: 492px; z-index: 999; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -moz-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in;} .side_bownload_btn { position: absolute; left: 0; top: 180px; z-index: 999; background: linear-gradient(0deg, rgba(0,84,108,1) 0%, rgba(0,126,143,1) 28%, rgba(28,159,145,1) 90%); color: white; font-size: 14px; font-family: "noto_sans_cjk_jpbold", sans-serif; padding: 16px 12px ; transform: rotate(180deg); text-align: right; height: 168px; cursor: pointer; writing-mode: vertical-rl; -webkit-border-top-right-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; box-shadow: 0 0 16px rgba(255, 255, 255, 0.603);} .side_bownload_btn svg { position: absolute; top: 10px; transform: rotate(180deg); right: 25px;} .side_bownload_btn:hover { color: #5ac7c0;} .side_bownload_btn:hover svg path { fill: #5ac7c0;} .asideForm { width: 440px; margin: 0; margin-left: 52px; background-color: white; height: 100%; padding: 20px;} .aside-form .title { font-size: 22px; line-height: 1.2; color: #00546C; text-align: center; margin-bottom: 50px;} .aside-form .title big { display: block; font-size: 22px;} .aside-form .title span { font-size: 16px; font-family: 'noto_sans_cjk_jpmedium';} .form_body { padding: 20px;} .close_form { position: absolute; right: 15px; top: 11px; border-radius: 6px; /*background-color: #1C1B1F;*/ width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; cursor: pointer; line-height: 0;} .close_form svg { height: 26px; width: 26px;} .close_form svg path { stroke: #00546C; fill: #00546C;} .gmo_modal { border-radius: 8px; padding: 20px; color: white; position: fixed; right: 32px; margin-top: -50px; width: 340px; bottom: 32px; z-index: 99; background: linear-gradient(77deg, rgba(0,84,108,1) 0%, rgba(0,126,143,1) 28%, rgba(28,159,145,1) 90%);} .gmo_modal .gmo_row { display: grid; grid-template-columns: 138px 1fr; gap: 12px;} .gmo_modal h4 { font-size: 15px; font-family: "noto_sans_cjk_jpbold", sans-serif; line-height: 1.6; padding-bottom: 10px;} .gmo_modal p { font-size: 12px; line-height: 1.35;} .borderLine { position: relative; height: 1px; background-color: #1C9F91; margin-top: 1px; margin-bottom: 15px;} .close_modal { position: absolute; right: -15px; cursor: pointer; top: -15px; opacity: 1; transition: .3s all;} .close_modal:hover { opacity: .9;} .management_section { background:#f3f4f8; padding:60px 20px 118px 20px; overflow-x: hidden;} .mainbox.management_section { background:#fff;} .management_section .title { color: #00546C; margin-bottom: 45px;} .management_section .title strong { font-size: 56px;} .management_section.footer { padding: 4% 4%;} .campaign_section { position: relative; overflow: hidden;} .campaign_section .cpn_btm { position: absolute; bottom: -150px; left: -110px; width: 27%;} .campaign_section .cpn_top { position: absolute; top: -150px; right: -110px; width: 27%;} .campaign_section .cpn_img { margin: 0 auto; width: 1000px;} .campaign_section .container-max1000_cpn { display: block; position: relative; z-index: 100;} .campaign_section .cpn_imgspo { width: 100%;} .key_success { margin-top: -24px; margin-right: -52px; padding-bottom: 92px;} .key_success .gmo_row { align-items: center; gap: 14px;} .key_success h4 { padding: 23px 0; color: #1C1C1C; font-family: "noto_sans_cjk_jpmedium", sans-serif; text-align: center; font-size: 16px; line-height: 1.6;} .key_success h3 { padding: 10px 0; color: #1C9F91; font-family: "noto_sans_cjk_jpbold", sans-serif; text-align: center; font-size: 22px; line-height: 1.5;} .supporDetail { padding-bottom: 20px;} .supporDetail p { font-family: 'noto_sans_cjk_jpmedium', sans-serif; font-size: 16px; color: #333333; line-height: 1.6; text-align: center; margin-top: -3px;} .supporList { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 30px 40px; padding:20px 0 100px 0;} .supporList_ftr { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; gap: 10px 10px; padding:20px 0 80px 0;} .supporList a , .supporList_ftr a { display: flex; width: 100%; justify-content: space-between; height: 80px; line-height: 1.6; box-shadow: 5px 5px 12.5px #a6b0bf60; align-items: center; position: relative; border: #007E8F 1px solid; border-radius: 80px; padding:10px 12px; text-align: center; text-decoration: none; font-family: 'noto_sans_cjk_jpmedium', sans-serif; font-size: 16px; color: #333333; background: linear-gradient(77deg, rgba(242,244,248,1) 0%, rgba(242,244,248,1) 28%, rgba(242,244,248,1) 90%); -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out;} .supporList a svg , .supporList_ftr a svg { margin-left: 10px;} .supporList a i , .supporList_ftr a i { display: inline-block; position: relative; margin-left: 10px;} .supporList a i:before , .supporList_ftr a i:before { content: ""; display: inline-block; background-color:#000000; position: absolute; width: 12px; height: 2px; right: 0; top: calc(50% - 1px);} .supporList a i:after , .supporList_ftr a i:after { content: ""; display: inline-block; border: solid #000000; position: absolute; right: 0; top: calc(50% - 4px); border-width: 0 2px 2px 0; padding: 3px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg);} .supporList a:hover , .supporList_ftr a:hover { background: linear-gradient(77deg, rgba(0,84,108,1) 0%, rgba(0,126,143,1) 28%, rgba(28,159,145,1) 90%); color: white; border-color: #04838f;} .supporList a:hover i:before , .supporList_ftr a:hover i:before { background-color: white;} .supporList a:hover i:after , .supporList_ftr a:hover i:after { border-color: white;} .supporList a:hover svg path , .supporList_ftr a:hover svg path { fill: white;} .choose_usList { display: flex; flex-direction: column; margin-bottom: 32px;} .choose_usList .gmo_row { align-items: center; gap: 7%; flex-wrap: wrap;} .choose_usList .gmo_row .gmo_col.gmo_colImg img { width: 100%; margin-top: -10px; margin-bottom: -10px;} .choose_usList h2 { font-size: 44px; font-family: "noto_sans_cjk_jpbold", sans-serif; color: #00546C; line-height: 1.5; padding-bottom: 50px;} .choose_usList p { color: #00546C; font-family: "noto_sans_cjk_jpbold", sans-serif; line-height: 1.2; font-size: 18px;} .choose_usListItem.choose_tItem3 .gmo_row { gap: 0;} .choose_usListItem h2 { white-space: nowrap;} ul.top_bnr { display: flex; flex-wrap: wrap;} ul.top_bnr li { margin: 10px; width: 47%; margin: 10px 1% 10px 2%;} @media only screen and (min-width : 768px){ .close_form { opacity: 0;} .choose_usList>.choose_usListItem:nth-child(odd) .gmo_row { flex-direction: row-reverse;} .choose_usList .gmo_row .gmo_col { width: 44%;} .choose_usList .gmo_row .gmo_col.gmo_colImg { width: 49%;} .choose_usListItem.choose_tItem3 .gmo_row .gmo_col { width: 47%;} .choose_usListItem.choose_tItem3 .gmo_row .gmo_col.gmo_colImg { width: 53%;} .show_ms { display: none;} .title_middle_border { position: relative; margin-top: 50px; margin-bottom: 20px; font-size: 18px;} .title_middle_border .border { display:block; position: absolute; left: 0; right: 0; height: 1px; background-color: #1f6a7f; top: 50%;} .title_middle_border:after { content: ""; display: inline-block; border: solid #00546C; position: absolute; right: 0; top: calc(50% - 3px); border-width: 0 1px 1px 0; padding: 3px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg);} .title_middle_border:before { content: ""; border: solid #00546C; position: absolute; left: 0; top: calc(50% - 3px); border-width:1px 0 0 1px; padding: 3px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg);} .title_middle_border span { background-color: #ffffff; display: inline-block; padding:0 20px; position: relative; font-family: "noto_sans_cjk_jpmedium", sans-serif; color: #00546C;} .title_middle_border span img { display: none;} ul.top_bnr { display: flex; justify-content:center; flex-wrap: nowrap;} ul.top_bnr li { width: 320px; margin: 30px 11px; border: 1px solid #eee; border-radius: 20px;} ul.top_bnr li img { border-radius:20px;} } .title { font-size: 32px; font-family: "noto_sans_cjk_jpbold", sans-serif; line-height: 1.5;} .title small { display: block; font-size: 28px;} .title span { position: relative; display: inline-block;} .title span::after { content: ''; display: block; margin: 0 auto; width: 86px; height: 2px; margin-top: 17px; /*background-image: linear-gradient(to right, #1C9F91 10%, rgba(255, 255, 255, 0) 0%); background-position: top; background-size: 7px 1px;*/ background-repeat: repeat-x; background-image: url('../images/doot-line.svg');} .track-record-section { background-color: #f3f4f8; padding: 132px 20px 80px 20px;} .seminar-sliderWrap { margin-left: -20px; margin-right: -20px;} .track-record-section .title { margin-bottom: 50px; color: #00546C;} .track-record-section .seminar-sliderBg { background-color: #e4ebf1;} .track-record-section .base-btn2.Peacock { font-size: 16px; margin-left: auto; margin-right: auto; background-color: #007d8f; border-color: #007d8f;} .track-record-section .base-btn2.Peacock:hover { background-color: #1c9f91; border-color: #1c9f91;} .clinic_success { display: grid; /* grid-template-columns: 1fr 1fr; */ grid-template-columns: repeat(auto-fit, calc(33.333% - 40px)); justify-content: center; gap: 59px; padding-top: 10px; margin: 0 auto; margin-bottom: 40px; /*max-width: 684px;*/} .clinic_success .clinic_successItem { background-color: white; border-radius: 4px; padding: 20px; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.103); position: relative; overflow: hidden;} .top_gradient { height: 8px; width: 100%; background: linear-gradient(77deg, rgba(0,84,108,1) 0%, rgba(0,126,143,1) 28%, rgba(28,159,145,1) 90%); position: absolute; top: 0; left: 0;} .clinic_successImg { text-align: center;} .clinic_successImg img { max-width: 240px; width: 100%;} .clinic_successImg img.revolutionImg { max-width: 160px;} .clinic_success h3 { text-align: center; font-size: 22px; color: #00546C; font-family: "noto_sans_cjk_jpbold", sans-serif; padding-bottom: 5px;} .clinicTags { text-align: center; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 20px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px;} .clinicTags a { display: inline-block; padding: 10px; text-decoration: none; border: #007E8F 1px solid; color: #1C1C1C; font-size: 14px; background-color: #F2F4F8; border-radius: 100px; transition: .2s all;} .clinicTags a:hover { background-color: #007e8f; color: white;} /*機能、リンクが無いボタン*/ .clinicTags span.trackrecord_nolink { display: inline-block; padding: 12px 18px; text-decoration: none; border: #007E8F 1px solid; color: #1C1C1C; font-size: 14px; background-color: #F2F4F8; border-radius: 20px; transition: .2s all;} .Fee_structure { box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); padding:60px 50px 65px 50px; background: linear-gradient(to bottom, rgba(233,237,240,0.02) 0%,rgba(233,237,240,1) 100%); margin-top: 162px; position: relative; border-radius: 10px; text-align: center; margin-left: -50px; margin-right: -50px;} .Fee_structure .base-btn { width: 100%; border-color: #00546C; color: #00546C;} .Fee_structure .base-btn.font-large { font-size: 18px;} .Fee_structure .base-btn svg path { stroke: #00546C;} .Fee_structure .base-btn:hover { background: #007e8f; border-color: #007e8f; color: #ffffff;} .Fee_structure .base-btn:hover svg path { stroke: #ffffff;} .fee_structureBg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-shadow:0px 0px 20px #a6b0bf41; border-radius: 10px;} .Fee_structure h3 { padding-top: 12px; padding-bottom: 17px;} .Fee_structure p { font-size: 16px; color: #1C1C1C; line-height: 1.6; font-family: "noto_sans_cjk_jpmedium", sans-serif; padding:0 0 17px 0;} .fee_price { font-size: 46px; color: #1C9F91; font-family: "noto_sans_cjk_jpbold", sans-serif; padding: 10px 0 0 0;} .fee_price_month { font-size: 40px; color: #1C9F91; font-family: "noto_sans_cjk_jpbold", sans-serif; padding: 15px 0 6px 0;} .fee_price span, .fee_price_month span { display: inline-block; line-height: 1;} .fee_price small, .fee_price_month small { display: inline-block; font-size: 22px; line-height: 1;} .Fee_structure .gmo_row { justify-content: center; gap: 30px;} .Fee_structure h5 { font-size: 14px;} .clinic_successItemSub { background-color: #f6f6f6; border-radius: 4px; margin-bottom: 20px; padding:0 10px 15px 10px; margin-top: 5px;} .clinic_successItemSub h5 { font-size: 15px; color: #1C9F91; font-family: "noto_sans_cjk_jpbold", sans-serif; position: relative; top: -6px; padding-bottom: 4px;} .clinic_successItemSub p { font-size: 12px; padding-bottom: 0;} .Fee_structure .smallBtn { height: 48px;} .Fee_structure .clinic_success .clinic_successItem { display: flex; flex-direction: column; justify-content: center; padding-top: 42px; padding-bottom: 25px; padding-left: 36px; padding-right: 36px;} .customer_section { background-color: #f3f4f8; padding:82px 20px 158px 20px; overflow: hidden;} .customer_section_header { display: grid; grid-template-columns: 424px 480px; justify-content: center; align-items: center; gap: 50px; padding-bottom: 50px;} .customer_section_header p { display: table; margin-left: auto; margin-right: auto; font-size: 16px; font-family: "noto_sans_cjk_jpmedium", sans-serif; padding-top: 62px; line-height: 1.6;} .contracted-accountsImg { position: relative; width: 100%; height: 272px; text-align: center; display: flex; justify-content: flex-end; align-items: center; flex-direction: column;} .contracted-accountsImg img { position: absolute; z-index: 0;} .contracted-accountsImg .contractedPrice { font-size: 128px; line-height: 1.01; font-weight: 600; position: relative; z-index: 1; padding: 0; font-family: "Montserrat", sans-serif; background: linear-gradient(90deg, #00546C -2.01%, #1C9F91 103.87%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;} .contracted-accountsImg .contractedPrice small { font-size: 80px; line-height: .8;} .contracted-accountsImg h3 { position: relative; z-index: 1; color: #00546C; font-family: "noto_sans_cjk_jpbold", sans-serif; font-size: 28px;} .contracted-accountsImg h2.title { position: relative; z-index: 1; font-size: 44px; margin-bottom: 0; line-height: 1;} .customer_section .title { color: #00546C; margin-bottom: 70px;} .support_systems { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 60px; padding-top: 20px; text-align: center;} .support_systemsItem { background-color: #f3f4f8; padding:30px 45px 15px 45px; border-radius: 8px; box-shadow: #a6b0bf71 5px 5px 12px; position: relative;} .support_systemsItemBg { position: absolute; left: 0; right: 0; top: 0; bottom: 0; box-shadow: #FFFFFF -6.25px -6.25px 12px;} .support_systems img { margin: 0 auto 3px; position: relative;} .support_systems p { line-height: 1.6; /*font-size: 15px;*/ padding: 8px 0; text-align: left; position: relative;} .support_systems p small { font-size: 12px;} .supportBtn { text-align: center; padding-top: 72px;} .supportBtn .base-btn2.Peacock { margin-left: auto; margin-right: auto; font-size: 16px; background-color: #007E8F;} .supportBtn .base-btn2.Peacock:hover { background-color: #1c9f91; border-color: #1c9f91;} /* Swiper12でナビゲーション矢印がDOM子要素(.swiper-navigation-icon)としてSVG描画されるようになったため、独自アイコンに差し替えている箇所で標準アイコンが二重表示されないよう非表示化 */ .swiper-button-next .swiper-navigation-icon, .swiper-button-prev .swiper-navigation-icon { display: none;} .seminar-sliderWrap { position: relative; padding-top: 20px; margin-bottom: 130px;} .seminar-sliderBg { background-color: white; border-radius: 8px; position: absolute; left: calc(50% - 414px); max-width: 828px; width: 100%; top: 0; bottom: 55px;} .seminar-sliderWrap .swiper { height: auto; padding-top: 20px;} .seminar-sliderWrap .swiper-button-next, .seminar-sliderWrap .swiper-button-prev { width: 100px; height: 100px; position: relative; float: left; outline: none; margin-top: 45px;} .seminar-sliderWrap .swiper-button-next:after, .seminar-sliderWrap .swiper-button-prev:after { content: ''; background-image: url('../images/arrow-slide.svg'); background-repeat: no-repeat; width: 100px; height: 100px; display: block; background-size: contain; background-position: center;} .seminar-sliderWrap .swiper-button-next:after { transform: rotate(180deg);} /* .seminar-sliderWrap .swiper-button-next:hover:after, .seminar-sliderWrap .swiper-button-prev:hover:after{opacity: .8;} */ .seminar-sliderWrap .container { position: relative; margin-left: auto; margin-right: auto; width: 100%; max-width: 774px;} .seminar-sliderWrap .container::after { display: block; content: ''; clear: both;} .seminar-sliderBtn { position: absolute; bottom: 27px; right: 30px;} .seminar-sliderBtn .base-btn2.Peacock { font-size: 16px; background-color: #007d8f; border-color: #007d8f;} .seminar-sliderBtn .base-btn2.Peacock:hover { background-color: #1c9f91; border-color: #1c9f91;} .seminar-sliderWrap .seminarSlidItem { border: #C8C8C8 1px solid; padding: 10px; border-radius: 8px; height: 100%;} @media only screen and (max-width: 868px) { .seminar-sliderBg { left: 20px; right: 20px; width: auto;} .seminar-sliderWrap .container { padding-left: 20px; padding-right: 20px;} } .seminar-sliderWrap .swiper-slide { border-radius: 8px; height: auto;} .track-record-section .seminarSlidDetail h4 a { color: #00546C;} .track-record-section .seminarSlidDetail h4 a.max-line { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;} .track-record-section .seminar-sliderWrap .seminarSlidItem { padding:32px 40px 12px 40px; border: none; background-color: #fff;} .track-record-section .swiper-slide img { height: 152px; object-fit: cover; border-radius: 0;} .track-record-section .seminarSlidDetail { padding-left: 0; padding-right: 0;} .track-record-section .seminarSlidDetail .clinicname { font-weight: bold;} /*2024/07/01*/ .seminarSlidItem { position: relative;} .seminarSlidItem a.full-slider-link { position: absolute; width: 100%; height: 100%; display: block; cursor: pointer; left: 0; top: 0;} .track-record-section .seminarSlidItem { box-shadow: 0px 4px 20px hsla(0, 0%, 0%, 0.205);} .track-record-section .seminarSlidItem:hover { box-shadow: 0px 4px 20px rgba(28, 159, 146, 0.40);} .track-record-section .seminarSlidItem:hover .seminarSlidDetail h4 a { color: #1C9F91;} .seminarSlidItem:hover .seminarSlidDetail.placeholder-data h4 a { color: #F2F4F8 !important; background: #F2F4F8 !important; background-color: #F2F4F8 !important;} .seminarSlideMNg .seminarSlidItem:hover .seminarSlidDetail.placeholder-data h4 a { background: #F2F4F8 !important; -webkit-background-clip:unset !important; -webkit-text-fill-color:#F2F4F8;} .seminarSlideMNg .seminarSlidItem .seminarSlidDetail.placeholder-data .slideBtn { opacity: 0;} .seminarSlideMNg .seminarSlidItem { box-shadow: 0px 4px 20px hsla(0, 0%, 0%, 0.12);} .seminarSlideMNg .seminarSlidItem:hover { box-shadow: 0px 4px 20px hsla(0, 0%, 0%, 0.12); border-color: #1C9F91;} .seminarSlideMNg .seminarSlidItem:hover .seminarSlidDetail h4 a { background: linear-gradient(77deg, rgba(0,84,108,1) 0%, rgba(0,126,143,1) 28%, rgba(28,159,145,1) 90%); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent;} .seminarSlidItemThumb { margin-bottom: 20px;} .seminarSlidItemThumb img { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; object-fit: cover;} .seminarSlidDetail { text-align: left; padding:0 20px 17px 20px;} .seminarSlidDetail h4 { font-size: 15px; line-height: 1.45; font-family: "noto_sans_cjk_jpbold", sans-serif;} .seminarSlidDetail h4 a { color: #1C1C1C; text-decoration: none; min-height: 44px;} .seminarSlidDetail h4 .clinicname { display: block; color: #333333; padding-top: 14px; font-family: "noto_sans_cjk_jpbold", sans-serif; font-size: 14px; line-height: 1.2; padding-bottom: 10px;} .seminarSlidDetail .slideBtn a, .seminarSlidDetail h4 span.kamoku { display: inline-block; border: #606060 1px solid; color: black; text-decoration: none; padding:3px 8px 4px 8px; border-radius: 15px; font-family: "noto_sans_cjk_jp_regularRg", sans-serif; font-size: 12px; line-height: 1.35;} .seminarSlidDetail .slideBtn { padding-top: 7px;} /* .seminarSlidDetail .slideBtn a{display: inline-block; background-color: #F2F4F8; color: black; text-decoration: none; padding: 8px 9px; border-radius: 15px; font-size: 12px;} */ /*2004/07/01*/ .seminarSlidDetail .slideBtn { padding-top: 7px; display: flex; flex-wrap: wrap; gap: 8px;} .introduction_section { background-color: white; padding:100px 20px 64px 20px; text-align: center; position: relative;} .introduction_section .title { color: #00546C; padding-bottom: 70px;} .introduction_section .title span { position: relative; display: inline-block;} .introduction_section .title span::after { content: ''; display: block; margin: 0 auto; width: 80px; height: 1px; margin-top: 10px; background-image: linear-gradient(to right, #1C9F91 10%, rgba(255, 255, 255, 0) 0%); background-position: top; background-size: 7px 2px; background-repeat: repeat-x;} .introduction_section .step-wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 106px;} .step-wrapper .step-item { position: relative;} .step-wrapper .step-item p { padding-top: 32px; color: #00546C; font-family: "noto_sans_cjk_jpmedium", sans-serif; font-weight: 500;} .step-wrapper .step-item:nth-child(even) { padding-top: 48px;} .step-item .step-indicator { position: absolute; width: 110px; height: 10px; left: 100%; top: 40px;} .step-item .step-indicator:after { content: ''; background-image: url('../images/step-indicator.svg'); background-repeat: no-repeat; background-size: 100%; width: 100%; height: 100%; position: relative; display: block;} .step-wrapper .step-item:nth-child(2) .step-indicator { top: 70px; width: 137px; left: 85%;} .step-wrapper .step-item:nth-child(2) .step-indicator:after { background-image: url('../images/step-indicator-rev.svg');} .step-wrapper .step-item:last-child .step-indicator { display: none;} .vision_section { background-color: #013445; background-size: cover; background-position: center; background-repeat: no-repeat; color: white; padding: 70px 20px 42px 20px; display: flex; align-items: center; overflow: hidden;} .vision_section .container { max-width: 1252px;} .vision_section .gmo_row { display: grid; grid-template-columns: 470px 1fr; gap: 50px; align-items: center;} .vision_section img { width: 100%;} .vision_section p { font-size: 16px; font-family: "Montserrat", sans-serif; font-weight: 500; padding: 37px 0 59px 0;} .news_section { background-color: #f3f4f8; padding: 90px 20px 55px 20px;} .news_section h3 { font-size: 18px; font-family: "Montserrat", sans-serif; font-weight: 600; color: #00546C;} .news_section .gmo_row { display: grid; grid-template-columns: 1fr 1fr; gap: 110px;} .newsList { display: grid; gap: 0px; padding:21px 0 31px 0;} .newsList .newsitem { border-bottom: #C8C8C8 1px solid; padding-top:14px;} .newsList .newsMeta { font-size: 12px; line-height: 1.35; display: flex; gap: 5px;} .newsList .newsMeta span { display: inline-block; margin-right: 5px;} .newsList .tag-item a { text-decoration: none; color: #606060; background-color: white; font-size: 10px; padding: 2px; padding: 1px 8px; border-radius: 4px; display: inline-block;} .newsList .newsitem p { font-size: 15px; line-height: 1.6;} .newsList .newsitem p a { color: #1C1C1C; text-decoration: none;} .news_section .base-btn2 { font-size: 14px; width: 200px; height: 48px;} .meet_family_section { background-color: #FFFFFF; padding:36px 20px 16px 20px; color: #1C1C1C; text-align: center;} .meet_family_section h3 { text-align: center; font-family: "noto_sans_cjk_jpbold", sans-serif; font-size: 22px; color: #00546C;} .meet_family_section .gmo_row { justify-content: center; gap: 40px; margin-bottom: 20px;} .contact_label { font-size: 16px; font-family: "noto_sans_cjk_jpmedium", sans-serif; padding-bottom: 10px; padding-top: 21px;} .contact_label .display-block { text-align: center;} .contact_label .display-block img { display: block; margin: 0 auto;} .meet_family_section h5 { text-align: center; font-family: "Montserrat", sans-serif; font-size: 18px; color: #00546C; font-weight: 600;} .meet_family_section h5 a { color: #333333; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px;} .meet_family_section address { line-height: 1.35; font-size: 12px; text-align: center;} .meet_family_section address small { font-size: 11px;} .meet_family_section .base-btn2 { height: 72px; width: 300px;} .meet_family_section .base-btn { width: 300px; border-color: #007E8F; color: #007E8F; font-size: 18px;} .meet_family_section .base-btn:hover { color: white;} .meet_family_section .base-btn.btn-gradient { width: 640px; margin-left: auto; margin-right: auto;} @media only screen and (max-width: 767px) { .meet_family_section { margin-bottom: 15px;} .meet_family_section h3 { padding-bottom: 20px;} .meet_family_section .base-btn.btn-gradient { max-width: 560px; width: 100%; margin-bottom: 15px;} .meet_family_section .base-btn2, .meet_family_section .base-btn { width: 290px;} .meet_family_section .gmo_row { flex-direction: column; align-items: center; gap: 10px;} .contact_label { padding-top: 2px;} br.mobile-only { display: block;} } /*Footer*/ footer { background-color: #f3f4f8; padding-top: 80px; padding-left: 20px; padding-right: 20px;} .back-toTop { text-align: right; border-bottom: 1px solid #c8c8c8; font-family: "noto_sans_cjk_jp_regularRg", sans-serif; padding-bottom: 14px; margin-bottom: 28px;} .back-toTop a { text-decoration: none; color: #1C9F91; font-size: 12px; font-family: "noto_sans_cjk_jpmedium", sans-serif; display: flex; justify-content: flex-end; align-items: center; gap: 12px;} footer p { padding: 5px 0; font-size: 12px;} .footCols { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 20px;} .footCols ul li { padding: 1px 0; line-height: 1.2; display: block; border: none; text-align: left; padding: 0;} .footCols a { color: #1c1c1c; text-decoration: none; font-size: 12px; font-family: "noto_sans_cjk_jp_regularRg", sans-serif; font-weight: 400; font-style: normal;} .footCols .fcolHeading a { font-family: "noto_sans_cjk_jpmedium", sans-serif; color: #00546c;} a:hover img { opacity: 0.8;} .footerlogo { margin: 0 auto; padding: 20px 0;} .footerlogo ul { width: 20px; height: 20px; padding: 2px 0; margin: 0 auto;} .footerlogo img { height:18px; margin: 0 auto;} .footerlogo ul li img { height: 20px; margin: 20px 0;} .copyright { padding: 5px 0;} @media only screen and (min-width : 768px){ .footerlogo { display: flex; justify-content: center; max-width: 1040px; margin: 0 auto; padding: 20px 0 20px 10px;} .copyright { text-align: center; padding: 30px 0;} .footerlogo ul { width: 20px; height: 20px; padding: 0; margin: 0 20px;} .footerlogo ul li img { height: 20px; margin: 0;} } .RevolutionList { display: flex; justify-content: center; align-items: center; gap: 40px; padding: 40px 0; font-family: "noto_sans_cjk_jp_regularRg", sans-serif; font-size: 14px; margin-bottom: 20px; text-decoration: none;} .RevolutionList li::after { content: ''; width: 0px; display: inline-block; margin-left: 7px; height: 0px; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 4px solid #1C1B1F;} footer .gmoLogo { padding-bottom: 23px;} footer .gmoLogo .open_new { color: #333; font-size: 16px; margin-top: 8px; display: block;} footer .gmoLogo a.open_new::after { content: url("../images/open_in_new.svg"); display: inline-block; font-size: 18px; margin-left: 14px; text-decoration: none; vertical-align: middle;} .certificate-logo { padding-top: 10px;} .gmoFooterLogo { padding-top: 12px;} .gmoFooterLogo ul li img { width: 20px; height: 20px;} .gmoFooterLogo, .globalLogo { max-width: 234px;} .footer_security { background-color: #f2f3f4; text-align: center; margin: 0; padding: 0;} .servicesList { display: grid; grid-template-columns: 100px 100px 100px; justify-content: center; align-items: center; gap: 10px; padding: 40px 0;} .servicesList img { width: 100px !important; height:50px;} .footer_security p { color: #858585; font-size: 9px; font-family: "noto_sans_cjk_jp_regularRg", sans-serif; font-weight: 400;} .footer_bottom { background-color: #fefefe; padding: 30px 10px 10px 10px; margin-left: -20px; margin-right: -20px;} .gmp_group_title { color: #4d4d4d; font-size: 14px; font-family: "noto_sans_cjk_jpbold", sans-serif; line-height: 1.5; margin-bottom: 5px; padding-top: 15px;} .certificate-logo img { width: 100px;} /* footCols(フッターメニュー)はスマホでは非表示にする。サイト全体共通ルールのため、 Footer.astroを読み込む全レイアウトに効くようcommon.cssに集約している (旧: style.css / lp.cssに同一ルールが重複していたものを統合) */ @media only screen and (max-width: 767px) { footer .gmo_row.space-between > .gmo_col:first-child, .RevolutionList, .back-toTop, .footCols { display: none;} } @media only screen and (min-width : 768px){ .mobile-base-btnWrap { display: none;} .Fee_structure .clinic_success { gap: 92px; grid-template-columns: 296px 296px;} .servicesList { display: grid; grid-template-columns: 100px 100px 100px; gap: 10px; padding: 40px 0;} } @media only screen and (min-width : 992px){ .mobileFootBottom { display: none;} } /*選ばれる理由 2024/07*/ .banner_header.reason .gmo_row { position: relative;} .banner_header.reason .gmo_row img { position: absolute; right: -10px; bottom: -96px; width: 66%;} .banner_header.reason .gmo_col { margin: 20px 60px 0px 24px;} .banner_header.reason .gmo_col h1 { font-size: 34px; margin-bottom: 20px;} .banner_header.reason .gmo_col p { font-size: 17px; font-weight: bold; color:#fff; line-height: 1.4;} .develop_section { background-color: white; padding:100px 20px 64px 20px; text-align: center; position: relative;} .develop_section.three_reason h2.title, .operation_section.three_reason h2.title { position: relative; text-align: center;} .reason h2 span, .three_reason h2 span { font-size: 23px; font-weight: bold; color: rgba(0, 84, 108, 1); margin-bottom: 40px;} .develop_section.three_reason h2 span.reason_nmb, .operation_section.three_reason h2 span.reason_nmb { position: absolute; top: -120px; left: 0; font-size: 150px; color:rgba(202, 226, 229, 1); font-family:"Montserrat", sans-serif;} .operation_section.three_reason, .operation_section.reason, .other_section.reason { background-color: #f3f4f8; padding:100px 20px 50px 20px; overflow: hidden;} .operation_section.three_reason .key_success { margin-top: 0;} .operation_section.reason h2 span { font-size: 30px;} .operation_section { color: rgba(0, 84, 108, 1); font-weight: bold;} .three_reason h2 span::after { display: none;} .develop_section.three_reason { text-align: left;} .develop_section.three_reason .support_systemsItem { display: flex; padding: 10px 5px 10px 30px;} .develop_section.three_reason .support_systemsItem img { width: 44%; width: auto; height: 110px; margin-right: 14px; margin: 20px 14px 0 0;} .develop_section.three_reason .support_systemsItem .deve_txt { width: auto;} .develop_section.three_reason .support_systems p { padding-top: 0;} .develop_section.three_reason .support_systems p.deve01 { background:linear-gradient(90deg, #00546C -2.01%, #1C9F91 103.87%); -webkit-background-clip: text; -webkit-text-fill-color:transparent; font-size:34px; font-weight: bold; margin: 10px 0 10px 0; line-height: 1;} .support_systems p.deve02 { font-size: 15px; padding: 0; line-height: 1.2; margin-bottom: 16px;} .support_systems p.deve03 { font-size: 15px;} .support_systems p.deve04 { font-size: 15px; line-height: 1.8;} .support_systems p.deve02 span, .support_systems p.deve03 span { font-size: 34px; line-height: 1; font-weight: 700;} .three_reason p.reason_txt { color: #333; font-weight: bold; margin-bottom: 20px;} .other_section.reason .other_txt h3 { font-size: 30px; font-weight: 600; z-index: 1; padding: 0; font-family: "Montserrat", sans-serif; background: linear-gradient(90deg, #00546C -2.01%, #1C9F91 103.87%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; width: 100%; text-align: center; margin-bottom: 20px;} .other_section.reason .other_txt img { width: 100%;} p.annotation { font-size: 11px;} .other_section.reason .other03 {} .other_section.reason .other03 .other03_con { display: flex; flex-wrap: wrap; background-color: #fff; padding: 4%;} .other_section.reason .other03 h3 { width: 100%; font-size: 30px;} .other_section.reason .other03 div div { width: 30%;} .other_section.reason .other03 div div.other03_txt { width: 64%; margin-right: 4%;} .other_section.reason img.other_img { margin-bottom: 60px;} @media only screen and (min-width : 768px){ .banner_header.title-style .page-title-container.banner_title_area_reason { align-items: center; align-content: center; height: 360px;} .banner_header.reason .gmo_row { margin-bottom: 3%; width: 100%;} .banner_header.reason .gmo_row img { right: 10px; bottom: -200px; width: 50%;} .banner_header.reason .gmo_col { margin: 20px 50% 0px 24px;} .banner_header.reason .gmo_col h1 { font-size: 40px; line-height: 1.5;} .banner_header.reason .gmo_col p { font-size: 20px;} .develop_section.three_reason { padding: 140px 20px 90px 20px;} .develop_section.three_reason .container { position: relative;} .develop_section.three_reason .management_tools img { width: 56%; position: absolute; top: -72px; right: -30px;} .operation_section.reason, .other_section.reason { padding:140px 20px 60px 20px;} .other_section.reason img.other_img { margin-bottom: 60px;} .develop_section.three_reason .support_systemsItem { display: block; padding: 0 10px 10px 10px;} .support_systems p.deve01, .support_systems p.deve02, .support_systems p.deve03, .support_systems p.deve04 { text-align: center;} .develop_section.three_reason .support_systemsItem img { width: 90%; height: auto;} .other_section.reason .other03_img { display: flex;} .other_section.reason .other03 div div { width: 25%;} .other_section.reason .other03 div div.other03_txt { width: 70%; margin-right: 4%;} .other_section.reason .other03_img img { width: 50%; height: auto;} .other_section.reason .other03_img img.pmark { width: 100%; height: auto;} } @media only screen and (min-width : 992px){ .develop_section.three_reason .management_tools img { width: 44%;} } /*Footer 診療科section*/ .medicalDepartment_ftr { display: flex; justify-content: center; margin: 30px 0;} .medicalDepartment_ftr .departmentList { display: grid; max-width: 952px; margin-left: 44px; grid-template-columns: repeat(auto-fill,116px); gap: 21px 23px;} .medicalDepartment_ftr .departmentList li { height: 116px;} .medicalDepartment_ftr .departmentList .departmentBtn { display: grid; width: 100%; height: 100%; padding: 0; cursor: pointer; transition: background-color .2s; text-decoration: none; color: #333333; 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) { .medicalDepartment_ftr .departmentList .departmentBtn:hover { border: 1px solid #66c5bb; background-color: #fff;} } .medicalDepartment_ftr .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;} .medicalDepartment_ftr .departmentList .departmentBtn span { font-size: 12px; font-weight: 500; line-height: 1.08; padding-bottom: 8px; text-align: center; color: #333333; align-self: center;} .medicalDepartment_ftr .departmentList .departmentBtn1::before { background-image: url('../images/products/department_icon1.svg');} .medicalDepartment_ftr .departmentList .departmentBtn2::before { background-image: url('../images/products/department_icon2.svg');} .medicalDepartment_ftr .departmentList .departmentBtn3::before { background-image: url('../images/products/department_icon3.svg');} .medicalDepartment_ftr .departmentList .departmentBtn4::before { background-image: url('../images/products/department_icon4.svg');} .medicalDepartment_ftr .departmentList .departmentBtn5::before { background-image: url('../images/products/department_icon5.svg');} .medicalDepartment_ftr .departmentList .departmentBtn6::before { background-image: url('../images/products/department_icon6.svg');} .medicalDepartment_ftr .departmentList .departmentBtn7::before { background-image: url('../images/products/department_icon7.svg');} .medicalDepartment_ftr .departmentList .departmentBtn8::before { background-image: url('../images/products/department_icon8.svg');} .medicalDepartment_ftr .departmentList .departmentBtn9::before { background-image: url('../images/products/department_icon9.svg');} .medicalDepartment_ftr .departmentList .departmentBtn10::before { background-image: url('../images/products/department_icon10.svg');} .medicalDepartment_ftr .departmentList .departmentBtn11::before { background-image: url('../images/products/department_icon11.svg');} .medicalDepartment_ftr .departmentList .departmentBtn12::before { width: 66px; height: 67px; background-image: url('../images/products/department_icon12.svg');} .medicalDepartment_ftr .departmentList .departmentBtn13::before { width: 44px; height: 51px; background-image: url('../images/products/department_icon13.svg');} .medicalDepartment_ftr .departmentList .departmentBtn14::before { width: 41px; height: 45px; background-image: url('../images/products/department_icon14.svg');} @media only screen and (max-width: 767px) { .medicalDepartment_ftr .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);} .medicalDepartment_ftr .departmentList li { height: calc(calc(76/393) *100vw);} .medicalDepartment_ftr .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;} .medicalDepartment_ftr .departmentList .departmentBtn::before { width: calc(calc(42/393) *100vw); height: calc(calc(42/393) *100vw);} .medicalDepartment_ftr .departmentList .departmentBtn span { font-size: calc(calc(10/393) *100vw); line-height: 1; padding-bottom: calc(calc(2/393) *100vw);} .medicalDepartment_ftr .departmentList .departmentBtn12::before { width: calc(calc(43/393) *100vw); height: calc(calc(44/393) *100vw);} .medicalDepartment_ftr .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;} .medicalDepartment_ftr .departmentList .departmentBtn13 span { font-size: calc(calc(9/393) *100vw);} .medicalDepartment_ftr .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;} .medicalDepartment_ftr .departmentList .departmentBtn14 span { font-size: calc(calc(9/393) *100vw);} } .gmoGroupSecurity a:link, .gmoGroupSecurity a:visited { font-size: 10px;} /*-----*/ /* ===== ページタイトル帯（products他共通） ===== */ .page_title_band { background-image: url('/common/images/banner.webp'); background-size: cover; background-position: center top; background-color: #007c84; position: relative; color: #fff;} .page_title_band_inner { padding: 48px 0 40px; text-align: center;} .page_title_band h1, .page_title_band .page_title_band_heading { font-size: 34px; font-weight: bold; line-height: 1.4; margin: 0 0 12px; color: #fff;} .page_title_band p { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,0.9); margin: 0;} .page_title_band .breadcrum-wrapper { background-color: rgba(255, 255, 255, 0.2); min-height: 36px; padding: 0;} .page_title_band .breadcrum { display: inline-flex; font-size: 12px; gap: 8px 5px; padding: 10px 0; flex-wrap: wrap;} @media (max-width: 767px) { .page_title_band_inner { padding: 32px 16px 24px;} .page_title_band h1, .page_title_band .page_title_band_heading { font-size: 22px; margin-bottom: 10px;} .page_title_band p { font-size: 14px;} .page_title_band .breadcrum-wrapper { padding: 0 0 0 4px;} } /* ============================================================ Aside form / Contact float panel ============================================================ */ .aside-form-wrap { --contact-form-width: 440px; position: fixed; right: calc(-1 * var(--contact-form-width)); height: 100%; top: 0; width: var(--contact-form-width); z-index: 999; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -moz-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in;} .open-form-btn { position: absolute; top: 180px; left: -52px; z-index: 999; background: linear-gradient(180deg, rgba(0, 84, 108, 1) 0%, rgba(0, 126, 143, 1) 28%, rgba(28, 159, 145, 1) 90%); color: white; font-size: 14px; font-weight: bold; padding: 24px 0px; display: flex; width: 52px; text-align: left; height: 180px; cursor: pointer; writing-mode: vertical-lr; -webkit-border-top-left-radius: 8px; -webkit-border-bottom-left-radius: 8px; -moz-border-radius-top-left: 8px; -moz-border-radius-bottom-left: 8px; border-top-left-radius: 8px; border-bottom-left-radius: 8px; box-shadow: 0 0 16px rgba(255, 255, 255, 0.603); align-items: center; transition: all 0.3s linear;} .open-form-btn.mouse-hover { left: -62px; width: 62px;} .open-form-btn svg { position: absolute; bottom: 10px; right: 50%; transform: translateX(50%) rotate(0deg); transition: transform 200ms linear 'ease-in';} .aside-form-wrap.active, .aside-form-wrap.click-active { right: 0;} .aside-form-wrap.active .open-form-btn svg, .aside-form-wrap.click-active .open-form-btn svg { transform: translateX(50%) rotate(180deg);} .open-form-btn:hover { color: #b4ddda;} .open-form-btn:hover svg path { fill: #b4ddda;} .aside-form { width: 100%; margin: 0; background-color: white; height: 100%; padding: 20px;} .mr_form_inner .maintxt .mr_require_checkbox span, .mr_form_inner .maintxt { font-size: 14px; color: #1C1C1C;} #mr_input_popup { position: absolute;} .mr_popup_top { position: relative; display: inline-block; margin: 1.5em 0; padding: 7px 10px; min-width: 120px; max-width: 100%; color: #ff0000; font-size: 12px; background: #fbe8e8; border-radius: 3px;} .mr_popup_top:before { content: ""; position: absolute; top: -30px; left: 30px; margin-left: -15px; border: 15px solid transparent; border-bottom: 15px solid #fbe8e8;} .mr_popup_top p { margin: 0; padding: 0;} .valid_icon { display: none; font-size: 24px; color: #24b180; margin-left: 10px;}