/* Theme Name: いろり Theme URI: https://hc-irori.jp Author: 訪問診療所いろり Description: 在宅・訪問診療クリニック「いろり」のオリジナルWordPressテーマ Version: 2.0.8 Requires at least: 6.0 Requires PHP: 8.0 License: GNU General Public License v2 or later Text Domain: irorin */ /* ===================================================== CSS カスタムプロパティ ===================================================== */ :root { /* メインカラー */ --c-terra: #C4715A; --c-terra-lt: #D9957C; --c-amber: #CA9848; --c-amber-lt: #E8C07A; --c-cream: #FDF7EE; --c-cream-dk: #F0E5D2; --c-brown: #6B4C3B; --c-brown-lt: #8C6450; /* 高齢者向け：テキストを濃く・高コントラストに */ --c-text: #1E1208; /* ほぼ黒に近いブラウン（高コントラスト） */ --c-text-lt: #4A3020; /* サブテキストも十分に濃く */ --c-white: #FFFFFF; --c-bg: #FFFEFB; --c-border: #DEC9B0; /* フォント：メイリオ統一 */ --font-sans: 'Meiryo', 'メイリオ', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif; --font-serif: 'Meiryo', 'メイリオ', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif; --r-sm: 6px; --r-md: 10px; --r-lg: 18px; --r-xl: 28px; --sh-sm: 0 2px 12px rgba(107,76,59,.07); --sh-md: 0 4px 28px rgba(107,76,59,.10); --sh-lg: 0 8px 52px rgba(107,76,59,.14); --w-max: 1080px; --px: clamp(20px, 4vw, 48px); } /* ===================================================== リセット ===================================================== */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{ scroll-behavior:smooth; font-size:18px; /* ベースを18pxに（高齢者向け） */ } body{ font-family:var(--font-sans); color:var(--c-text); background:var(--c-bg); line-height:2.1; /* 行間を広く */ font-size:1rem; /* = 18px */ font-weight:500; /* やや太めで読みやすく */ -webkit-font-smoothing:antialiased; letter-spacing:.04em; /* 字間を広く */ } img{max-width:100%;height:auto;display:block} a{color:var(--c-terra);text-decoration:none;transition:opacity .2s,color .2s} a:hover{opacity:.82} ul,ol{list-style:none} h1,h2,h3,h4,h5,h6{ font-family:var(--font-serif); line-height:1.65; color:var(--c-brown); letter-spacing:.04em; font-weight:700; } /* ===================================================== ユーティリティ ===================================================== */ .container{max-width:var(--w-max);margin:0 auto;padding:0 var(--px)} .section{padding:clamp(52px,8vw,96px) 0} .section--alt{background:var(--c-cream)} .cta-section h1,.cta-section h2,.cta-section h3, .cta-section h4,.cta-section h5,.cta-section h6{color:inherit} .site-footer h1,.site-footer h2,.site-footer h3, .site-footer h4,.site-footer h5,.site-footer h6{color:inherit} .sec-title{ font-size:clamp(1.5rem,3vw,2.1rem); /* 拡大 */ text-align:center;margin-bottom:.4em; } .sec-title::after{ content:'';display:block;width:48px;height:4px; background:var(--c-amber);margin:.5em auto 0;border-radius:2px; } .sec-sub{ text-align:center;color:var(--c-text-lt); font-size:1rem;margin-bottom:2.6rem; /* .88rem→1rem */ } /* ボタン */ .btn{ display:inline-flex;align-items:center;gap:8px; padding:14px 32px;border-radius:50px; font-weight:700;font-size:1rem;border:2px solid transparent; /* 拡大・太字 */ cursor:pointer;transition:all .24s;text-decoration:none; } .btn--primary{background:var(--c-terra);color:#fff;border-color:var(--c-terra)} .btn--primary:hover{background:var(--c-terra-lt);color:#fff;transform:translateY(-2px);box-shadow:var(--sh-md)} .btn--outline{background:transparent;color:var(--c-terra);border-color:var(--c-terra)} .btn--outline:hover{background:var(--c-terra);color:#fff} .btn--white{background:#fff;color:var(--c-terra);border-color:#fff} .btn--white:hover{background:var(--c-cream);color:var(--c-terra)} .btn--white-ol{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)} .btn--white-ol:hover{background:rgba(255,255,255,.15);color:#fff} .btn--sm{padding:8px 20px;font-size:1rem} /* ===================================================== ヘッダー ===================================================== */ .site-header{ position:sticky;top:0;z-index:100; background:#FDF8F2; border-bottom:1px solid #EAE0D0; box-shadow:none; transition:box-shadow .3s; } /* 1行レイアウト：コンテナ全体を横並びに */ .site-header .container{ display:flex;align-items:center;gap:20px; padding-top:0;padding-bottom:0;flex-wrap:nowrap; } /* ロゴ＋電話エリア */ .header-top{ display:flex;align-items:center;gap:16px; padding:0;flex-shrink:0;border-bottom:none; } /* ヘッダーロゴ */ .site-logo{ display:flex;align-items:center;text-decoration:none; padding:4px 0; } .site-logo img{ height:50px; width:auto; max-width:400px; object-fit:contain; image-rendering:auto; transition:opacity .2s; } .site-logo:hover img{ opacity:.82; } /* フッターロゴ */ .footer-logo{margin-bottom:1.2rem} .footer-logo img{ height:48px; width:auto; max-width:200px; object-fit:contain; } /* ナビ */ .header-nav-wrap{display:flex;align-items:center;border-top:none;padding:0;flex-shrink:0;margin-left:auto} /* 電話番号：右端固定 */ .site-nav,.site-nav ul{display:flex;align-items:center;gap:4px} .site-nav a{ display:block;padding:10px 8px; color:#3A2010;font-size:13px;font-weight:500; transition:color .2s;white-space:nowrap; } .site-nav a:hover{color:#C05030;background:none} .site-nav .nav-cta a{ background:#C05030;color:#fff; padding:7px 14px;border-radius:40px;font-size:12px; } .site-nav .nav-cta a:hover{background:#A84028;color:#fff} /* ハンバーガー */ .menu-toggle{ display:none;flex-direction:column;gap:5px; background:transparent;border:1px solid #EAE0D0;cursor:pointer;padding:6px; border-radius:6px;min-width:32px;min-height:32px; } .menu-toggle span{display:block;width:20px;height:2px;background:#2C1A0A;border-radius:2px;transition:all .3s} .menu-toggle.is-active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)} .menu-toggle.is-active span:nth-child(2){opacity:0} .menu-toggle.is-active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)} /* フェードインアニメーション：常に表示、スクロール時にふんわり */ @keyframes fadeInUp{ from{opacity:.4;transform:translateY(16px)} to{opacity:1;transform:none} } .fade-in{opacity:1;transform:none} .fade-in.is-visible{animation:fadeInUp .55s ease both} /* ===================================================== トップ：ナビカード（3枚） ===================================================== */ /* ===================================================== お知らせセクション ===================================================== */ .news-item{ display:flex;align-items:flex-start;gap:16px; padding:16px 28px; border-bottom:1px solid var(--c-cream-dk); transition:background .2s; } .news-item:last-child{border-bottom:none} .news-item:hover{background:var(--c-cream)} .news-date{font-size:1rem;color:var(--c-text-lt);white-space:nowrap;margin-top:.15em;flex-shrink:0} .news-cat{ font-size:.95rem;font-weight:700; background:rgba(193,105,79,.1);color:var(--c-terra); padding:2px 9px;border-radius:50px;flex-shrink:0; border:1px solid rgba(193,105,79,.2);white-space:nowrap; margin-top:.1em; } .news-title{font-size:1rem;color:var(--c-text);font-family:var(--font-sans)} .news-title a{color:var(--c-text)} .news-title a:hover{color:var(--c-terra)} /* ===================================================== 特徴カード（汎用） ===================================================== */ .cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px} .card{ background:#fff;border-radius:var(--r-lg);padding:28px 24px; box-shadow:var(--sh-sm);border:1px solid var(--c-border); transition:transform .25s,box-shadow .25s; text-align:center; display:flex;flex-direction:column;align-items:center; } .card:hover{transform:translateY(-4px);box-shadow:var(--sh-md)} .card__icon{font-size:1.85rem;margin-bottom:.85rem} .card__icon--svg{ width:64px;height:64px; background:linear-gradient(135deg,var(--c-cream) 0%,#F0E4D0 100%); border-radius:50%; display:flex;align-items:center;justify-content:center; margin-bottom:1.1rem; border:1.5px solid rgba(193,105,79,.2); box-shadow:0 3px 14px rgba(193,105,79,.12); font-size:0;/* emoji非表示 */ } .card__icon--svg svg{ width:30px;height:30px; stroke:var(--c-terra); display:block; } .card__title{font-size:1rem;font-weight:700;margin-bottom:.45rem} .card__text{font-size:1rem;color:var(--c-text-lt);line-height:1.75} /* ===================================================== 採用情報 ===================================================== */ .recruit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px} .recruit-card{ background:#fff;border-radius:var(--r-lg); box-shadow:var(--sh-sm);border:1px solid var(--c-border); overflow:hidden;transition:transform .25s,box-shadow .25s; } .recruit-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md)} .recruit-card__head{ padding:20px 22px; background:var(--c-terra);color:#fff; } .recruit-card__head:nth-child(1){background:var(--c-terra)} .recruit-card__type{font-size:1rem;margin-bottom:.3rem;letter-spacing:.1em} .recruit-card__title{font-size:1.1rem;font-weight:700;font-family:var(--font-serif)} .recruit-card__body{padding:20px 22px} .recruit-detail{display:flex;flex-direction:column;gap:10px} .recruit-detail__row{display:flex;gap:12px;font-size:1rem} .recruit-detail__label{color:var(--c-text-lt);flex-shrink:0;width:60px;font-weight:600} .recruit-detail__val{color:var(--c-text)} /* ===================================================== CTA ===================================================== */ .cta-section{ background:linear-gradient(135deg,var(--c-terra) 0%,var(--c-brown-lt) 100%); color:#fff;text-align:center; padding:clamp(48px,8vw,80px) 0; } .cta-section .sec-title{color:#fff} .cta-section .sec-title::after{background:rgba(255,255,255,.3)} .cta-section .sec-sub{color:rgba(255,255,255,.8)} .cta-tel{ display:inline-flex;align-items:center;gap:10px; font-size:clamp(1.6rem,3.5vw,2.3rem);font-weight:700;color:#fff; font-family:var(--font-serif); } .cta-tel-sub{font-size:1rem;color:rgba(255,255,255,.75);margin:.3rem 0 1.8rem} .cta-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap} /* ===================================================== アクセス ===================================================== */ .access-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start} .access-map{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md);aspect-ratio:4/3} .access-map iframe{width:100%;height:100%;border:0} .access-info h3{font-size:1.05rem;font-weight:700;margin-bottom:1rem;padding-bottom:.6rem;border-bottom:2px solid var(--c-cream-dk)} /* ===================================================== ページヘッダー ===================================================== */ .page-header{ background:linear-gradient(135deg,var(--c-cream) 0%,var(--c-cream-dk) 100%); padding:44px 0 36px; border-bottom:1px solid var(--c-cream-dk); } .page-header h1{font-size:clamp(1.35rem,2.8vw,1.95rem);margin-bottom:6px} .page-header .page-sub{font-size:1rem;color:var(--c-text-lt);margin-top:6px} .breadcrumb{font-size:1rem;color:var(--c-text-lt);margin-bottom:.5rem} .breadcrumb a{color:var(--c-text-lt)} .breadcrumb a:hover{color:var(--c-terra)} /* ===================================================== エントリーコンテンツ ===================================================== */ .entry-content h2{font-size:1.35rem;border-left:4px solid var(--c-terra);padding-left:14px;margin:2em 0 .9em} .entry-content h3{font-size:1.12rem;margin:1.5em 0 .7em} .entry-content p{margin-bottom:1.2em} .entry-content ul{list-style:disc;padding-left:1.5em;margin-bottom:1.2em} .entry-content ol{list-style:decimal;padding-left:1.5em;margin-bottom:1.2em} /* ===================================================== フッター ===================================================== */ .site-footer{ background:var(--c-brown); color:rgba(255,255,255,.92); /* より明るく・くっきり */ padding:40px 0 20px; } .footer-inner{display:grid;grid-template-columns:2.2fr 1fr 1fr;gap:40px;margin-bottom:40px} /* フッターロゴ */ .footer-brand::before{content:'';display:block;width:160px;height:52px;margin-bottom:20px;background-image:url('/wp-content/themes/irorin-theme/assets/images/logo.png');background-size:contain;background-repeat:no-repeat;background-position:left center;filter:brightness(0) invert(1)} /* クリニック情報列 */ .footer-brand p{ font-size:1rem; color:rgba(255,255,255,.78); line-height:2.1; } .footer-brand__row{ display:flex;gap:8px;align-items:baseline; margin-bottom:5px; } .footer-brand__label{ font-size:.8rem; color:rgba(255,255,255,.48); white-space:nowrap; flex-shrink:0; } .footer-brand__label::after{content:' ／'} .footer-brand__val{ font-size:.95rem; color:rgba(255,255,255,.88); } .footer-brand .footer-tel{ font-size:1.6rem; font-weight:700; color:#fff; font-family:var(--font-serif); margin:.8rem 0 .3rem; display:block; letter-spacing:.05em; } .footer-tel-hours{ font-size:.88rem; color:rgba(255,255,255,.58); margin-top:0; } /* 診療時間リスト */ .footer-hours-item{ margin-bottom:10px; display:flex;flex-direction:column;gap:2px; } .footer-hours-item__day{ font-size:.8rem; color:rgba(255,255,255,.5); } .footer-hours-item__time{ font-size:.95rem; color:rgba(255,255,255,.88); font-weight:500; } /* サイトマップ・診療時間列 */ .footer-nav h4{ color:var(--c-amber-lt); font-size:1rem; /* 見出しを大きく */ font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:1rem; padding-bottom:.5rem; border-bottom:1px solid rgba(255,255,255,.15); } .footer-nav li+li{margin-top:10px} .footer-nav a{ color:rgba(255,255,255,.82); /* くっきり */ font-size:1rem; /* 文字を大きく */ transition:color .2s; line-height:1.6; } .footer-nav a:hover{color:#fff;opacity:1} /* コピーライト行 */ .footer-bottom{ border-top:1px solid rgba(255,255,255,.15); padding-top:24px; display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px; } .footer-bottom p{font-size:.9rem;color:rgba(255,255,255,.55)} .footer-bottom a{color:rgba(255,255,255,.55);font-size:.9rem} .footer-bottom a:hover{color:rgba(255,255,255,.85);opacity:1} /* ===================================================== 3つのいろり安心セクション ===================================================== */ .trust-section{ background:linear-gradient(160deg,#FEFAF5 0%,#F5E8D5 55%,#EFE0C8 100%); padding:52px 0; border-top:1px solid var(--c-cream-dk); border-bottom:1px solid var(--c-cream-dk); } .trust-pillars{ display:grid; grid-template-columns:repeat(3,1fr); align-items:start; /* 上揃え：各ピラー独立 */ gap:0; } .trust-pillar{ display:flex;flex-direction:column;align-items:center; text-align:center; padding:36px 32px; position:relative; } .trust-pillar + .trust-pillar{ border-left:1px solid rgba(107,76,59,.12); } /* アイコンエリアを固定高にして3列の位置を揃える */ .trust-pillar__icon-wrap{ height:100px; display:flex;align-items:center;justify-content:center; margin-bottom:4px; } .trust-pillar__icon{ width:56px;height:56px; background:rgba(255,255,255,.92); border-radius:50%; display:flex;align-items:center;justify-content:center; box-shadow:0 4px 16px rgba(193,105,79,.13),0 0 0 3px rgba(193,105,79,.07); border:1.5px solid rgba(193,105,79,.22); transition:box-shadow .25s,transform .25s; } .trust-pillar:hover .trust-pillar__icon{ box-shadow:0 6px 22px rgba(193,105,79,.2),0 0 0 5px rgba(193,105,79,.1); transform:translateY(-2px); } .trust-pillar__icon svg{ width:26px;height:26px; stroke:var(--c-terra); } /* featuredは同サイズ＋アクセントリング */ .trust-pillar--featured .trust-pillar__icon{ width:56px;height:56px; background:rgba(255,255,255,.98); box-shadow:0 5px 20px rgba(193,105,79,.2),0 0 0 5px rgba(193,105,79,.1); border-color:rgba(193,105,79,.4); } .trust-pillar__title{ font-size:1.06rem;font-weight:700; color:var(--c-brown); line-height:1.65; margin-bottom:7px; letter-spacing:.03em; } .trust-pillar--featured .trust-pillar__title{ font-size:1.06rem; /* 同サイズで揃える */ } .trust-pillar__sub{ font-size:.8rem; color:var(--c-text-lt); line-height:1.5; } /* 担当医メモ */ .trust-doctor-note{ background:linear-gradient(135deg,var(--c-cream) 0%,rgba(200,146,58,.08) 100%); border:1px solid var(--c-amber-lt); border-left:4px solid var(--c-amber); border-radius:var(--r-lg); padding:22px 28px; margin-bottom:2rem; text-align:center; } .trust-doctor-note__text{ font-size:1.05rem;color:var(--c-brown);font-weight:700; line-height:2; } /* ===================================================== FAQ（details/summary アコーディオン） ===================================================== */ .faq-list{display:flex;flex-direction:column;gap:10px} .faq-item{ background:#fff;border-radius:var(--r-lg); border:1px solid var(--c-border); overflow:hidden; box-shadow:var(--sh-sm); } .faq-item summary{ list-style:none;display:flex;align-items:flex-start;gap:14px; padding:20px 24px;cursor:pointer; font-size:1rem;font-weight:700;color:var(--c-brown); user-select:none; } .faq-item summary::-webkit-details-marker{display:none} .faq-item summary:hover{background:var(--c-cream)} .faq-item__q-mark{ width:30px;height:30px;min-width:30px; background:var(--c-terra);color:#fff; border-radius:50%;display:flex;align-items:center;justify-content:center; font-size:.85rem;font-weight:700;margin-top:.1rem; } .faq-item__q-text{flex:1} .faq-item__chevron{ margin-left:auto;flex-shrink:0;transition:transform .25s; color:var(--c-text-lt);margin-top:.2rem; } .faq-item[open] .faq-item__chevron{transform:rotate(180deg)} .faq-item__a{ padding:0 24px 20px 68px; font-size:1rem;color:var(--c-text-lt);line-height:2; } .faq-item__a-mark{ display:inline-block; background:var(--c-amber);color:#fff; border-radius:50%;width:24px;height:24px; text-align:center;line-height:24px; font-size:.8rem;font-weight:700;margin-right:8px; vertical-align:middle;flex-shrink:0; } /* ===================================================== 訪問頻度プラン ===================================================== */ .visit-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .visit-plan{ background:#fff;border-radius:var(--r-lg); padding:28px 20px;text-align:center; border:1.5px solid var(--c-border); box-shadow:var(--sh-sm); transition:transform .25s,box-shadow .25s; position:relative; } .visit-plan:hover{transform:translateY(-4px);box-shadow:var(--sh-md)} .visit-plan--featured{ border-color:var(--c-terra); background:linear-gradient(160deg,var(--c-cream) 0%,rgba(196,113,90,.05) 100%); } .visit-plan__badge{ position:absolute;top:-12px;left:50%;transform:translateX(-50%); background:var(--c-terra);color:#fff; padding:3px 14px;border-radius:50px; font-size:.75rem;font-weight:700;white-space:nowrap; } .visit-plan__icon{font-size:2.2rem;margin-bottom:.6rem} .visit-plan__freq{ font-size:1.6rem;font-weight:700; color:var(--c-terra);font-family:var(--font-serif); line-height:1.2;margin-bottom:.2rem; } .visit-plan__sub{ font-size:.8rem;color:var(--c-text-lt);margin-bottom:1rem; } .visit-plan__desc{ font-size:.88rem;color:var(--c-text-lt);line-height:1.85; text-align:left; } /* ===================================================== 費用モデルケース ===================================================== */ .cost-model-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px;margin-top:1.6rem; } .cost-model-grid--2col{ grid-template-columns:repeat(2,1fr); } .cost-model-card{ background:var(--c-cream);border-radius:var(--r-lg); padding:22px 20px;border:1px solid var(--c-cream-dk); } .cost-model-card__title{ font-size:.9rem;font-weight:700;color:var(--c-brown); margin-bottom:1rem;padding-bottom:.5rem; border-bottom:2px solid var(--c-amber-lt); } .cost-model-card__amount{ font-size:1.8rem;font-weight:700;color:var(--c-terra); font-family:var(--font-serif);line-height:1.2; } .cost-model-card__amount-unit{font-size:.9rem;color:var(--c-text-lt);margin-left:2px} .cost-model-card__note{ font-size:.8rem;color:var(--c-text-lt);margin-top:.5rem;line-height:1.7; } /* ===================================================== ご利用の流れ（ビジュアルタイムライン強化） ===================================================== */ .flow-timeline{display:flex;flex-direction:column;gap:0} .flow-step{ display:flex;gap:20px;position:relative; } .flow-step__left{ display:flex;flex-direction:column;align-items:center; } .flow-step__num{ width:56px;height:56px; background:var(--c-terra);color:#fff; border-radius:50%; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:1px; flex-shrink:0;box-shadow:0 4px 14px rgba(196,113,90,.32); border:3px solid #fff;outline:2px solid var(--c-terra); } .flow-step__num-label{ font-size:.45rem;font-weight:700;letter-spacing:.12em; line-height:1;opacity:.9; } .flow-step__num-digit{ font-size:1.3rem;font-weight:700;line-height:1; } .flow-step__line{ width:2px;flex:1;min-height:36px; background:linear-gradient(to bottom,var(--c-terra),var(--c-amber-lt)); margin:4px 0; } .flow-step__body{ padding:10px 0 32px;flex:1; } .flow-step__title{ font-size:1rem;font-weight:700;color:var(--c-brown);margin-bottom:6px; } .flow-step__desc{ font-size:.9rem;color:var(--c-text-lt);line-height:1.9; } .flow-step__tag{ display:inline-block;margin-top:8px; background:rgba(196,113,90,.1);color:var(--c-terra); padding:2px 10px;border-radius:50px;font-size:.78rem;font-weight:700; border:1px solid rgba(196,113,90,.2); } /* ===================================================== res-2col（汎用2カラム → SP時1カラム） ===================================================== */ .res-2col{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start} /* ===================================================== レスポンシブ ===================================================== */ @media(max-width:1000px){ .philosophy-grid{grid-template-columns:1fr} .access-grid{grid-template-columns:1fr} .res-2col{grid-template-columns:1fr} .footer-inner{grid-template-columns:1fr 1fr} } @media(max-width:768px){ .visit-plans{grid-template-columns:1fr} .faq-item__a{padding:0 16px 18px 54px} .faq-item summary{padding:16px 18px} .trust-pillars{grid-template-columns:1fr} .trust-pillar + .trust-pillar{border-left:none;border-top:1px solid rgba(107,76,59,.12)} .trust-section{padding:36px 0} .menu-toggle{display:flex} .site-nav{ display:none;position:absolute; top:100%;left:0;right:0; background:var(--c-bg);padding:14px; border-bottom:2px solid var(--c-cream-dk); box-shadow:var(--sh-md); } .site-nav.is-open{display:block} .site-nav ul{flex-direction:column;align-items:stretch;gap:2px} .site-nav a{padding:12px 16px;font-size:1rem} .footer-inner{grid-template-columns:1fr} /* SP：ヘッダーロゴサイズ */ .site-logo img{ height:50px; max-width:280px; } /* SP：電話番号を小さめに */ } @media(max-width:640px){ .doctor-card{flex-direction:column} .doctor-card__photo{width:100%;min-width:unset} .doctor-card__placeholder{width:100%;min-width:unset;aspect-ratio:4/3} } @media(max-width:520px){ .hero-actions,.cta-actions{flex-direction:column;align-items:center} .btn{width:100%;justify-content:center;max-width:300px} .staff-grid{grid-template-columns:repeat(2,1fr)} } /* ===================================================== 診療内容セクション（irori-shinryo） ===================================================== */ .irori-shinryo{padding:60px 0;font-family:var(--font-sans)} .irori-section-header{text-align:center;margin-bottom:48px} .irori-eyebrow{display:block;font-size:12px;font-weight:500;letter-spacing:.12em;color:#D85A30;text-transform:uppercase;margin-bottom:8px} .irori-section-title{font-size:26px;font-weight:500;color:#2C2C2A;margin:0 0 12px} .irori-rule{width:40px;height:2px;background:#D85A30;margin:12px auto;border:none} .irori-section-sub{font-size:14px;color:#5F5E5A;line-height:1.7;margin:0} .irori-label{display:inline-block;font-size:11px;font-weight:500;padding:4px 12px;border-radius:20px;background:#FAECE7;color:#712B13;margin-bottom:16px;letter-spacing:.04em} .irori-spec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:48px} @media(max-width:640px){.irori-spec-grid{grid-template-columns:1fr}} .irori-spec-card{background:#fff;border:1px solid #E8E6DF;border-radius:12px;padding:24px;transition:border-color .2s} .irori-spec-card:hover{border-color:#D85A30} .irori-spec-card.featured{border-color:#D85A30;border-width:1.5px} .irori-card-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px} .irori-card-icon{width:44px;height:44px;border-radius:10px;background:#FAECE7;display:flex;align-items:center;justify-content:center;flex-shrink:0} .irori-card-icon svg{width:22px;height:22px} .irori-card-title-wrap{padding-top:4px} .irori-card-title{font-size:16px;font-weight:500;color:#2C2C2A;margin:0;line-height:1.4} .irori-expert-badge{display:inline-block;font-size:10px;font-weight:500;padding:2px 8px;border-radius:20px;background:#D85A30;color:#fff;margin-left:8px;vertical-align:middle} .irori-card-desc{font-size:13px;color:#5F5E5A;line-height:1.75;margin:0 0 14px} .irori-tags{display:flex;flex-wrap:wrap;gap:6px} .irori-tag{font-size:11px;padding:3px 9px;border-radius:6px;background:#F5F4F0;color:#5F5E5A;border:1px solid #E8E6DF;white-space:nowrap} .irori-general-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:32px} @media(max-width:768px){.irori-general-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.irori-general-grid{grid-template-columns:1fr}} .irori-gen-card{background:#F8F5F0;border-radius:10px;padding:18px} .irori-gen-title{font-size:14px;font-weight:500;color:#2C2C2A;margin:0 0 6px} .irori-gen-desc{font-size:12px;color:#5F5E5A;line-height:1.65;margin:0 0 10px} .irori-gen-tags{display:flex;flex-wrap:wrap;gap:4px} .irori-gen-tag{font-size:11px;padding:2px 7px;border-radius:4px;background:#fff;color:#888780;border:1px solid #E8E6DF} .irori-note{border-left:3px solid #D85A30;padding:14px 18px;background:#FAECE7;font-size:13px;color:#712B13;line-height:1.75} .irori-note strong{font-weight:500} .irori-note a{color:#D85A30;font-weight:500} /* 医療処置セクション */ .irori-proc-section{margin-bottom:48px} .irori-proc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} @media(max-width:640px){.irori-proc-grid{grid-template-columns:1fr}} .irori-proc-category{background:#fff;border:1px solid #E8E6DF;border-radius:10px;padding:18px 20px} .irori-proc-cat-head{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #F0EDE8} .irori-proc-cat-icon{width:28px;height:28px;border-radius:6px;background:#FAECE7;display:flex;align-items:center;justify-content:center;flex-shrink:0} .irori-proc-cat-icon svg{width:15px;height:15px} .irori-proc-cat-title{font-size:13px;font-weight:500;color:#712B13;margin:0} .irori-proc-items{display:flex;flex-wrap:wrap;gap:5px;list-style:none;margin:0;padding:0} .irori-proc-item{font-size:12px;padding:3px 9px;border-radius:4px;background:#F8F5F0;color:#444441;border:1px solid #E8E6DF;white-space:nowrap;list-style:none} /* ===================================================== 医療・介護関係者ページ（irori-medical） ===================================================== */ .irori-medical{padding:60px 0;font-family:var(--font-sans)} .irori-strength-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:56px;padding:22px 20px;background:#FAECE7;border-radius:12px} @media(max-width:640px){.irori-strength-bar{grid-template-columns:repeat(2,1fr)}} .irori-strength-item{text-align:center;padding:8px 4px} .irori-strength-icon{font-size:22px;margin-bottom:6px;display:block} .irori-strength-text{font-size:12px;font-weight:500;color:#712B13;line-height:1.6} .irori-appeal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:0} @media(max-width:768px){.irori-appeal-grid{grid-template-columns:1fr}} .irori-appeal-num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#D85A30;color:#fff;font-size:13px;font-weight:500;margin-bottom:14px} .irori-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0 0 52px} @media(max-width:640px){.irori-flow{grid-template-columns:1fr;gap:24px}} .irori-flow-title{font-size:13px;font-weight:500;color:#2C2C2A;margin:0 0 4px} .irori-flow-desc{font-size:12px;color:#5F5E5A;line-height:1.6;margin:0} .irori-fax-row{margin-top:6px;font-size:12px;color:#888780} /* irori-medical内のirori-dividerマージン上書き */ /* ===================================================== HOME ページ（irori-home） ===================================================== */ .irori-home{font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;color:#1A1A18} .irori-inner{max-width:1000px;margin:0 auto;padding:0 20px} /* アニメーション */ html.js .anim-fade-up{opacity:0;transform:translateY(14px);transition:opacity .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1)} html.js .anim-fade-up.in-view{opacity:1;transform:translateY(0)} html.js .anim-fade-in{opacity:0;transition:opacity .5s ease} html.js .anim-fade-in.in-view{opacity:1} html.js .anim-slide-left{opacity:0;transform:translateX(-14px);transition:opacity .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1)} html.js .anim-slide-left.in-view{opacity:1;transform:translateX(0)} .delay-1{transition-delay:.10s !important}.delay-2{transition-delay:.20s !important} .delay-3{transition-delay:.30s !important}.delay-4{transition-delay:.40s !important} .delay-5{transition-delay:.50s !important}.delay-6{transition-delay:.60s !important} /* ヒーロー */ .irori-hero{background:linear-gradient(135deg,#FDF6EE 0%,#F5E8D5 100%);padding:80px 0 60px;text-align:center;overflow:hidden;position:relative} .irori-hero::before{content:'';position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(216,90,48,.07) 0%,transparent 70%);top:-100px;right:-80px;pointer-events:none} .irori-hero::after{content:'';position:absolute;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(216,90,48,.05) 0%,transparent 70%);bottom:-60px;left:-60px;pointer-events:none} @keyframes floatCircle{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-18px) scale(1.04)}} .irori-hero h1{font-family:'Zen Maru Gothic','Hiragino Maru Gothic ProN','Hiragino Kaku Gothic ProN',sans-serif;font-weight:700;font-size:clamp(28px,1.2vw + 23px,38px);color:#2C2C2A;line-height:1.55;letter-spacing:.04em;margin-bottom:20px} .irori-hero h1 span{color:#D85A30} .hero-line{display:block;overflow:hidden} .hero-line-inner{display:block;opacity:0;transform:translateY(110%);animation:slideUpLine .8s cubic-bezier(.22,1,.36,1) forwards} .hero-line-inner.line-2{animation-delay:.18s} @keyframes slideUpLine{to{opacity:1;transform:translateY(0)}} .irori-hero p{font-size:22px;color:#444441;line-height:1.9;margin-bottom:40px;opacity:0;animation:fadeUpHero .9s cubic-bezier(.22,1,.36,1) .45s forwards} @media(max-width:640px){.irori-hero p{font-size:20px}} @keyframes fadeUpHero{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} .irori-hero-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;opacity:0;animation:fadeUpHero .9s cubic-bezier(.22,1,.36,1) .65s forwards} /* ボタン */ @keyframes pulseTel{0%{box-shadow:0 4px 16px rgba(153,60,29,.10)}50%{box-shadow:0 4px 20px rgba(153,60,29,.18)}100%{box-shadow:0 4px 16px rgba(153,60,29,.10)}} /* HERO デュアル CTA — B-2: 深テラ統一 */ .irori-btn-primary,.irori-btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:17px;font-weight:600;padding:18px 28px;border-radius:60px;text-decoration:none;min-height:64px;min-width:220px;border:2px solid #993C1D;transition:background .2s,color .2s,transform .18s ease,box-shadow .2s} .irori-btn-primary{background:#993C1D;color:#FFF;box-shadow:0 4px 18px rgba(153,60,29,.28)} .irori-btn-primary:hover{background:#7d3017;border-color:#7d3017;transform:translateY(-2px);box-shadow:0 6px 22px rgba(153,60,29,.36)} .irori-btn-secondary{background:transparent;color:#993C1D} .irori-btn-secondary:hover{background:#FDF7EE;transform:translateY(-2px)} .irori-hero-cta-group{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:8px} @media(max-width:640px){.irori-btn-primary,.irori-btn-secondary{width:100%}.irori-hero-cta-group{flex-direction:column;align-items:stretch;gap:12px}} /* バッジ */ .irori-badges{background:#FAECE7;padding:28px 0} .irori-badges-grid{display:grid;grid-template-columns:repeat(3,1fr)} @media(max-width:640px){.irori-badges-grid{grid-template-columns:1fr}} .irori-badge-item{text-align:center;padding:20px;border-right:1px solid #F0C8B0} .irori-badge-item:last-child{border-right:none} @media(max-width:640px){.irori-badge-item{border-right:none;border-bottom:1px solid #F0C8B0}.irori-badge-item:last-child{border-bottom:none}} .irori-badge-title{font-size:15px;font-weight:700;color:#5A1A08;margin-bottom:6px;line-height:1.6} .irori-badge-sub{font-size:17px;color:#6B3A10} /* クイックリンク */ /* 訪問診療とは */ .irori-what{padding:60px 0;background:#F8F5F0} .irori-what-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:32px} @media(min-width:1024px){.irori-what-grid{grid-template-columns:repeat(4,1fr)}} @media(max-width:600px){.irori-what-grid{grid-template-columns:1fr}} .irori-what-card{background:#fff;border:1px solid #E8E6DF;border-radius:12px;padding:24px 20px;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease} .irori-what-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.08)} .irori-what-card h3{font-size:15px;font-weight:700;color:#1A1A18;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #E0DDD6} .irori-what-card p{font-size:20px;color:#444441;line-height:1.9} .irori-what-link{text-align:center} .irori-what-link a{color:#D85A30;font-size:14px;font-weight:500;text-decoration:none;transition:letter-spacing .2s ease} .irori-what-link a:hover{text-decoration:underline;letter-spacing:.03em} /* FAQ */ .irori-faq{padding:60px 0} .irori-faq-list{display:flex;flex-direction:column;gap:10px} .irori-faq-item{background:#fff;border:1px solid #E8E6DF;border-radius:10px;overflow:hidden;transition:box-shadow .25s ease,border-color .25s ease} .irori-faq-item:hover{box-shadow:0 4px 16px rgba(0,0,0,.07);border-color:#D0CCC4} .irori-faq-q{display:flex;align-items:flex-start;gap:14px;padding:18px 20px 16px;background:#fff} .irori-faq-q-icon{font-size:16px;font-weight:700;color:#D85A30;flex-shrink:0;margin-top:1px} .irori-faq-q-text{font-size:16px;font-weight:600;color:#1A1A18;line-height:1.7} .irori-faq-a{display:flex;gap:14px;padding:16px 20px 20px;background:#FAFAF8;border-top:1px solid #E0DDD6} .irori-faq-a-icon{font-size:16px;font-weight:700;color:#888780;flex-shrink:0;margin-top:1px} .irori-faq-a-text{font-size:16px;color:#444441;line-height:1.9} /* アクセス */ .irori-access{padding:60px 0;background:#F8F5F0} .irori-access-table{width:100%;border-collapse:collapse;font-size:20px;background:#fff;border-radius:10px;overflow:hidden;border:1px solid #E8E6DF} .irori-access-table tr{border-bottom:1px solid #F0EDE8} .irori-access-table tr:last-child{border-bottom:none} .irori-access-table td{padding:13px 16px;vertical-align:top;line-height:1.7} .irori-access-table td:first-child{color:#555553;width:90px;font-size:17px;background:#FAFAF8;white-space:nowrap} .irori-access-table td:last-child{color:#1A1A18} /* CTA */ .irori-cta{padding:72px 0;background:#F5EDE0;text-align:center;position:relative;overflow:hidden} .irori-cta::before{content:'';position:absolute;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(192,80,48,.07) 0%,transparent 70%);top:-100px;right:-60px;pointer-events:none} .irori-cta::after{content:'';position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(192,80,48,.05) 0%,transparent 70%);bottom:-60px;left:-40px;pointer-events:none} .irori-cta-rule{width:0;height:2px;background:#C05030;margin:0 auto 24px;border:none;transition:width .7s cubic-bezier(.22,1,.36,1)} .irori-cta-rule.in-view{width:36px} .irori-cta-banner{position:relative;z-index:1} .irori-cta-banner h2{font-size:22px;font-weight:700;color:#2C1A0A;margin-bottom:10px;line-height:1.5} .irori-cta-banner p{font-size:14px;color:#7A5A3A;line-height:1.8;margin-bottom:36px} .irori-cta-tel{display:inline-flex;flex-direction:column;align-items:center;gap:4px;background:#FDF7EE;color:#993C1D;text-decoration:none;padding:16.5px 46.5px;border-radius:60px;border:1.5px solid #993C1D;margin-bottom:14px;box-shadow:0 4px 20px rgba(153,60,29,.16);transition:transform .2s cubic-bezier(.22,1,.36,1),background .2s ease,box-shadow .2s ease} .irori-cta-tel:hover{background:#FFFAF1;animation:none;transform:translateY(-3px) scale(1.02);box-shadow:0 8px 28px rgba(153,60,29,.24)} .irori-cta-tel-num{display:flex;align-items:center;font-size:24px;font-weight:700;letter-spacing:.04em} .irori-cta-tel-tap{font-size:12px;color:rgba(153,60,29,.7);font-weight:400} .irori-cta-hours{display:block;font-size:13px;color:#9A7A5A} @media(max-width:640px){.irori-cta{padding:52px 0}.irori-cta-tel{width:calc(100% - 40px)}} /* HOME内 section-header */ .irori-home .irori-section-header{text-align:center;margin-bottom:40px} .irori-home .irori-eyebrow{display:block;font-size:12px;font-weight:600;letter-spacing:.12em;color:#C04828;text-transform:uppercase;margin-bottom:8px} .irori-home .irori-section-title{font-size:24px;font-weight:600;color:#1A1A18;margin:0 0 4px} .irori-home .irori-rule{width:0;height:2px;background:#D85A30;margin:12px auto 0;border:none;transition:width .7s cubic-bezier(.22,1,.36,1)} .irori-home .irori-rule.in-view{width:40px} .irori-home .irori-section-sub{font-size:20px;color:#444441;margin-top:12px} /* ナビゲーション：ホバー下線エフェクト */ .site-header nav a,.main-navigation a,.nav-menu a,.primary-menu a,#site-navigation a{font-size:13px !important;font-weight:500 !important;color:#3A2010 !important;padding:10px 8px !important;white-space:nowrap !important;position:relative !important;text-decoration:none !important;transition:color .2s ease !important} .site-header nav a::after,.nav-menu a::after{content:'' !important;position:absolute !important;bottom:6px !important;left:8px !important;right:8px !important;width:0 !important;height:1.5px !important;background:#C05030 !important;transition:width .25s cubic-bezier(.22,1,.36,1) !important;border-radius:1px !important} .site-header nav a:hover,.main-navigation a:hover,.nav-menu a:hover,#site-navigation a:hover{color:#C05030 !important} .site-header nav a:hover::after,.nav-menu a:hover::after{width:calc(100% - 16px) !important} .site-header nav .current-menu-item>a,#site-navigation .current-menu-item>a{color:#C05030 !important} .site-header nav .current-menu-item>a::after,#site-navigation .current-menu-item>a::after{width:calc(100% - 16px) !important} .site-header nav li:last-child>a,#site-navigation li:last-child>a{background:#C05030 !important;color:#fff !important;padding:7px 14px !important;border-radius:40px !important;font-size:12px !important;transition:background .2s ease !important} .site-header nav li:last-child>a::after,#site-navigation li:last-child>a::after{display:none !important} .site-header nav li:last-child>a:hover,#site-navigation li:last-child>a:hover{background:#A84028 !important} .menu-toggle,.hamburger{font-size:16px !important;min-width:32px !important;min-height:32px !important;color:#2C1A0A !important;background:transparent !important;border:1px solid #EAE0D0 !important;border-radius:6px !important} .irori-tel-block{text-align:center;margin-bottom:48px} .irori-tel-label{display:block;font-size:12px;font-weight:500;letter-spacing:.12em;color:#D85A30;text-transform:uppercase;margin-bottom:10px} .irori-tel-lead{font-size:14px;color:#5F5E5A;margin-bottom:16px} .irori-tel-number{display:inline-block;font-size:34px;font-weight:500;color:#D85A30;text-decoration:none;margin-bottom:6px} .irori-tel-number:hover{text-decoration:underline} .irori-tel-hours{font-size:13px;color:#888780} .irori-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:480px){.irori-info-grid{grid-template-columns:1fr}} .irori-info-card{background:#F8F5F0;border-radius:10px;padding:20px 22px} .irori-info-card h3{font-size:12px;font-weight:500;color:#888780;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px} .irori-info-table{width:100%;border-collapse:collapse;font-size:13px} .irori-info-table tr{border-bottom:1px solid #EDEAE4} .irori-info-table tr:last-child{border-bottom:none} .irori-info-table td{padding:6px 0;vertical-align:top;line-height:1.65;color:#2C2C2A} .irori-info-table td:first-child{color:#888780;width:58px;font-size:12px} .irori-location{font-size:13px;color:#2C2C2A;line-height:1.75} .irori-access-section{margin-top:32px} .irori-access-card{background:#F8F5F0;border-radius:10px;overflow:hidden} .irori-access-card-head{background:#EDEAE4;padding:10px 16px;font-size:11px;font-weight:500;color:#888780;letter-spacing:.06em;text-transform:uppercase} .irori-access-detail-table{width:100%;border-collapse:collapse;font-size:13px} .irori-access-detail-table tr{border-bottom:1px solid #EDEAE4} .irori-access-detail-table tr:last-child{border-bottom:none} .irori-access-detail-table td{padding:8px 16px;vertical-align:top;line-height:1.65;color:#2C2C2A} .irori-access-detail-table td:first-child{color:#888780;width:68px;font-size:12px;white-space:nowrap} .irori-map-box{background:#E8E6DF;border-radius:10px;margin-top:16px;height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:13px;color:#888780;gap:4px} /* ===================================================== 当院についてページ ===================================================== */ /* ページヒーロー */ .irori-page-hero{background:linear-gradient(135deg,#FDF6EE 0%,#F5E8D5 100%);padding:32px 0 28px;text-align:center;position:relative;overflow:hidden} .irori-page-hero::before{content:'';position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(216,90,48,.06) 0%,transparent 70%);top:-80px;right:-40px} .irori-page-hero-inner{position:relative;z-index:1} .irori-page-eyebrow{display:block;font-size:10px;font-weight:600;letter-spacing:.18em;color:#C05030;text-transform:uppercase;margin-bottom:8px;opacity:0;animation:fadeUpHero .7s cubic-bezier(.22,1,.36,1) .1s forwards} .irori-page-hero h1{font-size:22px;font-weight:700;color:#2C1A0A;line-height:1.4;opacity:0;animation:fadeUpHero .8s cubic-bezier(.22,1,.36,1) .22s forwards} .irori-page-rule{width:28px;height:2px;background:#C05030;margin:10px auto;border:none;opacity:0;animation:fadeUpHero .7s .3s forwards} .irori-page-hero p{font-size:13px;color:#7A5A3A;line-height:1.8;opacity:0;animation:fadeUpHero .9s cubic-bezier(.22,1,.36,1) .38s forwards} @media(max-width:640px){.irori-page-hero h1{font-size:20px}.irori-page-hero p{font-size:12px}} /* ① 理念セクション */ .irori-philosophy{padding:68px 0 60px;background:#F8F5F0} .irori-philosophy-body{max-width:720px;margin:0 auto;text-align:center} .irori-philosophy-lead{font-size:22px;font-weight:600;color:#2C1A0A;line-height:1.8;margin-bottom:24px} .irori-philosophy-lead span{color:#D85A30} .irori-philosophy-text{font-size:20px;color:#444441;line-height:1.95} .irori-philosophy-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px} @media(max-width:640px){.irori-philosophy-cards{grid-template-columns:1fr}} .irori-philosophy-card{background:#fff;border:1px solid #E8E6DF;border-radius:14px;padding:28px 20px 24px;text-align:center;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease} .irori-philosophy-card:hover{transform:translateY(-5px);box-shadow:0 10px 28px rgba(0,0,0,.08)} .irori-philosophy-num{display:inline-block;width:36px;height:36px;border-radius:50%;background:#D85A30;color:#fff;font-size:15px;font-weight:700;line-height:36px;text-align:center;margin-bottom:14px} .irori-philosophy-card h3{font-size:16px;font-weight:700;color:#1A1A18;margin-bottom:10px;line-height:1.5} .irori-philosophy-card p{font-size:20px;color:#555553;line-height:1.85} /* ② 医師紹介セクション */ .irori-doctors{padding:68px 0 60px;background:#fff} .irori-doctor-card{background:#FAFAF8;border:1px solid #E8E6DF;border-radius:16px;padding:36px 32px;display:grid;grid-template-columns:120px 1fr;gap:32px;align-items:start;margin-bottom:20px;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease} .irori-doctor-card:last-child{margin-bottom:0} .irori-doctor-card:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(0,0,0,.07)} @media(max-width:640px){.irori-doctor-card{grid-template-columns:1fr;padding:24px 20px;gap:20px}} .irori-doctor-avatar{width:100px;height:100px;border-radius:50%;background:linear-gradient(135deg,#F5E8D5 0%,#E8D0B0 100%);display:flex;align-items:center;justify-content:center;border:3px solid #E8D0B0;flex-shrink:0;overflow:hidden} .irori-doctor-name{font-size:20px;font-weight:700;color:#1A1A18;margin-bottom:4px} .irori-doctor-role{font-size:13px;color:#C04828;font-weight:600;letter-spacing:.04em;margin-bottom:14px} .irori-doctor-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px} .irori-doctor-tag{background:#FAECE7;color:#8C3820;font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px;letter-spacing:.02em} .irori-doctor-bio{font-size:20px;color:#444441;line-height:1.9} /* ③ スタッフ紹介セクション */ .irori-staff{padding:68px 0 60px;background:#F8F5F0} .irori-staff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:640px){.irori-staff-grid{grid-template-columns:1fr}} .irori-staff-icon{width:64px;height:64px;border-radius:50%;background:#FAECE7;display:flex;align-items:center;justify-content:center;margin:0 auto 16px} /* ===================================================== 診療をご希望の方へページ ===================================================== */ /* ① 対象となる方 */ .irori-target{padding:68px 0 60px;background:#F8F5F0} .irori-target-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} @media(max-width:640px){.irori-target-grid{grid-template-columns:1fr}} .irori-target-dot{width:8px;height:8px;border-radius:50%;background:#D85A30;flex-shrink:0;margin-top:8px} /* ② 診療内容 */ .irori-services{padding:68px 0 60px;background:#fff} .irori-services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:640px){.irori-services-grid{grid-template-columns:1fr}} .irori-service-card{background:#FAFAF8;border:1px solid #E8E6DF;border-radius:14px;padding:28px 20px 24px;text-align:center;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease} .irori-service-card:hover{transform:translateY(-5px);box-shadow:0 10px 28px rgba(0,0,0,.08)} .irori-service-icon{width:58px;height:58px;border-radius:50%;background:#FAECE7;display:flex;align-items:center;justify-content:center;margin:0 auto 16px} .irori-service-card h3{font-size:16px;font-weight:700;color:#1A1A18;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #E0DDD6;line-height:1.5} .irori-service-card p{font-size:20px;color:#555553;line-height:1.85;text-align:left} /* ③ 費用 */ .irori-cost{padding:68px 0 60px;background:#F8F5F0} .irori-cost-table{width:100%;border-collapse:collapse;font-size:20px;background:#fff;border-radius:10px;overflow:hidden;border:1px solid #E8E6DF;margin-bottom:20px} .irori-cost-table thead tr{background:#FAECE7} .irori-cost-table th{padding:12px 16px;text-align:left;font-size:13px;font-weight:700;color:#8C3820;letter-spacing:.04em} .irori-cost-table tbody tr{border-bottom:1px solid #F0EDE8} .irori-cost-table tbody tr:last-child{border-bottom:none} .irori-cost-table td{padding:13px 16px;vertical-align:top;line-height:1.7;color:#1A1A18} .irori-cost-table td:first-child{color:#555553;font-size:17px;background:#FAFAF8;width:160px} .irori-cost-note{font-size:13px;color:#888780;line-height:1.7;padding:14px 16px;background:#fff;border:1px solid #E8E6DF;border-radius:8px} .irori-cost-note strong{color:#555553} /* ④ 診療の流れ */ .irori-flow{padding:68px 0 60px;background:#fff} .irori-flow>.irori-inner{grid-column:1/-1;width:100%} .irori-flow .irori-section-header{text-align:center} /* ===================================================== 医療・介護関係者の方へページ ===================================================== */ /* ① 強み */ .irori-strength{padding:68px 0 60px;background:#F8F5F0} .irori-strength-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} @media(max-width:640px){.irori-strength-grid{grid-template-columns:1fr}} .irori-strength-card{background:#fff;border:1px solid #E8E6DF;border-radius:14px;padding:28px 24px;display:flex;align-items:flex-start;gap:18px;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease} .irori-strength-card:hover{transform:translateY(-5px);box-shadow:0 10px 28px rgba(0,0,0,.08)} .irori-strength-icon{width:52px;height:52px;border-radius:12px;background:#FAECE7;display:flex;align-items:center;justify-content:center;flex-shrink:0} .irori-strength-card h3{font-size:16px;font-weight:700;color:#1A1A18;margin-bottom:8px;line-height:1.5} .irori-strength-card p{font-size:20px;color:#555553;line-height:1.85} /* ② 連携の流れ（横並び4ステップ） */ .irori-collab-flow{padding:68px 0 60px;background:#fff} .irori-collab-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative} @media(max-width:640px){.irori-collab-steps{grid-template-columns:1fr;gap:12px}} .irori-collab-steps::before{content:'';position:absolute;top:28px;left:12.5%;right:12.5%;height:2px;background:linear-gradient(to right,#D85A30,#F0C8B0);z-index:0} @media(max-width:640px){.irori-collab-steps::before{display:none}} .irori-collab-step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 12px;position:relative;z-index:1} .irori-collab-num{width:56px;height:56px;border-radius:50%;background:#D85A30;color:#fff;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:0 4px 12px rgba(216,90,48,.30)} .irori-collab-step h3{font-size:15px;font-weight:700;color:#1A1A18;margin-bottom:8px;line-height:1.5} .irori-collab-step p{font-size:20px;color:#555553;line-height:1.8} /* ③ 対応範囲 */ .irori-scope{padding:68px 0 60px;background:#F8F5F0} .irori-scope-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:640px){.irori-scope-grid{grid-template-columns:1fr}} /* ④ 連携ツール */ .irori-tools{padding:68px 0 60px;background:#fff} .irori-tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:640px){.irori-tools-grid{grid-template-columns:1fr}} .irori-tool-card{background:#FAFAF8;border:1px solid #E8E6DF;border-radius:14px;padding:28px 20px 24px;text-align:center;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease} .irori-tool-card:hover{transform:translateY(-5px);box-shadow:0 10px 28px rgba(0,0,0,.08)} .irori-tool-icon{width:58px;height:58px;border-radius:50%;background:#FAECE7;display:flex;align-items:center;justify-content:center;margin:0 auto 16px} .irori-tool-card h3{font-size:16px;font-weight:700;color:#1A1A18;margin-bottom:8px;line-height:1.5} .irori-tool-card p{font-size:20px;color:#555553;line-height:1.85} /* ===================================================== 医師紹介タイムラインカード（irori-doctor-tl） ===================================================== */ .irori-doctor-tl-card{background:#fff;border:1px solid #EAE0D0;border-radius:18px;overflow:hidden;margin-bottom:24px} .irori-doctor-tl-card:last-child{margin-bottom:0} /* ヘッダー */ .irori-doctor-tl-header{display:flex;align-items:center;gap:24px;padding:28px 32px;border-bottom:1px solid #EAE0D0;background:#FDF8F2} .irori-doctor-tl-avatar{width:72px;height:72px;border-radius:50%;background:#E8DCC8;border:2px solid #D8C8A8;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden} .irori-doctor-tl-nameblock{flex:1} .irori-doctor-tl-role{font-size:10px;font-weight:600;letter-spacing:.18em;color:#C05030;text-transform:uppercase;margin-bottom:7px} .irori-doctor-tl-name{font-size:22px;font-weight:700;color:#2C1A0A;letter-spacing:.02em} .irori-doctor-tl-ruby{font-size:13px;font-weight:400;color:#9A7A5A;margin-left:10px;letter-spacing:.06em} /* ボディ：Specialist / Career の2分割（旧右メッセージは廃止し .irori-greeting へ分離） */ .irori-doctor-tl-body{display:block} .irori-doctor-tl-left{display:grid;grid-template-columns:1fr 1fr;gap:28px} .irori-doctor-tl-left .irori-doctor-tl-specialty{grid-column:1 / -1} @media(max-width:768px){.irori-doctor-tl-left{grid-template-columns:1fr;gap:18px}} /* セクションラベル */ .irori-doctor-tl-section-label{font-size:11px;font-weight:700;letter-spacing:.14em;color:#C05030;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:8px} .irori-doctor-tl-section-label::after{content:'';flex:1;height:1px;background:#EAE0D0} /* 資格（Specialist） */ .irori-doctor-tl-specialist{padding:28px 28px 20px 32px;border-bottom:1px solid #EAE0D0} .irori-doctor-tl-specialist-list{display:flex;flex-direction:column;gap:8px;background:#FDF5EC;border:1px solid #E8D8C0;border-radius:10px;padding:16px 18px} .irori-doctor-tl-specialist-item{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:#3A2010;line-height:1.6} .irori-doctor-tl-specialist-dot{width:7px;height:7px;border-radius:50%;background:#B8883A;flex-shrink:0;margin-top:6px} /* 経歴（Career）：シンプルリスト */ .irori-doctor-tl-career{padding:20px 28px 28px 32px;background:#fff} .irori-doctor-tl-list{display:flex;flex-direction:column;gap:8px} .irori-doctor-tl-item{display:flex;align-items:flex-start;gap:10px} .irori-doctor-tl-dot{width:7px;height:7px;border-radius:50%;background:#B8883A;flex-shrink:0;margin-top:6px} .irori-doctor-tl-item--last .irori-doctor-tl-dot{background:#2C1A0A;width:9px;height:9px;margin-top:5px} .irori-doctor-tl-text{font-size:14px;color:#3A2010;line-height:1.6} .irori-doctor-tl-item--last .irori-doctor-tl-text{font-weight:700;color:#2C1A0A} /* メッセージ */ .irori-doctor-tl-message{padding:28px 32px 28px 28px;border-left:1px solid #EAE0D0;background:#FAFAF8;display:flex;flex-direction:column} .irori-doctor-tl-msg-text{font-size:14px;color:#3A2010;line-height:2.0;margin-bottom:14px} .irori-doctor-tl-msg-text:last-child{margin-bottom:0} /* ======================================== shinryo page 統一感改善 (ideas 1-3) ======================================== */ /* ① eyebrow: shinryo各サブセクションのヘッダーを中央揃えに統一 */ .irori-shinryo-proc .irori-section-header, .irori-shinryo-general .irori-section-header { text-align: center; margin-bottom: 40px; } /* ② 背景色リズム: 医療処置セクションをウォームベージュに */ .irori-shinryo-proc { background: #F8F5F0; padding: 60px 0; } /* ② 一般処置は白に統一（明示） */ .irori-shinryo-general { background: #fff; padding: 60px 0; } /* ② 専門領域セクションも明示 */ .irori-shinryo { background: #fff; padding: 60px 0; } /* ③ 医療処置カード: 背景白 + borderが既にあるが、 セクション背景が#F8F5F0になったのでカードが浮き立つ さらにホバー時にオレンジborderでHOMEカードと統一 */ .irori-shinryo-proc .irori-proc-category { background: #fff; border: 1px solid #E8E6DF; border-radius: 12px; transition: border-color 0.2s; } .irori-shinryo-proc .irori-proc-category:hover { border-color: #D85A30; } /* ③ proc-category ドット色をHOMEのオレンジに統一 */ .irori-proc-item::before { background: #D85A30; } /* ======================================== HOME ヒーロー 水玉ベージュ + 草花アクセント → 和紙×流水紋に変更のため無効化 ======================================== */ /* ======================================== バッジ A案: アイコン付きカード ======================================== */ .irori-badges { background: #FAECE7; padding: 32px 0; } .irori-badges-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 640px) { .irori-badges-grid { grid-template-columns: 1fr; } } .irori-badge-item { background: #fff; border: 1.5px solid #F0C8B0; border-radius: 16px; padding: 24px 20px; text-align: center; border-right: 1.5px solid #F0C8B0; transition: box-shadow 0.2s, transform 0.2s; } .irori-badge-item:hover { box-shadow: 0 6px 24px rgba(216,90,48,0.15); transform: translateY(-2px); } .irori-badge-item:last-child { border-right: 1.5px solid #F0C8B0; } .irori-badge-icon { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #D85A30 0%, #F0997B 100%); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; flex-shrink: 0; } .irori-badge-icon svg { width: 24px; height: 24px; } .irori-badge-title { font-size: 15px; font-weight: 700; color: #1A0A04; line-height: 1.5; margin-bottom: 6px; } .irori-badge-sub { font-size: 13px; color: #7A5A3A; line-height: 1.6; } /* ======================================== HOME ドロップダウンサブナビ (A案) かがやきスタイル: ホバーでページ内リンク ======================================== */ /* HOMEのみ li.menu-item--home に has-dropdown クラスをJSで付与 */ .site-nav li.has-dropdown { position: relative; } /* 矢印アイコン */ .site-nav li.has-dropdown > a::after { content: ''; display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; margin-left: 5px; vertical-align: middle; opacity: 0.5; transition: transform 0.2s; } .site-nav li.has-dropdown:hover > a::after { transform: rotate(180deg); opacity: 1; } /* ドロップダウンメニュー本体 */ .site-nav li.has-dropdown .irori-dropdown { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: #fff; border: 0.5px solid #E8DECE; border-top: 2px solid #D85A30; border-radius: 0 0 8px 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.09); min-width: 160px; padding: 6px 0; z-index: 200; white-space: nowrap; } .site-nav li.has-dropdown:hover .irori-dropdown { display: block; } /* ドロップダウン内リンク */ .irori-dropdown a { display: flex !important; align-items: center; gap: 7px; padding: 8px 16px !important; font-size: 12px !important; color: #1A0A04 !important; text-decoration: none; transition: background 0.15s, color 0.15s; } .irori-dropdown a:hover { background: #FFF8F5 !important; color: #D85A30 !important; } .irori-dropdown a .dd-arrow { width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 5px solid #D9CFC0; flex-shrink: 0; transition: border-color 0.15s; } .irori-dropdown a:hover .dd-arrow { border-left-color: #D85A30; } /* HOME リンク自体のアクティブスタイル */ .site-nav li.has-dropdown > a { border-bottom: 2px solid #D85A30 !important; color: #D85A30 !important; } /* ======================================== ヘッダー・ナビ リデザイン 黒文字 / 下線なし / 太字 / 大きく / 間隔広め ======================================== */ /* ヘッダー高さを広げる */ .site-header .irori-inner, .site-header .irori-header-inner { height: 60px !important; } .site-header { min-height: 60px; } /* ナビ全体のgapを広げる */ .site-nav, .site-nav ul { gap: 6px !important; } /* ナビリンク: 黒・太字・サイズアップ・下線なし・間隔広め */ .site-nav a { color: #1A0A04 !important; font-size: 14px !important; font-weight: 700 !important; padding: 10px 16px !important; border-bottom: none !important; letter-spacing: .01em; } .site-nav a:hover { color: #D85A30 !important; } /* ドロップダウン付きリンク（現在のページ）: 下線なし */ .site-nav li.has-dropdown > a { color: #1A0A04 !important; border-bottom: none !important; font-weight: 700 !important; } .site-nav li.has-dropdown > a:hover { color: #D85A30 !important; } /* ▼矢印を黒に */ .site-nav li.has-dropdown > a::after { border-top-color: #1A0A04 !important; opacity: 0.45; } .site-nav li.has-dropdown:hover > a::after { border-top-color: #D85A30 !important; opacity: 1; } /* お問い合わせボタンはオレンジを維持・サイズ合わせ */ .site-nav .irori-nav-cta, .site-nav a.irori-nav-cta { color: #fff !important; font-size: 14px !important; padding: 8px 20px !important; } /* ======================================== ヘッダーナビ 追加上書き (.site-header nav a の !important に対抗) ======================================== */ .site-header nav a, .main-navigation a, .nav-menu a, .primary-menu a, #site-navigation a, .site-nav a { font-size: 15px !important; font-weight: 700 !important; color: #1A0A04 !important; padding: 10px 20px !important; border-bottom: none !important; letter-spacing: .01em !important; } .site-header nav a:hover, .site-nav a:hover { color: #D85A30 !important; } /* お問い合わせCTAボタンはオレンジ維持 */ .site-nav .irori-nav-cta, .site-nav a.irori-nav-cta, .site-header .irori-nav-cta { color: #fff !important; background: #D85A30 !important; padding: 8px 20px !important; font-size: 14px !important; } /* ヘッダー：垂直中央揃え・ロゴとナビの間隔 */ .site-header .container { height: 60px !important; align-items: center !important; } .header-nav-wrap { padding-left: 40px !important; } /* ============================================================ モバイルヘッダー 修正 (max-width: 768px) ロゴ: 変更なし / ドロワー: 縦型スライドイン ============================================================ */ @media (max-width: 768px) { /* ── ヘッダー全体 ── */ .site-header .container { position: relative; } /* ── ロゴ: サイズを少し小さく ── */ .site-logo__img { height: 50px !important; width: auto !important; } /* ── ハンバーガー: 3本線アニメーション ── */ .menu-toggle { display: flex !important; flex-direction: column; gap: 5px; padding: 8px 6px; background: none; border: none; cursor: pointer; z-index: 210; position: relative; } .menu-toggle span { display: block; height: 2px; background: #1A0A04; border-radius: 2px; transition: transform .25s ease, opacity .2s ease, width .2s ease; transform-origin: center; } .menu-toggle span:nth-child(1) { width: 22px; } .menu-toggle span:nth-child(2) { width: 16px; } .menu-toggle span:nth-child(3) { width: 22px; } /* 開いた時: × に変形 */ .menu-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); width: 22px; } .menu-toggle.is-active span:nth-child(2) { opacity: 0; width: 0; } .menu-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); width: 22px; } /* ── オーバーレイ（ドロワー背後の暗幕） ── */ /* ── ナビ: ドロワー化 ── */ .site-nav { display: block !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: #fff !important; z-index: 200 !important; overflow-y: auto !important; transform: translateX(100%) !important; transition: transform .3s cubic-bezier(.4,0,.2,1) !important; padding-top: 0 !important; flex-direction: column !important; } .site-nav.is-open { transform: translateX(0) !important; } /* ── ドロワーヘッダー（閉じるボタン + タイトル） ── */ /* ── ドロワー内 電話ボタン ── */ /* ── ドロワー内 ナビリンク ── */ .site-nav ul { display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 0 !important; list-style: none !important; } .site-nav ul li { border-bottom: 1px solid #F5F0EA !important; } .site-nav ul li a { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 16px 20px !important; font-size: 15px !important; font-weight: 700 !important; color: #1A0A04 !important; border-bottom: none !important; text-decoration: none !important; } .site-nav ul li a::after { /* モバイル修正: デスクトップ下線(::after)の漏れを打消し、本来のインライン矢印に戻す */ position: static !important; background: none !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; content: '›' !important; font-size: 20px !important; color: #D85A30 !important; font-weight: 400 !important; border: none !important; width: auto !important; height: auto !important; opacity: 1 !important; transform: none !important; margin-left: 0 !important; } .site-nav ul li a:hover { background: #FFF8F5 !important; color: #D85A30 !important; } /* ── ドロップダウン・sub-menu: モバイルでは常時展開 ── */ .site-nav li .irori-dropdown, .site-nav .sub-menu { display: block !important; position: static !important; transform: none !important; background: #3A2010 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; min-width: auto !important; width: 100% !important; padding: 4px 0 !important; z-index: auto !important; } .site-nav .sub-menu li { border-bottom: none !important; } .site-nav li .irori-dropdown a, .site-nav .sub-menu a { display: flex !important; align-items: center !important; justify-content: flex-start !important; padding: 12px 20px 12px 32px !important; font-size: 13px !important; font-weight: 500 !important; color: #F5E8D8 !important; background: none !important; border-bottom: none !important; border-left: none !important; } .site-nav li .irori-dropdown a::before, .site-nav .sub-menu a::before { content: '›' !important; color: #D85A30 !important; margin-right: 8px !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1 !important; } .site-nav li .irori-dropdown a::after, .site-nav .sub-menu a::after { content: none !important; } .site-nav li .irori-dropdown a:hover, .site-nav .sub-menu a:hover { background: rgba(216,90,48,0.25) !important; color: #fff !important; } /* 親リンクの矢印アイコンを非表示 */ .site-nav li.menu-item-has-children > a::after, .site-nav li.has-dropdown > a::after { display: none !important; } /* ── ドロワー内 受付時間 ── */ @keyframes drawer-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(122,184,156,.5); } 50% { box-shadow: 0 0 0 6px rgba(122,184,156,.0); } } /* ── お問い合わせボタンはオレンジ維持 ── */ .site-nav ul li:last-child a, .site-nav ul li .irori-nav-cta { color: #D85A30 !important; } } /* ============================================================ モバイルドロワー ページ内リンク（サブリスト） ============================================================ */ @media (max-width: 768px) { /* サブリスト全体 */ /* サブリンク各項目 */ /* 患者数サブリンク（特別スタイル） */ } /* ============================================================ モバイルドロワー サブリンク 詳細度修正 .site-nav ul li a の !important を上書き ============================================================ */ @media (max-width: 768px) { /* サブリンクは一般ルールを無効化 */ /* ::after の › を無効化（サブリンクには::before で › を付ける） */ /* サブリストのliには下線なし */ } /* ============================================================ モバイルドロワー 重複修正 サブリスト内の li に main スタイルが当たる問題を解消 ============================================================ */ @media (max-width: 768px) { /* サブリストの li: border / padding をリセット */ /* サブリスト内の a: 一般ルールを無効化 */ /* irori-drawer-sub-link クラスのもののみ表示 */ /* 電話ボタン: 最下部に移動後のスタイル調整 */ } /* ============================================================ ドロワー ×ボタン スタイル修正（青框を除去） ============================================================ */ /* ============================================================ ドロワー閉じるボタン iOS修正（青枚・タップハイライト完全無効化） ============================================================ */ /* ============================================================ モバイルドロワー A案 フラット・区切り線デザイン ============================================================ */ @media (max-width: 768px) { .site-nav { background: #FFFEFB !important; } .site-nav > ul > li { border-bottom: none !important; padding: 0 !important; } .site-nav > ul > li > a { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 16px 20px !important; font-size: 15px !important; font-weight: 700 !important; color: #1A0A04 !important; border-bottom: none !important; border-top: 1px solid #F0EDE8 !important; background: #FFFEFB !important; } .site-nav > ul > li > a::after { content: "\203a" !important; font-size: 22px !important; font-weight: 400 !important; color: #D85A30 !important; border: none !important; width: auto !important; height: auto !important; opacity: 1 !important; transform: none !important; margin-left: 0 !important; flex-shrink: 0 !important; } .site-nav > ul > li > a:hover { background: #FFF8F5 !important; color: #D85A30 !important; } .site-nav > ul > li:first-child > a { border-top: none !important; } } /* ============================================================ ドロワー閉じるボタン v6 修正（×文字のみ、SVG廃止） ============================================================ */ @media (max-width: 768px) { /* SVGが混入していた場合に備えて非表示 */ } /* ============================================================ ドロワー開時: ハンバーガー非表示（×ボタン重複解消） ============================================================ */ @media (max-width: 768px) { /* ドロワーが開いている時（is-active）はハンバーガーを非表示 */ .menu-toggle.is-active { display: none !important; } } /* ============================================================ オーバーレイ廃止（v8）: pointer-events:none で無効化 ============================================================ */ /* CTA tel button - SVG icon color (override hardcoded white stroke) */ .irori-cta-tel svg, .irori-cta-tel svg path { stroke: #993C1D !important; } /* ============================================================ /shinryo/ ページヘッダー統合 page-hero を廃止し、section-header が入り口の役割を兼ねる ============================================================ */ /* section-header にpage-hero相当のベージュ帯を付与 */ .irori-shinryo .irori-section-header { background: linear-gradient(135deg, #FDF6EE 0%, #F5E8D5 100%); margin: -60px calc(50% - 50vw) 40px; padding: 48px calc(50vw - 50%) 36px; width: 100vw; } /* section-titleをh1相当のサイズに格上げ */ .irori-shinryo .irori-section-title { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; } /* ===== 外来診療日スケジュールカード ===== */ .schedule-section { max-width: 720px; margin: 0 auto; padding: 0 16px; } .schedule-card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 16px; padding: 28px 28px 22px; } .schedule-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; } .schedule-card__icon { color: #D85A30; flex-shrink: 0; } .schedule-card__title { font-size: 18px; font-weight: 600; color: #2b2b2b; } .schedule-grid { display: grid; grid-template-columns: 120px repeat(7, 1fr); gap: 8px; align-items: center; } .schedule-grid__day { text-align: center; font-size: 14px; color: #888; } .schedule-grid__rowlabel { font-size: 13px; color: #888; text-align: right; padding-right: 4px; } .schedule-cell { text-align: center; padding: 14px 4px; border-radius: 8px; font-size: 14px; font-weight: 600; line-height: 1.2; } .schedule-cell--gairai { background: #F0997B; color: #4A1B0C; } .schedule-cell--homon { background: #FBEEE9; color: #A8693F; } .schedule-cell--off { background: #F1EFE8; color: #b4b2a9; font-weight: 400; } .schedule-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; } .schedule-legend__item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #888; } .schedule-legend__swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; } .schedule-legend__swatch--gairai { background: #F0997B; } .schedule-legend__swatch--homon { background: #FBEEE9; } .schedule-card__foot { border-top: 1px solid rgba(0,0,0,.08); margin-top: 18px; padding-top: 16px; font-size: 14px; color: #888; } @media (max-width: 600px) { .schedule-card { padding: 20px 16px 18px; } .schedule-grid { grid-template-columns: 84px repeat(7, 1fr); gap: 4px; } .schedule-grid__rowlabel { font-size: 11px; padding-right: 2px; } .schedule-grid__day { font-size: 12px; } .schedule-cell { padding: 10px 2px; font-size: 12px; border-radius: 6px; } .schedule-card__foot { font-size: 13px; } } /* === モバイル微調整 (Claude 2026-06) === */ html, body { overflow-x: clip; } /* ドロワー最終項目(オレンジCTA)の文字を白に */ nav.site-nav li:last-child > a { color: #fff !important; } /* === /モバイル微調整 === */ /* === HOMEスマホ最適化 (Claude 2026-06) === */ @media (max-width:480px){ .irori-hero{ padding-top:20px !important; padding-bottom:24px !important; } .irori-hero h1{ line-height:1.55 !important; margin-bottom:14px !important; } .irori-hero-text p{ font-size:15px !important; line-height:2.0 !important; letter-spacing:-0.01em !important; } .irori-btn-primary,.irori-btn-secondary{ display:flex !important; width:100% !important; box-sizing:border-box !important; justify-content:center !important; align-items:center !important; min-height:54px !important; font-size:17px !important; padding:14px 16px !important; margin:0 0 12px !important; } .irori-eyebrow{ font-size:12px !important; letter-spacing:0.16em !important; } .irori-section-header h2{ font-size:22px !important; line-height:1.5 !important; } .irori-service-title,.irori-what-card h3{ font-size:18px !important; line-height:1.5 !important; } .irori-service-card p,.irori-what-card p{ font-size:15px !important; line-height:1.9 !important; } body{ font-size:16px !important; } section.irori-services,section.irori-about,section.irori-schedule,section.irori-access{ padding-top:40px !important; padding-bottom:40px !important; } } /* === /HOMEスマホ最適化 === */ /* === HOMEスマホ最適化2 (Claude 2026-06) === */ @media (max-width:480px){ .irori-what .irori-section-sub{ font-size:14px !important; } .irori-access .irori-section-sub{ display:none !important; } .irori-access-table,.irori-access-table tbody,.irori-access-table tr,.irori-access-table th,.irori-access-table td{ display:block !important; width:auto !important; } .irori-access-table tr{ padding:12px 16px !important; border-bottom:1px solid #eee2d8 !important; } .irori-access-table th,.irori-access-table td{ border:0 !important; padding:0 !important; background:transparent !important; } .irori-access-table tr>*:first-child{ font-size:12px !important; color:#9a8c80 !important; margin-bottom:3px !important; letter-spacing:0.04em !important; } .irori-access-table tr>*:last-child{ font-size:16px !important; line-height:1.6 !important; } .irori-access-table a[href^="tel:"]{ white-space:nowrap !important; font-size:18px !important; } } /* === /HOMEスマホ最適化2 === */ /* === 他ページ調整 (Claude 2026-06) === */ @media (max-width:480px){ /* 費用表: 横スクロール化 */ .irori-cost-table{ display:block !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; } .irori-cost-table th,.irori-cost-table td{ white-space:nowrap !important; } /* 電話CTAの番号を1行に */ .irori-cta-tel-num{ white-space:nowrap !important; } /* セクション見出しを22pxに統一 */ html body[class] .irori-section-title{ font-size:22px !important; line-height:1.5 !important; } } /* === /他ページ調整 === */ /* === サービスカード余白圧縮 (Claude 2026-06) === */ @media (max-width:480px){ .irori-service-card{ display:block !important; padding:16px !important; } .irori-service-icon{ float:left !important; margin:0 12px 6px 0 !important; } .irori-service-body{ width:auto !important; } .irori-service-head{ overflow:hidden !important; } .irori-service-desc{ line-height:1.7 !important; margin-bottom:8px !important; clear:both !important; } .irori-service-link{ clear:both !important; } } /* === /サービスカード余白圧縮 === */ /* === drawer submenu last-child orange leak fix (Claude 2026-06) === */ .site-nav .irori-drawer-sub li:last-child > a{ background:transparent !important; color:#1A0A04 !important; padding:16px 20px !important; border-radius:0 !important; font-size:15px !important; } /* === /drawer submenu last-child orange leak fix === */ /* ===================================================== ハンバーガードロワー内 電話ボタン（ピル型・スクショ準拠） v2.0.4 ===================================================== */ .irori-drawer-tel{ display:flex !important; align-items:center; justify-content:center; gap:12px; background:#FBF0EA; border:2px solid #C0492A !important; border-radius:9999px !important; padding:16px 24px; margin:8px 0; color:#B0431F; text-decoration:none; box-sizing:border-box; min-height:54px; } .irori-drawer-tel .irori-drawer-tel-num{ font-size:clamp(20px, 6vw, 26px); font-weight:700; letter-spacing:.04em; line-height:1.1; color:#B0431F; } .irori-drawer-tel .irori-drawer-tel-label, .irori-drawer-tel .irori-drawer-tel-arr{ display:none !important; } .irori-drawer-tel .irori-drawer-tel-icon img.emoji{ display:none !important; } .irori-drawer-tel .irori-drawer-tel-icon{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:clamp(20px, 5.5vw, 26px); height:clamp(20px, 5.5vw, 26px); background-color:#B0431F; -webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center / contain; mask:url("data:image/svg+xml;utf8,") no-repeat center / contain; } /* ドロワー電話ボタン：.site-nav a の border-bottom:none を打ち消す（詳細度UP） */ #primary-nav.site-nav a.irori-drawer-tel{ border:2px solid #C0492A !important; border-radius:9999px !important; } /* ===================================================== ドロワーヘッダー：ロゴ左・×右（space-between）＆受付状況の非表示 v2.0.5 ===================================================== */ #primary-nav .irori-drawer-head{ display:flex !important; align-items:center; justify-content:space-between !important; gap:12px; } #primary-nav .irori-drawer-close{ margin-left:auto; /* 念のため確実に右へ */ flex:none; } /* 「現在 受付時間外」表示を非表示 */ #primary-nav .irori-drawer-hours{ display:none !important; } /* ===================================================== ドロワー お問い合わせボタン：PCヘッダーと色調統一（塗りコーラル・白文字）v2.0.6 ===================================================== */ #primary-nav a.irori-drawer-tel{ background:#C05030 !important; /* PCヘッダーと同じ塗り */ border:none !important; /* 枠線なし */ color:#fff !important; margin-top:20px !important; /* 「医療・介護関係者の方へ」との間隔を広げる */ } #primary-nav a.irori-drawer-tel .irori-drawer-tel-num{ color:#fff !important; } /* 電話アイコン（受話器マスク）を削除 */ #primary-nav a.irori-drawer-tel .irori-drawer-tel-icon{ display:none !important; } /* ドロワーお問い合わせボタン：枠線打ち消し（詳細度を旧ルールに合わせる）v2.0.6 */ #primary-nav.site-nav a.irori-drawer-tel{ border:none !important; background:#C05030 !important; } /* ドロワーお問い合わせボタン：横幅を内容に合わせて狭く・中央寄せ v2.0.7 */ #primary-nav.site-nav a.irori-drawer-tel{ width:fit-content !important; max-width:100%; margin-left:auto !important; margin-right:auto !important; padding-left:40px !important; padding-right:40px !important; } /* ===================================================== バグ修正：PC幅でドロワー挿入要素（ロゴ/受付/お問い合わせ/×）が残留して 巨大表示されるのを防ぐ。挿入要素はモバイル幅専用。 v2.0.8 ===================================================== */ @media (min-width: 769px){ #primary-nav .irori-drawer-head, #primary-nav .irori-drawer-hours, #primary-nav .irori-drawer-tel, #primary-nav .irori-drawer-sub, #primary-nav .irori-drawer-close, #primary-nav .irori-drawer-head-logo{ display:none !important; } } /* ======================================== アクセシビリティ ユーティリティ ======================================== */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; white-space: nowrap; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0,0,0,.6); clip: auto !important; -webkit-clip-path: none; clip-path: none; color: #21759b; display: block; font-size: 14px; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /* ================================================================ ページ別 CSS（旧インライン