/* Theme Name: Standard Design F Theme URI: https://standard-co.jp Description: Standard Design F Author:       Standard Inc. Author URI:   https://standard-co.jp Template: generatepress Version: 0.4 テーマ：GeneratePress 3.0〜 + GP Premium →https://generatepress.com/ CSSフレームワーク：Tailwindcss 2.0〜 →https://tailwindcss.com/ ・上書きが必要なものは当style.cssに記述 ・当社固有のCSSには「std-xxx」と命名している ・IE11は非対応でOK ■目次 ・基本設定 ・Tailwindcss調整・ユーティリティ不足分追加 ・GeneratePress：調整 ・GeneratePress：追加 ・ロゴ・ヘッダー ・ナビゲーション ・パンクズ ・ページネーション ・サイドバー ・フッター ・コンタクトフォーム ・テーブル ・リスト ・ボタン ・スクロールバー ・トップページ：メインビジュアル ・最新情報 ・見出しデザイン ・ニュースティッカー ・背景スライドショー 〜下記未対応〜 ・要素のアニメーション ・Page Hero：背景動画（不要な場合は削除） ・アニメーション：ローディング（不要な場合は削除） ・サイトオリジナルのCSS〜追加のCSSはここから記載〜 */ /* ========================================================= * 基本設定 * テーマのレイアウトやフォントなどのベース設定はカスタマイザーで行う * 外観 > カスタマイズ * カスタマイザーで設定しきれない部分や調整をCSSで追加 ========================================================= */ /* カスタムプロパティ指定 */ /* サンセリフ（ゴシック系）、セリフ（明朝系）はサイトのテイストに合わせて調整 */ /* フォントは外観>Elements>wp_head（全ページ出力）でlinkとして読み込み */ :root { --main-color: #0d6073; --main-color-hover: #1b88a0; --main-font-color: #ffffff; --sub-color: #57b2b6; --accent-color: #ef858c; --main-font-jp: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 游ゴシック, YuGothic, Meiryo, 'MS PGothic', sans-serif; --main-font-en: 'Open Sans', sans-serif; --font-sans-jp: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 游ゴシック, YuGothic, Meiryo, 'MS PGothic', sans-serif; --font-serif-jp: 'Noto Serif JP', 'Hiragino Mincho ProN', 游明朝, YuMincho, HGS明朝E, 'MS PMincho', serif; --font-sans-en: 'Open Sans', sans-serif; /* --font-sans-en: 'Montserrat', sans-serif; */ --font-serif-en: 'Playfair Display', serif; --font-tel: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 游ゴシック, YuGothic, Meiryo, 'MS PGothic', sans-serif; /* --font-tel: 'Source Serif Pro', serif; */ --font-rounded-jp: "Zen Maru Gothic", sans-serif; } body { font-family: var(--font-sans-jp); /* カーニングの設定 */ letter-spacing: 1.5px; font-feature-settings: "palt" 1; -webkit-font-kerning: auto; font-kerning: auto; } @media (max-width: 768px) { body { letter-spacing: 0; } } h1, h2, h3, h4, h5, h6 { font-family: var(--main-font-jp); } button, input, select, textarea { font-family: var(--main-font-jp); } dl, dt, dd { margin: 0; } ol, ul { margin: 0 0 0 1.5rem; } /* 画像初期設定 */ img { vertical-align: middle; } a:hover img { opacity:0.8; filter: alpha(opacity=80); -ms-filter: "alpha( opacity=80 )"; } /* アイコンカラー */ i.fa { color: var(--main-color); } /* 背景カラー */ .std-bg-main { background-color: var(--main-color); } /* テキストカラー */ .main-color { color: var(--main-color); } /* リンクカラー */ a.main-color { color: var(--main-color); } a.main-color:hover, a.main-color:active, a.main-color:focus { color: #333; } /* フォント指定 */ .sans-jp { font-family: var(--font-sans-jp) !important; } .serif-jp { font-family: var(--font-serif-jp) !important; } .sans-en { font-family: var(--font-sans-en) !important; } .serif-en { font-family: var(--font-serif-en) !important; } .font-tel { font-family: var(--font-tel) !important; } .font-rounded{ font-family: var(--font-rounded-jp) !important; } /* 見出しフォントサイズ：カスタマイザーの設定「Typography＞Headings」に合わせる */ .h1,.std-heading-lv1 {font-size: 45px; line-height: 1.2;} .h2,.std-heading-lv2 {font-size: 36px; line-height: 1.2;} .h3,.std-heading-lv3 {font-size: 28px; line-height: 1.2;} .h4,.std-heading-lv4 {font-size: 24px; line-height: 1.4;} .h5,.std-heading-lv5 {font-size: 20px; line-height: 1.6;} .h6,.std-heading-lv6 {font-size: 16px; line-height: 1.8;} @media (max-width: 768px) { .h1,.std-heading-lv1 {font-size: 30px;} .h2,.std-heading-lv2 {font-size: 28px;} .h3,.std-heading-lv3 {font-size: 24px;} .h4,.std-heading-lv4 {font-size: 22px;} .h5,.std-heading-lv5 {font-size: 20px;} } @media (max-width: 1024px) { /* フォームの横幅100% */ input[type=email], input[type=number], /* input[type=password], */ /* input[type=search], */ input[type=tel], input[type=text], input[type=url], select, textarea { width: 100%; } } /* IE警告（IEは非対応の旨掲載） */ .ie-message-box { background-color: #eee; text-align: center; padding: 40px; } .ie-message-box h2 { color: rgba(239, 68, 68, 1); margin-bottom: 20px; } /* ========================================================= * Tailwindcss調整・ユーティリティ不足分追加 ========================================================= */ .z-100 { z-index: 100; } .z-200 { z-index: 200; } .z-300 { z-index: 300; } /* テキストシャドウ */ .std-text-shadow { text-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 0 4px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 0, 0, 0.1), 0 0 12px rgba(0, 0, 0, 0.1); } /* レスポンシブ対応 */ .std-responsive { position: relative; /* padding-bottom: 75%; */ /* 4:3の場合 */ padding-bottom: 56.25%; /* 16:9の場合 */ width: 100%; height: 0; overflow: hidden; } .std-responsive iframe, .std-responsive object, .std-responsive embed { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } /* Googleマップ ビジネスプロフィール（クチコミ含む）非表示 */ /* 参考URL　https://monakanote.net/coding/css-googlemaps-20200624/ */ .std-gbp-hidden { width: 100%; height: 600px; overflow: hidden; } .std-gbp-hidden iframe { width: 100%; height: 850px; margin-top: -140px; } /* Googleマップ 埋め込みコードカスタマイズ（GoogleマップAPIの代替バージョン） */ /* 親要素の設定 */ .std-google-map { position: relative; width: 100%; /* 横幅は親要素に合わせて自動調整 */ height: 500px; /* 縦幅を固定 */ overflow: hidden; /* クチコミ非表示用 */ } /* iframeの設定 */ .std-google-map iframe { position: absolute; top: 0; left: 0; width: 100%; /* 横幅を100%に設定し、親要素に合わせる */ height: 100%; /* 親要素の高さに合わせる */ border: none; /* 枠線を非表示にする */ } /* クチコミ非表示 */ /* 参考URL　https://monakanote.net/coding/css-googlemaps-20200624/ */ .std-google-map iframe{ position: absolute; height: 800px; margin-top: -150px; } /* カラー調整 */ /* 参考サイト　https://cdg-blog.jp/css_gmap_color/ */ .std-google-map iframe{ /* filter: saturate(70%); /* 彩度調整 */ filter: grayscale(15%); /* モノクロ調整 */ } /* ========================================================= * GeneratePress：調整 * カスタマイザーで調整しきれない部分 ========================================================= */ /* 投稿系：サイドバー有りのコンテンツとサイドバーのウィジェットを線で囲む */ .site-main article:not(.page) .inside-article, .search .site-main article .inside-article, .search-no-results .site-main .inside-article, .error404 .site-main .inside-article, .sidebar .widget { /* border: 1px solid #e3e3e3;*/ } /* カテゴリーのページヘッダーを非表示（ElementsのHeaderを利用の場合） */ body.category .page-header, body.archive .page-header, body.tag .page-header, body.date .page-header, body.search .page-header { display: none; } /* カスタマイザーのセパレート値（40）を上書き */ /* パンくずの間の余白調整 */ .separate-containers.right-sidebar .site-main, .separate-containers.left-sidebar .site-main { margin-top: 20px; } .separate-containers .inside-right-sidebar, .separate-containers .inside-left-sidebar { margin-top: 20px; } /* 投稿系の横幅を調整 */ .blog.no-sidebar #page.grid-container, .single.no-sidebar #page.grid-container, .archive.no-sidebar #page.grid-container, .category.no-sidebar #page.grid-container { max-width: 960px; } /* ========================================================= * GeneratePress：追加 * GPマニュアル：https://docs.generatepress.com/collection/sections/ ========================================================= */ /* フルワイドのセクション：GPのセクション利用時に「Custom Classes」に「generate-sections-fullwide」を設定 */ /* セクションの設定「Inner Box Type」を「Full Width」に変更しただけでは左右の余白が残るため、余白を０にする */ .generate-sections-fullwide .generate-sections-inside-container { padding-left: 0; padding-right: 0; } /* GPのセクション利用時に「Custom Classes」に「generate-sections-XXXX」を設定 */ .generate-sections-800 .generate-sections-inside-container {max-width: 800px; margin-left:auto;margin-right:auto;} .generate-sections-900 .generate-sections-inside-container {max-width: 900px; margin-left:auto;margin-right:auto;} .generate-sections-1000 .generate-sections-inside-container {max-width: 1000px;margin-left:auto;margin-right:auto;} .generate-sections-1100 .generate-sections-inside-container {max-width: 1100px;margin-left:auto;margin-right:auto;} .generate-sections-1200 .generate-sections-inside-container {max-width: 1200px;margin-left:auto;margin-right:auto;} .generate-sections-1300 .generate-sections-inside-container {max-width: 1300px;margin-left:auto;margin-right:auto;} .generate-sections-1400 .generate-sections-inside-container {max-width: 1400px;margin-left:auto;margin-right:auto;} .generate-sections-1500 .generate-sections-inside-container {max-width: 1500px;margin-left:auto;margin-right:auto;} .generate-sections-1600 .generate-sections-inside-container {max-width: 1600px;margin-left:auto;margin-right:auto;} .generate-sections-1700 .generate-sections-inside-container {max-width: 1700px;margin-left:auto;margin-right:auto;} .generate-sections-1800 .generate-sections-inside-container {max-width: 1800px;margin-left:auto;margin-right:auto;} /* 固定幅　※grid-containerはカスタマイザーの「Layout＞Container＞Container Width」設定値（ベーステーマでは1200px）となるため、それ以外の横幅を利用したい場合に利用 */ .grid-400 {max-width: 400px; margin-left:auto;margin-right:auto;} .grid-400::after {clear: both;} .grid-500 {max-width: 500px; margin-left:auto;margin-right:auto;} .grid-500::after {clear: both;} .grid-600 {max-width: 600px; margin-left:auto;margin-right:auto;} .grid-600::after {clear: both;} .grid-700 {max-width: 700px; margin-left:auto;margin-right:auto;} .grid-700::after {clear: both;} .grid-800 {max-width: 800px; margin-left:auto;margin-right:auto;} .grid-800::after {clear: both;} .grid-900 {max-width: 900px; margin-left:auto;margin-right:auto;} .grid-900::after {clear: both;} .grid-1000 {max-width: 1000px;margin-left:auto;margin-right:auto;} .grid-1000::after {clear: both;} .grid-1100 {max-width: 1100px;margin-left:auto;margin-right:auto;} .grid-1100::after {clear: both;} /* カスタマイザーの設定値（Container Width）を超える場合は該当セクションの「Inner Box Type」を「Full Width」に変更してから利用する */ .grid-1200 {max-width: 1200px;margin-left:auto;margin-right:auto;} .grid-1200::after {clear: both;} .grid-1300 {max-width: 1300px;margin-left:auto;margin-right:auto;} .grid-1300::after {clear: both;} .grid-1400 {max-width: 1400px;margin-left:auto;margin-right:auto;} .grid-1400::after {clear: both;} .grid-1500 {max-width: 1500px;margin-left:auto;margin-right:auto;} .grid-1500::after {clear: both;} .grid-1600 {max-width: 1600px;margin-left:auto;margin-right:auto;} .grid-1600::after {clear: both;} .grid-1700 {max-width: 1700px;margin-left:auto;margin-right:auto;} .grid-1700::after {clear: both;} .grid-1800 {max-width: 1800px;margin-left:auto;margin-right:auto;} .grid-1800::after {clear: both;} /* clear:both */ .grid-400::after, .grid-500::after, .grid-600::after, .grid-700::after, .grid-800::after, .grid-900::after, .grid-1000::after, .grid-1100::after, .grid-1200::after, .grid-1300::after, .grid-1400::after, .grid-1500::after, .grid-1600::after, .grid-1700::after, .grid-1800::after { content: "."; display: block; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0; } /* ========================================================= * ロゴ・ヘッダー * GPマニュアル * https://docs.generatepress.com/collection/header/ ========================================================= */ .main-title { font-family: var(--main-font-jp); } .site-description { font-family: var(--main-font-jp); padding-top: 5px; } /* Page Heroの高さをadmin-barの高さ分調整（ホーム、ビジネス用固定ページ、クオリティアップ用固定ページ） */ /* @media (min-width:769px) { .home.admin-bar .page-hero, .page-id-215.admin-bar .page-hero, .page-id-229.admin-bar .page-hero { min-height: calc( 100vh - 32px ); } }*/ /* ロゴ画像設定 */ /* SVG以外の画像（jpg,png,gif等）は縦幅2倍で作成（滲まないように）、またはカスタマイザーでRetina Logoを指定 */ /* SVGの場合は縦＋横サイズも指定する */ #masthead .site-logo img { height: auto; width: 224px; margin: 0 auto; display: block; padding-bottom: 15px; } .site-branding-container{ display: flex; flex-direction: column; } .site-branding-container .site-logo { margin-right: 0; } /* Mobile Headerのロゴ上下のパッティング調整（デフォは10px） */ /* カスタマイザー＞Header＞Mobile Headerの下：Branding Type=Logo */ #mobile-header .site-logo img { /* ヘッダーの縦幅60px指定の場合はロゴの高さは50pxとなるため、jpg、pngなどは高さ100pxのロゴ画像指定 */ padding: 5px 0; } h1.site-logo { margin-bottom: 0; } /* ロゴ画像設定ここまで */ /* モバイル表示のサイトタイトル前にロゴ設置（CSSで対応ver）ここから */ /* 不要な場合はコメントアウト */ /* ロゴとサイト名称のバランスが取れない場合、ロゴ＋サイト名称を画像にして、カスタマイザー＞Layout＞Header＞Branding Type＞Logoで設定も可 */ /* SVG画像の場合はロゴの縦横比に合わせてheight、widthいずれも指定 */ @media (max-width: 1260px) { /* Mobile Menu Breakpointに合わせる */ .navigation-branding .main-title a::before { content: ''; background-image: url('//placehold.jp/dddddd/555555/72x36.png?text=logo'); background-size: contain; background-position: center; background-repeat: no-repeat; height: 36px; width: 72px; display: inline-block; vertical-align: middle; margin: 0; } } /* サイトタイトル前にアイコン設置ここまで */ /* ========================================================= * ナビゲーション * GPマニュアル * https://docs.generatepress.com/collection/primary-navigation/ * https://docs.generatepress.com/collection/slide-out-navigation/ ========================================================= */ /* サイド固定ナビ */ /* カスタマイザーのBreapoint、DropPoint+1で調整 */ @media (min-width: 1261px) { body { margin-left: 290px; } .admin-bar .site-header { top: 32px; } .site-header { z-index: 300; position: fixed; width: 290px; height: 100%; left: 0; top: 0; overflow: auto; overflow-x: hidden; -webkit-backface-visibility: hidden; -webkit-overflow-scrolling: touch; transition: .1s ease; } /* 子メニュー */ #masthead .main-navigation ul ul.sub-menu { position: fixed; width: 290px; height: 100%; left: 290px; top: 0; overflow: auto; overflow-x: hidden; -webkit-backface-visibility: hidden; -webkit-overflow-scrolling: touch; transition: .2s ease; display: flex; flex-direction: column; justify-content: center; } #masthead .main-navigation ul ul.sub-menu li:first-of-type { border-top: 1px solid rgba(255,255,255,0.2); } #masthead .main-navigation ul ul.sub-menu li { border-bottom: 1px solid rgba(255,255,255,0.2); } /* メニューアイコンを右向きに変更 */ #masthead .main-navigation .dropdown-menu-toggle .gp-icon svg { transform: rotate(270deg); } /* メニューアイコンを非表示にする */ #masthead .main-navigation .dropdown-menu-toggle { display: none; } .admin-bar #masthead .main-navigation ul ul.sub-menu { top: 32px; } } /* Safariのみサブメニューが表示されないための対応 */ @media (min-width: 1261px) { _::-webkit-full-page-media, _:future, :root .site-header { overflow: visible; } } @media screen and (-webkit-min-device-pixel-ratio:0) { ::i-block-chrome, .site-header { overflow: visible; } } /* 固定サイドの背景色 */ .header-wrap .site-header { /* background: #ffffff; */ } #masthead { /* border-right: 1px solid #eee;*/ /* --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); */ } /* サイドメニューを縦並びへ */ #masthead .inside-header { flex-direction: column; /* ロゴ画像設定時に利用：ロゴ上・ナビ真ん中・ヘッダーウィジェット下の配列 */ justify-content: space-between; padding-top: 40px; } #masthead .inside-header { height: 100%; } .admin-bar #masthead .inside-header { height: calc(100% - 32px); } #masthead .site-branding { text-align: center; } #masthead .site-branding .main-title { margin-bottom: 5px; } #masthead #site-navigation { margin: 0 auto; width: 100%; } #masthead .inside-navigation { justify-content: center; } #masthead .main-navigation .main-nav { width: 100%; } #masthead .main-navigation .main-nav>ul { flex-direction: column; } #masthead .main-navigation .main-nav li { width: 100%; text-align: center; } #masthead .header-widget { width: 100%; margin: 0; /* 最下部に配置：ロゴ画像設定した場合はコメントアウト */ /* margin-top: auto; */ } /* サイド固定ナビここまで */ /* ナビゲーションのCTA（ナビのCTAを利用しない場合は削除） */ .std-navigation-cta { padding: 20px; text-align: center; } .std-navigation-cta-tel { padding-bottom: 20px; } .std-navigation-cta-tel .std-navi-tel { font-size: 22px; line-height: 32px; font-weight: bold; } .std-navigation-cta-tel .std-navi-text { font-size: 12px; line-height: 18px; } /* ナビゲーションのCTAここまで */ /* スライドアウトナビのサブメニュー時の「▼」クリック可能領域を広げる */ @media (max-width: 768px) { li.menu-item-has-children .dropdown-menu-toggle { padding-left: 15px !important; padding-right: 15px !important; border-left: 1px solid #ddd; } ul.sub-menu li.menu-item-has-children .dropdown-menu-toggle { border-left: 1px solid rgba(255, 255, 255, 0.5); } } @media (min-width: 769px) { #sticky-navigation.is_stuck.main-navigation ul li { letter-spacing: 1.5px; } } /* スライドアウトナビの装飾 */ #generate-slideout-menu.slideout-navigation.do-overlay .inside-navigation { padding-top: 0; } #generate-slideout-menu .slideout-menu > li { border-bottom: 1px solid #ddd; text-align: left !important; margin: 0; } #generate-slideout-menu .slideout-menu > li li { border-bottom: 1px solid rgba(255, 255, 255, 0.3); text-align: left !important; margin: 0; } #generate-slideout-menu .slideout-menu > li li:last-of-type { border-bottom: none; } .slideout-navigation.main-navigation .main-nav ul li a { padding-left: 15px; width: 100%; } /* スライドアウトナビのウィジェトの余白調整 */ .main-navigation.slideout-navigation .main-nav, .main-navigation.slideout-navigation .slideout-widget:not(:last-child), .main-navigation.slideout-navigation .slideout-widget { margin: 0; } .slideout-widget { width: 100%; } /* スライドアウトナビのCTA */ .std-slideout-cta-tel { padding: 15px; background-color: rgba(101, 89, 127, 0.1); } .std-slideout-cta-tel a { font-size: 20px; line-height: 28px; font-weight: 700; } .std-slideout-cta-tel .std-slideout-text { font-size: 12px; line-height: 12px; font-weight: 400; } .std-slideout-cta-mail a.button { color: #fff; line-height: 40px; padding: 15px; } /* モバイル時のメニュー調整 */ @media (max-width: 768px) { /* ハンバーガーメニューサイズ調整 */ .menu-toggle .gp-icon { font-size: 22px; } /* メニューの表記を非表示 */ .menu-toggle .gp-icon+.mobile-menu { display: none; } } /* ========================================================= * パンクズ * Breadcrumb NavXTプラグイン利用 * 外観>Elements>パンくず出力 ========================================================= */ .std-breadcrumbs { font-size: 14px; line-height: 20px; overflow: hidden; padding-top: 20px; } .sections-no-sidebars .std-breadcrumbs { padding: 20px 0; } /* オーバーフローした場合、改行させずに…表示 */ .std-breadcrumbs .grid-container { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 768px) { .std-breadcrumbs { padding: 20px 10px 0 10px; } .sections-no-sidebars .std-breadcrumbs { padding: 20px 10px; border-bottom: 1px solid #eee; } } /* ========================================================= * ページネーション ========================================================= */ .paging-navigation { text-align: center; } .paging-navigation .page-numbers:not(.dots):not(.prev):not(.next) { background-color: var(--main-color); color: var(--main-font-color); padding: 2px 8px; } .paging-navigation a.page-numbers:not(.dots):not(.prev):not(.next):hover { background-color: var(--main-color-hover); } /* ========================================================= * サイドバー * GPマニュアル：https://docs.generatepress.com/collection/sidebars/ ========================================================= */ /* サイドバーウィジェットのタイトル設定 */ .sidebar .widget .widget-title { color: var(--main-color); border-bottom: solid 2px var(--main-color); text-align: center; line-height: 1; padding: 15px 0; margin: -20px -20px 20px -20px; /* .sidebar .widgetのpadding打ち消し */ font-family: var(--font-rounded-jp); font-weight: 500; } /* セレクトボックスデザイン調整 */ .sidebar .widget select { width: 100%; padding: 5px; } /* ウィジェット：最近の投稿 */ .sidebar .widget .post-date { display: block; color: #777; } /* WP Show Postsプラグインでのお知らせ表示 */ /* ダッシュボード > WP Show Posts > サイドバーへ最新情報表示 */ .sidebar .wp-show-posts-entry-meta { font-size: 13px; text-align: right; } .sidebar .wp-show-posts-image.wpsp-image-left { margin-right: 15px; } .sidebar .wp-show-posts .wp-show-posts-entry-title { /* タイトルのフォントはWP Show Postsプラグインの設定画面 */ line-height: 1.4; font-weight: 400; } @media (max-width: 768px) { .sidebar .wp-show-posts-image.wpsp-image-left { float: left; /* サイドバーのWP Show Posts（最新情報）は左寄せ維持 */ } } /* ========================================================= * フッター * GPマニュアル：https://docs.generatepress.com/collection/footer/ ========================================================= */ .std-footer-logo { height: auto; width: 418px; /* width: 183px; /* SVGはロゴの縦横比に合わせて横幅指定 */ margin: 0 auto; } /* フッターにカスタムメニューを設置した場合 */ @media (min-width:769px) { .site-footer .widget_nav_menu { text-align: center; } .site-footer ul.menu li { display: inline-block; list-style-type: none; margin: 0 20px 0 0; } } .site-footer ul.menu li { padding: 0 0 0 20px; } .site-footer ul.menu li::before { font-family: 'FontAwesome'; content: "\f138"; position: absolute; left : 0; color: var(--main-color); } /* フッターサイトマップ */ #footer-widgets .footer-sitemap ul li { margin-bottom: 0; } /* コピーライト */ .copyright-bar { width: 100%; } /* スマホ用CTA */ .std-mobile-cta { background-color: var(--main-color); } .std-mobile-cta > div:first-of-type { border-right: 1px solid rgba(255,255,255,0.3); } /* フッター固定のCTAとかぶらないように */ @media (max-width: 768px) { /* スマホCTA（タップでお電話）対応 */ .generate-back-to-top, .generate-back-to-top:visited { bottom: 55px; right: 10px; z-index: 200; } footer.site-info { margin-bottom: 45px; } } /* ========================================================= * コンタクトフォーム * Contact Form 7プラグイン利用 ========================================================= */ /* チェックボックス縦並び */ span.wpcf7-list-item { display: block; } /* プレイスホルダーの色指定（その他の色はカスタマイザーで設定） */ input::-webkit-input-placeholder { color: #aaa; } input:-ms-input-placeholder { color: #aaa; } input::-ms-input-placeholder { color: #aaa; } input::-moz-placeholder { color: #aaa; } input::placeholder { color: #aaa; } ::-webkit-input-placeholder { color: #aaa; } :-ms-input-placeholder { color: #aaa; } ::-ms-input-placeholder { color: #aaa; } ::-moz-placeholder { color: #aaa; } ::placeholder { color: #aaa; } /* 必須項目 */ .std-form-required { color: #fff; background: #e75757; font-size: 12px; padding: 1px 5px; margin-right: 7px; } /* ローダーとメッセージの出力位置を微調整 */ .wpcf7 .wpcf7-spinner { display: block; margin: 0.5em auto 0 auto; } .wpcf7 form .wpcf7-response-output { margin: 0; } /* ========================================================= * テーブル（基本はGeneratePressのテーブル） * .table-bb：下線付きのテーブル * .table-color：色付きのthに変更 * .table-tel：電話番号・FAX番号用 * .table-scrollでラップするとモバイル時に表を左右にスクロールさせる（3カラム以上ある場合はオススメ） ========================================================= */ /* テーブル：標準 */ table { margin: 0; background: #ffffff; } table th { text-align: left; font-weight: 500; width: 200px; /* 適宜変更 */ background-color: #f3f3f3; } table th, table td { padding: 20px; } /* テーブル：下線バージョン */ table.table-bb, table.table-bb th, table.table-bb td { border: none; } table.table-bb th { border-bottom: 1px solid #555; } table.table-bb td { border-bottom: 1px solid #ccc; } /* 先頭のみ上部にも線を引く */ table.table-bb tr:first-of-type th { border-top: 1px solid #555; } table.table-bb tr:first-of-type td { border-top: 1px solid #ccc; } /* テーブル：メインカラーバージョン */ .table-color , .table-color th, .table-color td { border: none; } .table-color th, .table-color td { border-bottom: 1px solid #fff; } .table-color th { color: var(--main-font-color); background-color: var(--main-color); } /* tdの奇数行に適応 */ .table-color tr:nth-of-type(odd) td { background: #f3f3f3; /* 背景色に合わせて微調整 */ } /* tdの偶数行に適応 */ .table-color tr:nth-of-type(even) td { background: #fafafa; /* 背景色に合わせて微調整 */ } /* テーブル：電話番号・FAX番号用 */ table.table-tel th { /* width: 50px; */ font-size: 20px; text-align: center; } table.table-tel td { font-size: 36px; line-height: 1; letter-spacing: 0; } @media (max-width: 768px){ table th, table td, table.table-color th, table.table-color td { padding: 10px; } /* table-mobile指定でレスポンシブ対応（2カラム構成のテーブルに利用） */ table.table-mobile tr, table.table-mobile th, table.table-mobile td { display: block; width: auto !important; } table.table-bb th { border-top: 1px solid #555; border-bottom: none; font-weight: 700; font-size: 18px; } table.table-bb tr:first-of-type td { border-top: none; } table.table-bb td { border-bottom: none; } table.table-bb tr:last-of-type td { border-bottom: 1px solid #ccc; } table.table-tel th { width: auto; font-size: 18px; } table.table-tel td { text-align: center; font-size: 24px; line-height: 1.8; } } /* talbeの外側にtable-scroll指定でスマホ時に横スクロール（3カラム構成以上のテーブルに利用） */ @media (max-width: 768px){ .table-scroll table { width:100%; } .table-scroll { overflow: auto; /*tableをスクロールさせる*/ white-space: nowrap; /*tableのセル内にある文字の折り返しを禁止*/ } .table-scroll::-webkit-scrollbar { /*tableにスクロールバーを追加*/ height: 5px; } .table-scroll::-webkit-scrollbar-track { /*tableにスクロールバーを追加*/ background: #F1F1F1; } .table-scroll::-webkit-scrollbar-thumb { /*tableにスクロールバーを追加*/ background: #BCBCBC; } } /* ========================================================= * リスト ========================================================= */ /* 1024pxより大きい場合はリストを複数行に */ ul.std-list-col { list-style-type: none; margin: 0; } ul.std-list-col li { padding: 0.5rem 0; border-bottom: 1px solid #ccc; } @media (min-width:1024px) { ul.std-list-col { display: flex; flex-wrap: wrap; gap: 10px 20px; } ul.std-list-col li { width: calc(33.33% - 20px); /* 3列に分割 */ height: 3.5rem; } } /* ========================================================= * ボタン（基本はGeneratePressのボタン） * 色はカスタマイザーで設定 * GPマニュアル：https://docs.generatepress.com/article/adding-buttons/ ========================================================= */ /* ボタンのFontAwesome */ a.button i.fa { color: #fff; } a:hover.button i.fa { color: #fff; } /* FontAwesomeとの境界に縦線を入れる場合 */ .button i.left { border-right: 1px solid rgba(255, 255, 255, .2); margin-right: 5px; padding-right: 10px; } .button i.right { border-left: 1px solid rgba(255, 255, 255, .2); margin-left: 5px; padding-left: 10px; } /* シースルー（白） */ .button.see-white { background-color: transparent; color: #fff; font-weight: normal; border: 2px solid #fff; } /* シースルー（黒） */ .button.see-black { background-color: transparent; color: #333; font-weight: normal; border: 2px solid #333; } .button.see-black i.fa { color: #333; } .button.see-black i.fa.left, .button.see-black i.fa.right { border-color: #333; } /* シースルーホバー時 */ .button.see-white:hover, .button.see-black:hover { background-color: var(--main-color); border: 2px solid var(--main-color); color: var(--main-font-color); } .button.see-white:hover i, .button.see-black:hover i { color: var(--main-font-color); } .button.see-black:hover i.left, .button.see-black:hover i.right { border-color: #fff; } /* 追加したい色は各自指定 */ .button.red, .button.red:visited { background: #c81e32; color: #FFF; } .button.red:hover { background: #b91629; } /* ========================================================= * スクロールバー * malihu custom scrollbar plugin（JS）利用 * GitHub https://github.com/malihu/malihu-custom-scrollbar-plugin * DEMO http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html ========================================================= */ .std-scroller { height: 230px; /* 高さ適宜調整 */ overflow: auto; } /* スクロールバーの色（標準は黒） */ .std-scroller .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { /* background-color: rgba(0,0,0,.75); */ background-color: var(--main-color); opacity: 0.9; } /* ホバー */ .std-scroller .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ /* background-color: rgba(0,0,0,.85); */ background-color: var(--main-color); } /* アクティブ */ .std-scroller .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .std-scroller .mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ /* background-color: rgba(0,0,0,.9); */ background-color: var(--main-color); } /* ========================================================= * トップページ：メインビジュアル * 外観>Elements>トップページ（Header） * GPマニュアル：https://docs.generatepress.com/collection/elements/ ========================================================= */ .std-mainimg .std-maincopy { font-family: var(--main-font-en); font-size: 84px; font-weight: 400; line-height: 1.2; text-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 0 4px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 0, 0, 0.1), 0 0 12px rgba(0, 0, 0, 0.1); margin-bottom: 30px; } .std-mainimg .std-subcopy { font-size: 20px; font-weight: 500; line-height: 1.5; text-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 0 4px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 0, 0, 0.1), 0 0 12px rgba(0, 0, 0, 0.1); margin-bottom: 40px; } @media (max-width: 768px) { /* スマホ表示のときは、ページヘッダーのイメージ変更 */ .home .page-hero { /* background-image: url('https://..../mb-main.jpg'); */ } .std-mainimg .std-maincopy { font-size: 60px; } .std-mainimg .std-subcopy { font-size: 18px; } } /* ========================================================= * 最新情報表示 * Post Snippetsプラグインに出力用PHPを記載 * info1row、info2row、info1row-childcat ========================================================= */ .std-bg-info { color: var(--main-color); border: solid 1px var(--main-color); width: 140px; max-width: 140px; text-align: center; border-radius: 0.25rem; } /* std-bg-xxxとしてカテゴリーのスラッグ毎に指定可能 */ .std-bg-news { } /* ========================================================= * 見出しデザイン * lv1…ページヘッダーで利用 * lv2…本文内で利用 * text…lv1、lv2の飾りテキスト * フォントサイズはh1、h2、h3などの見出しに準じる ========================================================= */ .std-heading-wrap { margin-bottom: 2.5rem; text-align: center; } .std-heading-lv1, .std-heading-lv2 { color: #fff; font-family: var(--font-rounded-jp) !important; font-weight: 500; letter-spacing: 0.1rem; /* フォントに応じて調整 */ line-height: 1; margin: 0; position: relative; display: inline-block; } .std-heading-lv2 { color: var(--main-color); } .std-heading-lv2.white { color: #fff; } .std-heading-lv1::after, .std-heading-lv2::after { content: ""; position: absolute; bottom: -25px; /* std-heading-textのmargin-topの値と合わせ調整 */ left: 0; right: 0; width: 48px; /* 任意で変更 */ height: 8px; /* 任意で変更 */ margin: 0 auto; display: block; background: url(https://sumiyoshi-clinic.net/wp/wp-content/uploads/bg_ttldot.png) top center no-repeat; background-size: 100% auto; } .std-heading-lv1::after { content: none; } .std-heading-lv2.white::after { background-color: none; } .std-heading-text { color: var(--main-color); text-transform: uppercase; font-family: var(--main-font-en); margin-top: 40px; margin-bottom: 0px; font-size: 15px; font-weight: 400; line-height: 1.3; letter-spacing: 0.25rem; } .page-hero .std-heading-text { margin-top: 10px; font-size: 18px; } .std-heading-text.white { color: #fff; } /* 見出しに下線 */ .std-title-line { text-align: center; margin-bottom: 20px; } .std-title-line { padding-bottom: 20px; position: relative; } .std-title-line::after { background-color: var(--main-color); content: ""; position: absolute; bottom: 0px; left: 50%; width: 30px; margin-left: -15px; height: 3px; } /* ========================================================= * ニュースティッカー * GP：Elementsで編集 * Header > Page Hero > Element Classesにstd-tickerクラスを指定 ========================================================= */ .page-hero.std-ticker { position: relative; } .std-ticker-wrap { overflow: hidden; position: absolute; z-index: 9; bottom: 0; left: 0; right: 0; height: 50px; background-color: var(--main-color); /* flexbox */ display: flex; } /* 768px以上の場合1300px上限 */ @media (min-width: 768px) { .std-ticker-wrap { max-width: 1300px; width: calc(100% - 200px); min-width: 1000px; margin: 0 auto; } } .std-ticker-item { display: flex; justify-content: center; align-items: center; } .std-ticker-item.std-ticker-title { width: 200px; line-height: 50px; text-align: center; background-color: #111; font-size: 1.2em; } .std-ticker-item.std-ticker-text { flex: 1; position: relative; text-align: left; font-size: 1em; } .std-ticker-text ul { margin: 0; padding: 0; line-height: 50px; } .std-ticker-text ul li { padding: 0 1.5em; display: none; width: calc( 100% - 3em); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .std-ticker-date { color: rgba(255, 255, 255, 0.8); margin-right: 1em; } @media (max-width: 768px) { .std-ticker-item.std-ticker-title { width: auto; font-size: 1em; padding: 0 10px; } .std-ticker-item.std-ticker-text { font-size: 0.85em; } .std-ticker-text ul li { padding: 0 1em; width: calc( 100% - 2em); } } /* ========================================================= * 背景スライドショー：KenBurns（CSSのみで実装）（不要な場合は削除） * GP：Elementsで編集 * Header > Page Hero > Element Classesにstd-slideクラスを指定 * 参考　https://codepen.io/ibanez182/pen/LZPgrY * 2枚バージョンのCSS　https://codepen.io/xxx-web/pen/ExPwrLe * 3枚バージョンのCSS　https://codepen.io/xxx-web/pen/ebMWVP * 4枚バージョンのCSS　https://codepen.io/xxx-web/pen/wRmdye * 5枚バージョンのCSS　https://codepen.io/xxx-web/pen/ebMWqo ========================================================= */ .page-hero.std-slide { position: relative; overflow: hidden; } .std-slide .std-mainimg { position: relative; z-index: 9; /* スライドの枚数以上、10以下指定（GPのスティッキーナビの下になるように） */ /* background-color: rgba(255, 255, 255, 0.75); -webkit-box-shadow: 0 1em 2em -1em rgba(0, 0, 0, 0.5); box-shadow: 0 1em 2em -1em rgba(0, 0, 0, 0.5); padding: 1em 2em; */ } .std-slideshow { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .std-slideshow-image { position: absolute; width: 100%; height: 100%; background: no-repeat 50% 50%; background-size: cover; -webkit-animation-name: kenburns; animation-name: kenburns; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;    -webkit-animation-duration: 18s; animation-duration: 18s; opacity: 1; transform: scale(1); } .std-slideshow-image:nth-child(1) { -webkit-animation-name: kenburns-1; animation-name: kenburns-1; z-index: 2; } .std-slideshow-image:nth-child(2) { -webkit-animation-name: kenburns-2; animation-name: kenburns-2; z-index: 1; } .std-slideshow-image:nth-child(3) { -webkit-animation-name: kenburns-3; animation-name: kenburns-3; z-index: 0; } @-webkit-keyframes kenburns-1 { 0% { opacity: 1; transform: scale(1.1); } 1.5625% { opacity: 1; } 31.7675% { opacity: 1; } 34.8925% { opacity: 0; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1); } 98% { opacity: 0; transform: scale(1.1117647059); } 100% { opacity: 1; } } @keyframes kenburns-1 { 0% { opacity: 1; transform: scale(1.1); } 1.5625% { opacity: 1; } 31.7675% { opacity: 1; } 34.8925% { opacity: 0; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1); } 98% { opacity: 0; transform: scale(1.1117647059); } 100% { opacity: 1; } } @-webkit-keyframes kenburns-2 { 31.7675% { opacity: 1; transform: scale(1.1); } 34.8925% { opacity: 1; } 65.0975% { opacity: 1; } 68.2225% { opacity: 0; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1); } } @keyframes kenburns-2 { 31.7675% { opacity: 1; transform: scale(1.1); } 34.8925% { opacity: 1; } 65.0975% { opacity: 1; } 68.2225% { opacity: 0; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1); } } @-webkit-keyframes kenburns-3 { 65.0975% { opacity: 1; transform: scale(1.1); } 68.2225% { opacity: 1; } 98.4375% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } } @keyframes kenburns-3 { 65.0975% { opacity: 1; transform: scale(1.1); } 68.2225% { opacity: 1; } 98.4375% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } } /* ========================================================= * 背景動画（不要な場合は削除） * GP：Elementsで編集 * Header > Page Hero > Element Classesにstd-videoクラスを指定 ========================================================= */ .page-hero.std-video { position: relative; overflow: hidden; /* 動画へのオーバーレイ指定 */ /* background-image: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%); */ background-image: url(https://web-supporter.info/img/dot1.png); } .std-video .std-mainimg { position: relative; z-index: 1; } .std-background-video { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0.55; /* ElementのBackground Colorや上記page-heroで指定した背景色やドットをオーバーレイする場合は0.Xで指定 */ } video[poster] { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; font-family: 'object-fit: cover;'; /*IE対策*/ } /* ========================================================= * サイトオリジナルのCSS（わかりやすくコメントを記載してください） ========================================================= */ .text-main{ color: var(--main-color)!important; } .text-sub{ color: var(--sub-color)!important; } .text-accent{ color: var(--accent-color)!important; } .text-black{ color: #333!important; } .text-grd{ /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#dd7786+0,eaa8b7+44,8acdd8+59,2eacb5+100 */ background: linear-gradient(135deg, #dd7786 0%,#eaa8b7 44%,#8acdd8 59%,#2eacb5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .bg-main{ background-color: var(--main-color)!important; } .bg-sub{ background-color: var(--sub-color)!important; } .bg-accent{ background-color: var(--sub-accent)!important; } .bg-ivory{ background-color: #f3f1ec!important; } .bg-pl-aqua{ background-color: #e6f2f3!important; } .bg-pl-pink{ background-color: #f8eaec!important; } .bg-neutral-50 { background-color: #fafafa; } .bg-neutral-100 { background-color: #f5f5f5; } .bg-neutral-200 { background-color: #e5e5e5; } .bg-neutral-300 { background-color: #d4d4d4; } .bg-neutral-400 { background-color: #a3a3a3; } .bg-neutral-500 { background-color: #737373; } .bg-neutral-600 { background-color: #525252; } .bg-neutral-700 { background-color: #404040; } .bg-neutral-800 { background-color: #262626; } .bg-neutral-900 { background-color: #171717; } .bg-neutral-950 { background-color: #0a0a0a; } .border-neutral-50 { border-color: #fafafa; } .border-neutral-100 { border-color: #f5f5f5; } .border-neutral-200 { border-color: #e5e5e5; } .border-neutral-300 { border-color: #d4d4d4; } .border-neutral-400 { border-color: #a3a3a3; } .border-neutral-500 { border-color: #737373; } .border-neutral-600 { border-color: #525252; } .border-neutral-700 { border-color: #404040; } .border-neutral-800 { border-color: #262626; } .border-neutral-900 { border-color: #171717; } .border-neutral-950 { border-color: #0a0a0a; } /*----------------------------------------------------------------------------------------------- * ボタン * --------------------------------------------------------------------------------------------*/ .btn-rounded{ border-radius: 1.5rem; } button, html input[type="button"], input[type="reset"], input[type="submit"] { border-radius: 1.5rem; } .button.font-medium{ font-weight: 500!important; } .button.block{ display: block!important; } a.generate-back-to-top { border-radius: 50%; } .btn-border{ outline: 1.5px solid var(--main-color); outline-offset: -1.5px; background-color: transparent!important; color: var(--main-color)!important; transition: all 0.3s ease; } .btn-border i{ color: var(--main-color)!important; } .btn-border:hover{ outline: 1.5px solid var(--main-color-hover); color: var(--main-color-hover)!important; } .btn-border:hover i{ color: var(--main-color-hover)!important; } /*----------------------------------------------------------------------------------------------- * テーブル * --------------------------------------------------------------------------------------------*/ .table-simple{ border: none; border-collapse: collapse; } .table-simple th, .table-simple td{ border: none; border-bottom: solid 1px#d4d4d4; } .table-simple tr:last-child th, .table-simple tr:last-child td{ border: none; } /*----------------------------------------------------------------------------------------------- * タイトル * --------------------------------------------------------------------------------------------*/ .ttl-border{ position: relative; padding: 0.5em 0; } .ttl-border::before{ content: ""; display: block; position: absolute; top: 0%; width: 100%; height: 1px; background: #57b2b6; opacity: 0.3; } .ttl-border::after{ content: ""; display: block; position: absolute; top: 100%; width: 100%; height: 2px; border-radius: 1px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ef858c+10,57b2b6+10,57b2b6+10 */ background: linear-gradient(135deg, #ef858c 10%,#57b2b6 10%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } .ttl-arrow{ position: relative; border-bottom: solid 2px var(--main-color); } .ttl-arrow::after { top: 100%; left: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-top-color: var(--main-color); border-width: 16px; margin-left: -16px; } /*----------------------------------------------------------------------------------------------- * ヘッダー・ナビ調整 * --------------------------------------------------------------------------------------------*/ .page-hero{ border-radius: 0.75rem; margin: 20px; max-width: 1600px; background-position: center top; } .sections-no-sidebars .std-breadcrumbs { padding: 20px; } .mobile-header-navigation .inside-navigation{ align-items: center; } .site-logo.mobile-header-logo img.is-logo-image { height: 80px; width: auto; } .main-navigation .main-nav ul ul li a { line-height: normal; font-size: 16px; border-bottom: solid 1px #fff; } .main-navigation.slideout-navigation .main-nav ul ul li a { font-size: 15px; border-top: dotted 1px #ccc; border-bottom: none; padding: 12px 0px 12px 35px; } #generate-slideout-menu .slideout-menu > li.sfHover { border-bottom: none; } @media (max-width: 1260px) { .page-hero{ margin: 10px; } .main-navigation.has-branding .inside-navigation.grid-container { padding: 10px!important; } } @media (max-width: 1024px) { .main-navigation.has-branding .inside-navigation.grid-container { padding: 5px 0 0 0!important; } .site-logo.mobile-header-logo img.is-logo-image { height: 70px; width: auto; } } /*----------------------------------------------------------------------------------------------- * フッター調整 * --------------------------------------------------------------------------------------------*/ .site-footer ul.menu li::before { font-family: 'FontAwesome'; content: "\f054"; position: absolute; left: 0; font-size: 11px; color: #fff !important; display: inline-block; /* line-height: 0; */ background: var(--main-color); border-radius: 50%; padding: 2.5px 5px 2px 9px; vertical-align: middle; margin-right: 3px; transform: scale(0.65); text-align: center; position: relative; top: -0.15em; } .site-footer ul.menu li { padding: 0px; margin: 0 10px 0 0; } .site-footer ul.menu li a{ color: #333; font-size: 15px; } .site-footer ul.menu li a:hover{ color: var(--main-color-hover); } /*----------------------------------------------------------------------------------------------- * コーナー背景 * --------------------------------------------------------------------------------------------*/ .bg-r{position: relative;} .bg-r::before,.bg-r::after{ content: ""; display: block; width: 22px; height: 22px; background: url(https://sumiyoshi-clinic.net/wp/wp-content/uploads/bg-round.svg); position: absolute; z-index: 10; } .bg-r-lb::before{ top: -22px; left: 0; } .bg-r-lb::after{ right: -21px; bottom: 0; } .bg-r-tt::before{ top: 0; left: -22px; transform: rotate(180deg); } .bg-r-tt::after{ top: 0; right: -21px; transform: rotate(90deg); } .bg-r-tl::before{ top: 0; right: -22px; transform: rotate(90deg); } .bg-r-tl::after{ top: 100%; transform: rotate(90deg); } /*----------------------------------------------------------------------------------------------- * トップページ * --------------------------------------------------------------------------------------------*/ @media (min-width: 1260px) { .home .page-hero{ min-height: calc( 100vh - 40px ); } .home.admin-bar .page-hero{ min-height: calc( 100vh - 72px ); } .std-slide .inside-page-hero{ min-height: 800px; } } @media (min-width: 1024px) and (max-width: 1259px) { .home .page-hero{ min-height: calc( 100vh - 100px ); } .home.admin-bar .page-hero{ min-height: calc( 100vh - 132px ); } .std-slide .inside-page-hero{ min-height: 800px; } } @media (min-width: 768px) and (max-width: 1023px) { .home .page-hero{ min-height: calc( 100vh - 136px ); } .home.admin-bar .page-hero{ min-height: calc( 100vh - 176px ); } .std-slide .inside-page-hero{ min-height: 650px; } } @media (max-width: 767px) { .home .page-hero{ height: calc( 100vh - 136px ); max-height: 680px!important; min-height: 500px; } .home.admin-bar .page-hero{ height: calc( 100vh - 176px ); max-height: 680px!important; } } .std-slide{ max-width: 1800px; margin-inline: auto; margin: 20px 20px 0 20px; } .std-slide .slide-copy{ writing-mode: vertical-rl; color: var(--main-color); position: absolute; top: -1px; right: 10%; z-index:10; font-size: 38px; font-weight: 500; } .std-slide .slide-copy::after { content: ""; position: absolute; top: 8px; left: 0; right: 0; width: 52px; height: 10px; margin: 0 auto; display: block; background: url(https://sumiyoshi-clinic.net/wp/wp-content/uploads/bg_ttldot.png) top center no-repeat; background-size: 100% auto; } .std-slide .slide-copy > div{ padding: 1.2em 1em 1.5em 1em ; background: #fff; border-radius: 0 0 0.5rem 0.5rem; } .std-slide .slide-copy .slide-copy-area{ font-size: 18px; display: block; color: var(--sub-color); margin-top: 2px; } .std-slide .slide-copy .slide-copy-s{ font-size: 80%; padding: 0.1em 0; } .std-slide .slide-txt { position: absolute; bottom: -1px; left: 0%; z-index:10; } .slide-txt-i{ position: absolute; top: 5px; right: 10px; width: 150px; height: 80px; transform: translatey(-40%); opacity: 0.9; } .std-slide .slide-txt > div{ padding: 20px 35px 10px 20px; border-radius: 0 0.75rem 0 0; font-size: 18px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+55,ffffff+55,ffffff+100&1+73,0.92+100 */ background: linear-gradient(45deg, rgba(255,255,255,1) 55%,rgba(255,255,255,1) 73%,rgba(255,255,255,0.92) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } .std-slide .slide-txt .open-date{ font-weight: bold; font-size: 26px; position: absolute; top: 6px; left: 26%; display: flex; align-items: center; } .std-slide .slide-txt .open-date::before, .std-slide .slide-txt .open-date::after{ content: ""; display: block; width: 25px; height: 1px; background: var(--accent-color); margin: 1px 10px; } .std-slide .slide-txt .open-date span{ font-weight: 500; font-size: 70%; } .std-slide .slide-txt .open-date span.open{ font-weight: 500; font-size: 80%; } .std-slide .slide-txt span.sans-en{ font-weight: 900; font-size: 26px; } .top-open-greeting{ /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f3f1ec+0,fcfbf9+60,f3f1ec+99 */ background: linear-gradient(135deg, #f3f1ec 0%,#fcfbf9 60%,#f3f1ec 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ position: relative; } .top-open-logo{ position: absolute; right: 4%; top: -7%; width: 21.5%; } @media (max-width: 1500px) { .std-slide .slide-copy{ transform-origin: right top; transform: scale(0.9); right: 7%; } .std-slide .slide-copy > div { padding: 1.2em 0.7em 1em 0.7em; } .std-slide .slide-txt{ transform-origin: left bottom; transform: scale(0.95); } } @media (max-width: 1260px) { .std-slide{ margin: 10px 10px 0 10px; } .std-slide .slide-copy{ transform-origin: right top; transform: scale(0.9); right: 7%; } .std-slide .slide-copy > div { padding: 1.2em 0.7em 1em 0.7em; } .std-slide .slide-txt{ transform-origin: left bottom; transform: scale(0.9); } } @media (max-width: 1024px) { .std-slide .slide-copy{ font-size: 28px; transform: scale(1); } } @media (max-width: 767px) { .std-slide{ margin: 10px 10px 0 10px; } .std-slide .slide-copy{ font-size: 28px; transform: scale(1); } .std-slide .slide-copy .slide-copy-area { font-size: 15px; } .std-slide .slide-txt{ transform: scale(1); max-width: 80%; } .std-slide .slide-txt > div{ font-size: 15px; line-height: 1.5em; padding: 10px 25px 10px 0px; } .std-slide .slide-txt .slide-txt-logo img { margin: 15px 0 10px 0; } .std-slide .slide-txt .slide-txt-logo .open-date { font-size: 20px; top: 8px; left: 5%; } .std-slide .slide-txt .slide-txt-i { top: -20px; right: -60px; width: 120px; height: 65px; } } @media (max-width: 639px) { .std-slide .slide-copy{ font-size: 5vw; transform: scale(1); right: -10px; } .std-slide .slide-copy .slide-copy-area { font-size: 14px; } .std-slide .slide-copy::after { top: 4px; } .std-slide .slide-txt > div{ font-size: 15px; line-height: 1.5em; padding: 10px 25px 10px 0px; } .std-slide .slide-txt .slide-txt-logo .open-date { font-size: 20px; top: 8px; left: 5%; } } .section-top-menu .top-menu a .h3{ position: absolute; top: 0; left: 0; } .section-top-menu .top-menu a .h3 > span{ display: block; position: relative; background: #fff; padding: 0 0.75em 0.5em 0; border-radius: 0 0 0.5rem 0; } .section-top-menu .top-menu > div:nth-child(2) a .h3{ top: 101%; left: 0; transform: translateY(-100%); } .section-top-menu .top-menu > div:nth-child(2) a .h3 > span{ display: block; padding: 0.5em 0.75em 0.5em 0; border-radius: 0 0.5rem 0 0; } .section-top-menu .top-menu a .h3::after { content: ""; position: absolute; top: -15px; left: 5px; right: 0; width: 40px; height: 8px; margin: 0 auto 0 0; display: block; background: url(https://sumiyoshi-clinic.net/wp/wp-content/uploads/bg_ttldot.png) top center no-repeat; background-size: 100% auto; } .section-top-menu .top-menu > div:nth-child(2) a .h3::after { content: ""; position: absolute; top: 100%; left: 5px; right: 0; margin-top: 5px; } .section-top-menu .top-menu a.cursor-default:hover img{ opacity: 1; } .top-menu a .fa-chevron-right{ color: #fff!important; font-size: 11px; background: var(--main-color); border-radius: 50%; padding: 6px 5px 6px 8px; vertical-align: middle; margin-right: 3px; transform: scale(0.7); text-align: center; position: relative; top: -0.15em; } .section-top-service .top-service{ max-width: 960px; margin-inline: auto; } .section-top-service .top-service a{ padding: 16px 10px 25px 10px; border-radius: 0.5rem; background: rgba(255,255,255,0.9); font-size: 18px; line-height: 1.4em; font-family: var(--font-rounded-jp); letter-spacing: 0.05em; font-weight: 500; } .section-top-service .top-service > div:nth-child(1) a{ font-size: 20px; } .top-service a .fa-chevron-right{ color: #fff!important; font-size: 11px; background: var(--main-color); border-radius: 50%; padding: 6px 5px 6px 8px; vertical-align: middle; margin-right: 1px; transform: scale(0.7); text-align: center; position: relative; top: -0.15em; } @media (max-width: 767px) { .section-top-service .top-service a { padding: 10px 5px; font-size: 16px; line-height: 1.2; letter-spacing: 0.01em; } .top-service a .fa-chevron-right { padding: 6px 6px 6px 8px; margin-right: 0; } .section-top-service .top-service > div:nth-child(2) a img{ width: 110px; height: auto; } } .top-recruit{ position: relative; } .top-recruit::after { content: ""; position: absolute; top: 80%; left: 30px; width: 180px; height: 100px; margin: 0 auto; display: block; background: url(https://sumiyoshi-clinic.net/wp/wp-content/uploads/i_dot.png) top center no-repeat; background-size: 100% auto; transform: scaleX(-1); opacity: 0.9; } .top-recruit .top-recruit-inner{ position: relative; background-color: #f3f1eb; position: relative; background: url(https://sumiyoshi-clinic.net/wp/wp-content/uploads/top_recruit.jpg) bottom right no-repeat #f3f1eb; background-size: 460px auto; min-height: 300px; padding: 40px; } .top-recruit .top-recruit-inner p{ text-shadow: 0px 0px 10px rgba(243, 241, 235, 1),0px 0px 10px rgba(243, 241, 235, 1),0px 0px 10px rgba(243, 241, 235, 1),0px 0px 10px rgba(243, 241, 235, 1),0px 0px 12px rgba(243, 241, 235, 0.5); } .top-recruit .top-recruit-ttl{ background: none; position: relative; text-align: center; bottom: -0.6em; z-index: 10; display: flex; justify-content: center; align-items: center; color: var(--accent-color); font-size: 32px; } .top-recruit .top-recruit-ttl::before, .top-recruit .top-recruit-ttl::after{ content: ""; display: block; width: 2px; height: 35px; border-radius: 2px; background: var(--accent-color); transform: rotate(-35deg); margin: 5px 20px -5px 0; } .top-recruit .top-recruit-ttl::after{ transform: rotate(30deg); margin: 5px 0 -5px 10px; } .top-recruit .top-recruit-ttl > span{ position: relative; } .top-recruit .top-recruit-ttl > span::after { content: ""; position: absolute; bottom: -35px; left: 0; right: 0; width: 48px; height: 8px; margin: 0 auto; display: block; background: url(https://sumiyoshi-clinic.net/wp/wp-content/uploads/bg_ttldot.png) top center no-repeat; background-size: 100% auto; } @media (max-width:1024px) { .top-recruit .top-recruit-inner{ background-size: 45% auto; } } @media (max-width: 767px) { .top-recruit .top-recruit-ttl { font-size: 4.5vw; line-height: 1.2em; bottom: -1em; } .top-recruit .top-recruit-inner{ background-size: 45% auto; } } @media (max-width: 639px) { .top-recruit .top-recruit-ttl { font-size: 6vw; line-height: 1.2em; bottom: -1em; } .top-recruit .top-recruit-inner{ background-size: 100% auto; padding: 20px; padding-bottom: 70%; overflow: visible; } .top-recruit::after { top: 55%; left: 5%; width: 45%; height: 300px; } .top-recruit .top-recruit-inner .button{ position: absolute; top: 100%; left: 50%; transform: translate(-50%, -50%); } } /*----------------------------------------------------------------------------------------------- * 医院概要 * --------------------------------------------------------------------------------------------*/ /* 院長挨拶 */ dl.msg-career{ display: grid; grid-template-columns: 120px 1fr; } dl.msg-career dt, dl.msg-career dd{ margin: 0; padding: 8px; border-bottom: dotted 1px #d4d4d4; } dl.msg-career dt{ text-align: right; font-weight: 500; color: var(--main-color); } @media (max-width: 767px) { dl.msg-career{ display: block; } dl.msg-career dt{ border-bottom: none; text-align: left; padding-bottom: 0; margin-bottom: -4px; } } /* 医師紹介 */ .doctors{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .doctors .d-info{ border: dotted 1px #d4d4d4; } .doctors .d-info .d-name{ position: relative; padding-top: 55px; height: 160px; } .doctors .d-info .d-name::before{ content: ""; display: block; width: 150px; height: 150px; position: absolute; top: 0%; left: 50%; transform: translateX(-50%); background-color: #e6f2f3; border-radius: 50%; } .doctors .d-info.d-info-pink .d-name::before{ background-color: #f5e5e7; } .doctors .d-info ul{ position: relative; } @media (max-width:1500px) { .doctors{ grid-template-columns: repeat(1, minmax(0, 1fr)); } } @media (max-width: 768px) { .doctors .d-info ul{ max-width: 400px; margin-inline: auto; } } /*----------------------------------------------------------------------------------------------- * 診療内容 * --------------------------------------------------------------------------------------------*/ .service-list > div ul li:nth-child(odd){ background-color: #f5f5f5; border-radius: 0.5rem; } @media (max-width:1023px) { .service-list > div:nth-child(even) ul li:nth-child(odd){ background-color: #fff; } .service-list > div:nth-child(even) ul li:nth-child(even){ background-color: #f8eaec; } } /*----------------------------------------------------------------------------------------------- * よくあるご質問 * --------------------------------------------------------------------------------------------*/ .faq-list{ max-width: 1100px; margin-inline:auto; } .faq-list dt{ padding: 10px; margin: 10px 0; color: var(--main-color); font-family: var(--font-rounded-jp); font-weight:500; font-size: 22px; display: flex; background-color: #f3f1ec; border-radius: 0.5rem; } .faq-list dd{ padding: 10px; margin: 10px 0 20px 0; display: flex; } .faq-list dt .faq-q{ display: block; font-size: 26px; font-family: var(--font-sans-en); font-weight: 500; width: 40px; height: 40px; border-radius: 50%; text-align: center; background: var(--main-color); color: #fff; line-height: 1.4em; flex-shrink: 0; margin-right: 10px; } .faq-list dd .faq-a{ display: block; font-size: 28px; font-family: var(--font-sans-en); font-weight: 600; width: 40px; height: 40px; color: var(--main-color); line-height: 1.4em; flex-shrink: 0; margin-right: 10px; text-align: center; } .faq-nav ul li a{ display: block; padding: 0.25em; border-bottom: dotted 1px #a3a3a3; } .faq-nav ul li:last-child a{ border-bottom: none; } .faq-nav ul li a .fa-chevron-right{ color: #fff!important; font-size: 11px; background: var(--main-color); border-radius: 50%; padding: 6px 5px 6px 8px; vertical-align: middle; margin-right: 4px; transform: scale(0.7); text-align: center; position: relative; top: -0.15em; } @media (max-width: 1023px) { .faq-nav a:nth-child(7),.faq-nav a:nth-child(8){ border-bottom: dotted 1px #a3a3a3; } } @media (max-width: 768px) { .faq-list dt{ padding: 10px; margin: 10px 0; font-size: 18px; line-height: 1.4em; } .faq-list dd{ padding: 10px; margin: 10px 0 20px 0; } .faq-list dt .faq-q{ font-size: 20px; width: 34px; height: 34px; line-height: 1.6em; } .faq-list dd .faq-a{ font-size: 24px; width: 34px; height: 34px; } } /*----------------------------------------------------------------------------------------------- * 採用情報 * --------------------------------------------------------------------------------------------*/ .recruit-nav a{ display: block; padding: 0.5em; } .recruit-nav a .fa-chevron-right{ color: #fff!important; font-size: 11px; background: var(--main-color); border-radius: 50%; padding: 6px 5px 6px 8px; vertical-align: middle; margin-right: 4px; transform: scale(0.7); text-align: center; position: relative; top: -0.15em; } @media (max-width: 1023px) { .recruit-nav a:nth-child(1){ border-bottom: dotted 1px #a3a3a3; } } /*----------------------------------------------------------------------------------------------- * はじめての方へ * --------------------------------------------------------------------------------------------*/ /* 診察時間テーブ */ .clinic-hour{ margin: 20px 0; } .table-hour-note{ list-style: none; display: flex; justify-content: center; gap: 15px; font-weight: 500; padding: 10px 0 15px 5px; margin: 0; } .table-hour-note span{ letter-spacing: -0.1em; font-size: 13px; opacity: 0.8; font-weight: 400; } .clinic-hour .clinic-hour-close{ font-size: 110%; } .table-hour{ padding: 15px; border: solid 1px #d4d4d4; border-radius: .5rem; } .page-first .table-hour{ border: none; } .table-hour table, .table-hour table th, .table-hour table td{ border: none; text-align: center; } .table-hour table{ text-align: center; } .table-hour table th, .table-hour table td{ padding: 15px 5px; } .table-hour table th{ background: none; } .table-hour table thead{ overflow: hidden; } .table-hour table thead th{ background: none; font-size: 18px; padding: 10px 5px; border-bottom: solid 2px #c0c0c0; border-left: dotted 1px #c0c0c0; } .table-hour table thead th:nth-child(1) { border-left: none; } .table-hour table thead tr th:first-child{ border-radius: 0.5rem 0 0 0; } .table-hour table thead tr th:last-child{ border-radius: 0 0.5rem 0 0; } .table-hour table tbody th > span{ line-height: 1.3em; margin: 0.2em 0; } .table-hour table tbody th .hour-am, .table-hour table tbody th .hour-pm{ font-size: 22px; line-height: 1.2em; } .table-hour table tbody tr:nth-child(1) th, .table-hour table tbody tr:nth-child(1) td{ border-bottom: solid 1px #d4d4d4; } .table-hour table tbody td{ vertical-align: top; border-left: dotted 1px #d4d4d4; } .table-hour table tbody td img{ display: block; margin: 0 auto; } .table-hour table tbody td img:nth-child(1){ margin: 3px auto 7px auto; } .table-hour table tbody td.icon-bottom img{ margin-top: 28px; display: block; } .table-hour table tbody td.close{ vertical-align: middle; color: var(--main-color); font-size: 110%; } /* 診察時間テーブル（フッター） */ .site-footer .clinic-hour{ font-size: 14px; letter-spacing: 0.1em; } .site-footer .table-hour{ width: 80%; margin: 0 auto; } .site-footer .table-hour{ padding: 5px; } .site-footer .table-hour-note{ padding: 10px 5px; } .site-footer .table-hour table th, .site-footer .table-hour table td{ padding: 8px; font-size: 15px; } .site-footer .table-hour table tbody th{ font-size: 14px; } .site-footer .table-hour table tbody th .hour-am, .site-footer .table-hour table tbody th .hour-pm { font-size: 17px; line-height: 1.3em; } .site-footer .table-hour table tbody td.close { font-size: 16px; } .site-footer table tbody td img{ width: 15px; } .site-footer table tbody td img:nth-child(1){ margin-top: 10px; } .site-footer .table-hour table tbody td.icon-bottom img{ margin-top: 31px; display: block; } @media (max-width: 767px) { .table-hour { padding: 5px; } .table-hour-note{ flex-direction: column; gap: 4px; align-items: start; max-width: 250px; margin: 0 auto; } .table-hour table thead th { font-size: 15px; padding: 5px; } .table-hour table tbody th > span:nth-child(2){ display: none; } .table-hour table th, .table-hour table th { padding: 10px 5px; } .table-hour table tbody th .hour-am, .table-hour table tbody th .hour-pm { font-size: 17px; line-height: 1.3em; } .table-hour table tbody td { width: 15px; } .table-hour table tbody td img{ width: 15px; } .table-hour table tbody td.icon-bottom img { margin-top: 25px; } .site-footer .table-hour{ width:100%; } .site-footer .table-hour-note { gap: 0; line-height: 1em; } .site-footer .table-hour table th, .site-footer .table-hour table td{ padding: 8px 5px; font-size: 15px; } } /*----------------------------------------------------------------------------------------------- * 準備中ページ * --------------------------------------------------------------------------------------------*/ .coming-soon{ filter: brightness(1.05); opacity: 0.8; line-height: 2em; } @media (max-width: 768px) { .coming-soon{ font-size: 22px; } } /*----------------------------------------------------------------------------------------------- * アニメーション * --------------------------------------------------------------------------------------------*/ body.home{ opacity: 0; transition-duration: 1000ms; transition-delay: 200ms; } .opacity-100{ opacity: 1!important; } .sc-anim { opacity: 0; } .sc-anim.sc-show { opacity: 1; transform: none; } .sc-slideLeft { transform: translateX(-30px); } .sc-slideRight{ transform: translateX(30px); } .sc-slideUp { transform: translateY(30px); } .duration-1500{ transition-duration: 1500ms; } .duration-2000{ transition-duration: 2000ms; } .delay-1500{ transition-delay: 1500ms; }