@charset "UTF-8"; /* 日本IDDMネットワーク｜共通スタイル style.css －詳細は CSS-REGULATION.md － */ /* 1〜3. 基盤・共通パーツ・下層ページ －詳細は CSS-REGULATION.md － */ /* @editor-start */ :root{ --blue:#2E93BF; --blue-d:#1F7BA4; --blue-l:#EAF4F9; --blue-xl:#F5FAFC; --rose:#DB6A9B; --rose-d:#C5527F; --green:#099B7B; --orange:#E2933D; --ink:#2B3841; --sub:#7C8992; --line:#E3EBEF; --shadow:0 14px 40px rgba(25,70,95,.08); --shadow-lg:0 26px 64px rgba(25,70,95,.14); --slow:cubic-bezier(.52,.08,.02,.98); --r-btn:8px; --r-card:12px; --r-panel:16px; --r-chip:6px; --form-btn:#1F7BA4; --form-err:#C0392B; --f:'Noto Sans JP',sans-serif; --f-num:'Inter','Noto Sans JP',sans-serif; } /* @editor-end */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:100px;overflow-x:hidden;overflow-x:clip} body{font-family:var(--f);color:var(--ink);background:#fff;line-height:1.95;font-size:15px;letter-spacing:.02em;-webkit-font-smoothing:antialiased} a{text-decoration:none;color:inherit} img{max-width:100%;display:block} .wrap{max-width:1200px;margin:0 auto;padding:0 32px} .narrow{max-width:880px;margin:0 auto} .screen-reader-text{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } .screen-reader-text:focus{ position:static; width:auto; height:auto; margin:0; padding:.6em 1em; overflow:visible; clip-path:none; white-space:normal; background:#fff; color:var(--ink); box-shadow:0 0 0 2px var(--blue); border-radius:6px; } .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;height:62px;padding:0 30px;font-weight:700;font-size:15px;letter-spacing:.04em;line-height:1.5;cursor:pointer;border:none;font-family:var(--f);border-radius:var(--r-btn);vertical-align:middle; transition:background .4s var(--slow),color .4s var(--slow),transform .5s var(--slow),border-radius .5s var(--slow)} .btn .arw{position:relative;width:26px;height:1.5px;background:currentColor;transition:width .45s var(--slow);flex:none} .btn .arw::after{content:"";position:absolute;right:0;top:50%;width:8px;height:8px;box-sizing:border-box;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-50%) rotate(-45deg)} /* 矢印は線と先をまとめて1枚のSVGで描きます。 別々に描くと、線のほうが太く見えたり、線が先を突き抜けたりするためです。 マスク非対応の環境では、上の「線＋枠線」の作りがそのまま残ります。 */ @supports ((-webkit-mask-image:url(a)) or (mask-image:url(a))){ .btn .arw{width:30px;height:12px;background:currentColor;transition:transform .45s var(--slow); -webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center/contain;mask:url("data:image/svg+xml;utf8,") no-repeat center/contain} .btn .arw::after{content:none} /* ホバーは「線が伸びる」から「矢印が少し前に出る」に変えています。 1枚のSVGは引き伸ばすと先まで歪むためです。 */ .btn:hover .arw{width:30px;transform:translateX(5px)} .btn .arw.l{transform:scaleX(-1)} .btn:hover .arw.l{transform:scaleX(-1) translateX(5px)} } .btn:hover{transform:translateY(-3px)} .btn:hover .arw{width:38px} .btn-rose{background:var(--rose);color:#fff} .btn-rose:hover{background:var(--rose-d)} .btn-blue{background:var(--blue);color:#fff} .btn-blue:hover{background:var(--blue-d)} .btn-out{position:relative;background:transparent;color:var(--blue);box-shadow:inset 0 0 0 1.5px var(--blue);overflow:hidden;z-index:0} .btn-out::before{content:"";position:absolute;inset:0;background:var(--blue);transform:translateY(101%);transition:transform .55s var(--slow);z-index:-1} .btn-out:hover{color:#fff} .btn-out:hover::before{transform:translateY(0)} .btn-sm{height:52px;padding:0 24px;font-size:14px;border-radius:7px} .tlink{display:inline-flex;align-items:center;gap:13px;font-size:14px;font-weight:700;letter-spacing:.04em} .tlink .c{position:relative;width:38px;height:38px;border:1.5px solid var(--blue);border-radius:50%;flex:none;overflow:hidden;transition:.4s var(--slow)} .tlink .c::before{content:"";position:absolute;inset:0;background:var(--blue);border-radius:50%;transform:scale(0);transition:transform .5s var(--slow)} .tlink .c::after{content:"";position:absolute;left:14px;top:50%;width:8px;height:8px;box-sizing:border-box; border-right:1.5px solid var(--blue);border-bottom:1.5px solid var(--blue); transform:translate(0,-50%) rotate(-45deg); transition:border-color .4s var(--slow),transform .5s var(--slow)} .tlink:hover .c::before{transform:scale(1)} .tlink:hover .c::after{border-color:#fff;transform:translate(3px,-50%) rotate(-45deg)} header{position:sticky;top:0;z-index:100;border-bottom:1px solid var(--line);overflow:visible} header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.97);backdrop-filter:blur(16px)} .hd{position:relative;z-index:100;display:flex;align-items:center;justify-content:flex-start;height:84px;max-width:1340px;margin:0 auto;padding:0 32px;gap:16px} .gnav{margin-left:auto} .logo img{height:42px;width:auto} .gnav>ul{display:flex;gap:20px;list-style:none;align-items:center;flex-wrap:nowrap} .gnav>ul>li{position:relative} .gnav>ul>li>a{font-size:13.5px;font-weight:500;letter-spacing:.03em;padding:32px 0;display:block;position:relative;white-space:nowrap} .gnav>ul>li>a::after{content:"";position:absolute;left:0;right:0;bottom:26px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--slow)} .gnav>ul>li:hover>a::after,.gnav>ul>li.cur>a::after{transform:scaleX(1)} .gnav>ul>li:hover>a,.gnav>ul>li.cur>a{color:var(--blue)} .submenu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-10px);min-width:268px;background:#fff;border:1px solid var(--line);border-top:2px solid var(--blue);border-radius:var(--r-card);padding:14px;opacity:0;visibility:hidden;transition:.4s var(--slow);z-index:99;box-shadow:var(--shadow-lg)} .gnav>ul>li.has-sub:hover .submenu, .gnav>ul>li.has-sub:focus-within .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .submenu::before{content:"";position:absolute;top:-20px;left:0;right:0;height:20px} .submenu .smt{display:flex;align-items:center;justify-content:space-between;gap:8px; font-family:var(--f);font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--ink); padding:8px 10px 10px;margin-bottom:6px;border-bottom:1px solid var(--line); transition:color .3s var(--slow)} .submenu a.smt::after{content:"→";color:var(--blue);font-family:var(--f-num); opacity:.5;transition:.35s var(--slow)} .submenu a.smt:hover{color:var(--blue)} .submenu a.smt:hover::after{opacity:1;transform:translateX(3px)} .submenu ul{list-style:none} .submenu li a{font-size:12.5px;display:flex;justify-content:space-between;gap:8px;padding:10px;border-radius:var(--r-chip);transition:.3s var(--slow)} .submenu li a::after{content:"→";color:var(--blue);font-family:var(--f-num);opacity:0;transform:translateX(-6px);transition:.35s var(--slow)} .submenu li a:hover{background:var(--blue-xl);color:var(--blue);padding-left:14px} .submenu li a:hover::after{opacity:1;transform:none} .submenu li a.on{background:var(--blue-xl);color:var(--blue);font-weight:700} /* ナビと寄付ボタンの間は必ず32px空けます（ここが詰まると窮屈に見えます） */ .hd-right{display:flex;align-items:center;gap:14px;margin-left:32px;flex:none} .hd .btn{height:48px;padding:0 20px;font-size:13px;border-radius:7px;white-space:nowrap} .search-btn{position:relative;width:52px;height:52px;background:transparent;border:1.5px solid var(--blue);color:var(--blue);cursor:pointer;border-radius:10px;display:flex;align-items:center;justify-content:center;transition:.4s var(--slow);flex:none} .search-btn:hover{background:var(--blue);color:#fff} .search-btn .mag{position:absolute;width:15px;height:15px;border:1.5px solid currentColor;border-radius:50%;transition:opacity .3s var(--slow),transform .4s var(--slow)} .search-btn .mag::after{content:"";position:absolute;right:-6px;bottom:-5px;width:8px;height:1.5px;background:currentColor;transform:rotate(45deg)} .search-btn .cls{position:absolute;width:16px;height:16px;opacity:0;transform:rotate(-90deg) scale(.6);transition:opacity .3s var(--slow),transform .45s var(--slow)} .search-btn .cls::before,.search-btn .cls::after{content:"";position:absolute;top:50%;left:0;width:100%;height:1.5px;background:currentColor;border-radius:1px} .search-btn .cls::before{transform:rotate(45deg)} .search-btn .cls::after{transform:rotate(-45deg)} .search-btn.on .mag{opacity:0;transform:rotate(90deg) scale(.6)} .search-btn.on .cls{opacity:1;transform:rotate(0) scale(1)} .search-panel{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-12px);transition:.45s var(--slow);z-index:101} .search-panel.open{opacity:1;visibility:visible;transform:none} @media(min-width:1341px){ .hd>.search-panel{left:50%;right:auto;width:100vw;max-width:100vw;transform:translateX(-50%) translateY(-12px)} .hd>.search-panel.open{transform:translateX(-50%)} } .search-inner{max-width:880px;margin:0 auto;padding:34px 32px 38px} .search-form{display:flex;gap:12px;align-items:center;border-bottom:2px solid var(--blue);padding-bottom:12px;min-width:0} .search-form input{flex:1 1 0%;min-width:0;width:100%;border:none;outline:none;font-family:var(--f);font-size:17px;color:var(--ink);background:transparent;padding:6px 2px} .search-form button{flex:none;white-space:nowrap} .search-form input::placeholder{color:#a9b6be} .search-form button{background:var(--blue);color:#fff;border:none;height:46px;padding:0 24px;font-family:var(--f);font-weight:700;font-size:14px;cursor:pointer;border-radius:var(--r-btn);transition:.4s var(--slow)} .search-form button:hover{background:var(--blue-d)} .search-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;align-items:center} .search-tags span{font-size:11.5px;color:var(--sub);margin-right:4px} .search-tags a{font-size:12px;font-weight:700;color:var(--blue);border:1px solid var(--line);padding:6px 14px;border-radius:var(--r-chip);transition:.35s var(--slow)} .search-tags a:hover{background:var(--blue);border-color:var(--blue);color:#fff} .hamb{display:none;position:relative;width:54px;height:52px;background:transparent;border:1.5px solid var(--blue);cursor:pointer;overflow:hidden;border-radius:10px;transition:.4s var(--slow)} .hamb .lines{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px} .hamb .lines i{display:block;height:1.5px;background:var(--blue);transition:.45s var(--slow)} .hamb .lines i:nth-child(1){width:23px} .hamb .lines i:nth-child(2){width:15px} .hamb .lines i:nth-child(3){width:23px} .hamb:hover .lines i:nth-child(2){width:23px} .hamb.on{border-color:var(--blue);background:var(--blue)} .hamb.on .lines i{background:#fff} .hamb.on .lines i:nth-child(1){transform:translateY(8.5px) rotate(45deg);width:22px} .hamb.on .lines i:nth-child(2){opacity:0;width:0} .hamb.on .lines i:nth-child(3){transform:translateY(-8.5px) rotate(-45deg);width:22px} .mnav{position:fixed;inset:0;z-index:99;background:#fff;overflow-y:auto;padding:104px 26px 48px;display:none;clip-path:circle(0% at calc(100% - 58px) 42px);transition:clip-path .7s var(--slow)} .mnav.open{clip-path:circle(150% at calc(100% - 58px) 42px)} .mnav .grp{border-bottom:1px solid var(--line);padding:8px 0} .mnav .grp>b{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;padding:12px 2px} .mnav .grp>b::before{content:"";width:14px;height:2px;background:var(--blue)} .mnav .grp a{display:block;font-size:13.5px;color:var(--sub);padding:9px 0 9px 26px} /* 親項目もリンクにするため、b の中の a だけ子リンクの装飾を打ち消す */ .mnav .grp>b a{display:inline;padding:0;font-size:inherit;color:inherit;font-weight:inherit} .mnav .grp>b{justify-content:space-between} .mnav .grp>b>a{flex:1 1 auto} /* ＋ボタン。線2本を重ねて描き、開いたら横線だけにします（＋→−） */ .mnav .grp-t{position:relative;flex:none;width:40px;height:40px;margin:-8px -8px -8px 0; padding:0;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none; border-radius:50%;transition:background .3s var(--slow)} .mnav .grp-t:hover{background:var(--blue-xl)} .mnav .grp-t::before, .mnav .grp-t::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:2px; background:var(--blue);transform:translate(-50%,-50%);transition:transform .35s var(--slow)} .mnav .grp-t::after{transform:translate(-50%,-50%) rotate(90deg)} /* 開いているとき（aria-expanded="true"）は縦線を寝かせて「−」にします */ .mnav .grp-t[aria-expanded="true"]::after{transform:translate(-50%,-50%) rotate(0deg)} /* 閉じている中身。hidden 属性はJSが付け外しします */ .mnav .grp-sub[hidden]{display:none} .mnav .grp-sub a:last-child{padding-bottom:4px} .mnav .m-cta{margin-top:28px;display:flex;flex-direction:column;gap:12px} .mnav .m-cta .btn{width:100%;justify-content:center} .crumb-bar{background:var(--blue-xl);border-bottom:1px solid var(--line)} .crumb{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;height:46px;font-size:11.5px;color:var(--sub);overflow-x:auto;white-space:nowrap} .crumb a:hover{color:var(--blue)} .crumb .sep{width:9px;height:9px;border-right:1px solid #c3d2da;border-bottom:1px solid #c3d2da;transform:rotate(-45deg);flex:none;opacity:.9} .crumb .cur{color:var(--ink);font-weight:700} .page-head{position:relative;background:linear-gradient(170deg,var(--blue-l) 0%,var(--blue-xl) 60%,#fff 100%);overflow:hidden;padding:58px 0 54px} .page-head::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);top:-200px;right:-110px;pointer-events:none} .page-head::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;border:1.5px solid rgba(46,147,191,.13);bottom:-160px;right:200px;pointer-events:none} .page-head .inner{position:relative;z-index:2} .page-head .cat{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--blue)} .page-head .cat::before{content:"";width:30px;height:1.5px;background:var(--blue)} .page-head h1{font-size:clamp(27px,3.8vw,42px);font-weight:700;letter-spacing:.06em;line-height:1.4;margin:16px 0 0} /* カテゴリの説明文（管理画面のカテゴリ編集で入力した内容）。空なら出力されません */ .page-head .lead{max-width:760px;margin:18px 0 0;font-size:15px;line-height:1.95;color:var(--sub)} .page-head .lead p{margin:0} .article{padding:76px 0 86px} /* @editor-start */ .entry-content :is(h2,h3){clear:both} .entry-content{--txt:#3f4d57;--txt-size:15px;--txt-lh:1.9;--txt-mb:1.15em} .entry-content :where(p,li,dd,td,th) :where(a:not([class])){ color:var(--cl-blue-d); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.22em; text-decoration-color:rgba(46,147,191,.45); transition:color .3s var(--cl-slow),text-decoration-color .3s var(--cl-slow); } .entry-content :where(p,li,dd,td,th) :where(a:not([class])):hover{ color:var(--cl-blue); text-decoration-color:currentColor; } :is(.entry-content,.cl-content,.demo) :where(p,li,dd,td,th) :where(a:not([class])[target="_blank"])::after{ content:"↗"; display:inline-block; margin-left:.28em; font-family:var(--f-num); font-weight:600; font-size:.94em; line-height:1; vertical-align:.02em; text-decoration:none; } .cl-linkcard a, .cl-way-langs a, .cl-ways :is(h2,h3,h4,h5) a{ text-decoration:none; color:inherit; } .share a::after, .pager a::after, .crumb a::after, .post-nav a::after, .cl-way-langs a::after, .cl-toc a::after, .cl-yt a::after, .cl-tags a::after, .spbar a::after, footer a::after{ content:none; } .entry-content p{margin:var(--txt-mb) 0;color:var(--txt);font-size:var(--txt-size);line-height:var(--txt-lh)} .entry-content>p:first-child{margin-top:0} /* @editor-end */ .cl-note{font-size:.84rem;color:var(--sub);border-top:1px dashed var(--line);padding-top:.85em;margin-top:1.4em} .cl-info,.cl-tip,.cl-warn{position:relative;border-radius:var(--r-card);padding:1.55em 1.8em 1.5em;margin:1.9em 0;border:1px solid;clear:both} .cl-info::before,.cl-tip::before,.cl-warn::before{display:flex;align-items:center;gap:.7em;font-family:var(--f-num);font-size:10.5px;font-weight:700;letter-spacing:.18em;margin-bottom:.7em} .cl-info :is(p,ul,ol),.cl-tip :is(p,ul,ol),.cl-warn :is(p,ul,ol){font-size:.95rem;line-height:1.95;margin:0;color:#3f4d57} .cl-info{border-color:rgba(46,147,191,.34);background:rgba(46,147,191,.035)} .cl-info::before{content:"― INFORMATION";color:var(--blue)} .cl-tip{border-color:rgba(9,155,123,.34);background:rgba(9,155,123,.035)} .cl-tip::before{content:"― POINT";color:var(--green)} .cl-warn{border-color:rgba(226,147,61,.4);background:rgba(226,147,61,.045)} .cl-warn::before{content:"― CAUTION";color:var(--orange)} .share{max-width:880px;margin:44px auto 0;padding:32px 0 0;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap} .share .lb{font-size:12.5px;font-weight:700;color:var(--sub);letter-spacing:.04em} .share ul{list-style:none;display:flex;gap:10px} .share a{width:46px;height:46px;border:1.5px solid var(--line);border-radius:var(--r-btn);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;font-family:var(--f-num);color:var(--sub);transition:.4s var(--slow)} .share a:hover{border-color:var(--blue);background:var(--blue);color:#fff;transform:translateY(-3px)} .entry-content .share a{text-decoration:none} .entry-content .share ul{margin:0;padding:0} .share .copy-url{position:relative} .share .copy-url::after{ position:absolute;bottom:calc(100% + 8px);left:50%; transform:translateX(-50%) translateY(4px); background:var(--ink);color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em; white-space:nowrap;padding:5px 10px;border-radius:5px; opacity:0;pointer-events:none;transition:.3s var(--slow)} .share .copy-url.is-copied{border-color:var(--blue);background:var(--blue);color:#fff} .share .copy-url.is-copied::after{content:"コピーしました";opacity:1;transform:translateX(-50%) translateY(0)} .share .copy-url.is-failed{border-color:var(--form-err);color:var(--form-err)} .share .copy-url.is-failed::after{content:"コピーできませんでした";background:var(--form-err);opacity:1;transform:translateX(-50%) translateY(0)} .related{background:var(--blue-xl);padding:92px 0} .sec-head{margin-bottom:46px} .sec-head.center{text-align:center} .sec-head .en{font-family:var(--f-num);font-size:11.5px;letter-spacing:.22em;font-weight:700;color:var(--blue);display:block;margin-bottom:13px} .sec-head h2{font-weight:700;font-size:clamp(23px,3vw,31px);line-height:1.4;letter-spacing:.06em;display:inline-block;padding-bottom:16px;position:relative} .sec-head h2::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:3px;background:var(--blue);border-radius:2px} .sec-head.center h2::after{left:50%;transform:translateX(-50%)} .cta-sec{padding:92px 0} .cl-cta{position:relative;border-radius:var(--r-panel);overflow:hidden;background:var(--blue-l);padding:clamp(40px,6vw,72px) clamp(24px,4vw,56px)} .cl-cta::before,.cl-cta::after{content:"";position:absolute;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);pointer-events:none} .cl-cta::before{width:360px;height:360px;top:-150px;right:-110px} .cl-cta::after{width:260px;height:260px;bottom:-130px;left:-70px;border-color:rgba(255,255,255,.34)} .cl-cta .inner{position:relative;z-index:2;max-width:660px;margin:0 auto;background:#fff;border-radius:var(--r-card);padding:clamp(28px,3.6vw,44px) clamp(22px,3vw,40px);text-align:center;box-shadow:var(--shadow)} .cl-cta .lb{display:inline-flex;align-items:center;gap:11px;font-family:var(--f-num);font-size:10.5px;letter-spacing:.2em;font-weight:700;color:var(--blue);margin-bottom:16px} .cl-cta .lb::before{content:"";width:24px;height:1.5px;background:var(--blue)} .cl-cta h2{font-size:clamp(20px,2.5vw,28px);font-weight:700;letter-spacing:.05em;line-height:1.5;margin:0 0 .7em} .cl-cta h2 em{font-style:normal;color:var(--blue)} .cl-cta p{font-size:.94rem;color:#4e5c66;margin:0 auto 1.7em;max-width:30em} .cl-cta .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .banner-area{padding:44px 0;background:#fff;border-top:1px solid var(--line)} .banner-strip{display:grid;grid-template-columns:repeat(4,234px);gap:20px;justify-content:center;align-items:center} .banner-strip .bnr{width:234px;height:60px;background:#fff;border:1px solid var(--line);border-radius:var(--r-chip);overflow:hidden;display:flex;align-items:center;justify-content:center;transition:.4s var(--slow)} .banner-strip .bnr:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:rgba(46,147,191,.4)} .banner-strip .bnr img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain} footer{background:var(--blue-xl);color:var(--ink);padding:64px 0 104px;border-top:1px solid var(--line)} .ft{display:flex;justify-content:space-between;gap:38px;flex-wrap:wrap;align-items:flex-start} .ft-logo-chip{background:#fff;border:1px solid var(--line);padding:18px 22px;display:inline-block;border-radius:var(--r-chip)} .ft-logo-chip img{height:40px;width:auto} .ft-r{display:flex;flex-direction:column;gap:20px;align-items:flex-end} .ft-nav{display:flex;gap:24px;flex-wrap:wrap} .ft-nav a{font-size:13px;color:var(--sub);position:relative} .ft-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--slow)} .ft-nav a:hover{color:var(--blue)} .ft-nav a:hover::after{transform:scaleX(1)} .ft-sns{display:flex;gap:10px} .ft-sns span{width:36px;height:36px;border:1px solid #cfdce3;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:#5A6B76;transition:.4s var(--slow)} .ft-sns a:hover span, .ft-sns a:focus-visible span{background:var(--blue-d);border-color:var(--blue-d);color:#fff} .ft-sns a:focus-visible{outline:2px solid var(--blue-d);outline-offset:3px;border-radius:50%} .copyright{margin-top:44px;font-size:11.5px;color:var(--sub);border-top:1px solid var(--line);padding-top:26px} .pagetop{position:fixed;right:24px;bottom:96px;width:52px;height:52px;background:#fff;border:1.5px solid var(--blue);color:var(--blue);display:flex;align-items:center;justify-content:center;z-index:90;border-radius:var(--r-btn);opacity:0;visibility:hidden;transform:translateY(14px);transition:.5s var(--slow);box-shadow:var(--shadow)} .pagetop.show{opacity:1;visibility:visible;transform:none} .pagetop:hover{background:var(--blue);color:#fff} .pagetop i{width:11px;height:11px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(-45deg);margin-top:3px} .spbar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:95;background:rgba(255,255,255,.98);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:12px 20px calc(12px + env(safe-area-inset-bottom));gap:12px} .spbar a{flex:1;height:50px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;border-radius:var(--r-btn)} .spbar .d{background:var(--rose);color:#fff} .spbar .l{background:#fff;color:var(--blue);box-shadow:inset 0 0 0 1.5px var(--blue)} .rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--slow),transform 1s var(--slow)} .rv.in{opacity:1;transform:none} .stag>*{opacity:0;transform:translateY(26px);transition:opacity .9s var(--slow),transform .9s var(--slow)} .stag.in>*{opacity:1;transform:none} .stag.in>*:nth-child(1){transition-delay:.05s} .stag.in>*:nth-child(2){transition-delay:.15s} .stag.in>*:nth-child(3){transition-delay:.25s} .stag.in>*:nth-child(4){transition-delay:.35s} @media(prefers-reduced-motion:reduce){ .rv,.stag>*{opacity:1;transform:none;transition:none} } @media(max-width:1280px){ .gnav>ul{gap:15px} .gnav>ul>li>a{font-size:12.5px} } @media(max-width:1200px){ .gnav>ul{display:none} .hamb{display:block} .mnav{display:block} } @media(max-width:1080px){ .rel-grid{grid-template-columns:1fr 1fr} .banner-strip{grid-template-columns:repeat(3,234px)} } @media(max-width:820px){ .banner-strip{grid-template-columns:repeat(2,234px)} } @media(max-width:680px){ .wrap{padding:0 22px} .hd{height:68px} .logo img{height:34px} .hd .btn{display:none} /* 狭い端末で「検索」ボタンが収まるよう余白を詰める */ .search-inner{padding:24px 22px 28px} .search-form button{height:42px;padding:0 16px;font-size:13px} .page-head{padding:40px 0 42px} .article{padding:48px 0 60px} .fig-right{float:none;width:min(280px,100%);margin:1.4em auto} .support-block{padding:30px 22px} .support-block .btns .btn{width:100%} .related,.cta-sec{padding:58px 0} .rel-grid{grid-template-columns:1fr} .banner-strip{grid-template-columns:234px} .share{flex-direction:column;align-items:flex-start;gap:14px} .spbar{display:flex} footer{padding-bottom:124px} .pagetop{bottom:88px;right:16px;width:46px;height:46px} } /* 4. トップページ（body.t-top） －詳細は CSS-REGULATION.md － */ section{padding:112px 0} .t-top .sec-head{margin-bottom:56px} .t-top .sec-head .en{font-family:var(--f-num);font-size:11.5px;letter-spacing:.24em;font-weight:700;color:var(--blue);display:block;margin-bottom:14px} .t-top .sec-head h2{font-weight:700;font-size:clamp(25px,3.1vw,34px);line-height:1.35;letter-spacing:.06em} .sec-head .lead{color:var(--sub);margin-top:20px;font-size:15.5px} /* 見出しブロックの直下にボタンを置いたとき（例：トップ「1型糖尿病と診断された方・ご家族へ」） */ .sec-head .lead + .btn{margin-top:26px} .sec-head .rule{width:56px;height:2px;background:var(--blue);margin-top:22px} .sec-head.center .rule{margin-left:auto;margin-right:auto} .btn-white{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.9);overflow:hidden;z-index:0} .btn-white::before{content:"";position:absolute;inset:0;background:#fff;transform:translateY(101%);transition:transform .55s var(--slow);z-index:-1} .btn-white:hover{color:var(--ink)} .btn-white:hover::before{transform:translateY(0)} .t-top .tlink{display:inline-flex;align-items:center;gap:14px;font-size:14px;font-weight:700;letter-spacing:.04em} .t-top .tlink .c{position:relative;width:40px;height:40px;border:1.5px solid var(--blue);border-radius:50%;flex:none;overflow:hidden;transition:border-color .4s var(--slow)} .t-top .tlink .c::after{content:"";position:absolute;left:15px;top:50%;width:8px;height:8px;box-sizing:border-box;border-right:1.5px solid var(--blue);border-bottom:1.5px solid var(--blue);transform:translate(0,-50%) rotate(-45deg);transition:border-color .4s var(--slow),transform .5s var(--slow)} .ulink{position:relative;font-weight:700} .ulink::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--slow)} .ulink:hover::after{transform:scaleX(1)} .gnav>ul>li:hover>a::after{transform:scaleX(1)} .gnav>ul>li:hover>a{color:var(--blue)} .hero{position:relative;height:92vh;min-height:620px;display:flex;align-items:center;overflow:hidden} .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden} .hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 26%; opacity:0;transform:scale(1); transition:opacity 1.6s var(--slow),transform 9s linear} .hero .bg.on{opacity:1;transform:scale(1.07)} /* ── 切り替えドット（コピーと左端を揃えて配置） ── */ .hero-dots{position:absolute;left:0;right:0;bottom:36px;z-index:2;pointer-events:none} .hero-dots .wrap{display:flex;align-items:center;gap:10px;pointer-events:none} .hero-dots button{pointer-events:auto;width:26px;height:3px;padding:0;border:none;cursor:pointer; background:rgba(255,255,255,.55);border-radius:2px;transition:background .45s var(--slow),width .45s var(--slow)} .hero-dots button:hover{background:rgba(255,255,255,.72)} .hero-dots button.on{width:46px;background:#fff} .hero-dots button:focus-visible{outline:2px solid #fff;outline-offset:4px} .hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(38,32,29,.62) 0%,rgba(38,32,29,.60) 60%,rgba(38,32,29,.54) 78%,rgba(38,32,29,.44) 90%,rgba(38,32,29,.38) 100%),linear-gradient(to top,rgba(38,32,29,.24) 0%,rgba(38,32,29,0) 30%)} @media(max-width:1080px){ .hero::after{background:linear-gradient(100deg,rgba(38,32,29,.64) 0%,rgba(38,32,29,.62) 60%,rgba(38,32,29,.56) 80%,rgba(38,32,29,.48) 92%,rgba(38,32,29,.44) 100%),linear-gradient(to top,rgba(38,32,29,.24) 0%,rgba(38,32,29,0) 30%)} } @media(max-width:820px){ /* タブレット縦。文字がほぼ全幅になるので帯を広げ、濃度は下げます */ .hero::after{background:linear-gradient(100deg,rgba(38,32,29,.62) 0%,rgba(38,32,29,.60) 55%,rgba(38,32,29,.56) 80%,rgba(38,32,29,.52) 100%),linear-gradient(to top,rgba(38,32,29,.24) 0%,rgba(38,32,29,0) 34%)} } .hero-copy{position:relative;z-index:2;color:#fff} .hero-copy .tag{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-num);font-size:11.5px;letter-spacing:.24em;font-weight:700;opacity:.94} .hero-copy .tag::before{content:"";width:34px;height:1.5px;background:currentColor} .hero-copy h1{font-weight:700;font-size:clamp(31px,4.5vw,54px);line-height:1.36;letter-spacing:.05em;margin-top:22px;text-shadow:0 2px 26px rgba(0,0,0,.32)} .hero-copy h1 .hl{position:relative;display:inline-block} .hero-copy h1 .hl::after{content:"";position:absolute;left:0;right:0;bottom:.1em;height:.14em;background:var(--rose);transform:scaleX(0);transform-origin:left;animation:draw 1.1s .9s var(--slow) forwards} @keyframes draw{to{transform:scaleX(1)}} .hero-copy p{margin-top:24px;font-size:16px;max-width:470px;opacity:.96;text-shadow:0 1px 12px rgba(0,0,0,.3)} .hero-cta{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap} .hero-micro{font-size:12.5px;color:rgba(255,255,255,.88);margin-top:18px;letter-spacing:.03em} .hero-copy>*{opacity:0;transform:translateY(24px);animation:heroIn 1.1s var(--slow) forwards} .hero-copy>*:nth-child(1){animation-delay:.15s} .hero-copy>*:nth-child(2){animation-delay:.3s} .hero-copy>*:nth-child(3){animation-delay:.45s} .hero-copy>*:nth-child(4){animation-delay:.6s} .hero-copy>*:nth-child(5){animation-delay:.75s} @keyframes heroIn{to{opacity:1;transform:none}} .pickup-sec{padding:112px 0 92px} .pickup-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:34px} .pickup{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 20px;scrollbar-width:thin} .pickup::-webkit-scrollbar{height:6px} .pickup::-webkit-scrollbar-track{background:var(--blue-xl);border-radius:3px} .pickup::-webkit-scrollbar-thumb{background:#c3d9e4;border-radius:3px} .pickup::-webkit-scrollbar-thumb:hover{background:var(--blue)} .pickup>.pk{flex:0 0 clamp(320px,42%,470px);scroll-snap-align:start} .pickup-nav{display:flex;gap:10px} .pk-arrow{width:46px;height:46px;border:1.5px solid var(--blue);background:#fff;color:var(--blue);cursor:pointer;border-radius:7px;display:flex;align-items:center;justify-content:center;transition:.4s var(--slow)} .pk-arrow:hover{background:var(--blue);color:#fff} .pk-arrow i{width:9px;height:9px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor} .pk-arrow.prev i{transform:rotate(-135deg)} .pk-arrow.next i{transform:rotate(45deg)} .pk{position:relative;display:flex;gap:22px;align-items:center;background:#fff;border:1px solid var(--line);padding:22px;transition:.5s var(--slow);border-radius:var(--r-card);overflow:hidden} .pk::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue);transform:scaleY(0);transform-origin:top;transition:transform .55s var(--slow)} .pk:hover{box-shadow:var(--shadow);transform:translateY(-5px)} .pk:hover::before{transform:scaleY(1)} .pk .thumb{width:150px;height:112px;flex:none;overflow:hidden;background:var(--blue-xl)} .pk .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--slow)} .pk:hover .thumb img{transform:scale(1.07)} .tag:where(:not(body)){display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.08em;color:#fff;padding:3px 12px;background:var(--blue);margin-bottom:9px;border-radius:5px} /* メディア掲載など。ローズは寄付CTA専用のため、ここでは使いません */ .tag.tg-ink{background:var(--ink)} .tag.tg-orange{background:var(--orange)} .tag.tg-green{background:var(--green)} .tag.tg-gray{background:var(--sub)} .tag.tg-blue{background:var(--blue)} .tag.tg-rose{background:var(--rose)} /* 6つ目のカテゴリ用。色相を増やさずに区別するための線バッジ */ .tag.tg-line{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)} .pk h3{font-size:16px;font-weight:700;line-height:1.6;letter-spacing:.03em} .pk .date{font-family:var(--f-num);font-size:11.5px;color:var(--sub);display:block;margin-top:8px} .family{background:var(--blue-xl)} .card4{display:grid;grid-template-columns:repeat(4,1fr);gap:26px} .fc{position:relative;background:#fff;transition:.55s var(--slow);display:flex;flex-direction:column;border-radius:var(--r-card);overflow:hidden} .fc:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)} .fc .ph{aspect-ratio:3/2;overflow:hidden;background:var(--blue-l);position:relative} .fc .ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--slow)} .fc:hover .ph img{transform:scale(1.07)} .fc .b{padding:24px 24px 28px;flex:1;display:flex;flex-direction:column} .fc .idx{font-family:var(--f-num);font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--blue);margin-bottom:8px} .fc h3{font-size:16.5px;font-weight:700;margin-bottom:10px;letter-spacing:.03em} .fc p{font-size:12.5px;color:var(--sub);flex:1;line-height:1.85} .fc .tlink{margin-top:18px;font-size:13px} .fc .tlink .c{width:34px;height:34px} .fc .tlink .c::after{left:12px;width:7px;height:7px} .about-sec{background:#fff} .about{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .about p{color:#4e5c66;font-size:15.5px} .about .btns{display:flex;gap:16px;margin-top:30px;flex-wrap:wrap} .about .fig{position:relative;overflow:hidden;border-radius:var(--r-panel)} .about .fig img{width:100%;height:auto;transform:scale(1.08);transition:transform 1.4s var(--slow),clip-path 1.2s var(--slow)} .about .fig.in img{transform:scale(1)} .about .fig::after{content:"";position:absolute;inset:0;background:#fff;transform:translateX(0);transition:transform 1.1s var(--slow)} .about .fig.in::after{transform:translateX(101%)} .act{background:var(--blue-xl)} .act3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .ac{position:relative;background:#fff;padding:44px 34px 36px;overflow:hidden;transition:.6s var(--slow);border-radius:var(--r-card)} .ac::before{content:"";position:absolute;left:0;right:0;bottom:0;height:0;background:var(--blue-xl);transition:height .6s var(--slow);z-index:0} .ac:hover::before{height:100%} .ac:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)} .ac>*{position:relative;z-index:1} .ac .no{position:absolute;top:14px;right:22px;font-family:var(--f-num);font-weight:800;font-size:96px;line-height:1;color:var(--blue);opacity:.09;z-index:0;transition:.6s var(--slow)} .ac:hover .no{opacity:.18;transform:translateY(-4px)} .ac .en{font-family:var(--f-num);font-size:10.5px;letter-spacing:.2em;font-weight:700;color:var(--blue)} .ac h3{font-size:26px;font-weight:700;letter-spacing:.06em;margin:6px 0 18px} .ac .kicker{width:34px;height:2px;background:var(--blue);margin-bottom:18px;transition:width .55s var(--slow)} .ac:hover .kicker{width:66px} .ac ul{list-style:none;font-size:14px;color:#55636c} .ac li{position:relative;padding:11px 0 11px 22px;border-top:1px solid var(--line)} .ac li:first-child{border-top:none} .ac li::before{content:"";position:absolute;left:0;top:19px;width:9px;height:1.5px;background:var(--blue)} .ac li:first-child::before{top:8px} .ac{display:flex;flex-direction:column} .ac ul{flex:1 1 auto} .ac .tlink{margin-top:24px;align-self:flex-start} .cure{position:relative;background:var(--blue-l);overflow:hidden} .cure::before{content:"";position:absolute;top:-120px;right:-120px;width:420px;height:420px;border:1.5px solid rgba(46,147,191,.18);border-radius:50%} .cure::after{content:"";position:absolute;bottom:-160px;left:-80px;width:340px;height:340px;border:1.5px solid rgba(46,147,191,.14);border-radius:50%} .cure-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.04fr .96fr;gap:60px;align-items:center} .cure-grid h2{font-weight:700;font-size:clamp(25px,3.1vw,34px);line-height:1.4;letter-spacing:.05em} .cure-grid h2 .hl{color:var(--blue)} .cure-grid .sub{color:#4e5c66;margin-top:18px;font-size:14.5px} .methods{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0} .methods span{background:#fff;padding:8px 18px;font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--blue);border-radius:var(--r-chip)} .cure-stats{display:flex;gap:14px;margin-bottom:30px} .cure-stats .st{background:#fff;padding:22px 24px;flex:1;border-radius:8px} .cure-stats .num{font-family:var(--f-num);font-weight:800;font-size:36px;line-height:1.05;color:var(--blue)} .cure-stats .num small{font-size:.36em;color:var(--ink);margin-left:2px} /* 小数点以下（例：10.5 の「.5」）。数字より少し小さく、色は数字と同じ */ .cure-stats .num small.dec{font-size:.62em;color:inherit;margin-left:0;font-weight:800;letter-spacing:-.01em} .cure-stats .lbl{font-size:11.5px;color:var(--sub);margin-top:4px} .cure-fig{overflow:hidden;box-shadow:var(--shadow-lg);border-radius:var(--r-panel)} .cure-fig img{width:100%;aspect-ratio:5/4;object-fit:cover} .trust{background:#fff} .trust-panel{display:grid;grid-template-columns:1.32fr 1fr;gap:56px;align-items:center;border:1px solid var(--line);padding:56px;border-radius:var(--r-panel)} .trust-stats{display:grid;grid-template-columns:repeat(3,1fr)} .ts{position:relative;text-align:center;padding:6px 14px} .ts+.ts::before{content:"";position:absolute;left:0;top:12%;height:76%;width:1px;background:var(--line)} .ts .cap{font-size:11.5px;color:var(--sub);font-weight:700;letter-spacing:.06em} .ts .n{font-family:var(--f-num);font-weight:800;font-size:clamp(38px,4.4vw,56px);line-height:1;margin:10px 0 8px;color:var(--blue)} .ts .n small{font-size:.32em;color:var(--ink);margin-left:2px} .ts .n small.dec{font-size:.58em;color:inherit;margin-left:0;font-weight:800;letter-spacing:-.01em} .ts .badge{display:inline-block;font-weight:700;font-size:19px;letter-spacing:.04em;color:var(--blue);margin:14px 0 8px} .ts .u{font-size:11px;color:var(--sub)} .trust-right h3{font-size:19px;font-weight:700;letter-spacing:.04em;margin-bottom:8px} .trust-right p{font-size:13px;color:var(--sub);margin-bottom:20px} .doc-links{display:flex;flex-direction:column;gap:0} .doc-links a{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;font-weight:700;padding:16px 4px;border-top:1px solid var(--line);transition:.45s var(--slow)} .doc-links a:last-child{border-bottom:1px solid var(--line)} .doc-links a::after{content:"→";color:var(--blue);font-family:var(--f-num);transition:transform .45s var(--slow)} .doc-links a:hover{color:var(--blue);padding-left:12px} .doc-links a:hover::after{transform:translateX(6px)} .news{background:var(--blue-xl)} .news-tabs{position:relative;display:inline-flex;gap:4px;flex-wrap:wrap;justify-content:center;margin:0 auto 46px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)} .news-tabs-outer{text-align:center} .news-tabs button{position:relative;z-index:1;border:none;background:transparent;color:var(--sub);padding:12px 20px;font-size:13px;font-weight:700;letter-spacing:.03em;cursor:pointer;font-family:var(--f);border-radius:7px;display:inline-flex;align-items:center;gap:9px;transition:color .4s var(--slow)} .news-tabs button::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.32;transition:.4s var(--slow)} .news-tabs button:hover{color:var(--blue)} .news-tabs button:hover::before{opacity:.7;transform:scale(1.2)} .news-tabs button.on{color:#fff;background:var(--blue)} @media(min-width:681px){ .news-tabs.glider-on button.on{background:transparent} } .news-tabs button.on::before{opacity:1;background:#fff} .news-tabs .glider{position:absolute;top:6px;left:6px;width:0;height:0;background:var(--blue);border-radius:7px;z-index:0;transition:transform .55s var(--slow),width .55s var(--slow),height .55s var(--slow)} .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .nc{background:#fff;overflow:hidden;transition:.55s var(--slow);border-radius:var(--r-card)} .nc:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg)} .nc.hide{display:none} .nc .ph{aspect-ratio:16/10;overflow:hidden;background:var(--blue-l)} .nc .ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--slow)} .nc:hover .ph img{transform:scale(1.07)} .thumb-brand{--tone:var(--blue);aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:#fff;background:var(--tone);text-shadow:0 1px 3px rgba(20,45,60,.30)} .thumb-brand.tg-blue{--tone:var(--blue)} .thumb-brand.tg-orange{--tone:var(--orange)} .thumb-brand.tg-green{--tone:var(--green)} .thumb-brand.tg-gray{--tone:var(--sub)} .thumb-brand.tg-ink{--tone:var(--ink)} .thumb-brand.tg-rose{--tone:var(--rose)} .thumb-brand.tg-line{--tone:var(--blue-l);color:var(--ink);text-shadow:none} .thumb-brand .bm{display:grid;grid-template-columns:9px 9px;gap:3px} .thumb-brand .bm i{width:9px;height:9px;border-radius:50%;background:currentColor;opacity:.95} .thumb-brand .bt{font-family:var(--f-num);font-weight:800;font-size:19px;letter-spacing:.08em} .thumb-brand .bc{font-size:10.5px;font-weight:700;letter-spacing:.14em;opacity:.9} .nc .b{padding:20px 22px 24px} .nc .date{font-family:var(--f-num);font-size:12px;color:var(--sub);margin-right:14px} .nc h3{font-size:14.5px;font-weight:700;margin-top:10px;line-height:1.7;letter-spacing:.03em} .viewall{text-align:center;margin-top:46px} .closing{position:relative;padding:132px 0;overflow:hidden} .closing .bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover} .closing::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(234,244,249,.4),rgba(234,244,249,.62));z-index:1} .closing .card{position:relative;z-index:2;max-width:680px;margin:0 auto;width:calc(100% - 44px);background:rgba(255,255,255,.95);backdrop-filter:blur(8px);padding:56px 50px;text-align:center;box-shadow:var(--shadow-lg);border-radius:var(--r-panel)} .closing h2{font-weight:700;font-size:clamp(25px,3.4vw,36px);line-height:1.45;letter-spacing:.05em} .closing h2 .hl{color:var(--blue)} .closing p{color:#4e5c66;max-width:520px;margin:20px auto 34px} .stag.in>*:nth-child(5){transition-delay:.45s} .stag.in>*:nth-child(6){transition-delay:.55s} @media(prefers-reduced-motion:reduce){ .hero .bg{transform:none;transition:opacity .2s linear} .hero .bg.on{transform:none} .hero-copy>*{opacity:1;transform:none;animation:none} .about .fig::after{display:none} .about .fig img{transform:none} } @media(max-width:1080px){ .card4{grid-template-columns:1fr 1fr} .about,.cure-grid{grid-template-columns:1fr} .trust-panel{grid-template-columns:1fr;gap:40px;padding:40px} .act3{grid-template-columns:1fr} .news-grid{grid-template-columns:1fr 1fr} } @media(max-width:680px){ section{padding:66px 0} .card4,.news-grid{grid-template-columns:1fr} .trust-stats{grid-template-columns:1fr} .ts+.ts::before{display:none} .ts{padding:18px 0;border-top:1px solid var(--line)} .hero-cta .btn{width:100%;justify-content:center} .hero{height:auto;min-height:0;padding:84px 0 96px} .hero::after{background:linear-gradient(to bottom,rgba(38,32,29,.30) 0%,rgba(38,32,29,.54) 14%,rgba(38,32,29,.60) 45%,rgba(38,32,29,.56) 75%,rgba(38,32,29,.46) 95%,rgba(38,32,29,.40) 100%)} .hero-dots{bottom:28px} .hero-dots button{width:20px} .hero-dots button.on{width:36px} .cure-stats{flex-direction:column} .closing{padding:80px 0} .closing .card{padding:38px 24px;width:calc(100% - 36px)} .pickup>.pk{flex:0 0 86%} .pk .thumb{width:118px;height:88px} .pk{padding:18px;gap:16px} .pk h3{font-size:15px} .news-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%;padding:8px;border-radius:12px} .news-tabs .glider{display:none} .news-tabs button{justify-content:center;padding:12px 8px;font-size:12px;gap:7px;border-radius:8px} .news-tabs button.on{background:var(--blue);color:#fff;} .news-tabs button:first-of-type{grid-column:1 / -1} } /* 5. 一覧ページ（body.t-archive） －詳細は CSS-REGULATION.md － */ .filters{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:84px;z-index:80} .filters .row{display:flex;align-items:center;justify-content:space-between;gap:24px} .cat-tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none} .cat-tabs::-webkit-scrollbar{display:none} .cat-tabs a{position:relative;flex:none;padding:20px 18px;font-size:13.5px;font-weight:500;letter-spacing:.03em;white-space:nowrap;color:var(--sub);transition:color .35s var(--slow)} .cat-tabs a::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;background:var(--blue);transform:scaleX(0);transition:transform .45s var(--slow)} .cat-tabs a:hover{color:var(--blue)} .cat-tabs a:hover::after{transform:scaleX(1)} .cat-tabs a[aria-current="page"]{color:var(--blue);font-weight:700} .cat-tabs a[aria-current="page"]::after{transform:scaleX(1)} .ym{display:flex;align-items:center;gap:10px;flex:none;padding:12px 0} .ym .sel{position:relative} .ym select{appearance:none;-webkit-appearance:none;font-family:var(--f);font-size:13px;font-weight:700;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--r-btn);padding:11px 42px 11px 18px;min-width:186px;cursor:pointer;transition:.35s var(--slow)} .ym select:hover{border-color:var(--blue);color:var(--blue)} .ym .sel::after{content:"";position:absolute;right:15px;top:50%;width:8px;height:8px;border-right:1.5px solid var(--blue);border-bottom:1.5px solid var(--blue);transform:translateY(-70%) rotate(45deg);pointer-events:none} .list-sec{padding:56px 0 0} .list-meta{display:flex;align-items:baseline;gap:14px;margin-bottom:26px} .list-meta .n{font-family:var(--f-num);font-size:26px;font-weight:800;color:var(--blue);line-height:1} .list-meta .t{font-size:12.5px;color:var(--sub)} .news-list{list-style:none;border-top:1px solid var(--line)} .news-list li{border-bottom:1px solid var(--line)} .news-list a{display:flex;align-items:center;gap:28px;padding:24px 12px;transition:background .4s var(--slow)} .news-list a:hover{background:var(--blue-xl)} .news-list .ph{width:170px;height:120px;flex:none;border-radius:var(--r-card);overflow:hidden;background:var(--blue-l)} .news-list .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--slow)} .news-list a:hover .ph img{transform:scale(1.06)} /* 一覧・記事下の代替サムネイル。考え方は .thumb-brand と同じ */ .tb{--tone:var(--blue);width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#fff;background:var(--tone);text-shadow:0 1px 3px rgba(20,45,60,.30)} .tb.tg-blue{--tone:var(--blue)} .tb.tg-orange{--tone:var(--orange)} .tb.tg-green{--tone:var(--green)} .tb.tg-gray{--tone:var(--sub)} .tb.tg-ink{--tone:var(--ink)} .tb.tg-rose{--tone:var(--rose)} .tb.tg-line{--tone:var(--blue-l);color:var(--ink);text-shadow:none} .tb .bm{display:grid;grid-template-columns:8px 8px;gap:3px} .tb .bm i{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.95} .tb .bt{font-family:var(--f-num);font-weight:800;font-size:16px;letter-spacing:.08em} .tb .bc{font-size:9.5px;font-weight:700;letter-spacing:.14em;opacity:.9} .news-list .txt{min-width:0;flex:1} .news-list .m{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:8px} .news-list .date{font-family:var(--f-num);font-size:13.5px;font-weight:700;color:var(--blue);letter-spacing:.05em} .news-list .tag{font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--ink);background:#fff;border:1px solid var(--line);padding:3px 14px;border-radius:var(--r-chip)} .news-list .tag.tg-orange{color:var(--orange);border-color:rgba(226,147,61,.45)} .news-list .tag.tg-blue{color:var(--blue);border-color:rgba(46,147,191,.45)} .news-list .tag.tg-ink{color:var(--ink);border-color:rgba(43,56,65,.38)} .news-list .tag.tg-green{color:var(--green);border-color:rgba(9,155,123,.45)} .news-list .tag.tg-rose{color:var(--rose-d);border-color:rgba(219,106,155,.45)} .news-list .tag.tg-gray{color:var(--sub);border-color:var(--line)} .news-list .tag.tg-line{color:var(--ink);border-color:var(--line)} .news-list h2{font-size:18px;font-weight:500;line-height:1.6;letter-spacing:.03em;transition:color .3s var(--slow)} .news-list a:hover h2{color:var(--blue)} .news-list .go{flex:none;width:38px;height:38px;border:1.5px solid var(--line);border-radius:50%;position:relative;transition:.4s var(--slow)} .news-list .go::after{content:"";position:absolute;left:12px;top:50%;width:11px;height:1.5px;background:var(--sub);transition:.4s var(--slow)} .news-list a:hover .go{border-color:var(--blue);background:var(--blue)} .news-list a:hover .go::after{background:#fff;transform:translateX(3px)} .pager{display:flex;flex-direction:column;align-items:center;gap:18px;padding:52px 0 0} .pager .pages{display:flex;align-items:center;gap:8px} .pager a,.pager span.cur{min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--f-num);font-size:14px;font-weight:700;border-radius:var(--r-btn);border:1px solid var(--line);color:var(--sub);transition:.35s var(--slow)} .pager a:hover{border-color:var(--blue);color:var(--blue)} .pager span.cur{background:var(--blue);border-color:var(--blue);color:#fff} .pager .dots{border:none;color:var(--sub);min-width:20px} .pager .nav{padding:0 18px;gap:10px} /* 「前へ／次へ」の矢印。paginate_links() の prev_text / next_text に を入れて使います */ .pager .nav i{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg)} .pager .nav.prev i{transform:rotate(135deg)} .pager .nav[aria-disabled="true"]{opacity:.4;pointer-events:none} .pager .pos{font-size:12px;color:var(--sub);font-family:var(--f-num);letter-spacing:.08em} .t-archive .cta-sec{padding:88px 0} .stag.in>*:nth-child(7){transition-delay:.34s} .stag.in>*:nth-child(8){transition-delay:.39s} @media(max-width:1080px){ .filters{top:0;position:relative} .filters .row{flex-direction:column;align-items:stretch;gap:0} .ym{padding:14px 0 16px;border-top:1px solid var(--line)} } @media(max-width:680px){ .list-sec{padding:40px 0 0} .news-list a{gap:16px;padding:20px 4px;align-items:flex-start} .news-list .ph{width:104px;height:74px} .news-list h2{font-size:15.5px} .news-list .m{gap:10px;margin-bottom:6px} .news-list .date{font-size:12.5px} .news-list .go{display:none} .tb .bt{font-size:13px} .tb .bc{display:none} .pager{padding:38px 0 0} .pager .pages{gap:6px} .pager a,.pager span.cur{min-width:38px;height:38px;font-size:13px} .pager .nav{padding:0 12px} .cta-sec{padding:56px 0} } /* 6. 記事ページ（body.t-single） －詳細は CSS-REGULATION.md － */ .btn .arw.l{transform:scaleX(-1)} .post-head{padding:58px 0 0} .post-head .meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .post-head .tag{font-size:11.5px;padding:5px 14px;border-radius:var(--r-chip);margin-bottom:0} .post-head .date{font-family:var(--f-num);font-size:13px;font-weight:700;color:var(--sub);letter-spacing:.06em} .post-head h1{font-size:clamp(23px,2.9vw,32px);font-weight:700;letter-spacing:.055em;line-height:1.55;margin:20px 0 0} .post-head .rule{width:100%;height:1px;background:var(--line);margin:34px 0 0;position:relative} .post-head .rule::after{content:"";position:absolute;left:0;top:0;width:72px;height:3px;background:var(--blue);border-radius:2px;transform:translateY(-1px)} .t-single .article{padding:44px 0 0} .t-single .entry-content h2{font-size:clamp(20px,2.3vw,26px);margin:2.8em 0 1.1em;padding-bottom:.6em} .t-single .entry-content h2::after{width:58px} .t-single .entry-content h3{font-size:clamp(17px,1.9vw,20px);margin:2.4em 0 .8em} .t-single .entry-content h4{font-size:16.5px;margin:2em 0 .6em} .t-single .entry-content{--txt-size:15.5px;--txt-lh:2;--txt-mb:1.5em} .entry-content a.inline{color:var(--blue);font-weight:700;border-bottom:1px solid rgba(46,147,191,.4);word-break:break-all} .entry-content figure{margin:2.2em 0} .entry-content figure img{width:100%} .entry-content figcaption{font-size:11.5px;color:var(--sub);margin-top:.8em;padding-left:.9em;border-left:2px solid var(--line)} .t-single .share{max-width:880px;margin:48px auto 0;padding:32px 0 0;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap} .post-nav{max-width:880px;margin:0 auto;padding:52px 0 0} .post-nav .row{display:grid;grid-template-columns:1fr 1px 1fr;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .post-nav .divider{background:var(--line)} .post-nav .side{min-width:0;position:relative;padding:24px 26px;transition:background .4s var(--slow)} .post-nav .side:hover{background:var(--blue-xl)} .post-nav .side.prev{padding-left:34px} .post-nav .side.next{text-align:right;padding-right:34px} .post-nav .side .lb{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-num);font-size:10.5px;letter-spacing:.18em;font-weight:700;color:var(--blue);margin-bottom:8px} .post-nav .side.prev .lb::before{content:"";width:16px;height:1.5px;background:var(--blue)} .post-nav .side.next .lb{flex-direction:row-reverse} .post-nav .side.next .lb::before{content:"";width:16px;height:1.5px;background:var(--blue)} .post-nav .side a{font-size:13.5px;font-weight:500;line-height:1.75;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .3s var(--slow)} .post-nav .side:hover a{color:var(--blue)} .post-nav .side.empty{color:var(--sub);font-size:13px} .post-nav .to-list{display:flex;justify-content:center;margin-top:30px} .t-single .related{background:var(--blue-xl);padding:88px 0;margin-top:80px} .t-single .sec-head{margin-bottom:44px} .t-single .sec-head h2{font-weight:700;font-size:clamp(22px,2.8vw,29px);line-height:1.4;letter-spacing:.06em;display:inline-block;padding-bottom:16px;position:relative} .t-single .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .t-single .nc{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;transition:.55s var(--slow)} .t-single .nc.hide{display:none} .t-single .nc:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)} .t-single .nc:hover .ph img{transform:scale(1.06)} .t-single .nc .b{padding:20px 20px 24px;flex:1;display:flex;flex-direction:column} .nc .m{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .t-single .nc .date{font-family:var(--f-num);font-size:12px;color:var(--sub)} .nc .tag{font-size:10.5px;font-weight:700;letter-spacing:.08em;padding:3px 11px;border-radius:5px} @media(max-width:1080px){ /* 関連記事は .t-single 付きで指定しているため、 .news-grid だけの指定では上書きできません */ .t-single .news-grid{grid-template-columns:1fr 1fr} } @media(max-width:680px){ .post-head{padding:36px 0 0} .post-head .rule{margin-top:26px} .t-single .article{padding:34px 0 0} .entry-content p{font-size:15px} .post-nav .row{grid-template-columns:1fr} .post-nav .divider{height:1px;width:100%} .post-nav .side{padding:20px 4px} .post-nav .side.prev{padding-left:4px} .post-nav .side.next{text-align:left;padding-right:4px} .post-nav .side.next .lb{flex-direction:row} .post-nav .to-list .btn{width:100%} .related{padding:56px 0;margin-top:56px} .news-grid{grid-template-columns:1fr} /* 関連記事はスマホでも2列。1列だと縦に長くなりすぎます */ .t-single .news-grid{grid-template-columns:1fr 1fr;gap:14px} .t-single .nc .b{padding:14px 14px 18px} .t-single .nc .m{gap:8px} /* 幅が狭いと枠からはみ出すため、カテゴリ名の帯は出しません */ .t-single .thumb-brand .bc{display:none} .t-single .thumb-brand{gap:6px} .t-single .thumb-brand .bt{font-size:16px} } /* 8. ブロックエディタ用パーツ（.cl-*） －詳細は CSS-REGULATION.md － */ /* @editor-start */ :root{ --cl-blue:#2E93BF; --cl-blue-d:#1F7BA4; --cl-blue-l:#EAF4F9; --cl-blue-xl:#F5FAFC; --cl-rose:#DB6A9B; --cl-rose-d:#C5527F; --cl-green:#099B7B; --cl-orange:#E2933D; --cl-ink:#2B3841; --cl-sub:#7C8992; --cl-line:#E3EBEF; --cl-shadow:0 14px 40px rgba(25,70,95,.08); --cl-shadow-lg:0 26px 64px rgba(25,70,95,.14); --cl-slow:cubic-bezier(.52,.08,.02,.98); --cl-r-btn:8px; --cl-r-card:12px; --cl-r-panel:16px; --cl-r-chip:6px; } .entry-content .cl-lead{ font-size:1.16rem; line-height:1.95; color:#4e5c66; } .entry-content .cl-note{ font-size:.82rem; color:var(--cl-sub); border-top:1px dashed var(--cl-line); padding-top:.8em; } .entry-content h2,.wp-block-post-content h2,.editor-styles-wrapper h2,.cl-content h2{ position:relative; font-size:clamp(22px,2.5vw,29px); font-weight:700; letter-spacing:.06em; line-height:1.45; margin:3.2em 0 1.2em; padding-bottom:.62em; } .entry-content h2::before,.wp-block-post-content h2::before,.editor-styles-wrapper h2::before,.cl-content h2::before{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--cl-line); } .entry-content h2::after,.wp-block-post-content h2::after,.editor-styles-wrapper h2::after,.cl-content h2::after{ content:""; position:absolute; left:0; bottom:0; width:64px; height:3px; background:var(--cl-blue); border-radius:2px; } .entry-content h3,.wp-block-post-content h3,.editor-styles-wrapper h3,.cl-content h3{ font-size:clamp(18px,2vw,22px); font-weight:700; letter-spacing:.05em; line-height:1.5; margin:2.6em 0 .9em; padding-left:.72em; border-left:4px solid var(--cl-blue); } .entry-content h4,.wp-block-post-content h4,.editor-styles-wrapper h4,.cl-content h4{ position:relative; font-size:clamp(16px,1.7vw,18px); font-weight:700; letter-spacing:.04em; line-height:1.6; margin:2.2em 0 .7em; padding-left:1.35em; } .entry-content h4::before,.wp-block-post-content h4::before,.editor-styles-wrapper h4::before,.cl-content h4::before{ content:""; position:absolute; left:0; top:.62em; width:9px; height:9px; border-radius:50%; background:var(--cl-blue); } .entry-content h5,.wp-block-post-content h5,.editor-styles-wrapper h5,.cl-content h5{ position:relative; font-size:15px; font-weight:700; letter-spacing:.06em; line-height:1.7; color:var(--cl-blue-d); margin:1.9em 0 .6em; padding-left:1.5em; } .entry-content h5::before,.wp-block-post-content h5::before,.editor-styles-wrapper h5::before,.cl-content h5::before{ content:""; position:absolute; left:0; top:.78em; width:14px; height:2px; background:var(--cl-blue); } .entry-content :is(h2,h3,h4,h5)+:is(h3,h4,h5), .wp-block-post-content :is(h2,h3,h4,h5)+:is(h3,h4,h5), .cl-content :is(h2,h3,h4,h5)+:is(h3,h4,h5){ margin-top:1.1em; } .entry-content>:is(h2,h3):first-child, .wp-block-post-content>:is(h2,h3):first-child, .cl-content>:is(h2,h3):first-child{ margin-top:0; } .cl-h-green{ --cl-blue:var(--cl-green); --cl-blue-d:var(--cl-green); } .cl-h-rose{ --cl-blue:var(--cl-rose); --cl-blue-d:var(--cl-rose-d); } .cl-h-orange{ --cl-blue:var(--cl-orange); --cl-blue-d:var(--cl-orange); } .entry-content .cl-label{ font-family:Inter,sans-serif; font-size:.72rem; letter-spacing:.24em; font-weight:700; color:var(--cl-blue); text-transform:uppercase; margin-bottom:.5em; } .entry-content .cl-bar{ position:relative; letter-spacing:.06em; line-height:1.4; padding-bottom:.6em; } .entry-content .cl-bar::after{ content:""; position:absolute; left:0; bottom:0; width:56px; height:2px; background:var(--cl-blue); } .entry-content .cl-barleft{ border-left:4px solid var(--cl-blue); padding-left:.7em; line-height:1.45; letter-spacing:.04em; } .cl-info,.cl-tip,.cl-warn{ position:relative; border-radius:var(--cl-r-card); padding:1.55em 1.8em 1.5em; margin:1.8em 0; border:1px solid; } .cl-info::before,.cl-tip::before,.cl-warn::before{ display:flex; align-items:center; gap:.7em; font-family:Inter,sans-serif; font-size:10.5px; font-weight:700; letter-spacing:.18em; margin-bottom:.7em; } .cl-info::after,.cl-tip::after,.cl-warn::after{ content:""; position:absolute; left:1.8em; top:2.05em; width:0; } .cl-info :is(p,ul,ol),.cl-tip :is(p,ul,ol),.cl-warn :is(p,ul,ol){ font-size:.95rem; line-height:1.95; margin:0; } .cl-info :is(p,li)+:is(p,li),.cl-tip :is(p,li)+:is(p,li),.cl-warn :is(p,li)+:is(p,li){ margin-top:.7em; } .cl-info{ border-color:rgba(46,147,191,.34); background:rgba(46,147,191,.035); } .cl-info::before{ content:"― INFORMATION"; color:var(--cl-blue); } .cl-tip{ border-color:rgba(9,155,123,.34); background:rgba(9,155,123,.035); } .cl-tip::before{ content:"― POINT"; color:var(--cl-green); } .cl-warn{ border-color:rgba(226,147,61,.4); background:rgba(226,147,61,.045); } .cl-warn::before{ content:"― CAUTION"; color:var(--cl-orange); } .cl-ja.cl-info::before{ content:"― 補足情報"; letter-spacing:.1em; } .cl-ja.cl-tip::before{ content:"― ポイント"; letter-spacing:.1em; } .cl-ja.cl-warn::before{ content:"― ご注意"; letter-spacing:.1em; } :is(.entry-content,.cl-content,.demo) :where(ul,ol):where(:not(.cl-check,.cl-num,.cl-tags,.cl-way-langs,.wp-block-social-links)){ margin:1.5em 0; padding-left:1.8em; } :is(.entry-content,.cl-content,.demo) :where(ol):where(:not(.cl-num)){ padding-left:2.2em; } :is(.entry-content,.cl-content,.demo) :where(ul,ol) li{ margin:.5em 0; } :is(.entry-content,.cl-content,.demo) :where(ul,ol) li::marker{ color:var(--cl-blue); } /* 入れ子は少し浅くして、深くなるほど右に流れないようにします */ :is(.entry-content,.cl-content,.demo) :where(ul,ol) :where(ul,ol){ margin:.5em 0 .2em; padding-left:1.5em; } .cl-check,.cl-num{ margin:1.5em 0; } .cl-check{ list-style:none; padding-left:0; } .cl-check li{ position:relative; padding-left:2.1em; margin:.6em 0; } .cl-check li::before{ content:""; position:absolute; left:0; top:.42em; width:1.15em; height:.6em; border-left:2px solid var(--cl-blue); border-bottom:2px solid var(--cl-blue); transform:rotate(-45deg); } .cl-num{ list-style:none; padding-left:0; counter-reset:cln; } .cl-num li{ position:relative; padding-left:2.6em; margin:.7em 0; counter-increment:cln; } .cl-num li::before{ content:counter(cln,decimal-leading-zero); position:absolute; left:0; top:.15em; font-family:Inter,sans-serif; font-weight:800; font-size:.85em; color:var(--cl-blue); border-bottom:1.5px solid var(--cl-blue); padding-bottom:1px; } :is(.entry-content,.cl-content,.demo) .wp-block-button>.wp-block-button__link{ display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; background:var(--cl-blue); color:#fff; border:none; border-radius:var(--cl-r-btn); padding:1.05em 2.2em; font-weight:700; letter-spacing:.04em; line-height:1.5; transition:background .4s var(--cl-slow),transform .5s var(--cl-slow); } :is(.entry-content,.cl-content,.demo) .wp-block-button>.wp-block-button__link:hover{ background:var(--cl-blue-d); transform:translateY(-3px); } /* cl-btn は標準と同じ。過去に付けたものが崩れないよう残しています */ :is(.entry-content,.cl-content,.demo) .cl-btn>.wp-block-button__link{ background:var(--cl-blue); color:#fff; box-shadow:none; } /* 白抜き（資料ダウンロードなど） */ :is(.entry-content,.cl-content,.demo) .cl-btn-out>.wp-block-button__link{ position:relative; background:transparent; color:var(--cl-blue); box-shadow:inset 0 0 0 1.5px var(--cl-blue); overflow:hidden; z-index:0; transition:color .4s var(--cl-slow),transform .5s var(--cl-slow); } :is(.entry-content,.cl-content,.demo) .cl-btn-out>.wp-block-button__link::before{ content:""; position:absolute; inset:0; background:var(--cl-blue); transform:translateY(101%); transition:transform .55s var(--cl-slow); z-index:-1; } :is(.entry-content,.cl-content,.demo) .cl-btn-out>.wp-block-button__link:hover{ color:#fff; background:transparent; transform:translateY(-3px); } :is(.entry-content,.cl-content,.demo) .cl-btn-out>.wp-block-button__link:hover::before{ transform:translateY(0); } /* 寄付（ローズはここだけ） */ :is(.entry-content,.cl-content,.demo) .cl-donate>.wp-block-button__link{ background:var(--cl-rose); color:#fff; box-shadow:none; } :is(.entry-content,.cl-content,.demo) .cl-donate>.wp-block-button__link:hover{ background:var(--cl-rose-d); } .wp-block-buttons{ align-items:center; } .wp-block-buttons .wp-block-button{ display:inline-flex; } :is(.entry-content,.cl-content,.demo) .wp-block-buttons{ margin-top:1.7em; margin-bottom:2.2em; } :is(.entry-content,.cl-content,.demo) :is(.cl-cards,.cl-imgcards,.cl-steps,.cl-ways,.cl-boxes) .wp-block-buttons{ margin-bottom:0; } .cl-tags .wp-block-button__link{ border-radius:5px; padding:.3em 1em; font-size:.72rem; font-weight:700; letter-spacing:.08em; line-height:1.7; } .entry-content .wp-block-table{ margin:2.2em 0; } .entry-content .wp-block-table>table, .cl-table table{ border-collapse:separate; border-spacing:0; width:100%; overflow:hidden; background:#fff; border:1px solid var(--cl-line); border-radius:var(--cl-r-card); box-shadow:none; } .entry-content .wp-block-table :is(td,th), .cl-table :is(td,th){ border:0; border-bottom:1px solid var(--cl-line); padding:1em 1.2em; text-align:left; vertical-align:top; word-break:break-word; } .entry-content .wp-block-table thead th, .cl-table thead th{ background:var(--cl-blue); color:#fff; font-weight:700; letter-spacing:.04em; border-bottom:0; } .entry-content .wp-block-table tbody th, .cl-table tbody th{ background:var(--cl-blue-xl); font-weight:700; } :is(.entry-content,.cl-content,.demo) .wp-block-table>table:has(tbody th) tbody tr>:first-child, .cl-table>table:has(tbody th) tbody tr>:first-child{ background:var(--cl-blue-xl); font-weight:700; } :is(.entry-content,.cl-content,.demo) .wp-block-table>table:not(.has-fixed-layout):has(tbody th) tbody tr>:first-child, .cl-table>table:not(.has-fixed-layout):has(tbody th) tbody tr>:first-child{ width:1%; white-space:nowrap; } :is(.entry-content,.cl-content,.demo) .wp-block-table.cl-table-auto>table:not(.has-fixed-layout):has(tbody th) tbody tr>:first-child, .cl-table.cl-table-auto>table:not(.has-fixed-layout):has(tbody th) tbody tr>:first-child{ width:auto; white-space:normal; } @media (max-width:600px){ :is(.entry-content,.cl-content,.demo) .wp-block-table.cl-table-stack>table:not(.has-fixed-layout):has(tbody th) tbody tr>:first-child, .cl-table.cl-table-stack>table:not(.has-fixed-layout):has(tbody th) tbody tr>:first-child{ width:100%; white-space:normal; } } .entry-content .wp-block-table tbody tr:last-child :is(td,th), .cl-table tbody tr:last-child :is(td,th){ border-bottom:0; } /* ブロックの「ストライプ」スタイルを選んだとき */ .entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) :is(td,th){ background:var(--cl-blue-xl); } /* 狭い画面では横スクロール。縦積みにしたい表だけ cl-table-stack を付ける */ @media (max-width:600px){ .entry-content .wp-block-table:not(.cl-table-stack){ overflow-x:auto; -webkit-overflow-scrolling:touch; } .entry-content .wp-block-table:not(.cl-table-stack)>table{ min-width:520px; } .entry-content .wp-block-table:not(.cl-table-stack)>table:not(:has(tr > :is(td,th) ~ :is(td,th))){ min-width:0; } } :is(.entry-content,.cl-content,.demo) .wp-block-table.cl-table-scroll, .cl-table.cl-table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; /* スクロールバーを細く、常に見える形にします（Mac既定では隠れるため） */ scrollbar-width:thin; scrollbar-color:#c9d8e0 transparent; } :is(.entry-content,.cl-content,.demo) .wp-block-table.cl-table-scroll::-webkit-scrollbar{ height:8px; } :is(.entry-content,.cl-content,.demo) .wp-block-table.cl-table-scroll::-webkit-scrollbar-thumb{ background:#c9d8e0; border-radius:4px; } @media (max-width:1000px){ :is(.entry-content,.cl-content,.demo) .wp-block-table.cl-table-scroll>table, .cl-table.cl-table-scroll table{ table-layout:auto; width:max-content; min-width:100%; } :is(.entry-content,.cl-content,.demo) .wp-block-table.cl-table-scroll :is(td,th), .cl-table.cl-table-scroll :is(td,th){ min-width:4.5em; max-width:12em; } :is(.entry-content,.cl-content,.demo) .wp-block-table.cl-table-scroll::before{ content:"→ 横にスクロールできます"; position:sticky; left:0; display:block; width:max-content; font-size:11.5px; color:var(--cl-sub); margin:0 0 .5em; } } @media (max-width:600px){ .cl-table-stack table,.cl-table-stack tbody,.cl-table-stack tr, .cl-table-stack th,.cl-table-stack td{ display:block; width:100%; } .cl-table-stack thead{ display:none; } :is(.entry-content,.cl-content,.demo) .wp-block-table.cl-table-stack>table, .cl-table-stack table{ box-shadow:none; border:0; border-radius:0; } .cl-table-stack tr{ margin-bottom:.9em; border-radius:var(--cl-r-card); overflow:hidden; border:1px solid var(--cl-line); box-shadow:none; } /* 縦積みでも、1列目が か かに関係なくラベル扱いにします */ .cl-table-stack tbody th, .cl-table-stack tbody tr>:first-child{ background:var(--cl-blue-xl); font-weight:700; } .cl-table-stack td{ border-top:none; } :is(.entry-content,.cl-content,.demo) .wp-block-table.cl-table-stack tbody tr>*, .cl-table-stack tbody tr>*{ border-bottom:1px solid var(--cl-line); } :is(.entry-content,.cl-content,.demo) .wp-block-table.cl-table-stack tbody tr>*:last-child, .cl-table-stack tbody tr>*:last-child{ border-bottom:0; } } .entry-content .wp-block-media-text{ margin:2.4em 0; } .entry-content .wp-block-media-text+.wp-block-media-text{ margin-top:3.2em; } .entry-content .wp-block-media-text__media{ margin:0; } .cl-mt .wp-block-media-text__media{ border-radius:var(--cl-r-panel); overflow:hidden; } @media (max-width:600px){ .entry-content .wp-block-media-text.cl-mt-imgtop>.wp-block-media-text__media{ grid-column:1; grid-row:1; } .entry-content .wp-block-media-text.cl-mt-imgtop>.wp-block-media-text__content{ grid-column:1; grid-row:2; } .entry-content .wp-block-media-text.cl-mt-imgbottom>.wp-block-media-text__content{ grid-column:1; grid-row:1; } .entry-content .wp-block-media-text.cl-mt-imgbottom>.wp-block-media-text__media{ grid-column:1; grid-row:2; } } .entry-content .wp-block-media-text.cl-voice{ display:grid; grid-template-columns:118px 1fr; align-items:start; gap:0; margin:2.2em 0; } .entry-content .cl-voice>.wp-block-media-text__media{ grid-column:1; grid-row:1; width:118px; } .entry-content .cl-voice>.wp-block-media-text__media img{ width:100%; aspect-ratio:1/1.12; object-fit:cover; /* 縦にわずかに長い楕円。正円より顔が大きく見えます */ border-radius:50%; border:3px solid var(--cl-blue-l); background:#fff; } .entry-content .cl-voice>.wp-block-media-text__content{ grid-column:2; grid-row:1; position:relative; background:var(--cl-blue-l); border-radius:var(--cl-r-panel); padding:1.7em 1.9em; margin-left:24px; } .entry-content .cl-voice>.wp-block-media-text__content>:first-child{ margin-top:0; } .entry-content .cl-voice>.wp-block-media-text__content>:last-child{ margin-bottom:0; } /* しっぽ。三角形は border だけで作ります（画像不要） */ .entry-content .cl-voice>.wp-block-media-text__content::before{ content:""; position:absolute; left:-13px; top:30px; border:9px solid transparent; border-left:0; border-right:13px solid var(--cl-blue-l); } /* 写真を右に置いたとき */ .entry-content .wp-block-media-text.cl-voice.has-media-on-the-right{ grid-template-columns:1fr 118px; } .entry-content .cl-voice.has-media-on-the-right>.wp-block-media-text__media{ grid-column:2; } .entry-content .cl-voice.has-media-on-the-right>.wp-block-media-text__content{ grid-column:1; margin-left:0; margin-right:24px; } .entry-content .cl-voice.has-media-on-the-right>.wp-block-media-text__content::before{ left:auto; right:-13px; border-right:0; border-left:13px solid var(--cl-blue-l); } /* 発言者の名前（任意）。段落に cl-voice-by を足すと小さく灰色になります */ .entry-content .cl-voice .cl-voice-by{ font-size:.82rem; color:var(--cl-sub); margin-top:1em; } @media (max-width:600px){ /* 狭い画面では写真を上に。しっぽも上向きに変えます */ .entry-content .wp-block-media-text.cl-voice, .entry-content .wp-block-media-text.cl-voice.has-media-on-the-right{ grid-template-columns:1fr; } .entry-content .cl-voice>.wp-block-media-text__media, .entry-content .cl-voice.has-media-on-the-right>.wp-block-media-text__media{ grid-column:1; grid-row:1; width:86px; margin:0 0 14px 4px; } .entry-content .cl-voice>.wp-block-media-text__content, .entry-content .cl-voice.has-media-on-the-right>.wp-block-media-text__content{ grid-column:1; grid-row:2; margin:0; padding:1.4em 1.4em; } .entry-content .cl-voice>.wp-block-media-text__content::before, .entry-content .cl-voice.has-media-on-the-right>.wp-block-media-text__content::before{ left:32px; right:auto; top:-12px; border:9px solid transparent; border-top:0; border-bottom:12px solid var(--cl-blue-l); } } .cl-cards{ counter-reset:clcard; } .cl-cards .wp-block-column{ background:#fff; border:1px solid var(--cl-line); border-radius:var(--cl-r-card); padding:2em 1.6em; text-align:center; counter-increment:clcard; transition:transform .55s var(--cl-slow),box-shadow .55s var(--cl-slow); } .cl-cards .wp-block-column::before{ content:counter(clcard,decimal-leading-zero); display:block; font-family:Inter,sans-serif; font-size:.72rem; font-weight:800; letter-spacing:.16em; color:var(--cl-blue); margin-bottom:.9em; } .cl-cards .wp-block-column:hover{ transform:translateY(-8px); box-shadow:var(--cl-shadow-lg); } .cl-boxes .wp-block-column{ background:#fff; border:1px solid var(--cl-line); border-radius:var(--cl-r-card); padding:1.8em 1.6em; } .cl-boxes .wp-block-column>:first-child{ margin-top:0; } .cl-boxes .wp-block-column>:last-child{ margin-bottom:0; } /* 淡い青にしたいときは cl-boxes-l を併記 */ .cl-boxes-l .wp-block-column{ background:var(--cl-blue-xl); } .cl-imgcards .wp-block-column{ background:#fff; border:1px solid var(--cl-line); border-radius:var(--cl-r-card); overflow:hidden; transition:transform .55s var(--cl-slow),box-shadow .55s var(--cl-slow); } .cl-imgcards .wp-block-column:hover{ transform:translateY(-8px); box-shadow:var(--cl-shadow-lg); } .cl-imgcards .wp-block-column>figure, .cl-imgcards .wp-block-column>.wp-block-image{ margin:0; aspect-ratio:3/2; overflow:hidden; background:var(--cl-blue-xl); } .cl-imgcards .wp-block-column figure img{ border:0; border-radius:0; } .cl-imgcards .wp-block-column>:is(figure,.wp-block-image) img{ width:100%; height:100%; object-fit:cover; object-position:center; } .cl-imgcards .wp-block-column img{ width:100%; display:block; transition:transform .9s var(--cl-slow); } .cl-imgcards .wp-block-column:hover img{ transform:scale(1.06); } .cl-imgcards .wp-block-column{ display:flex; flex-direction:column; } .cl-imgcards .wp-block-column>:not(:is(figure,.wp-block-image)){ padding-inline:1.2em; } .cl-imgcards .wp-block-column :is(h2,h3,h4){ margin-top:1em; } /* 画像が無いカードは、中身が上端に貼り付くので余白を足す */ .cl-imgcards .wp-block-column>:first-child:not(:is(figure,.wp-block-image)){ margin-top:1.4em; } .cl-imgcards .wp-block-column>:last-child{ padding-bottom:1.4em; } /* ボタンの扱いは4パーツ共通ルール（第8節の後半）に集約しました */ /* ① 動きを止める */ :is(.entry-content,.cl-content,.demo) :is(.cl-cards,.cl-imgcards,.cl-steps,.cl-ways).cl-flat .wp-block-column{ transition:none; } :is(.entry-content,.cl-content,.demo) :is(.cl-cards,.cl-imgcards,.cl-steps,.cl-ways).cl-flat .wp-block-column:hover{ transform:none; box-shadow:none; } :is(.entry-content,.cl-content,.demo) .cl-imgcards.cl-flat .wp-block-column:hover img{ transform:none; } /* .cl-ways の左端の色帯は、ホバーで伸びる演出なので出しません */ :is(.entry-content,.cl-content,.demo) .cl-ways.cl-flat .wp-block-column:hover::before{ transform:scaleY(0); } /* ② 文字を本文と同じ大きさに戻す */ :is(.entry-content,.cl-content,.demo) :is(.cl-cards,.cl-imgcards,.cl-steps,.cl-ways).cl-flat .wp-block-column p{ font-size:var(--txt-size); color:var(--txt); line-height:var(--txt-lh); } .cl-linkcard{ position:relative; border:1px solid var(--cl-line); border-radius:var(--cl-r-card); padding:1.15em 3.2em 1.15em 1.5em; display:flex; align-items:center; background:#fff; margin:.7em 0; overflow:hidden; transition:.45s var(--cl-slow); } .cl-linkcard::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--cl-blue); transform:scaleY(0); transform-origin:top; transition:transform .5s var(--cl-slow); } .cl-linkcard::after{ content:"→"; position:absolute; right:1.2em; top:50%; font-family:var(--f-num); font-size:17px; font-weight:500; line-height:1; color:var(--cl-blue); transform:translateY(-50%); transition:transform .45s var(--cl-slow); } .cl-linkcard:hover{ box-shadow:var(--cl-shadow); transform:translateY(-3px); } .cl-linkcard:hover::before{ transform:scaleY(1); } .cl-linkcard:hover::after{ transform:translate(5px,-50%); } .cl-linkcard p{ margin:0; } .cl-linkcard a::after{ content:""; position:absolute; inset:0; z-index:1; display:block; width:auto; height:auto; margin:0; border:0; background:none; transform:none; } .cl-linkcard:hover a{ color:var(--cl-blue-d); } .entry-content p.cl-linkcard{ margin:.7em 0; font-size:15px; } /* キーボード操作でも同じ見た目になるように */ .cl-linkcard:focus-within{ box-shadow:var(--cl-shadow); } .cl-linkcard:focus-within::before{ transform:scaleY(1); } .cl-linkcard:focus-within::after{ transform:translate(5px,-50%); } .cl-linkcard:has(a[target="_blank"])::after, .cl-linkcard.cl-ext::after{ content:"↗"; } .cl-linkcard:has(a[target="_blank"]):hover::after, .cl-linkcard:has(a[target="_blank"]):focus-within::after, .cl-linkcard.cl-ext:hover::after, .cl-linkcard.cl-ext:focus-within::after{ transform:translate(4px,calc(-50% - 4px)); } :is(.entry-content,.cl-content,.demo) .cl-toc{ display:grid; grid-template-columns:1fr 1fr; column-gap:28px; list-style:none; background:var(--cl-blue-xl); border:1px solid var(--cl-line); border-radius:var(--cl-r-panel); padding:24px 28px 22px; margin:2.2em 0; } :is(.entry-content,.cl-content,.demo) .cl-toc::before{ content:"― 目次"; grid-column:1 / -1; font-family:var(--f-num); font-size:10.5px; font-weight:700; letter-spacing:.1em; color:var(--cl-blue); margin-bottom:10px; } :is(.entry-content,.cl-content,.demo) .cl-toc li{ margin:0; border-bottom:1px solid rgba(46,147,191,.18); } :is(.entry-content,.cl-content,.demo) .cl-toc li:last-child{ border-bottom:0; } @media (min-width:681px){ :is(.entry-content,.cl-content,.demo) .cl-toc li:nth-last-child(2):nth-child(odd){ border-bottom:0; } } :is(.entry-content,.cl-content,.demo) .cl-toc li a{ display:flex; align-items:center; gap:12px; padding:11px 0; font-size:13.5px; font-weight:700; line-height:1.65; color:var(--cl-ink); text-decoration:none; word-break:break-word; transition:color .35s var(--cl-slow); } :is(.entry-content,.cl-content,.demo) .cl-toc li a::before{ content:"→"; flex:none; font-family:var(--f-num); font-size:12px; font-weight:500; line-height:1; color:var(--cl-blue); transition:transform .35s var(--cl-slow); } :is(.entry-content,.cl-content,.demo) .cl-toc li a:hover{ color:var(--cl-blue-d); } :is(.entry-content,.cl-content,.demo) .cl-toc li a:hover::before{ transform:translateX(3px); } /* 長い項目名が3行に折り返して読みにくくなるため、スマホは1列にします */ @media (max-width:680px){ :is(.entry-content,.cl-content,.demo) .cl-toc{ grid-template-columns:1fr; padding:22px 22px 20px; } } .cl-stats{ border:1px solid var(--cl-line); border-radius:var(--cl-r-panel); background:#fff; padding:20px; margin:1.8em 0; } .cl-stats .wp-block-column{ text-align:center; padding:1.4em .8em; position:relative; } .cl-stats .wp-block-column+.wp-block-column::before{ content:""; position:absolute; left:0; top:14%; height:72%; width:1px; background:var(--cl-line); } .cl-stats .wp-block-column :is(h2,h3,h4){ font-family:Inter,sans-serif; font-weight:800; color:var(--cl-blue); margin:.2em 0; line-height:1; padding:0; border:0; } .cl-stats .wp-block-column :is(h2,h3,h4)::before, .cl-stats .wp-block-column :is(h2,h3,h4)::after{ display:none; } .cl-stats .wp-block-column :is(h2,h3){ font-size:clamp(30px,4.4vw,46px); } .cl-stats .wp-block-column h4{ font-size:20px; } .cl-stats .wp-block-column p{ font-size:.8rem; color:var(--cl-sub); margin:.4em 0 0; } /* 数字の直前に置くラベル（「設立から」など）は小さく */ .cl-stats .wp-block-column p:first-child{ font-size:11.5px; font-weight:700; margin:0 0 .2em; } /* 単位（年・億円など）は数字の中でインライン装飾すると小さくなります */ .cl-stats .wp-block-column :is(h2,h3,h4) :is(sub,small,em){ font-size:.34em; font-style:normal; color:var(--cl-ink); font-weight:700; margin-left:.1em; } /* スマホで縦積みになったら、仕切り線を横に切り替える */ @media (max-width:781px){ .cl-stats .wp-block-column+.wp-block-column::before{ left:10%; right:10%; top:0; width:auto; height:1px; } } .cl-steps .wp-block-column{ position:relative; background:#fff; border:1px solid var(--cl-line); border-radius:var(--cl-r-card); padding:2.4em 1.7em 1.7em; counter-increment:clstep; transition:transform .55s var(--cl-slow),box-shadow .55s var(--cl-slow); } .cl-steps{ counter-reset:clstep; } .cl-steps .wp-block-column::before{ content:counter(clstep,decimal-leading-zero); position:absolute; top:.5em; right:.8em; font-family:Inter,sans-serif; font-weight:800; font-size:3.6em; line-height:1; color:var(--cl-blue); opacity:.1; } .cl-steps .wp-block-column:hover{ transform:translateY(-6px); box-shadow:var(--cl-shadow); } .cl-ways .wp-block-column{ position:relative; display:flex; flex-direction:column; border:1px solid var(--cl-line); border-radius:var(--cl-r-card); padding:0; background:#fff; overflow:hidden; transition:transform .5s var(--cl-slow),box-shadow .5s var(--cl-slow),border-color .5s var(--cl-slow); } .cl-ways .wp-block-column::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--cl-blue); transform:scaleY(0); transform-origin:top; transition:transform .5s var(--cl-slow); z-index:2; } .cl-ways .wp-block-column:hover{ transform:translateY(-6px); box-shadow:var(--cl-shadow-lg); border-color:rgba(46,147,191,.35); } .cl-ways .wp-block-column:hover::before{ transform:scaleY(1); } .cl-ways .wp-block-column>:is(figure,.wp-block-image){ margin-left:0; margin-right:0; margin-bottom:0; aspect-ratio:3/2; overflow:hidden; background:var(--cl-blue-xl); border-radius:0; border-bottom:1px solid var(--cl-line); } .cl-ways .wp-block-column>:is(figure,.wp-block-image):first-child{ margin-top:0; } .cl-ways .wp-block-column>:is(figure,.wp-block-image):not(:first-child){ margin-top:18px; border-top:1px solid var(--cl-line); } .cl-ways .wp-block-column>:is(figure,.wp-block-image) img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; border:0; border-radius:0; transition:transform .9s var(--cl-slow); } .cl-ways .wp-block-column:hover>:is(figure,.wp-block-image) img{ transform:scale(1.05); } .cl-ways .wp-block-column>:not(:is(figure,.wp-block-image)){ margin-left:24px; margin-right:24px; } .cl-ways .wp-block-column>:not(:is(figure,.wp-block-image)):first-child{ margin-top:24px; } .cl-ways .wp-block-column>:is(figure,.wp-block-image)+*{ margin-top:22px; } .cl-ways .wp-block-column>:last-child:not(:is(figure,.wp-block-image)){ margin-bottom:24px; } .cl-ways .wp-block-column{ justify-content:flex-start; } /* カードを縦並びの箱にする（ボタンを最下部に寄せるための前提） */ :is(.entry-content,.cl-content,.demo) :is(.cl-cards,.cl-imgcards,.cl-steps,.cl-ways,.cl-boxes) .wp-block-column{ display:flex; flex-direction:column; } /* ボタンはカードの一番下へ。本文の大きなボタンより一段小さく */ :is(.entry-content,.cl-content,.demo) :is(.cl-cards,.cl-imgcards,.cl-steps,.cl-ways,.cl-boxes) .wp-block-column>.wp-block-buttons{ margin-top:auto; margin-bottom:0; padding-top:16px; } :is(.entry-content,.cl-content,.demo) :is(.cl-cards,.cl-imgcards,.cl-steps,.cl-ways,.cl-boxes) .wp-block-column>.wp-block-buttons .wp-block-button__link{ padding:.82em 1.5em; font-size:13px; } :is(.entry-content,.cl-content,.demo) .cl-cards .wp-block-column>.wp-block-buttons{ justify-content:center; } :is(.entry-content,.cl-content,.demo) :is(.cl-imgcards,.cl-steps,.cl-ways,.cl-boxes) .wp-block-column>.wp-block-buttons{ justify-content:flex-start; } .entry-content :is(.cl-ways,.cl-imgcards,.cl-cards,.cl-steps) :is(h2,h3,h4,h5){ font-size:16.5px; font-weight:700; letter-spacing:.03em; line-height:1.6; margin-top:0; margin-bottom:.5em; border-left:0; padding-left:0; padding-right:0; } .entry-content :is(.cl-ways,.cl-imgcards,.cl-cards,.cl-steps) :is(h2,h3,h4,h5)::before, .entry-content :is(.cl-ways,.cl-imgcards,.cl-cards,.cl-steps) :is(h2,h3,h4,h5)::after{ display:none; } .entry-content .cl-imgcards .wp-block-column>:is(figure,.wp-block-image)+:is(h2,h3,h4,h5,p){ margin-top:1.25em; } .entry-content .cl-ways .wp-block-column>:is(figure,.wp-block-image)+:is(h2,h3,h4,h5,p){ margin-top:1.1em; } .cl-ways :is(h3,h4) a{ position:relative; } .cl-ways :is(h3,h4) a::after{ content:""; position:absolute; inset:-999px; z-index:1; } .cl-ways .wp-block-column:hover :is(h3,h4) a{ color:var(--cl-blue); } .entry-content .cl-way-tag{ align-self:flex-start; font-size:10.5px; font-weight:700; letter-spacing:.06em; color:var(--cl-blue); background:var(--cl-blue-xl); padding:4px 12px; border-radius:var(--cl-r-chip); margin-top:0; margin-bottom:12px; } .entry-content .cl-way-langs{ position:relative; z-index:3; display:flex; gap:7px; flex-wrap:wrap; margin-top:18px; } .cl-way-langs a{ font-family:Inter,sans-serif; font-size:10.5px; font-weight:700; color:var(--cl-sub); border:1px solid var(--cl-line); border-radius:4px; padding:3px 8px; transition:.3s var(--cl-slow); } .cl-way-langs a:hover{ border-color:var(--cl-blue); background:var(--cl-blue); color:#fff; } .cl-cta{ position:relative; border-radius:var(--cl-r-panel); overflow:hidden; background:var(--cl-blue-l); padding:clamp(40px,6vw,72px) clamp(24px,4vw,56px); } .cl-cta::before,.cl-cta::after{ content:""; position:absolute; border-radius:50%; border:1.5px solid rgba(255,255,255,.5); pointer-events:none; } .cl-cta::before{ width:360px; height:360px; top:-150px; right:-110px; } .cl-cta::after{ width:260px; height:260px; bottom:-130px; left:-70px; border-color:rgba(255,255,255,.34); } .cl-cta .wp-block-cover__inner-container,.cl-cta>.wp-block-group__inner-container{ position:relative; z-index:2; max-width:660px; margin:0 auto; background:#fff; border-radius:var(--cl-r-card); padding:clamp(28px,3.6vw,44px) clamp(22px,3vw,40px); text-align:center; box-shadow:var(--cl-shadow); } .cl-cta :is(h2,h3){ font-size:clamp(20px,2.5vw,28px); font-weight:700; letter-spacing:.05em; line-height:1.5; margin:0 0 .6em; padding:0; color:var(--cl-ink); } .cl-cta :is(h2,h3)::before,.cl-cta :is(h2,h3)::after{ display:none; } .cl-cta :is(h2,h3) em,.cl-cta :is(h2,h3) strong{ font-style:normal; color:var(--cl-blue); } .cl-cta p{ font-size:.94rem; color:#4e5c66; margin:0 auto 1.6em; max-width:30em; } .cl-cta .cl-label{ display:block; margin-bottom:1em; } .cl-cta.has-photo{ background:transparent; } .cl-cta.has-photo::before,.cl-cta.has-photo::after{ display:none; } :is(.cl-faq,.wp-block-details){ border:1px solid var(--cl-line); border-radius:var(--cl-r-card); padding:.2em 1.5em; margin-bottom:.7em; transition:.4s var(--cl-slow); } :is(.cl-faq,.wp-block-details):hover{ box-shadow:var(--cl-shadow); } :is(.cl-faq,.wp-block-details) summary{ font-weight:700; padding:1.1em 0; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1em; } :is(.cl-faq,.wp-block-details) summary::-webkit-details-marker{ display:none; } :is(.cl-faq,.wp-block-details) summary::after{ content:""; flex:none; width:11px; height:11px; border-right:2px solid var(--cl-blue); border-bottom:2px solid var(--cl-blue); transform:rotate(45deg); transition:transform .4s var(--cl-slow); } :is(.cl-faq,.wp-block-details)[open] summary::after{ transform:rotate(-135deg); } :is(.cl-quote,.wp-block-quote){ border-left:none; position:relative; padding:.4em 0 .4em 3.2em; } :is(.cl-quote,.wp-block-quote)::before{ content:"“"; position:absolute; left:0; top:-.1em; font-family:Inter,serif; font-size:4em; line-height:1; color:var(--cl-blue); opacity:.28; } :is(.cl-quote,.wp-block-quote) p{ font-size:1.14rem; font-weight:700; line-height:1.85; } :is(.entry-content,.cl-content,.demo) p.cl-quote{ font-size:1.14rem; font-weight:700; line-height:1.85; } :is(.cl-quote,.wp-block-quote) cite{ display:block; font-size:.78rem; color:var(--cl-sub); font-style:normal; font-weight:400; margin-top:.8em; } .entry-content .cl-img img, .entry-content .cl-img.wp-block-image img{ border:0; border-radius:var(--cl-r-panel); } .cl-band,.cl-band-l{ padding:26px 28px; border-radius:var(--cl-r-card); margin:1.8em 0; } .cl-band{ background:var(--cl-blue-xl); } .cl-band-l{ background:var(--cl-blue-l); } .cl-band>:first-child,.cl-band-l>:first-child{ margin-top:0; } .cl-band>:last-child,.cl-band-l>:last-child{ margin-bottom:0; } .cl-cards .wp-block-column p, .cl-imgcards .wp-block-column p, .cl-steps .wp-block-column p, .cl-ways .wp-block-column p:not(.cl-way-tag):not(.cl-way-langs){ font-size:14px; color:#46545E; line-height:1.85; } .cl-cards .wp-block-column :is(ul,ol), .cl-imgcards .wp-block-column :is(ul,ol), .cl-steps .wp-block-column :is(ul,ol), .cl-ways .wp-block-column :is(ul,ol){ font-size:14px; color:#46545E; line-height:1.85; } .cl-faq p{ font-size:14px; color:#46545E; } :is(.entry-content,.cl-content,.demo) .wp-block-separator, :is(.entry-content,.cl-content,.demo)>hr{ border:0; border-top:1px solid var(--cl-line); height:0; background:none; opacity:1; margin-block:3.2em; } :is(.entry-content,.cl-content,.demo) .wp-block-separator.is-style-dots{ border-top:0; color:var(--cl-line); } /* 少し存在感を出したいときだけ cl-sep-strong */ :is(.entry-content,.cl-content,.demo) .wp-block-separator.cl-sep-strong{ border-top-color:var(--cl-blue); border-top-width:2px; } :is(.entry-content,.cl-content,.demo) .wp-block-columns:is(.cl-wrap,.cl-wrap3,.cl-wrap2){ display:grid; gap:24px; align-items:stretch; } :is(.entry-content,.cl-content,.demo) .wp-block-columns.cl-wrap{ grid-template-columns:repeat(4,minmax(0,1fr)); } :is(.entry-content,.cl-content,.demo) .wp-block-columns.cl-wrap3{ grid-template-columns:repeat(3,minmax(0,1fr)); } :is(.entry-content,.cl-content,.demo) .wp-block-columns.cl-wrap2{ grid-template-columns:repeat(2,minmax(0,1fr)); } :is(.entry-content,.cl-content,.demo) .wp-block-columns:is(.cl-wrap,.cl-wrap3,.cl-wrap2)>.wp-block-column{ margin:0; min-width:0; } @media (max-width:1000px){ :is(.entry-content,.cl-content,.demo) .wp-block-columns.cl-wrap{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width:781px){ :is(.entry-content,.cl-content,.demo) .wp-block-columns:is(.cl-wrap,.cl-wrap3,.cl-wrap2){ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; } } @media (max-width:480px){ :is(.entry-content,.cl-content,.demo) .wp-block-columns:is(.cl-wrap,.cl-wrap3,.cl-wrap2){ grid-template-columns:1fr; } } .br-pc{ display:inline; } .br-sp{ display:none; } @media (max-width:780px){ .br-pc{ display:none; } .br-sp{ display:inline; } } .cl-yt{ margin:2em 0; } .cl-yt-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px 22px; } .cl-yt-item.is-hidden{ display:none; } .cl-yt-item a{ display:flex; flex-direction:column; text-decoration:none; color:var(--cl-ink); transition:color .35s var(--cl-slow); } /* サムネイル。比率を固定して切り抜くので、縦長のショートも枠に収まります */ .cl-yt-thumb{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; border-radius:var(--cl-r-card); background:var(--cl-blue-xl); } .cl-yt-thumb img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; transition:transform .9s var(--cl-slow); } .cl-yt-item a:hover .cl-yt-thumb img{ transform:scale(1.06); } /* 長さとショートのバッジ。YouTubeと同じ右下の位置に置きます */ .cl-yt-dur,.cl-yt-badge{ position:absolute; right:8px; bottom:8px; font-family:var(--f-num); font-size:11.5px; font-weight:700; line-height:1; padding:4px 7px; border-radius:4px; letter-spacing:.02em; } .cl-yt-dur{ background:rgba(0,0,0,.78); color:#fff; } .cl-yt-badge{ background:var(--cl-rose); color:#fff; letter-spacing:.06em; } .cl-yt-title{ display:block; margin-top:.85em; font-size:14px; font-weight:700; line-height:1.6; letter-spacing:.01em; /* 3行で打ち切ります。タイトルの長さで高さがばらつくのを防ぎます */ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .cl-yt-item a:hover .cl-yt-title{ color:var(--cl-blue-d); } .cl-yt-date{ display:block; margin-top:.5em; font-family:var(--f-num); font-size:11.5px; color:var(--cl-sub); letter-spacing:.04em; } /* 「もっと見る」 */ .cl-yt-more{ margin-top:34px; text-align:center; } .cl-yt-btn{ -webkit-appearance:none; appearance:none; border:0; cursor:pointer; font-family:var(--f); font-size:14px; font-weight:700; letter-spacing:.04em; background:transparent; color:var(--cl-blue); box-shadow:inset 0 0 0 1.5px var(--cl-blue); border-radius:var(--cl-r-btn); padding:1.05em 2.6em; transition:background .4s var(--cl-slow),color .4s var(--cl-slow),transform .5s var(--cl-slow); } .cl-yt-btn:hover{ background:var(--cl-blue); color:#fff; transform:translateY(-3px); } .cl-yt-btn:focus-visible{ outline:2px solid var(--cl-blue); outline-offset:3px; } .cl-yt-rest{ font-family:var(--f-num); font-weight:500; margin-left:.3em; } @media (max-width:900px){ .cl-yt-list{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 18px; } } @media (max-width:560px){ .cl-yt-list{ grid-template-columns:1fr; gap:20px; } .cl-yt-title{ font-size:14.5px; -webkit-line-clamp:2; } } /* --- 文字寄せ（段落・見出しなど） --- */ :is(.entry-content,.cl-content,.demo) .has-text-align-left { text-align:left; } :is(.entry-content,.cl-content,.demo) .has-text-align-center{ text-align:center; } :is(.entry-content,.cl-content,.demo) .has-text-align-right { text-align:right; } /* --- 文字寄せ（表のセル） --- */ .entry-content .wp-block-table :is(td,th).has-text-align-left { text-align:left; } .entry-content .wp-block-table :is(td,th).has-text-align-center{ text-align:center; } .entry-content .wp-block-table :is(td,th).has-text-align-right { text-align:right; } :is(.entry-content,.cl-content) .aligncenter{ display:block; margin-left:auto; margin-right:auto; } :is(.entry-content,.cl-content) .alignleft{ float:left; margin:.4em 1.6em .8em 0; } :is(.entry-content,.cl-content) .alignright{ float:right; margin:.4em 0 .8em 1.6em; } :is(.entry-content,.cl-content) :is(h2,h3,h4){ clear:both; } @media (max-width:600px){ /* 画面が狭いときは回り込みをやめ、上下に並べます */ :is(.entry-content,.cl-content) :is(.alignleft,.alignright){ float:none; margin-left:auto; margin-right:auto; } } :is(.entry-content,.cl-content,.demo) iframe[src*="youtube.com"], :is(.entry-content,.cl-content,.demo) iframe[src*="youtube-nocookie.com"], :is(.entry-content,.cl-content,.demo) iframe[src*="youtu.be"], :is(.entry-content,.cl-content,.demo) iframe[src*="player.vimeo.com"]{ display:block; width:100%; height:auto; aspect-ratio:16/9; border:0; border-radius:var(--cl-r-card); background:#000; } /* 縦長（ショート動画）。横に広がりすぎないよう上限を付けます */ :is(.entry-content,.cl-content,.demo) .cl-vertical iframe, :is(.entry-content,.cl-content,.demo) iframe.cl-vertical{ aspect-ratio:9/16; max-width:400px; margin-left:auto; margin-right:auto; } :is(.entry-content,.cl-content,.demo) .wp-block-embed{ margin:2.2em 0; } :is(.entry-content,.cl-content,.demo) .wp-block-embed__wrapper{ margin:0; } :is(.entry-content,.cl-content,.demo) .wp-block-embed figcaption{ font-size:11.5px; color:var(--cl-sub); margin-top:.7em; text-align:center; } :is(.entry-content,.cl-content,.demo) iframe:not(.wp-embedded-content){ max-width:100%; } /* @editor-end */ /* 9-0. 404ページ（.t-404） －詳細は CSS-REGULATION.md － */ .t-404 .nf{padding:clamp(72px,11vw,132px) 0 clamp(88px,12vw,140px);text-align:center} .t-404 .nf .wrap{max-width:680px} .t-404 .nf-num{font-family:var(--f-num);font-weight:800;font-size:clamp(88px,17vw,168px); line-height:.86;letter-spacing:.02em;color:var(--blue-l);margin-bottom:18px;user-select:none} .t-404 .nf h1{font-size:clamp(21px,3vw,29px);font-weight:700;letter-spacing:.05em;line-height:1.5} .t-404 .nf-lead{margin-top:20px;font-size:14.5px;line-height:2.05;color:var(--sub)} .t-404 .nf-search{display:flex;gap:10px;max-width:520px;margin:38px auto 0} .t-404 .nf-search input[type="search"]{flex:1 1 auto;min-width:0;height:56px;padding:0 18px; font-family:var(--f);font-size:15px;color:var(--ink);background:#fff; border:1px solid var(--line);border-radius:var(--r-btn);transition:.35s var(--slow)} .t-404 .nf-search input[type="search"]::placeholder{color:#a9b6be} .t-404 .nf-search input[type="search"]:focus{outline:none;border-color:var(--blue); box-shadow:0 0 0 3px rgba(46,147,191,.14)} .t-404 .nf-search button{flex:none;height:56px;padding:0 26px;font-family:var(--f); font-weight:700;font-size:15px;color:#fff;background:var(--blue);border:none; border-radius:var(--r-btn);cursor:pointer;transition:background .4s var(--slow)} .t-404 .nf-search button:hover{background:var(--blue-d)} .t-404 .nf-btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:30px} .t-404 .nf-links{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;align-items:center; margin-top:44px;padding-top:32px;border-top:1px solid var(--line)} .t-404 .nf-links span{width:100%;margin-bottom:6px;font-size:11.5px;letter-spacing:.06em;color:var(--sub)} .t-404 .nf-links a{font-size:12.5px;font-weight:700;color:var(--blue); border:1px solid var(--line);border-radius:var(--r-chip);padding:7px 15px;transition:.35s var(--slow)} .t-404 .nf-links a:hover{background:var(--blue);border-color:var(--blue);color:#fff} @media(max-width:680px){ .t-404 .nf-search{flex-wrap:wrap} .t-404 .nf-search input[type="search"]{flex:1 1 100%} .t-404 .nf-search button{flex:1 1 100%} .t-404 .nf-btns .btn{width:100%} } /* 9. 検索結果ページ（.t-search） －詳細は CSS-REGULATION.md － */ .t-search .srch-sec{padding:52px 0 96px} .t-search .srch-box{max-width:720px;margin:0 0 40px} .t-search .srch-box form{display:flex;gap:10px} .t-search .srch-box input[type="search"]{flex:1 1 auto;height:56px;padding:0 18px;font-family:var(--f);font-size:15px; color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--r-btn);transition:.35s var(--slow)} .t-search .srch-box input[type="search"]:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,147,191,.14)} .t-search .srch-box button{flex:none;height:56px;padding:0 28px;font-family:var(--f);font-weight:700;font-size:15px; color:#fff;background:var(--blue);border:none;border-radius:var(--r-btn);cursor:pointer;transition:.4s var(--slow)} .t-search .srch-box button:hover{background:var(--blue-d)} /* 件数 */ .t-search .list-meta{margin-bottom:8px} /* 結果リスト：1件ずつ罫線で区切る */ .srch-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .srch-list>li{border-bottom:1px solid var(--line)} .srch-list>li>a{display:block;padding:26px 4px;transition:background .3s var(--slow)} .srch-list>li>a:hover{background:var(--blue-xl)} .srch-list .m{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:8px} .srch-list .date{font-family:var(--f-num);font-size:12.5px;font-weight:700;color:var(--sub);letter-spacing:.06em} /* 種別ラベル（お知らせ／ページ）。カテゴリバッジとは別の控えめな表示 */ .srch-list .kind{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--sub); border:1px solid var(--line);padding:2px 10px;border-radius:var(--r-chip)} .srch-list h2{font-size:17px;font-weight:700;line-height:1.65;letter-spacing:.03em;transition:color .3s var(--slow)} .srch-list>li>a:hover h2{color:var(--blue)} /* 抜粋。検索語を で強調します */ .srch-list p{margin-top:10px;font-size:13.5px;line-height:1.9;color:var(--sub)} .srch-list mark{background:rgba(226,147,61,.22);color:var(--ink);font-weight:700;padding:0 2px;border-radius:2px} /* 0件のとき */ .srch-empty{padding:8px 0 0} .srch-empty .hint{margin-top:22px;font-size:14px;color:var(--sub);line-height:2} .srch-empty .hint b{color:var(--ink)} @media(max-width:680px){ .t-search .srch-box form{flex-wrap:wrap} .t-search .srch-box input[type="search"]{flex:1 1 100%} .t-search .srch-box button{width:100%} .srch-list>li>a{padding:22px 2px} .srch-list h2{font-size:16px} } /* 9-5. 固定ページに直接書かれたフォーム －詳細は CSS-REGULATION.md － */ .entry-content form{ margin:2.4em 0; } /* --- 表組み --- */ .entry-content form table{ width:100%; border-collapse:separate; border-spacing:0; margin:0; } .entry-content form td{ padding:1.1em 1.2em; vertical-align:top; text-align:left; border:0; border-bottom:1px solid var(--cl-line); } .entry-content form > table > tbody > tr:first-child > td{ border-top:1px solid var(--cl-line); } /* ラベル列（2セルある行の1つ目） */ .entry-content form tr:has(td + td) > td:first-child{ width:15em; background:var(--cl-blue-xl); font-weight:700; } .entry-content form tr:not(:has(td + td)) > td:has(> input[type="hidden"]):not(:has(:not(input[type="hidden"]))){ padding:0; line-height:0; font-size:0; border:0; } /* --- 入力欄 --- */ .entry-content form :is(input[type="text"],input[type="email"],input[type="tel"], input[type="number"],input[type="date"],input[type="url"],input[type="password"],textarea,select){ width:100%; max-width:28em; box-sizing:border-box; font:inherit; font-size:14px; line-height:1.6; padding:.62em .85em; border:1px solid #cfdce3; border-radius:var(--cl-r-btn); background:#fff; color:var(--cl-ink); transition:border-color .3s var(--cl-slow), box-shadow .3s var(--cl-slow); } .entry-content form textarea{ max-width:100%; min-height:7em; resize:vertical; } .entry-content form :is(input,textarea,select):focus{ outline:0; border-color:var(--cl-blue); box-shadow:0 0 0 3px rgba(46,147,191,.16); } .entry-content form select:not([multiple]){ width:auto; max-width:100%; } .entry-content form input[type="text"]:is([size="1"],[size="2"],[size="3"],[size="4"], [size="5"],[size="6"],[size="7"],[size="8"],[size="9"],[size="10"]){ width:auto; max-width:none; } .entry-content form td:has(input[type="text"] ~ input[type="text"]) input[type="text"]{ width:auto; max-width:15em; } /* チェックボックス・ラジオ */ .entry-content form :is(input[type="checkbox"],input[type="radio"]){ width:17px; height:17px; margin:0 .45em 0 0; vertical-align:-3px; accent-color:var(--cl-blue); } .entry-content form label{ display:inline-block; cursor:pointer; } .entry-content form label:has(input[type="checkbox"],input[type="radio"]){ margin:.15em 1.4em .15em 0; } .entry-content form tr:has(td + td) > td:first-child label.must::after{ content:"必須"; display:inline-block; margin-left:.6em; padding:.15em .6em; font-size:10.5px; font-weight:700; letter-spacing:.06em; color:#fff; background:var(--cl-rose); border-radius:4px; vertical-align:2px; } /* --- 入れ子の表（協賛メニューの選択など） --- */ .entry-content form table table{ width:auto; min-width:100%; margin:.2em 0 0; } .entry-content form table table td{ padding:.55em .7em; text-align:center; border-bottom:1px solid var(--cl-line); } .entry-content form table table td:first-child{ width:52%; } .entry-content form table table tr:first-child td{ background:var(--cl-blue-xl); font-weight:700; font-size:12.5px; } .entry-content form table table tr:not(:first-child) td:first-child{ text-align:left; background:none; font-weight:400; } /* --- ボタン --- */ .entry-content form tr:not(:has(td + td)) > td:has(:is(button,input[type="submit"],input[type="image"])){ text-align:center; padding:1.8em 1.2em; border-bottom:0; } .entry-content form :is(button,input[type="submit"],input[type="button"],input[type="reset"]){ /* ★appearance:none が無いと、ブラウザ既定の灰色ボタンのままです */ -webkit-appearance:none; appearance:none; font:inherit; font-size:15px; font-weight:700; letter-spacing:.04em; cursor:pointer; min-height:56px; padding:0 34px; margin:.3em .4em; border:0; border-radius:var(--cl-r-btn); background:var(--cl-blue); color:#fff; transition:background .35s var(--cl-slow), transform .35s var(--cl-slow); } .entry-content form :is(button,input[type="submit"],input[type="image"]):hover{ background:var(--cl-blue-d); transform:translateY(-2px); } /* 「リセット」など、押し間違えると困るものは控えめにします */ .entry-content form :is(input[type="reset"],input[type="button"]){ background:#fff; color:var(--cl-blue); box-shadow:inset 0 0 0 1.5px var(--cl-blue); } .entry-content form :is(input[type="reset"],input[type="button"]):hover{ background:var(--cl-blue-xl); transform:none; } @media (max-width:781px){ /* ラベルと入力欄を縦に積みます */ .entry-content form tr:has(td + td) > td{ display:block; width:auto; border-bottom:0; } .entry-content form tr:has(td + td) > td:first-child{ width:auto; padding:.8em 1em .6em; } .entry-content form tr:has(td + td) > td + td{ padding:0 1em 1.1em; border-bottom:1px solid var(--cl-line); } /* 入れ子の表が画面に収まらないときは、その場で横スクロール */ .entry-content form td:has(> table){ overflow-x:auto; } .entry-content form :is(input[type="text"],textarea,select){ max-width:100%; } } /* 10. Snow Monkey Forms －詳細は CSS-REGULATION.md － */ /* 全体 */ .smf-form{max-width:820px;margin:0 auto} /* 1行（ラベル＋入力） */ .smf-form .smf-item{padding:26px 0;border:none;border-bottom:1px solid var(--line)} .smf-form .smf-item:first-child{border-top:1px solid var(--line)} .smf-form .smf-item__col{padding:0} .smf-form .smf-item__col--label{background:none;border:none;font-weight:700;font-size:14.5px; letter-spacing:.04em;color:var(--ink);padding-bottom:10px} .smf-form .smf-item--divider .smf-item__col{padding:0} @media(min-width:769px){ .smf-form .smf-item{display:flex;gap:28px;align-items:flex-start} .smf-form .smf-item__col--label{flex:0 0 14em;max-width:14em;padding:6px 0 0;border:none} .smf-form .smf-item__col--controls{flex:1 1 auto;max-width:none} } /* 必須・任意のしるし（ラベル内のテキストに続けて出ます） */ .smf-form .smf-item__col--label [data-required="1"], .smf-form .smf-item__col--label .smf-item__label__require{ display:inline-block;margin-left:8px;padding:3px 9px;border-radius:var(--r-chip);white-space:nowrap; font-size:10.5px;font-weight:700;letter-spacing:.06em;color:#8A5A16;background:#FBEEDD} /* 入力欄 */ .smf-form input[type="text"], .smf-form input[type="email"], .smf-form input[type="tel"], .smf-form input[type="url"], .smf-form input[type="number"], .smf-form input[type="date"], .smf-form input[type="password"], .smf-form input[type="search"], .smf-form textarea, .smf-form select, .smf-form .smf-text-control__control, .smf-form .smf-textarea-control__control, .smf-form .smf-select-control__control{ width:100%;font-family:var(--f);font-size:15px;line-height:1.7;color:var(--ink); background:#fff;border:1px solid var(--line);border-radius:var(--r-btn); padding:14px 16px;transition:border-color .35s var(--slow),box-shadow .35s var(--slow)} .smf-form textarea, .smf-form .smf-textarea-control__control{min-height:190px;resize:vertical} .smf-form input:focus, .smf-form textarea:focus, .smf-form select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,147,191,.14)} .smf-form input::placeholder, .smf-form textarea::placeholder{color:#a9b4bb} /* 入力エラーの枠（プラグインが data-invalid="1" を付けます） */ .smf-form [data-invalid="1"]{border-color:var(--form-err);box-shadow:0 0 0 3px rgba(192,57,43,.12)} /* エラーメッセージ */ .smf-error-messages{margin-top:8px;font-size:13px;font-weight:700;color:var(--form-err)} /* 補足説明 */ .smf-control-description{margin-top:8px;font-size:12.5px;line-height:1.85;color:var(--sub)} /* チェックボックス・ラジオ */ .smf-form .smf-checkboxes-control, .smf-form .smf-radio-buttons-control{display:flex;flex-wrap:wrap;gap:10px 22px} .smf-form .smf-label{display:inline-flex;align-items:flex-start;gap:9px;font-size:14.5px;line-height:1.7;cursor:pointer} .smf-form input[type="checkbox"], .smf-form input[type="radio"]{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--blue);cursor:pointer} /* 送信ボタンの列 */ .smf-action{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:40px} .smf-action .smf-button-control__control, .smf-form + .smf-action .smf-button-control__control{ display:inline-flex;align-items:center;justify-content:center;gap:14px; height:62px;padding:0 40px;border:none;background:var(--form-btn);background-image:none; color:#fff;font-family:var(--f);font-weight:700;font-size:15px;letter-spacing:.04em;line-height:1.5; border-radius:var(--r-btn);cursor:pointer; transition:background .4s var(--slow),transform .5s var(--slow)} .smf-action .smf-button-control__control:hover{background:#17607F;transform:translateY(-2px)} .smf-action .smf-button-control__control[disabled]{background:var(--line);color:var(--sub);cursor:not-allowed;transform:none} /* 「戻る」は控えめに */ .smf-action .smf-button-control--back .smf-button-control__control, .smf-action [name="snow-monkey-forms/back"]{ background:#fff;color:var(--blue);box-shadow:inset 0 0 0 1.5px var(--blue)} .smf-action .smf-button-control--back .smf-button-control__control:hover, .smf-action [name="snow-monkey-forms/back"]:hover{background:var(--blue-l)} .smf-progress-tracker{display:flex;flex-wrap:nowrap;list-style:none;margin:0 0 44px;padding:0} .smf-progress-tracker__item{position:relative;flex:1 1 auto;width:33.3333%;margin:0; display:flex;flex-direction:column;align-items:center} .smf-progress-tracker__item::before, .smf-progress-tracker__item::after{content:"";position:absolute;top:15px;display:block;height:1px;background:var(--line)} .smf-progress-tracker__item::before{right:50%;left:0} .smf-progress-tracker__item::after{right:0;left:50%} .smf-progress-tracker__item--input::before{display:none} .smf-progress-tracker__item--complete::after{display:none} .smf-progress-tracker__item::before, .smf-progress-tracker__item::after{background-color:var(--line)} .smf-progress-tracker__item__number{position:relative;z-index:1;width:30px;height:30px;border-radius:50%; display:flex;align-items:center;justify-content:center;background-color:var(--line);color:#fff; font-family:var(--f-num);font-weight:700;font-size:13px;letter-spacing:0} .smf-progress-tracker__item__text{margin-top:.7em;font-size:12.5px;color:var(--sub);letter-spacing:.04em} .smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__number{background-color:var(--blue)} .smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__text{color:var(--blue);font-weight:700} /* 確認画面：入力内容は文字だけで淡々と見せる */ .snow-monkey-form[data-screen="confirm"] .smf-item__col--controls{font-size:15px;line-height:1.9} /* 完了画面 */ .snow-monkey-form[data-screen="complete"]{max-width:720px;margin:0 auto;text-align:center; padding:56px 40px;background:var(--blue-xl);border-radius:var(--r-panel)} .snow-monkey-form[data-screen="complete"] p{font-size:15.5px;line-height:2} /* 送信中 */ .smf-sending{color:var(--sub)} @media(max-width:680px){ .smf-form .smf-item{padding:22px 0} .smf-action{margin-top:32px} .smf-action .smf-button-control__control{width:100%;padding:0 24px} .smf-progress-tracker__item__text{font-size:11px} } /* ===== ここから：旧HTML対応（9-6）／削除する場合はここから ===== */ /* 9-6. 旧サイトから引き継いだHTML（クラシックエディタ） －詳細は CSS-REGULATION.md － */ :is(.entry-content,.cl-content,.demo) :is(a.square_btn,a.square_btn_pink,a.square_btn_orange,a.square_btn_green,a.square_btn_blue){ display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:56px; padding:14px 30px; margin:4px 0; font-weight:700; font-size:15px; letter-spacing:.04em; line-height:1.5; text-align:center; text-decoration:none; border:none; border-radius:var(--r-btn); background:transparent; color:var(--blue); box-shadow:inset 0 0 0 1.5px var(--blue); transition:background .35s var(--slow), color .35s var(--slow); } :is(.entry-content,.cl-content,.demo) :is(a.square_btn,a.square_btn_orange,a.square_btn_green,a.square_btn_blue):hover{ background:var(--blue); color:#fff; } /* 申し込み・寄付の主ボタン */ :is(.entry-content,.cl-content,.demo) a.square_btn_pink{ background:var(--rose); color:#fff; box-shadow:none; } :is(.entry-content,.cl-content,.demo) a.square_btn_pink:hover{ background:var(--rose-d); color:#fff; } /* で囲まれていることが多いので、二重太字にならないようにする */ :is(.entry-content,.cl-content,.demo) :is(a.square_btn,a.square_btn_pink,a.square_btn_orange,a.square_btn_green) strong{ font-weight:inherit; } /* スマホでは横幅いっぱいに */ @media (max-width:600px){ :is(.entry-content,.cl-content,.demo) :is(a.square_btn,a.square_btn_pink,a.square_btn_orange,a.square_btn_green,a.square_btn_blue){ display:flex; width:100%; padding:14px 20px; } } :is(.entry-content,.cl-content,.demo) :is(i,span):is(.fa,.fas,.far,.fab){ font-style:normal; font-weight:400; line-height:1; } :is(.entry-content,.cl-content,.demo) .fa-arrow-circle-right::before{ content:"→"; } :is(.entry-content,.cl-content,.demo) .fa-caret-right::before, :is(.entry-content,.cl-content,.demo) .fa-angle-right::before, :is(.entry-content,.cl-content,.demo) .fa-chevron-right::before{ content:"›"; } /* ===== ここまで：旧HTML対応（9-6）／削除する場合はここまで ===== */