@charset "utf-8"; /* * Shared layout & theme for DWT template pages (profile, news, menu, …). * Use on each page: * Load after common.css: */ @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600&display=swap"); html.site-shell { --pf-page: #ffffff; --pf-bg: #f7f4f0; --pf-surface: #ffffff; --pf-ink: #2c2826; --pf-ink-muted: #6b6560; --pf-accent: #a38252; --pf-accent-soft: rgba(163, 130, 82, 0.14); --pf-line: rgba(44, 40, 38, 0.1); --pf-radius: 12px; --pf-radius-sm: 8px; --pf-shadow: 0 20px 48px rgba(44, 40, 38, 0.08); --pf-ease: cubic-bezier(0.22, 1, 0.36, 1); background: var(--pf-page); } html.site-shell, html.site-shell body { font-family: "Noto Sans JP", sans-serif; } html.site-shell body { margin: 0; background: var(--pf-page); color: var(--pf-ink); min-height: 100vh; -webkit-font-smoothing: antialiased; } html.site-shell #wrapper { max-width: 720px; padding: 24px 20px 48px; margin: 0 auto; } @media (min-width: 768px) { html.site-shell #wrapper { padding: 40px 28px 56px; margin-top: 24px; } } html.site-shell #header { margin-bottom: 28px; } html.site-shell #header img { display: block; width: 100%; border-radius: var(--pf-radius); box-shadow: var(--pf-shadow); border: 1px solid var(--pf-line); } /* Breadcrumb */ html.site-shell #pankuzu { font-size: 12px; letter-spacing: 0.06em; color: var(--pf-ink-muted); padding: 0 0 20px; margin-bottom: 8px; border-bottom: 1px solid var(--pf-line); } html.site-shell #pankuzu li + li::before { content: "/"; margin: 0 10px; color: var(--pf-line); font-size: 11px; } html.site-shell #pankuzu li a { color: var(--pf-accent); font-weight: 500; text-decoration: none; transition: opacity 0.25s var(--pf-ease); } html.site-shell #pankuzu li a:hover { opacity: 0.75; text-decoration: none; } html.site-shell #pankuzu li:last-child { color: var(--pf-ink); font-weight: 500; } /* ニュース等・シンプル本文をプロフィールに近いカードで収める */ html.site-shell #content #right .shell-document { background: var(--pf-surface); border-radius: var(--pf-radius); border: 1px solid var(--pf-line); box-shadow: var(--pf-shadow); padding: 28px 22px 32px; margin-bottom: 24px; } html.site-shell #content #right .shell-document > h2:first-child { margin-top: 0; } html.site-shell #content #right .shell-document h2 { text-align: left; font-size: clamp(22px, 4vw, 28px); letter-spacing: 0.14em; font-weight: 300; margin-bottom: 1.1rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--pf-line); } html.site-shell #content #right .shell-document p { line-height: 1.85; letter-spacing: 0.03em; } html.site-shell #content #right .shell-document p + p { margin-top: 1em; } @media (min-width: 640px) { html.site-shell #content #right .shell-document { padding: 36px 36px 40px; } } /* 女性メニューなど・ソフトなローズのアクセント */ html.site-shell #content #right .shell-document--female-tone { background: linear-gradient( 180deg, rgba(184, 135, 168, 0.09) 0%, rgba(184, 135, 168, 0) 26% ), var(--pf-surface); border-color: rgba(184, 135, 168, 0.24); box-shadow: var(--pf-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.9); } html.site-shell #content #right .shell-document--female-tone > h2 { color: #944f7a; border-bottom-color: rgba(184, 135, 168, 0.28); } html.site-shell #content #right .shell-document--female-tone .img_center img { border-radius: var(--pf-radius-sm); border: 1px solid rgba(157, 95, 133, 0.28); vertical-align: middle; } /* 男性メニューなど・クールなスレートのアクセント */ html.site-shell #content #right .shell-document--male-tone { background: linear-gradient( 180deg, rgba(74, 101, 130, 0.09) 0%, rgba(74, 101, 130, 0) 26% ), var(--pf-surface); border-color: rgba(74, 101, 130, 0.22); box-shadow: var(--pf-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.85); } html.site-shell #content #right .shell-document--male-tone > h2 { color: #3d5a73; border-bottom-color: rgba(74, 101, 130, 0.26); } html.site-shell #content #right .shell-document--male-tone .img_center img { border-radius: var(--pf-radius-sm); border: 1px solid rgba(74, 101, 130, 0.28); vertical-align: middle; } /* メニュートップ（男女への分岐） */ html.site-shell #content #right .shell-document--menu-hub > h2 { text-align: center; letter-spacing: 0.26em; font-weight: 300; margin-bottom: 1.35rem; } html.site-shell #content #right .menu-hub-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: clamp(14px, 4vw, 28px); } html.site-shell #content #right .menu-hub-grid a { display: block; flex: 1 1 220px; max-width: 360px; border-radius: var(--pf-radius-sm); overflow: hidden; line-height: 0; transition: transform 0.3s var(--pf-ease), box-shadow 0.3s var(--pf-ease); } html.site-shell #content #right .menu-hub-grid a:first-of-type { border: 1px solid rgba(74, 101, 130, 0.26); box-shadow: 0 4px 16px rgba(74, 101, 130, 0.08); } html.site-shell #content #right .menu-hub-grid a:last-of-type { border: 1px solid rgba(157, 95, 133, 0.28); box-shadow: 0 4px 16px rgba(184, 135, 168, 0.12); } html.site-shell #content #right .menu-hub-grid a:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(44, 40, 38, 0.14); } html.site-shell #content #right .menu-hub-grid img { display: block; width: 100%; height: auto; } /* Flash 埋め込み（ladycourse / estmenu 等） */ html.site-shell #content #right .shell-document embed, html.site-shell #content #right .shell-document object { max-width: 100%; } /* スタッフ紹介（profileman 等） */ html.site-shell #content #right #staff.shell-document--staff { margin-bottom: 28px; } html.site-shell #content #right #staff.shell-document--staff > h2 { text-align: center; letter-spacing: 0.22em; font-weight: 300; font-size: clamp(22px, 4vw, 28px); margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--pf-line); } html.site-shell #content #right #staff .staff_box { padding: 22px 18px 26px; background: var(--pf-bg); border-radius: var(--pf-radius-sm); border: 1px solid var(--pf-line); box-sizing: border-box; } /* イチローさん：クールなスレート／ネイビー系 */ html.site-shell #content #right #staff .staff_box--male { background: linear-gradient( 180deg, rgba(74, 101, 130, 0.11) 0%, rgba(74, 101, 130, 0) 28% ), linear-gradient(165deg, #f3f5f8 0%, #e9eef4 48%, #eef2f7 100%); border-color: rgba(74, 101, 130, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); } /* 展子さん：ソフトなローズ／ブラッシュ系 */ html.site-shell #content #right #staff .staff_box--female { background: linear-gradient( 180deg, rgba(184, 135, 168, 0.14) 0%, rgba(184, 135, 168, 0) 30% ), linear-gradient(165deg, #fdf9fb 0%, #faf2f7 45%, #f5eaf2 100%); border-color: rgba(184, 135, 168, 0.32); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85); } html.site-shell #content #right #staff .staff_box .img_center img { border-radius: var(--pf-radius-sm); } html.site-shell #content #right #staff .staff_box--male .img_center img { border: 1px solid rgba(74, 101, 130, 0.28); } html.site-shell #content #right #staff .staff_box--female .img_center img { border: 1px solid rgba(157, 95, 133, 0.35); } html.site-shell #content #right #staff .staff_box:not(.staff_box--male):not(.staff_box--female) .img_center img { border: 1px solid var(--pf-line); } html.site-shell #content #right #staff .staff_box h3 { margin-top: 1rem; margin-bottom: 0.35rem; font-size: 13px; letter-spacing: 0.12em; } html.site-shell #content #right #staff .staff_box:not(.staff_box--male):not(.staff_box--female) h3 { color: var(--pf-accent); } html.site-shell #content #right #staff .staff_box--male h3 { color: #3d5a73; } html.site-shell #content #right #staff .staff_box--female h3, html.site-shell #content #right #staff .staff_box--female h3.woman { color: #944f7a; } html.site-shell #content #right #staff .staff_box h3:first-of-type { margin-top: 0.75rem; } html.site-shell #content #right #staff .staff_box p { line-height: 1.8; margin-top: 0; margin-bottom: 0; } html.site-shell .shell-banner { margin: 28px 0; } html.site-shell .shell-banner img { border-radius: var(--pf-radius-sm); border: 1px solid var(--pf-line); vertical-align: middle; } @media screen and (max-width: 800px) { html.site-shell #content #right #staff .staff_box { width: 96%; float: none; margin-bottom: 18px; padding-right: 18px; } } /* 表組み（ニュース等で使用する場合） */ html.site-shell #content #right table td, html.site-shell #content #right table th { border: 1px solid var(--pf-line); padding: 10px 12px; vertical-align: middle; } /* Main column — soften common.css blues */ html.site-shell #content #right h1, html.site-shell #content #right h2, html.site-shell #content #right h3, html.site-shell #content #right h4, html.site-shell #content #right h5 { font-family: "Noto Sans JP", sans-serif; color: var(--pf-ink); } html.site-shell #content #right h2 { font-weight: 300; letter-spacing: 0.12em; } html.site-shell #content #right h3 { font-weight: 500; letter-spacing: 0.06em; } html.site-shell #content #right p, html.site-shell #content #right li { color: var(--pf-ink); font-weight: 400; } html.site-shell #content #right td, html.site-shell #content #right th { color: var(--pf-ink); font-weight: 400; } html.site-shell #content #right th { font-weight: 600; } html.site-shell #content #right a:link { color: var(--pf-accent); } html.site-shell #content #right a:visited { color: #7d6b58; } html.site-shell #content #right a:hover { opacity: 0.82; } html.site-shell #content #right strong { color: var(--pf-ink); } /* Sitemap */ html.site-shell #sitemap { margin-top: 16px; background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-radius); box-shadow: var(--pf-shadow); } html.site-shell #sitemap ul { justify-content: flex-start; gap: 4px 8px; padding: 20px 16px; } html.site-shell #sitemap li { margin: 6px 12px; } html.site-shell #sitemap a { font-size: 13px; color: var(--pf-ink-muted); font-weight: 400; } html.site-shell #sitemap a:link, html.site-shell #sitemap a:visited { color: var(--pf-ink-muted); } html.site-shell #sitemap a:hover { color: var(--pf-accent); text-decoration: none; transform: none; } /* Fly-out menu */ html.site-shell .menu-icon span { background: var(--pf-ink); height: 2px; margin-bottom: 6px; } html.site-shell #menu { background: rgba(252, 251, 249, 0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-right: 1px solid var(--pf-line); box-shadow: 8px 0 40px rgba(44, 40, 38, 0.12); } html.site-shell #menu > ul > li > a { background: transparent; color: var(--pf-ink); border: 1px solid var(--pf-line); border-radius: var(--pf-radius-sm); font-weight: 500; font-size: 14px; letter-spacing: 0.06em; } html.site-shell #menu > ul > li > a:hover { background: var(--pf-accent-soft); border-color: rgba(163, 130, 82, 0.35); color: var(--pf-accent); } html.site-shell #menu li ul { border-left-color: var(--pf-line); } html.site-shell #menu li ul li a { background: var(--pf-bg); color: var(--pf-ink-muted); border: 1px solid transparent; } html.site-shell #menu li ul li a:hover { background: var(--pf-accent-soft); color: var(--pf-accent); } html.site-shell a:focus-visible { outline: 2px solid var(--pf-accent); outline-offset: 2px; } @media screen and (max-width: 800px) { html.site-shell #wrapper { margin-top: 56px; padding-left: 16px; padding-right: 16px; } }