:root{--ink:#303c3b;--muted:#626b68;--accent:#487a76;--line:#dce2df;--paper:#fff;--slide-width:min(760px,calc(100vw - 440px));--slide-gap:24px} *{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:135px}body{margin:0;color:var(--ink);background:var(--paper);font-family:"Yu Gothic",Meiryo,sans-serif;font-size:18px;line-height:1.8;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}img{max-width:100%;display:block}h1,h2,h3,p{margin:0}a:hover{color:var(--accent)}:focus-visible{outline:2px solid #34736f;outline-offset:4px}.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip-link{position:fixed;left:12px;top:-100px;z-index:30;padding:12px 20px;background:#fff;border:1px solid var(--accent)}.skip-link:focus{top:12px} .site-header{background:#fff;position:sticky;top:0;z-index:20;border-bottom:1px solid #edf0ed}.utility{min-height:29px;background:#edf3f2;padding:4px max(32px,calc((100vw - 1240px)/2));display:flex;align-items:center;justify-content:space-between;font-size:13px;letter-spacing:.07em}.utility nav{display:flex;gap:22px}.utility a{line-height:21px}.header-inner{max-width:1260px;width:calc(100% - 64px);margin:auto;min-height:103px;display:flex;align-items:center;gap:38px}.brand{display:inline-flex;flex-direction:column;align-items:flex-start;flex-shrink:0}.logo-type{font-family:Arial,sans-serif;font-size:46px;font-weight:600;letter-spacing:.18em;line-height:1.2;color:#242b2a}.logo-dot{color:var(--accent);letter-spacing:0}.brand-sub{font-size:12px;letter-spacing:.13em;margin-top:6px;color:#56615f}.top-nav{display:flex;gap:28px;align-items:center;justify-content:center;flex:1}.top-nav a{display:flex;flex-direction:column;min-height:44px;justify-content:center;font-family:Georgia,"Yu Mincho",serif;font-size:22px;line-height:1.4;white-space:nowrap}.top-nav small{font-family:"Yu Gothic",Meiryo,sans-serif;font-size:12px;color:var(--muted);margin-top:4px;text-align:center}.header-about{font-size:13px;line-height:1.8;border-left:1px solid var(--line);padding-left:24px} .catalog-layout{max-width:1260px;width:calc(100% - 64px);margin:36px auto 90px;display:grid;grid-template-columns:186px minmax(0,1fr);gap:46px;align-items:start}.site-content{min-width:0}.sidebar-inner{position:sticky;top:164px}.sidebar h2{font-family:Georgia,serif;font-size:22px;font-weight:400;line-height:1.4;letter-spacing:.03em;margin-bottom:14px}.sns{margin-bottom:33px}.social-links{display:flex;gap:9px}.social-links a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;min-height:44px}.social-links svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5}.category-nav>a{display:flex;align-items:center;gap:12px;min-height:66px;border-bottom:1px solid var(--line);padding:10px 0}.category-nav svg{height:23px;width:23px;fill:none;stroke:var(--accent);stroke-width:1.1;flex-shrink:0}.category-nav span{font-size:17px}.category-nav small{display:block;color:var(--muted);font-size:12px;line-height:1.6}.category-nav b{margin-left:auto;font-size:12px;font-family:Arial,sans-serif;color:var(--muted);font-weight:400}.small-nav{margin-top:29px;display:flex;flex-direction:column;align-items:flex-start;gap:1px}.small-nav a{display:flex;min-height:38px;align-items:center;font-size:14px}.side-credit{margin-top:33px;font-family:Arial,sans-serif;font-size:12px;letter-spacing:.13em;color:var(--muted);line-height:2.2}.side-credit span{letter-spacing:.05em} .latest{margin-bottom:32px}.slider-view{overflow-x:auto;overflow-y:hidden;position:relative;scrollbar-width:thin}.slider-track{display:flex;gap:var(--slide-gap);width:max-content;will-change:transform}.feature-slide{width:var(--slide-width);flex:none;display:block;transition:opacity .55s;opacity:1;aspect-ratio:1280/670}.feature-slide img{width:100%;height:auto;aspect-ratio:1280/670;object-fit:contain}.latest.ready .slider-view{overflow:hidden}.latest.ready .feature-slide{opacity:.4}.latest.ready .feature-slide.is-current{opacity:1}.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:1px solid #ddd;background:#fffffff2;border-radius:50%;font-size:31px;line-height:1;z-index:3}.slider-arrow.previous{left:6px}.slider-arrow.next{right:6px}.slider-arrow:hover{background:#fff;color:var(--accent)}[hidden]{display:none!important}.slide-meta{display:flex;justify-content:space-between;align-items:center;padding:16px 6px 14px;border-bottom:1px solid var(--line);gap:16px}.latest-label{font-size:13px;font-family:Arial,sans-serif;letter-spacing:.14em;display:flex;align-items:center;gap:12px}.latest-label small{font-size:13px;letter-spacing:0;font-family:"Yu Gothic",sans-serif;color:var(--muted)}.slide-controls{display:flex;align-items:center;gap:17px}.slider-dots{display:flex;gap:0}.slider-dots button{width:24px;height:44px;background:transparent;border:0;position:relative;padding:0}.slider-dots button::after{content:"";width:5px;height:5px;border-radius:50%;background:#b2bcb8;position:absolute;left:10px;top:20px}.slider-dots button[aria-pressed=true]::after{width:6px;height:6px;background:var(--accent)}.slide-number{font-size:12px;letter-spacing:.12em;font-family:Arial,sans-serif;white-space:nowrap}.slider-pause{width:32px;min-height:44px;font-size:16px;background:none;border:0} .catalog-intro{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:9px 0 30px}.catalog-intro h2{font-size:31px;font-weight:400;font-family:Georgia,serif;line-height:1.25;letter-spacing:.025em}.catalog-intro h2 small{display:block;font-size:13px;font-family:"Yu Gothic",Meiryo,sans-serif;margin-top:10px;letter-spacing:.08em}.catalog-intro p{font-size:14px;color:var(--muted);line-height:1.7;text-align:right}.catalog-section{margin-bottom:60px;scroll-margin-top:150px}.section-title{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid #b8c6c2;padding:0 0 11px;gap:16px}.section-title h2{font-family:Georgia,"Yu Mincho",serif;font-size:25px;line-height:1.5;font-weight:400}.section-title h2 small{font-family:"Yu Gothic",Meiryo,sans-serif;font-size:13px;margin-left:14px;color:var(--muted)}.section-title>span{font-size:12px;letter-spacing:.12em;font-family:Arial,sans-serif;color:var(--muted)}.product-list{display:grid;grid-template-columns:1fr}.pcard{display:grid;grid-template-columns:112px minmax(0,1fr) 135px;gap:24px;align-items:center;padding:23px 0;border-bottom:1px solid var(--line);min-width:0}.product-image{display:flex;justify-content:center;align-items:center;width:100%;background:#f5f6f3;min-height:162px}.product-image img{height:148px;width:auto;object-fit:contain}.product-image:hover img{opacity:.9}.product-body{min-width:0}.product-format{font-size:13px;color:var(--accent);letter-spacing:.07em;margin-bottom:6px}.product-body h3{font-size:21px;line-height:1.7;letter-spacing:.015em;font-weight:500;word-break:normal;overflow-wrap:anywhere;text-wrap:pretty}.product-description{font-size:16px;color:var(--muted);margin-top:9px;line-height:1.8}.product-buy{min-width:0;display:flex;flex-direction:column;gap:8px}.product-buy>small{font-family:Arial,sans-serif;font-size:13px;color:var(--muted)}.buy-link{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ink);min-height:44px;font-size:14px;padding:5px 0;gap:8px}.buy-link:hover{border-color:var(--accent)}.media-wide{grid-template-columns:222px minmax(0,1fr) 135px}.media-wide .product-image{min-height:0;background:transparent}.media-wide .product-image img{width:100%;height:auto;object-fit:contain}.purchase-note{font-size:14px;color:var(--muted);padding:20px 0;border-top:1px solid var(--line);line-height:1.9} .site-footer{padding:46px max(32px,calc((100vw - 1260px)/2)) 20px;background:#f4f6f3}.footer-main{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;padding-bottom:37px}.footer-main .logo-type{font-size:40px}.footer-main>p{font-size:16px;line-height:2;color:var(--muted);margin-top:3px}.footer-main nav{display:flex;flex-direction:column;gap:9px;font-size:14px}.footer-legal{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:21px 0;gap:20px}.footer-legal nav{display:flex;flex-wrap:wrap;gap:15px;font-size:13px}.footer-legal small{font-size:12px;color:var(--muted)}.sample-note{font-size:13px;color:var(--muted);line-height:1.8} .page-kicker{font-family:Arial,sans-serif;font-size:13px;letter-spacing:.15em;color:var(--accent);margin:3px 0 11px}.page-title{font-size:34px;line-height:1.6;font-weight:400;margin-bottom:27px;letter-spacing:.025em}.page-lead{max-width:650px;font-size:18px;line-height:2.1;margin:0 0 35px}.text-section{margin:38px 0;border-top:1px solid var(--line);padding-top:25px;max-width:780px;scroll-margin-top:160px}.text-section h2{font-size:25px;font-weight:500;margin-bottom:14px}.text-section p{font-size:18px;line-height:2.1;margin-bottom:18px}.text-link,.back-link{min-height:44px;display:inline-flex;align-items:center;font-size:16px;border-bottom:1px solid var(--ink);padding:7px 0}.primary-link{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;background:var(--accent);color:#fff;min-height:50px;padding:13px 21px;font-size:17px;margin:18px 0}.primary-link:hover{background:#315c59;color:#fff}.author-profile{display:grid;grid-template-columns:210px minmax(0,1fr);gap:36px;align-items:start;padding-top:8px}.author-profile>img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}.author-profile h2{font-size:26px;font-weight:400;margin-bottom:15px}.author-profile p{line-height:2;font-size:17px;margin-bottom:16px}.guide-list>section{display:grid;grid-template-columns:180px 1fr;gap:8px 25px;border-top:1px solid var(--line);padding:24px 0}.guide-list h2{grid-row:span 2;font-size:23px;font-weight:400}.guide-list p{font-size:17px;line-height:2}.guide-list .text-link{justify-self:start}.breadcrumb{font-size:14px;color:var(--muted);display:flex;gap:14px;margin-bottom:33px}.detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}.detail-image img{width:100%;height:auto;max-height:440px;object-fit:contain}.detail-body h1{font-size:28px;font-weight:400;line-height:1.8;letter-spacing:.025em}.detail-description{font-size:18px;line-height:2;margin-top:19px}.detail-body .purchase-note{margin-top:17px}.detail-body .back-link{border:0;margin-top:9px} @media(max-width:1100px){.header-inner{gap:22px}.top-nav{gap:18px}.top-nav a{font-size:20px}.header-about{display:none}.media-wide{grid-template-columns:190px minmax(0,1fr) 116px}.pcard{gap:20px}} @media(max-width:980px){:root{--slide-width:calc(100vw - 84px);--slide-gap:18px}.header-inner{min-height:86px}.top-nav{gap:16px}.top-nav a{font-size:18px}.catalog-layout{grid-template-columns:1fr;margin-top:28px;width:calc(100% - 48px)}.sidebar{display:none}.catalog-section{scroll-margin-top:130px}.media-wide{grid-template-columns:222px minmax(0,1fr) 135px}.footer-main{gap:28px}.guide-list>section{grid-template-columns:150px 1fr}} @media(max-width:620px){:root{--slide-width:calc(100vw - 64px);--slide-gap:12px}html{scroll-padding-top:160px}.utility{padding:3px 18px;min-height:25px;font-size:12px;letter-spacing:0}.utility>span{font-size:12px}.utility nav{gap:12px}.utility nav a:first-child{display:none}.header-inner{width:calc(100% - 36px);display:grid;grid-template-columns:1fr;gap:0;padding:16px 0 0;min-height:110px}.logo-type{font-size:33px;letter-spacing:.16em}.brand-sub{font-size:12px;margin-top:3px}.top-nav{width:100%;justify-content:space-between;gap:4px;border-top:1px solid #edf0ed;margin-top:14px;padding:5px 0}.top-nav a{font-family:"Yu Gothic",Meiryo,sans-serif;font-size:14px;min-height:42px}.top-nav small{display:none}.catalog-layout{width:calc(100% - 36px);margin:22px auto 56px}.latest{margin-bottom:24px}.slider-arrow{width:38px;height:44px;border-radius:0;border:0;background:#ffffffe3;top:50%;font-size:28px}.slider-arrow.previous{left:0}.slider-arrow.next{right:0}.slide-meta{padding:5px 0 10px;gap:5px}.latest-label{font-size:12px;gap:0;flex-direction:column;align-items:flex-start;line-height:1.9}.latest-label small{font-size:12px}.slide-controls{gap:6px}.slider-dots button{width:21px}.slider-dots button::after{left:8px}.slide-number{font-size:12px}.slider-pause{width:25px}.catalog-intro{padding:1px 0 26px;gap:12px}.catalog-intro h2{font-size:28px}.catalog-intro h2 small{font-size:12px;margin-top:9px}.catalog-intro p{font-size:13px}.catalog-section{margin-bottom:44px;scroll-margin-top:160px}.section-title h2{font-size:26px}.section-title h2 small{font-size:12px;margin-left:10px}.section-title>span{font-size:12px}.pcard{grid-template-columns:91px minmax(0,1fr);gap:10px 18px;padding:22px 0;align-items:start}.product-image{grid-row:span 2;min-height:139px}.product-image img{height:auto;max-height:131px;max-width:100%;width:auto}.product-body h3{font-size:18px;line-height:1.75}.product-format{font-size:12px;margin-bottom:4px}.product-description{font-size:14px;margin-top:7px}.product-buy{grid-column:2;flex-direction:row;align-items:center;gap:12px}.product-buy>small{display:none}.buy-link{font-size:14px;width:100%;margin-top:0}.media-wide{grid-template-columns:1fr;gap:15px}.media-wide .product-image{grid-row:auto}.media-wide .product-image img{width:100%;height:auto;max-height:none}.media-wide .product-buy{grid-column:1}.media-wide .buy-link{max-width:180px}.purchase-note{font-size:13px}.site-footer{padding:30px 18px 20px}.footer-main{display:grid;grid-template-columns:1fr;gap:22px;padding-bottom:28px}.footer-main .logo-type{font-size:33px}.footer-main>p{font-size:14px}.footer-main nav{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px;font-size:13px}.footer-legal{align-items:start;gap:15px}.footer-legal nav{gap:9px 13px;font-size:12px}.footer-legal small{white-space:nowrap}.sample-note{font-size:12px}.page-title{font-size:28px;margin-bottom:20px}.page-lead{font-size:17px}.author-profile{grid-template-columns:1fr;gap:24px}.author-profile>img{max-width:210px}.author-profile h2{font-size:25px}.guide-list>section{grid-template-columns:1fr;gap:12px;padding:22px 0}.guide-list h2{grid-row:auto}.text-section{margin:30px 0;padding-top:21px}.text-section p{font-size:17px}.detail{grid-template-columns:1fr;gap:27px}.detail-image img{max-height:350px}.detail-body h1{font-size:27px}.breadcrumb{font-size:13px;margin-bottom:24px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.slider-track{will-change:auto}.feature-slide{transition:none}} .top-nav{gap:20px}.top-nav .spot-nav{font-family:"Yu Gothic",Meiryo,sans-serif;color:#315e5a;font-weight:700}.header-cart{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;font-size:15px;white-space:nowrap;margin-left:auto}.header-cart svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}.header-cart [data-spot-count]{border:1px solid var(--line);width:23px;height:23px;border-radius:50%;display:grid;place-items:center;font-size:12px}.spot-top{display:block;width:calc(100% - 64px);max-width:1260px;margin:28px auto 0}.spot-top img{display:block;width:100%;height:auto;aspect-ratio:3/1;object-fit:contain}.spot-top:hover{opacity:.92}.consult-category{font-weight:700;color:#315e5a}.spot-product-banner{width:100%;height:auto;margin-bottom:28px}.spot-heading{font-family:"Yu Mincho",serif;font-size:clamp(30px,3.5vw,46px);line-height:1.6;font-weight:500;margin:0 0 18px}.spot-lead{font-size:18px;line-height:2;margin-bottom:30px}.spot-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(285px,.9fr);gap:36px;align-items:start}.spot-order{padding:28px;background:#f1f5f2;border:1px solid #dce4df;border-radius:8px;position:sticky;top:155px}.spot-order h2{font-size:24px;font-weight:500;margin:0 0 22px}.spot-option{display:block;border:1px solid #91aca6;padding:20px;background:white;margin-bottom:20px}.spot-option span{display:block;font-size:16px}.spot-option strong{display:block;font-size:30px;font-weight:500}.spot-option .pending-price{font-size:17px;color:#626b68;margin-top:8px}.spot-price{font-size:30px;margin-top:8px}.spot-price .yen{font-size:max(.5em,10px);margin-left:.06em}.spot-caption{font-size:13px;line-height:1.9;color:var(--muted);margin:14px 0}.spot-order label{font-size:16px;display:block;margin:20px 0 8px}.spot-order select,.spot-order textarea{width:100%;font:inherit;font-size:16px;background:white;border:1px solid #acbcb6;padding:12px;color:inherit}.spot-button{display:flex;align-items:center;justify-content:center;gap:15px;min-height:52px;width:100%;border:0;background:#3c716a;color:white;font:inherit;font-weight:600;font-size:17px;padding:13px 20px;cursor:pointer;margin-top:20px}.spot-button:hover{background:#2e5c56;color:white}.spot-button:disabled{background:#dbe2df;color:#606e67;cursor:not-allowed}.spot-outline{display:inline-flex;min-height:44px;align-items:center;font-size:16px;border-bottom:1px solid currentColor;margin:18px 0 0}.spot-summary{list-style:none;padding:0;margin:28px 0}.spot-summary li{padding:16px 0;border-top:1px solid var(--line);display:flex;gap:22px;font-size:16px}.spot-summary b{width:95px;flex:none;font-weight:500}.spot-summary span{line-height:1.9}.spot-flow{border-top:1px solid var(--line);margin-top:40px;padding-top:26px}.spot-flow h2{font-size:25px;margin-bottom:18px}.spot-flow ol{padding-left:24px;line-height:2}.spot-flow li{margin-bottom:15px}.spot-terms{padding:22px;background:#f5f6f3;margin-top:30px;font-size:15px;line-height:2}.spot-terms h2{font-size:20px;font-weight:500;margin-bottom:12px}.spot-cart-row{display:flex;align-items:center;gap:22px;border-block:1px solid var(--line);padding:25px 0}.spot-cart-row img{width:165px;height:90px;object-fit:contain}.spot-cart-row h2{font-size:23px;font-weight:500;margin-bottom:8px}.spot-cart-row p{font-size:16px}.spot-remove{border:0;background:none;border-bottom:1px solid currentColor;min-height:44px;cursor:pointer;font:inherit;font-size:14px}.spot-money-row{display:flex;justify-content:space-between;gap:15px;font-size:16px;padding:14px 0;border-bottom:1px solid var(--line)}.spot-money-row.total{font-weight:700;font-size:19px}.spot-order .spot-agree{display:flex;align-items:flex-start;gap:12px;line-height:1.8}.spot-agree input{margin-top:6px;width:20px;height:20px;flex:none;accent-color:#487a76}.spot-empty{padding:40px;background:#f3f5f2;font-size:17px}.spot-check{width:60px;height:60px;border-radius:50%;background:#487a76;color:white;display:grid;place-items:center;font-size:27px;margin-bottom:20px}.spot-preview-note{font-size:14px;border-left:0;background:#edf3f2;padding:16px;margin-bottom:25px}.spot-saved{font-size:15px;min-height:28px;margin-top:12px}.spot-order small{font-size:13px} @media(max-width:1100px){.header-inner{position:relative;display:grid;grid-template-columns:1fr auto;gap:8px;padding:12px 0}.top-nav{grid-column:1/-1;grid-row:2;justify-content:flex-start;gap:26px;overflow-x:auto;max-width:100%;padding-bottom:7px}.top-nav a{flex:none;font-size:17px}.header-cart{grid-column:2;grid-row:1}.spot-order{top:185px}.spot-layout{grid-template-columns:1fr}} @media(max-width:620px){.utility>span{font-size:11px}.utility nav{gap:10px}.utility a{font-size:12px;min-height:32px;display:inline-flex;align-items:center}.header-inner{min-height:0;padding:13px 0 0;gap:0}.top-nav{gap:21px;margin-top:13px;padding:4px 0 7px}.top-nav a{font-size:14px;min-height:44px}.logo-type{font-size:31px}.brand-sub{font-size:10px}.header-cart{font-size:13px}.header-cart .cart-word{display:none}.spot-top{width:calc(100% - 36px);margin-top:18px}.spot-top img{aspect-ratio:3/1}.spot-layout{gap:27px}.spot-order{position:static;padding:23px 20px}.spot-heading{font-size:30px}.spot-lead{font-size:16px}.spot-summary li{font-size:15px;gap:12px}.spot-summary b{width:75px}.spot-cart-row{align-items:flex-start;gap:16px}.spot-cart-row img{width:100px;height:67px}.spot-cart-row h2{font-size:20px}.spot-flow h2{font-size:23px}.spot-product-banner{margin-bottom:23px}.spot-money-row{font-size:15px}.spot-terms{font-size:15px}.product-body h3{font-size:18px}.product-description{font-size:15px}.product-format{font-size:12px}.buy-link{font-size:15px;max-width:none!important}.catalog-intro p{font-size:13px}.section-title h2 small{font-size:12px}.section-title>span{font-size:11px}.section-title h2{font-size:24px}.catalog-section[id=audio] .section-title{align-items:flex-start}.catalog-section[id=audio] .section-title h2 small{display:block;margin-left:0}.footer-legal nav{font-size:13px}.footer-main nav{font-size:14px}.footer-main>p{font-size:15px}} @media(min-width:981px){.catalog-layout{grid-template-columns:210px minmax(0,1fr);gap:36px}} /* スライド直下の細長い相談バナー */ .spot-top{width:100%;max-width:none;margin:22px 0 34px}.spot-top img,.spot-product-banner{display:block;width:100%;height:auto;aspect-ratio:6/1;object-fit:cover;object-position:center}.spot-cart-row img{aspect-ratio:6/1;object-fit:cover;height:auto} @media(max-width:620px){.spot-top{width:100%;margin:16px 0 27px}.spot-top img{aspect-ratio:6/1}} /* 左右に前後の教材が見えるスライドと固定サイドバー */ .home-latest{max-width:1260px;width:calc(100% - 64px);margin:36px auto 0;--slide-width:min(960px,calc((100vw - 64px) * .8))} .home-consulting.spot-top{max-width:1260px;width:calc(100% - 64px);margin:24px auto 0} .home-layout>.catalog-layout{margin-top:38px} .sidebar{align-self:stretch}.sidebar-inner{position:sticky;top:var(--sidebar-top,154px);max-height:calc(100dvh - var(--sidebar-top,154px) - 16px);overflow-y:auto;scrollbar-width:thin;overscroll-behavior:contain} .catalog-section{scroll-margin-top:calc(var(--sidebar-top,154px) + 12px)} @media(max-width:980px){.home-latest{width:calc(100% - 48px);margin-top:28px;--slide-width:calc((100vw - 48px) * .82)}.home-consulting.spot-top{width:calc(100% - 48px);margin-top:20px}.home-layout>.catalog-layout{margin-top:30px}} @media(max-width:620px){.home-latest{width:calc(100% - 36px);margin-top:22px;--slide-width:calc((100vw - 36px) * .82)}.home-consulting.spot-top{width:calc(100% - 36px);margin-top:18px}.home-layout>.catalog-layout{margin-top:30px}} /* 相談バナーと同じ高さから左サイドバーを始める */ .home-layout>.catalog-layout{margin-top:28px} .home-consulting.spot-top{width:100%;max-width:none;margin:0 0 34px} @media(max-width:620px){.home-consulting.spot-top{width:100%;margin:0 0 28px}} .mf-root{--mf-ink:#222;--mf-muted:#60636a;--mf-line:#dedfdc;--mf-radius:12px;color:var(--mf-ink);font-size:16px;line-height:1.7;width:min(1120px,calc(100% - 48px));margin:48px auto 72px;letter-spacing:normal} .mf-root *{box-sizing:border-box}.mf-root h1{font-size:clamp(28px,4vw,42px);line-height:1.3;margin:0 0 16px;font-weight:700}.mf-root h2{font-size:23px;margin:0 0 18px;line-height:1.45}.mf-root h3{font-size:18px;margin:0 0 8px}.mf-root p{margin:0 0 16px}.mf-root a{color:inherit}.mf-root [hidden]{display:none!important}.mf-root button,.mf-root input,.mf-root select{font:inherit}.mf-root button,.mf-root a{touch-action:manipulation;outline-offset:4px}.mf-root button:focus-visible,.mf-root a:focus-visible,.mf-root input:focus-visible{outline:3px solid var(--mf-accent);outline-offset:3px}.mf-root .mf-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border-radius:var(--mf-radius);border:1px solid var(--mf-ink);background:var(--mf-ink);color:#fff;text-decoration:none;font-weight:600;gap:10px;cursor:pointer;line-height:1.5;text-align:center}.mf-root .mf-btn.secondary{color:var(--mf-ink);background:transparent}.mf-root .mf-btn:disabled{opacity:.5;cursor:default}.mf-root .mf-link{padding:8px 0;min-height:44px;display:inline-flex;text-decoration:underline;text-underline-offset:4px;color:var(--mf-ink);border:0;background:transparent;cursor:pointer}.mf-note{color:var(--mf-muted);font-size:14px}.mf-kicker{color:var(--mf-accent);font-size:12px;letter-spacing:.12em;font-weight:700}.mf-card{background:var(--mf-surface);padding:28px;border-radius:var(--mf-radius);border:1px solid var(--mf-line);min-width:0}.mf-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}.mf-auth{display:grid;grid-template-columns:1fr 1fr;min-height:550px;border-radius:var(--mf-radius);overflow:hidden;border:1px solid var(--mf-line)}.mf-auth-brand{background:var(--mf-accent);color:var(--mf-on);padding:48px;display:flex;flex-direction:column;justify-content:space-between;gap:32px}.mf-auth-brand .mf-kicker{color:inherit;opacity:.8}.mf-auth-brand h2{font-size:clamp(30px,4vw,44px);line-height:1.4}.mf-auth-brand img{width:100%;height:210px;object-fit:cover;border-radius:var(--mf-radius)}.mf-auth-form{padding:40px;background:var(--mf-surface)}.mf-field{display:block;margin:0 0 20px;color:var(--mf-ink);font-size:15px}.mf-field>span{display:block;margin-bottom:7px;font-weight:600}.mf-field input,.mf-field select,.mf-field textarea{display:block;width:100%;max-width:100%;min-height:48px;border:1px solid #959a97;border-radius:8px;background:#fff;color:#222;padding:12px;font:inherit}.mf-field textarea{height:100px}.mf-field input[aria-invalid=true]{border:2px solid #b32337}.mf-error{font-size:14px;color:#ad1e34;margin:6px 0!important;line-height:1.65}.mf-password{display:flex;position:relative}.mf-password input{padding-right:68px}.mf-password button{position:absolute;right:4px;top:2px;background:transparent;border:0;min-width:56px;min-height:44px;font-size:13px;color:#222;cursor:pointer}.mf-auth-form .mf-btn{width:100%}.mf-or{display:flex;align-items:center;gap:14px;margin:24px 0;color:var(--mf-muted);font-size:14px}.mf-or:before,.mf-or:after{content:'';height:1px;background:var(--mf-line);flex:1}.mf-check{display:flex;align-items:flex-start;gap:12px;margin:16px 0;font-size:15px}.mf-check input{width:20px;height:20px;flex-shrink:0;margin-top:3px}.mf-layout{display:grid;grid-template-columns:210px 1fr;gap:32px}.mf-nav{display:flex;flex-direction:column;gap:6px;align-self:start}.mf-nav a,.mf-nav button{display:block;text-align:left;padding:12px 16px;min-height:46px;border-radius:var(--mf-radius);text-decoration:none;border:0;background:transparent;font:inherit;color:inherit;cursor:pointer}.mf-nav .active{background:var(--mf-accent);color:var(--mf-on);font-weight:700}.mf-body{min-width:0}.mf-tasks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}.mf-task{text-decoration:none;padding:24px;border:1px solid var(--mf-line);border-radius:var(--mf-radius);background:var(--mf-surface)}.mf-task strong{font-size:18px;display:block;margin-bottom:6px}.mf-task span{display:block;font-size:14px;color:var(--mf-muted)}.mf-latest{border-top:4px solid var(--mf-accent)}.mf-order-product{display:grid;grid-template-columns:88px 1fr;gap:18px;align-items:center;margin:20px 0}.mf-order-product img{width:88px;height:88px;object-fit:contain;background:#f4f3ef;border-radius:8px}.mf-price{font-size:24px;font-weight:700;white-space:nowrap}.mf-root .yen{display:inline!important;font-size:max(.5em,10px);margin-left:.06em}.mf-dl{margin:20px 0}.mf-dl>div{display:grid;grid-template-columns:140px 1fr;gap:20px;padding:12px 0;border-bottom:1px solid var(--mf-line)}.mf-dl dt{font-size:14px;color:var(--mf-muted)}.mf-dl dd{margin:0;overflow-wrap:anywhere}.mf-status{display:inline-flex;padding:5px 12px;border-radius:50px;font-size:13px;background:var(--mf-tint);color:var(--mf-ink);font-weight:600}.mf-empty{padding:48px 24px;text-align:center;background:var(--mf-surface);border:1px dashed var(--mf-line);border-radius:var(--mf-radius)}.mf-favorites{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.mf-favorite{position:relative;min-width:0}.mf-favorite img{width:100%;height:190px;object-fit:contain;background:#f4f3ee;border-radius:var(--mf-radius);display:block}.mf-favorite h2{font-size:17px;margin:16px 0 8px}.mf-favorite .mf-btn{width:100%;margin-top:10px;padding:10px;font-size:14px}.mf-notice{background:var(--mf-tint);padding:14px 18px;border-radius:var(--mf-radius);margin:0 0 24px;overflow-wrap:anywhere}.mf-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.mf-form-grid .full{grid-column:1/-1}.mf-dialog{width:min(440px,calc(100% - 32px));border:0;border-radius:16px;padding:28px;color:#222;font:inherit;box-shadow:0 15px 70px #0003}.mf-dialog::backdrop{background:#0006}.mf-dialog .mf-btn{width:100%;margin-top:12px}.mf-dialog h2{font-size:22px}.mf-toolbar{display:flex;gap:4px;flex-shrink:0;align-items:center}.mf-toolbar>a{display:inline-flex;align-items:center;justify-content:center;height:44px;width:44px;border:0;background:transparent;color:inherit;text-decoration:none;border-radius:50%;font-size:21px;position:relative}.mf-toolbar>a:hover{background:#8881}.mf-toolbar svg,.mf-heart svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6}.mf-heart{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:10px;border:1px solid #bbb;background:#fff;color:#333;border-radius:50%;cursor:pointer;vertical-align:middle;margin:8px 0}.mf-heart[aria-pressed=true]{color:#ad314c;border-color:#ad314c}.mf-heart[aria-pressed=true] svg{fill:currentColor}.mf-footer-links{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;padding:18px 24px;border-top:1px solid #8883;font-size:14px}.mf-footer-links a{color:inherit;min-height:44px;display:flex;align-items:center}.mf-register-option{padding:18px;border:1px solid #ccc;border-radius:12px;margin:20px 0}.mf-checkout{display:grid;grid-template-columns:1fr 390px;gap:28px}.mf-checkout .mf-summary{align-self:start}.mf-checkout .mf-summary .mf-btn{width:100%;margin-top:20px}.mf-confirm td,.mf-confirm th{text-align:left;vertical-align:top;padding:12px 0;border-bottom:1px solid var(--mf-line);font-size:14px}.mf-confirm th{width:120px;color:var(--mf-muted);font-weight:500;padding-right:16px}.mf-confirm{width:100%;border-collapse:collapse;margin:18px 0}.mf-checkout .mf-card+.mf-card{margin-top:24px} @media(max-width:800px){.mf-root{width:calc(100% - 36px);margin:28px auto 48px}.mf-layout,.mf-checkout{grid-template-columns:1fr}.mf-nav{flex-direction:row;overflow:auto;gap:6px;max-width:100%;padding:0 0 8px}.mf-nav a,.mf-nav button{white-space:nowrap;border:1px solid var(--mf-line);padding:10px 14px}.mf-auth{grid-template-columns:1fr;min-height:0}.mf-auth-brand{padding:28px;gap:8px}.mf-auth-brand h2{font-size:26px}.mf-auth-brand img{display:none}.mf-auth-form{padding:28px 22px}.mf-favorites{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.mf-favorite img{height:150px}.mf-card{padding:22px}.mf-tasks{gap:12px}.mf-task{padding:18px}.mf-dl>div{grid-template-columns:105px 1fr;gap:12px}.mf-toolbar>a{width:36px;min-width:36px}.mf-toolbar{gap:0}.mf-toolbar svg{width:18px}.mf-checkout .mf-summary{width:100%}.mf-form-grid{grid-template-columns:1fr}.mf-form-grid .full{grid-column:auto}} /* ec73 ぞろ屋のコンテンツ ── 2026-10-11 の見直し分 concept73.css → spot73.css → layout73.css → member-functions.css のあとに読む。 10/9 の決定（文字を大きく／全幅スライド／左右に前後が見えるスライド／固定カテゴリ／カタログ直上の相談バナー）は残し、 ここでは次の5つだけを足す・直す。 1. ヘッダー：張り付くのは1段だけ（広い画面＝ロゴの段、狭い画面＝分類の段） 2. 一覧：1作品＝1枚。形（Kindle版・単行本・オーディオブック）の数だけ行き先を並べる 3. 作品ページ：形を選ぶ欄・形と販売先・中身の欄・作っている人・ほかの作品・スマホの下の帯 4. お気に入りのハートを丸に戻し、置き場所を決める 5. フッターを1つにまとめ、押しどころを44pxに */ :root{--tint:#f5f6f3;--deep:#2f6660;--rule:#b8c6c2;--mincho:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",Georgia,serif;--stick-offset:40px;--stuck-h:89px} html{scroll-padding-top:calc(var(--stuck-h,89px) + 20px)} h1,h2,h3{word-break:auto-phrase;text-wrap:pretty} /* ───────── 1. ヘッダー ───────── */ .site-header{top:calc(-1 * var(--stick-offset,40px))} .utility{min-height:40px;padding-block:0} .utility>span{letter-spacing:.06em} .u-narrow{display:none} @media(max-width:980px){.u-wide{display:none}.u-narrow{display:inline}} .utility nav{gap:2px} .utility a{display:inline-flex;align-items:center;min-height:40px;padding:0 11px;line-height:1.4;letter-spacing:.04em} .utility nav a:last-child{padding-right:0} .header-inner{min-height:88px} .header-tools{display:flex;align-items:center;gap:6px;flex:none} .header-tools .header-cart{margin-left:0} .header-tools .mf-toolbar>a{width:44px;min-width:44px;height:44px} .header-tools .mf-toolbar svg{width:22px;height:22px} @media(max-width:1100px){ :root{--stick-offset:104px;--stuck-h:60px} .header-inner{padding:0;gap:0;min-height:0;grid-template-rows:64px auto} .header-inner>.brand{grid-column:1;grid-row:1;align-self:center} .header-tools{grid-column:2;grid-row:1;align-self:center} .logo-type{font-size:34px} .brand-sub{margin-top:2px} .top-nav{gap:28px;width:auto;margin:0 -32px;padding:0 32px;max-width:none;border-top:1px solid #edf0ed;scrollbar-width:none} .top-nav::-webkit-scrollbar{display:none} .top-nav a{min-height:58px} } @media(max-width:620px){ :root{--stick-offset:108px;--stuck-h:47px} html{scroll-padding-top:calc(var(--stuck-h,47px) + 14px)} .utility{min-height:44px;padding:0 18px} .utility>span{font-size:12px;letter-spacing:.04em} .utility nav{gap:0} .utility a{font-size:13px;min-height:44px;padding:0 0 0 16px} .header-inner{grid-template-rows:64px 46px} .logo-type{font-size:29px} .brand-sub{font-size:12px;letter-spacing:.09em;margin-top:1px} .top-nav{gap:17px;margin:0 -18px;padding:0 18px} .top-nav a{font-size:15px;min-height:46px} .header-tools{gap:2px} } /* 左の柱（広い画面）。1366×768 でも最後の行まで見える高さに */ .sidebar h2{font-family:var(--mincho);font-size:19px;font-weight:500;letter-spacing:.1em} .sns{margin-bottom:22px} .social-links a{width:44px;height:44px} .sns .social-links{gap:0;margin-left:-12px} .category-nav>a{min-height:58px;padding:7px 0} .small-nav{margin-top:16px} .small-nav a{min-height:44px} /* ───────── トップ：何の店かを言う1行 ───────── */ .home-head{max-width:1260px;width:calc(100% - 64px);margin:20px auto 13px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px 40px} /* 1画面目に作品の一覧が近づくよう、上の余白を少しずつ詰める（スライドと帯の大きさは10/9のまま） */ .slide-meta{padding-top:12px;padding-bottom:10px} .home-layout>.catalog-layout{margin-top:24px} .home-consulting.spot-top{margin-bottom:26px} .catalog-intro{padding:3px 0 21px} .home-title{font-family:var(--mincho);font-size:31px;font-weight:500;letter-spacing:.06em;line-height:1.5;white-space:nowrap} .home-sub{font-size:15px;line-height:1.85;color:var(--muted);max-width:33em;word-break:auto-phrase;text-wrap:pretty;padding-bottom:5px} .home-latest{margin-top:0} .latest-label{font-family:inherit;font-size:15px;font-weight:600;letter-spacing:.12em;gap:14px} .latest-label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:-4px} .latest-label small{font-size:14px;font-weight:400;letter-spacing:.04em} .catalog-intro h2{font-family:var(--mincho);font-weight:500;letter-spacing:.08em} .spot-sp{display:none} @media(max-width:980px){.home-head{width:calc(100% - 48px);margin:24px auto 18px}.home-title{font-size:28px}} @media(max-width:620px){ .home-head{width:calc(100% - 36px);margin:20px auto 16px;display:block} .home-title{font-size:23px;letter-spacing:.05em} .home-sub{font-size:14px;line-height:1.75;margin-top:6px;padding-bottom:0} .latest-label{flex-direction:row;align-items:center;gap:10px;font-size:14px;line-height:1.6} .latest-label small{font-size:13px} .slide-meta{padding:6px 0 8px} /* 相談の帯：細長い画像は文字が読めない大きさになるので、同じ中身を文字で組んだ版に替える */ .home-consulting.spot-top{position:relative;height:112px;overflow:hidden;background:#f3f2ee} .home-consulting.spot-top>img{display:none} .spot-sp{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:10px;height:100%;padding:0 0 0 18px} .spot-sp-title{position:relative;z-index:1;font-family:var(--mincho);font-weight:700;font-size:19px;letter-spacing:.01em;line-height:1.3;color:#1d2322;white-space:nowrap} .spot-sp-go{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;background:var(--deep);color:#fff;font-size:14px;line-height:1;padding:9px 12px 9px 14px} .home-consulting .spot-sp-photo{position:absolute;right:-2px;bottom:0;width:112px;height:112px;aspect-ratio:1;object-fit:cover;mix-blend-mode:multiply} .catalog-intro h2{font-size:25px} } /* ───────── 2. 一覧 ───────── */ /* 移動先の位置は html の scroll-padding-top（張り付く段の高さ＋20px）だけで決める。二重に足さない */ .catalog-section,.anchor,.text-section{scroll-margin-top:6px} .anchor{display:block;height:0} .section-title{align-items:flex-end;flex-wrap:wrap;row-gap:2px} .section-title h2{font-family:Georgia,var(--mincho)} .section-title>span{font-family:inherit;font-size:14px;letter-spacing:.08em;padding-bottom:5px} .form-tabs{display:flex;gap:26px;margin-bottom:-12px} .form-tabs a{display:inline-flex;align-items:center;gap:7px;min-height:46px;font-size:15px;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap} .form-tabs a b{font:400 13px/1 Arial,sans-serif;color:inherit} .form-tabs a:hover{color:var(--ink)} .form-tabs a[aria-current=true]{color:var(--ink);border-bottom-color:var(--ink)} .filter-status{font-size:14px;color:var(--muted);padding-top:16px} #grid .pcard{position:relative;grid-template-columns:112px minmax(0,1fr) 200px;gap:28px} /* 題名のリンクは1行でも44pxの高さで押せるように（その分、上下の余白を詰める） */ #grid .product-body h3{word-break:auto-phrase} #grid .product-body h3 a{display:block;padding:5px 0} #grid .product-format{margin-bottom:1px} #grid .product-description{margin-top:4px} #grid .pcard.media-wide{grid-template-columns:222px minmax(0,1fr) 200px} #grid .product-buy{align-self:stretch;justify-content:flex-end;gap:0;padding-top:50px} #grid .buy-link{min-height:54px;padding:6px 0;font-size:15px;line-height:1.5} #grid .buy-text{display:flex;flex-direction:column;min-width:0} #grid .buy-form{font-size:13px;color:var(--accent);letter-spacing:.04em} .buy-arrow{flex:none} /* 形の選び方（本の棚の最後に1行） */ .shelf-guide{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 30px;padding:20px 0 0;font-size:15px;line-height:1.8;color:var(--muted)} .shelf-guide h3{font-family:var(--mincho);font-size:17px;font-weight:500;letter-spacing:.08em;color:var(--ink)} .shelf-guide p{display:flex;align-items:baseline;gap:10px;word-break:auto-phrase} .shelf-guide b{font-size:14px;font-weight:600;color:var(--accent);letter-spacing:.08em} /* 4. ハート：44pxの正円。広い画面は行の右上、スマホは表紙の右上（横長の表紙は行き先の右） */ .mf-heart{box-sizing:border-box;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;flex:none;justify-self:start;align-self:start;border-color:#c5cfcb} .mf-heart svg{width:20px;height:20px} #grid .pcard>.mf-heart{position:absolute;top:16px;right:0;margin:0} @media(max-width:1100px) and (min-width:621px){ #grid .pcard{gap:22px;grid-template-columns:112px minmax(0,1fr) 184px} #grid .pcard.media-wide{grid-template-columns:190px minmax(0,1fr) 184px} } @media(max-width:620px){ .section-title h2{font-size:25px} .section-title>span{font-size:13px} .form-tabs{width:calc(100% + 36px);margin:2px -18px -12px;padding:0 18px;gap:20px;overflow-x:auto;scrollbar-width:none} .form-tabs::-webkit-scrollbar{display:none} .form-tabs a{font-size:14px} .catalog-section[id=audio] .section-title{align-items:flex-end} /* 表紙を大きく見せる2列。奇数のときは先頭の1枚を横いっぱいに */ .product-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 12px;padding-top:24px} #grid .pcard,#grid .pcard.media-wide{display:flex;flex-direction:column;gap:0;padding:0;border-bottom:0} #grid .pcard .product-image{min-height:0;grid-row:auto} #grid .book-card .product-image{aspect-ratio:171/194;background:var(--tint);align-items:flex-end;justify-content:flex-start;padding:14px 0 0 12px;border-bottom:1px solid var(--ink)} #grid .book-card .product-image img{height:100%;width:auto;max-height:none;max-width:none} #grid .product-body{flex:1;padding-top:3px} #grid .product-format{display:none} #grid .product-body h3{font-size:16px;line-height:1.6} #grid .product-description{font-size:14px;line-height:1.7;margin-top:0} #grid .product-buy{flex-direction:column;align-items:stretch;gap:0;padding-top:0;margin-top:8px} #grid .buy-link{min-height:54px;font-size:14px;max-width:none} #grid .buy-form{font-size:13px} #grid .pcard.is-lead{grid-column:1/-1} #grid .is-lead .product-body h3{font-size:18px} #grid .is-lead .product-description{font-size:15px} #grid .product-body h3 a{padding:9px 0} /* 表紙の右の空きに置く。押せる範囲は40px、見える丸は30px（表紙の字にかぶせない） */ #grid .pcard>.mf-heart{top:3px;right:1px;width:40px;height:40px;min-width:40px;min-height:40px;border:0;background:radial-gradient(circle,#fff 0 15px,transparent 15.6px)} #grid .pcard>.mf-heart svg{width:17px;height:17px} /* 本が奇数のときに空く1マス。偶数のときは下に横いっぱいの1行 */ .shelf-guide{display:block;align-self:start;background:var(--tint);padding:18px 16px 20px;border-bottom:1px solid var(--ink)} .shelf-guide h3{font-size:16px;margin-bottom:8px} .shelf-guide p{display:block;font-size:14px;line-height:1.7} .shelf-guide p+p{margin-top:10px} .shelf-guide b{display:block} .shelf-guide.is-even{grid-column:1/-1} #grid .media-wide .product-buy{padding-right:50px} #grid .media-wide>.mf-heart{top:auto;bottom:5px;right:0;width:44px;height:44px;min-width:44px;min-height:44px;border:1px solid #c5cfcb;background:#fff} #grid .media-wide>.mf-heart svg{width:20px;height:20px} } /* ───────── 3. 作品ページ ───────── */ .breadcrumb{flex-wrap:wrap;align-items:center;gap:0 12px;margin-bottom:20px;line-height:1.6} .breadcrumb a{display:inline-flex;align-items:center;min-height:44px} .detail{gap:46px} .detail-book{grid-template-columns:minmax(220px,340px) minmax(0,1fr)} .detail-book .detail-image{background:var(--tint);padding:38px 30px 0;display:flex;justify-content:center;align-items:flex-end;border-bottom:1px solid var(--ink)} .detail-book .detail-image img{width:auto;max-width:100%;max-height:400px;box-shadow:0 0 0 1px #0000000d,12px -6px 26px -14px #18201e73} .detail-wide{grid-template-columns:minmax(0,1.38fr) minmax(0,1fr);gap:38px;align-items:start} .detail-body h1{font-size:30px;font-weight:500;line-height:1.6} .detail-full{font-size:15px;line-height:1.8;color:var(--muted);margin-top:8px;word-break:auto-phrase;text-wrap:pretty} .detail-description{margin-top:16px} .form-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:26px} .form-pick button{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-height:88px;padding:12px 14px 12px 42px;text-align:left;line-height:1.5;background:#fff;border:1px solid #c5cfcb} .form-pick button::before{content:"";position:absolute;left:15px;top:19px;width:14px;height:14px;border:1px solid #8e9d99;border-radius:50%;background:#fff} .form-pick button:hover{border-color:var(--ink)} .form-pick button[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} .form-pick button[aria-pressed=true]::before{border-color:var(--accent);background:radial-gradient(circle,var(--accent) 0 4px,#fff 4.6px)} .fp-name{font-size:18px} .fp-hint,.fp-where{font-size:13px;color:var(--muted)} .detail-body .primary-link{width:100%;max-width:430px;min-height:62px;justify-content:space-between;font-size:18px;font-weight:600;letter-spacing:.04em;margin:18px 0 10px;padding:13px 22px} .form-pick+.primary-link{margin-top:12px} .buy-check{font-size:14px;line-height:1.8;color:var(--muted);max-width:430px} .detail-fav{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:14px;color:var(--muted)} .detail-fav .mf-heart{margin:0} .detail-section{margin-top:58px;border-top:1px solid var(--rule);padding-top:26px} .detail-section>h2{font-family:var(--mincho);font-size:24px;font-weight:500;letter-spacing:.06em;line-height:1.5;margin-bottom:10px} .spec{margin:0} .spec>div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:20px;padding:16px 0;border-bottom:1px solid var(--line)} .spec dt{font-size:14px;color:var(--muted);padding-top:3px} .spec dd{margin:0;font-size:17px;line-height:1.8;display:flex;flex-wrap:wrap;gap:2px 26px;align-items:center} .spec small{font-size:13px;color:var(--muted);margin-left:10px} .spec-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;border-bottom:1px solid var(--ink)} .spec-link small{margin-left:0} .spec dd .text-link{font-size:15px} .dummy-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px} /* 実物の文章を載せていない場所。作品の中身をこちらで作らないための枠 */ .dummy{background:repeating-linear-gradient(135deg,#f6f7f5,#f6f7f5 10px,#ebefec 10px,#ebefec 20px);border:1px dashed #9fb0ab;padding:16px 18px;font-size:14px;line-height:1.8;color:var(--muted)} .dummy b{display:block;font-size:16px;font-weight:600;color:var(--ink)} .dummy-caption{font-size:13px;line-height:1.8;color:var(--muted);margin-top:10px} .detail-author{display:grid;grid-template-columns:128px minmax(0,1fr);gap:28px;align-items:center;margin-top:58px;padding:26px 30px;background:var(--tint)} .detail-author img{width:128px;height:128px;object-fit:cover;mix-blend-mode:multiply} .detail-author h2{font-family:var(--mincho);font-size:24px;font-weight:500;letter-spacing:.08em;margin-bottom:6px} .detail-author p{font-size:16px;line-height:1.9} .detail-author .text-link{font-size:15px;margin-top:4px} .related-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:18px} .related-list a{display:flex;flex-direction:column;min-width:0} .related-list.r-wide{grid-template-columns:repeat(3,minmax(0,1fr))} .r-img{display:block;background:var(--tint)} .r-img img{width:100%;height:auto} .r-img.r-book{padding:18px 18px 0;border-bottom:1px solid var(--ink)} .r-kind{font-size:13px;color:var(--accent);letter-spacing:.05em;margin-top:11px} .r-name{font-size:15px;line-height:1.65;word-break:auto-phrase} .detail-related .back-link{margin-top:18px} .buybar{display:none} /* 形を選ぶ欄：右の列が狭い幅（タブレット・スマホ）では縦に2行。左に形、右に販売先 */ @media(max-width:1180px){ .form-pick{grid-template-columns:1fr;gap:8px} .form-pick button{min-height:66px;padding:10px 14px 10px 42px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px} .form-pick button::before{top:50%;margin-top:-7px} .fp-name,.fp-hint{grid-column:1} .fp-where{grid-column:2;grid-row:1/3} } @media(max-width:620px){ .breadcrumb{margin-bottom:12px;font-size:14px} .fp-hint,.fp-where,.dummy-caption{font-size:14px} .detail{gap:22px} .detail-book,.detail-wide{grid-template-columns:1fr} .detail-book .detail-image{padding:26px 24px 0} .detail-book .detail-image img{max-height:250px} .detail-body h1{font-size:24px;line-height:1.55} .detail-full{font-size:14px} .detail-description{font-size:16px;line-height:1.9;margin-top:12px} .form-pick{margin-top:20px} .fp-name{font-size:17px} .detail-body .primary-link{max-width:none;min-height:58px;font-size:17px} .detail-section{margin-top:44px;padding-top:22px} .detail-section>h2{font-size:22px} .spec>div{grid-template-columns:1fr;gap:2px;padding:13px 0} .spec dt{font-size:14px} .spec dd{font-size:16px} .dummy-row{grid-template-columns:1fr;gap:10px} .detail-author{grid-template-columns:84px minmax(0,1fr);gap:16px;align-items:start;margin-top:44px;padding:20px 18px} .detail-author img{width:84px;height:84px} .detail-author h2{font-size:21px} .detail-author p{font-size:15px} /* ほかの作品：横に送る。右に次の1枚がのぞく（スライドと同じ見せ方） */ .related-list{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:16px -18px 0 0;padding:0 18px 6px 0;scrollbar-width:none} .related-list::-webkit-scrollbar{display:none} .related-list.r-wide{display:flex} .related-list a{flex:0 0 44%;scroll-snap-align:start} .related-list.r-wide a{flex-basis:62%} /* 画面の下に張り付く帯：左に形と「価格は販売先で」、右に次の一歩 */ .buybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:25;align-items:center;gap:12px;padding:9px 14px calc(9px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);box-shadow:0 -10px 24px -20px #00000066} .bb-info{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.45} .bb-info b{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bb-info small{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bb-go{flex:none;display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 16px 0 18px;background:var(--accent);color:#fff;font-size:16px;font-weight:600;white-space:nowrap} .bb-go:hover{color:#fff;background:#315c59} body:has(.buybar){padding-bottom:calc(67px + env(safe-area-inset-bottom))} body:has(.buybar) #mf-live{bottom:calc(80px + env(safe-area-inset-bottom))!important} } /* ───────── 幅360px以下（小さいスマホ）で折れ・重なりを出さない ───────── */ .utility>span,.utility a,.brand-sub,.buy-where{white-space:nowrap} @media(max-width:620px){ .spot-sp-title{font-size:clamp(16px,4.9vw,19px)} .catalog-intro{flex-wrap:wrap;gap:6px 12px} .catalog-intro h2{white-space:nowrap} } @media(max-width:340px){ .utility>span{display:none} .utility{justify-content:flex-end} } @media(max-width:360px){ .utility>span{font-size:12px;letter-spacing:0} .utility a{padding-left:12px} .brand-sub{letter-spacing:.02em} .home-title{font-size:21px;letter-spacing:.02em} .home-consulting .spot-sp-photo{width:94px;height:94px} .catalog-intro p{text-align:left} .catalog-intro p br{display:none} .form-tabs{gap:16px} #grid .product-body h3{font-size:15px;letter-spacing:-.02em} #grid .pcard:not(.is-lead) .buy-verb{display:none} #grid .book-card .product-image{padding-left:8px} #grid .book-card>.mf-heart{right:-2px;background:radial-gradient(circle,#fff 0 14px,transparent 14.6px)} .bb-go{padding:0 12px 0 14px;font-size:15px;gap:8px} } /* ───────── ほかのページの文字組・押しどころ ───────── */ .page-title{font-family:var(--mincho);font-weight:500} .spot-heading{word-break:auto-phrase} @media(max-width:620px){.spot-heading{font-size:27px;letter-spacing:0}} /* 会員の画面（共通部品）を、この店の色と角に合わせる */ .mf-root{--mf-accent:#487a76!important;--mf-tint:#edf3f2!important;--mf-radius:2px!important} .mf-root .mf-note a{display:inline-flex;align-items:center;min-height:44px} /* ───────── 5. フッター ───────── */ .site-footer{padding-bottom:26px} .footer-main{display:grid;grid-template-columns:minmax(260px,1.5fr) repeat(3,minmax(0,1fr));gap:36px;align-items:start;padding-bottom:30px} .footer-brand>p{font-size:16px;line-height:2;color:var(--muted);margin:14px 0 6px} .footer-brand .footer-social{margin-left:-12px;gap:0} .site-footer .footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:0;border:0;font-size:15px;justify-content:flex-start} .site-footer .footer-col h2{font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--muted);line-height:1.6;margin-bottom:4px} .site-footer .footer-col a{display:inline-flex;align-items:center;min-height:44px} .footer-legal{align-items:flex-start;padding:20px 0 0} .footer-legal .sample-note{max-width:60em} @media(max-width:980px){.footer-main{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}.footer-brand{grid-column:1/-1}} @media(max-width:620px){ .footer-main{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px;padding-bottom:22px} .footer-brand>p{font-size:15px;margin-top:12px} .site-footer .footer-col{font-size:15px} .site-footer .mf-footer-links{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;column-gap:22px} .site-footer .mf-footer-links h2{width:100%} .footer-legal{display:block} .footer-legal small{display:block;margin-top:12px} .sample-note{font-size:13px} } /* ===== WordPress の画面（ぞろ屋の店。make_site.py が見本 ec73 の CSS のあとに足す） ===== */ /* トップ以外のページも見本の書体（テーマの INNER_CSS は端末の書体にするので、こちらを強く） */ html body.zec-inner{font-family:"Yu Gothic",Meiryo,sans-serif} /* ヘッダー：人のアイコン（ログイン／マイページの入口・inc/account.php）とカート（WooCommerce のカート・数はサーバー）。 見本と同じ並び（.header-tools の中の .mf-toolbar とカート）。入口の言葉（ログイン／マイページ）は読み上げだけで、画面にはアイコンだけ（2026-10-11 見本に合わせた） */ .header-tools .mf-toolbar .account-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .header-tools .header-account{color:inherit} .header-cart{min-width:44px} .header-cart .zec-cart-count{border:1px solid var(--line);min-width:23px;height:23px;padding:0 5px;border-radius:12px;display:inline-grid;place-items:center;font-size:12px;box-sizing:border-box} /* トップ：見出しと説明文の帯（.home-head）は出さない（2026-10-11 内田さん指示。見本も同じ日に外して公開済み）。 スライドは、見本と同じく、ヘッダーの下の線にそのまま続ける（余白は足さない＝見本の refresh73.css の .home-latest{margin-top:0} のまま） */ /* フッター：見本の一文（デザイン見本です）を外したので、© を右に寄せる */ .footer-legal{justify-content:flex-end} /* フッターの長い言葉（スポットコンサルティング・特定商取引法に基づく表記）：スマホの2列で「…ティン｜グ」「…表｜記」と1字だけ落ちていた。 言葉のまとまり（.fph）ごとに折り返す（make_site.py がまとまりを span で包む。iPhone でも同じ折り返しになる書き方）・2026-10-11 */ .site-footer .footer-col a{flex-wrap:wrap} .site-footer .fph{display:inline-block} /* トップの一覧：見本は作品ごとにお気に入りのハートを置く（見せかけの機能）。店の作品は外の販売先へのリンクで、お気に入りは このサイトで売る商品だけ ＝ハートを置かない。スマホの横長の表紙の行き先は、ハートのために空けてある右の 50px を詰めて、線を端までのばす */ @media(max-width:620px){#grid .media-wide .product-buy{padding-right:0}} /* トップ以外のページの器（見本のサイドバー＋中身）。固定ページ・WooCommerce の画面 */ .inner-layout>.catalog-layout{margin-top:36px} .site-content .zec-page{max-width:none;margin:0;padding:0} .site-content .zec-page-title,.site-content .ec-shop .page-title{font-size:34px;line-height:1.6;font-weight:400;letter-spacing:.025em;margin:0 0 27px} .site-content .zec-page-body{font-size:17px;line-height:2} .site-content .zec-page-body h2{font-size:24px;font-weight:500;line-height:1.6;margin:40px 0 14px;padding-top:24px;border-top:1px solid var(--line)} .site-content .zec-page-body p{margin:0 0 1.1em} .site-content .zec-page-body a{text-decoration:underline;text-underline-offset:3px} .site-content .zec-page-body table{font-size:16px;line-height:1.9} .site-content .ec-shop{max-width:none;margin:0;padding:0 0 40px;color:var(--ink)} .site-content .ec-shop .breadcrumb{margin-bottom:24px} .site-content .ec-shop .page-lead{font-size:15px} .site-content .ec-shop-note{margin-top:32px;font-size:14px;line-height:1.9;color:var(--muted)} @media(max-width:620px){.inner-layout>.catalog-layout{margin-top:22px}.site-content .zec-page-title,.site-content .ec-shop .page-title{font-size:27px;margin-bottom:20px}.site-content .zec-page-body{font-size:16px}} /* 商品ページ：WooCommerce の「カートに入れる」を店の色に（見本の .spot-button と同じ形）。商品ページでは .woocommerce が body に付く */ body .ec-shop form.cart button.single_add_to_cart_button.button.alt{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin:6px 0 0;padding:13px 20px;border:0;border-radius:0;background:#3c716a;color:#fff;font:inherit;font-weight:600;font-size:17px;line-height:1.4;float:none} body .ec-shop form.cart button.single_add_to_cart_button.button.alt:hover{background:#2e5c56;color:#fff} body .ec-shop div.product form.cart{margin:20px 0 8px} body .ec-shop div.product form.cart div.quantity{display:none} body .ec-shop div.product .woocommerce-product-details__short-description{font-size:16px;line-height:1.9} /* 相談のページの申し込みの欄（inc/yoyaku.php の zec_yoyaku_panel）と、商品ページの日時の選択 */ #spot-order{position:static} .zec-yoyaku-form fieldset,.zec-slots{border:0;margin:0 0 22px;padding:0;min-width:0} .zec-yoyaku-form legend,.zec-slots legend{font-size:16px;font-weight:600;margin:0 0 10px;padding:0;line-height:1.6} .zec-slot-req{display:inline-block;margin-left:8px;padding:0 8px;background:#3c716a;color:#fff;font-size:11px;font-weight:600;line-height:1.8;vertical-align:2px} .zec-menu{display:flex;gap:12px;align-items:flex-start;border:1px solid #91aca6;background:#fff;padding:16px;margin:0 0 10px;cursor:pointer} .zec-menu input{margin:6px 0 0;width:20px;height:20px;flex:none;accent-color:#3c716a} .zec-menu:has(input:checked){border-color:#3c716a;box-shadow:inset 0 0 0 1px #3c716a} .zec-menu-body{display:flex;flex-direction:column;gap:2px;min-width:0} .zec-menu-name{font-size:17px;font-weight:600;line-height:1.6} .zec-menu-price{font-size:24px;line-height:1.5} .zec-menu-price .woocommerce-Price-currencySymbol{font-size:max(.55em,11px);margin-left:.06em} .zec-menu-price small{font-size:12px;color:var(--muted);margin-left:4px} .zec-menu-desc{font-size:14px;line-height:1.8;color:var(--muted);margin-top:4px} .zec-menu-more{display:inline-flex;align-items:center;min-height:44px;font-size:13px;text-decoration:underline;text-underline-offset:3px;align-self:flex-start} .zec-slot-note{font-size:13px;color:var(--muted);margin:0 0 12px;line-height:1.8} .zec-slot-day{margin:0 0 14px} .zec-slot-date{font-size:14px;font-weight:600;margin:0 0 6px} .zec-slot-times{display:flex;flex-wrap:wrap;gap:8px} .zec-slot{position:relative;display:inline-flex} .zec-slot input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer} .zec-slot span{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:124px;padding:8px 14px;border:1px solid #91aca6;background:#fff;font-size:15px;font-variant-numeric:tabular-nums;box-sizing:border-box} .zec-slot input:checked+span{background:#3c716a;border-color:#3c716a;color:#fff} .zec-slot input:focus-visible+span{outline:2px solid #34736f;outline-offset:2px} .zec-slot.is-off span{opacity:.35;text-decoration:line-through} .zec-slot-empty{margin:0 0 16px;padding:16px;background:#fff;border:1px dashed #91aca6;font-size:15px;line-height:1.9} .zec-slot-empty a{text-decoration:underline;text-underline-offset:3px} .zec-yoyaku-submit{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;border:0;background:#3c716a;color:#fff;font:inherit;font-weight:600;font-size:17px;padding:13px 20px;cursor:pointer} .zec-yoyaku-submit:hover{background:#2e5c56} .zec-yoyaku-after{font-size:13px;color:var(--muted);line-height:1.9;margin:12px 0 0} .zec-yoyaku-terms{margin:0} .zec-yoyaku-terms dt{font-weight:600;margin:14px 0 2px} .zec-yoyaku-terms dt:first-child{margin-top:0} .zec-yoyaku-terms dd{margin:0;font-size:15px;line-height:1.9} .spot-terms a{text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px;margin-right:14px} .spot-layout{grid-template-columns:minmax(0,1fr) minmax(320px,.95fr)} @media(max-width:1100px){.spot-layout{grid-template-columns:1fr}} @media(max-width:620px){.zec-slot span{min-width:110px;font-size:14px}.zec-menu{padding:14px}.zec-menu-price{font-size:21px}} /* お礼の画面：ご予約の日時と次にすること（inc/yoyaku.php） */ .zec-yoyaku-thanks{margin:0 0 28px;padding:22px;background:#f1f5f2;border:1px solid #dce4df} .zec-yoyaku-thanks h2{font-size:18px;font-weight:600;margin:0 0 6px} .zec-yoyaku-thanks p{margin:0 0 6px;line-height:1.9} .zec-yoyaku-when{font-size:22px} .zec-yoyaku-deadline{color:#7a1c16} /* 作品の紹介（/item/?id=…・inc/site-contents.php） */ .detail .primary-link{max-width:100%} /* カートの画面（WooCommerce の /cart/）：クーポンの欄（WooCommerce の既定では入力欄が細く、案内の文が切れる）・数の「1」（inc/yoyaku.php）・2026-10-10 */ .woocommerce-cart table.cart td.actions .coupon{display:flex;flex-wrap:wrap;align-items:center;gap:10px} .woocommerce-cart table.cart td.actions .coupon .input-text{float:none;width:min(100%,280px)!important;min-height:44px;margin:0;padding:8px 14px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:15px;box-sizing:border-box;background:#fff} .woocommerce-cart table.cart td.actions .coupon .button{float:none;min-height:44px;margin:0} @media(max-width:768px){.woocommerce-cart table.cart td.actions .coupon{flex-direction:column;align-items:stretch}.woocommerce-cart table.cart td.actions .coupon .input-text{width:100%!important}.woocommerce-cart table.cart td.actions .coupon .button{width:100%}} .zec-qty-fixed{display:inline-block;min-width:1.5em;font-size:16px;text-align:center} /* ===== WooCommerce の画面を、見本 ec73 の cart.html・complete.html・login.html・account.html・favorites.html・404.html に寄せる（2026-10-11） ===== make_site.py が site_wp.css のあとに足す。テーマでは、このあとにスキルの shop.css・会員の画面の CSS が続く＝同じ強さでは負けるので、頭に html body を付けて強くしている。 そろえたもの：角（見本は丸めない＝2px）・色（見本の緑）・見出しの書体・押しどころの形・余白。 そろえていないもの（WooCommerce の作りのまま）：カートの明細は表・購入手続きは1列・パンくずの言葉 */ /* --- 色と角：スキルの変数を見本の値に --- */ html body .ec-shop{--ec-radius:2px;--ec-bg-soft:#f5f6f3;--ec-line:#dce2df;--ec-muted:#626b68} /* --- ボタン：見本の .spot-button（四角・緑）と .mf-btn（四角・墨）の形に --- */ html body .ec-shop .woocommerce a.button,html body .ec-shop .woocommerce button.button,html body .ec-shop .woocommerce input.button, html body .ec-shop .woocommerce #place_order,html body .ec-shop .zec-auth-switch,html body .ec-shop .zec-btn-outline,html body .ec-shop .zec-btn-solid, html body .ec-shop .zec-fav-toggle,html body .ec-shop a.button.alt.zec-choose-button,html body .ec-shop form.edit-account button.button, html body .ec-shop .zec-auth .woocommerce button.button{border-radius:2px;box-shadow:none} html body .ec-shop .woocommerce a.button.alt,html body .ec-shop .woocommerce button.button.alt,html body .ec-shop .woocommerce input.button.alt, html body .ec-shop .woocommerce #place_order{background:#3c716a;border-radius:2px;box-shadow:none;min-height:52px;font-size:17px;font-weight:600;letter-spacing:.02em} html body .ec-shop .woocommerce a.button.alt:hover,html body .ec-shop .woocommerce button.button.alt:hover,html body .ec-shop .woocommerce input.button.alt:hover, html body .ec-shop .woocommerce #place_order:hover{background:#2e5c56} /* --- 見出し：カート・購入手続き・お礼の画面は見本の .spot-heading（明朝）／固定ページは見本の .page-title（明朝） --- */ html body .site-content .ec-shop .page-title{font-family:var(--mincho);font-size:clamp(30px,3.5vw,46px);font-weight:500;line-height:1.6;letter-spacing:0;margin:0 0 18px} html body .site-content .zec-page-title{font-family:var(--mincho);font-weight:500} html body .site-content .ec-shop .page-head{margin-bottom:26px} html body .site-content .ec-shop .page-lead{font-size:16px;line-height:2;color:var(--ink);max-width:none;margin:0} html body .site-content .ec-shop .breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;font-size:14px;color:var(--muted);margin-bottom:20px} html body .site-content .ec-shop .breadcrumb a{display:inline-flex;align-items:center;min-height:44px} html body .site-content .ec-shop .breadcrumb span{margin:0} @media(max-width:620px){html body .site-content .ec-shop .page-title{font-size:27px}} /* --- 知らせ（カートに入れました・エラーなど）：角を丸めない --- */ html body .ec-shop .woocommerce-message,html body .ec-shop .woocommerce-info,html body .ec-shop .woocommerce-error{border-radius:2px;border-left-color:var(--accent);background:#edf3f2;font-size:15px} html body .ec-shop .woocommerce-error{border-left-color:#b3261e;background:#fdf2f1} /* --- カート（見本 cart.html）：明細は線だけの表・合計は見本の「お申し込み内容」の箱（薄い緑の面） --- */ html body .ec-shop .woocommerce table.shop_table{border:0;border-radius:0;border-top:1px solid var(--line)} html body .ec-shop .woocommerce table.shop_table th{background:transparent;color:var(--muted);font-weight:400;font-size:14px;border-bottom:1px solid var(--line)} html body .ec-shop .woocommerce table.shop_table td{border-top:0;border-bottom:1px solid var(--line)} html body .ec-shop .woocommerce table.shop_table .product-name a{font-size:19px;font-weight:500} html body .ec-shop .woocommerce table.shop_table .variation,html body .ec-shop .woocommerce .wc-item-meta{font-size:14px} html body .ec-shop .woocommerce table.shop_table img{border-radius:0} html body .ec-shop .woocommerce .cart-collaterals{margin-top:34px} html body .ec-shop .woocommerce .cart-collaterals .cart_totals{float:right;width:min(100%,470px);box-sizing:border-box;padding:28px;background:#f1f5f2;border:1px solid #dce4df;border-radius:8px} html body .ec-shop .woocommerce .cart_totals h2{font-size:24px;font-weight:500;line-height:1.5;margin:0 0 14px} html body .ec-shop .woocommerce .cart_totals table.shop_table{border-top:0;margin:0} html body .ec-shop .woocommerce .cart_totals table.shop_table th,html body .ec-shop .woocommerce .cart_totals table.shop_table td{background:transparent;padding:14px 0;font-size:16px;color:var(--ink);border-bottom:1px solid var(--line)} html body .ec-shop .woocommerce .cart_totals table.shop_table td{text-align:right} html body .ec-shop .woocommerce .cart_totals .order-total th,html body .ec-shop .woocommerce .cart_totals .order-total td{font-weight:700;font-size:19px} html body .ec-shop .woocommerce .order-total .amount{color:var(--ink)} html body .ec-shop .woocommerce .wc-proceed-to-checkout{padding:20px 0 0} html body .ec-shop .woocommerce .wc-proceed-to-checkout a.checkout-button{display:flex;align-items:center;justify-content:center;margin:0;padding:13px 20px} html body .ec-shop .ec-shop-note{clear:both;background:transparent;border-top:1px solid var(--line);border-radius:0;padding:18px 0 0;font-size:14px} html body .ec-shop .ec-shop-note a{color:inherit;text-decoration:underline;text-underline-offset:3px} @media(max-width:768px){html body .ec-shop .woocommerce .cart-collaterals .cart_totals{float:none;width:100%;padding:23px 20px}} /* --- 購入手続き：小見出し・入力欄・お支払いの箱 --- */ html body .ec-shop .woocommerce-checkout h3,html body .ec-shop .woocommerce-checkout #order_review_heading{font-size:22px;font-weight:500;line-height:1.5} html body .ec-shop .woocommerce form .form-row input.input-text,html body .ec-shop .woocommerce form .form-row textarea,html body .ec-shop .woocommerce form .form-row select{border-color:#959a97} html body .ec-shop .woocommerce form .form-row input.input-text:focus,html body .ec-shop .woocommerce form .form-row textarea:focus{border-color:var(--accent);outline:2px solid #487a7633} html body .ec-shop .woocommerce #payment{background:#f1f5f2;border-color:#dce4df;border-radius:8px} html body .ec-shop .woocommerce #payment div.payment_box{border-radius:2px} /* --- お礼の画面（見本 complete.html）：丸に ✓ の印・注文の控え --- */ html body.woocommerce-order-received .site-content .ec-shop .page-head::before{content:"✓";display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--accent);color:#fff;font-size:27px;line-height:1;margin:0 0 20px} html body .ec-shop .woocommerce ul.order_details{margin:0 0 28px;padding:0} html body .ec-shop .woocommerce .woocommerce-order-details__title,html body .ec-shop .woocommerce .woocommerce-column__title{font-size:22px;font-weight:500} html body .ec-shop .woocommerce .woocommerce-customer-details address{border-radius:2px;border-color:var(--line)} /* --- ログイン・マイページ・お気に入り（見本 login.html・account.html・favorites.html）：左の柱を出さず、中身を真ん中に。見出しは太いゴシック --- */ html body.woocommerce-account .inner-layout>.catalog-layout,html body.error404 .inner-layout>.catalog-layout{display:block;max-width:none;width:min(1120px,calc(100% - 48px));margin:48px auto 72px} html body.woocommerce-account .inner-layout .sidebar,html body.error404 .inner-layout .sidebar{display:none} html body.woocommerce-account .site-content .ec-shop .page-title{font-family:inherit;font-size:clamp(28px,4vw,42px);font-weight:700;line-height:1.3;margin:0 0 16px} html body.woocommerce-account .site-content .ec-shop .breadcrumb{margin-bottom:8px} html body .ec-shop .zec-auth{border-color:#dedfdc;border-radius:2px;overflow:hidden;min-height:550px} html body .ec-shop .zec-auth-side{background:var(--accent)} html body .ec-shop .zec-auth-title{font-size:clamp(30px,4vw,44px);line-height:1.4} html body .ec-shop .zec-auth .woocommerce form .form-row input.input-text,html body .ec-shop form.edit-account .form-row input.input-text{border-color:#959a97;border-radius:8px} html body .ec-shop .woocommerce-MyAccount-navigation ul{border-top:0} html body .ec-shop .woocommerce-MyAccount-navigation li{border-bottom:0;margin:0 0 6px} html body .ec-shop .woocommerce-MyAccount-navigation a{min-height:46px;padding:12px 16px;border-radius:2px;font-size:16px} html body .ec-shop .woocommerce-MyAccount-navigation li.is-active a{background:var(--accent);color:#fff;font-weight:700;box-shadow:none} html body .ec-shop .woocommerce-MyAccount-navigation-link--customer-logout a{color:var(--ink)} html body .ec-shop .zec-dash-latest{border-top:4px solid var(--accent);padding:28px} html body .ec-shop .zec-dash-card{padding:24px 46px 24px 24px;min-height:0} html body .ec-shop .zec-dash-card-title{font-size:18px} html body .ec-shop .zec-dash-card-text{font-size:14px} html body .ec-shop .zec-fav-photo{border-radius:2px;background:#f4f3ee} html body .ec-shop .zec-fav-empty{padding:48px 24px} @media(max-width:800px){html body.woocommerce-account .inner-layout>.catalog-layout,html body.error404 .inner-layout>.catalog-layout{width:calc(100% - 36px);margin:28px auto 48px}} @media(max-width:768px){ html body .ec-shop .zec-auth{margin:0;border:1px solid #dedfdc} html body .ec-shop .woocommerce-MyAccount-navigation li{margin:0} html body .ec-shop .woocommerce-MyAccount-navigation a{min-height:44px;padding:10px 14px;border:1px solid #dedfdc;border-radius:2px;font-size:15px} html body .ec-shop .woocommerce-MyAccount-navigation li.is-active a{border-color:var(--accent)} } /* --- 見つからないページ（見本 404.html）：太い見出しと、四角いボタン --- */ html body.error404 .site-content .zec-page-title{font-family:inherit;font-size:clamp(28px,4vw,42px);font-weight:700;line-height:1.3;margin:0 0 16px} html body.error404 .site-content .zec-page-body p a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;margin:8px 8px 0 0;border:1px solid #222;border-radius:2px;background:#222;color:#fff;font-weight:600;text-decoration:none} html body.error404 .site-content .zec-page-body p a+a{background:transparent;color:#222} /* --- 押しどころ：カートの「×」（WooCommerce の既定は 27px）とクーポンの入口（既定は文字の高さ 20px）を 44px に（見本の「カートから削除」は 44px） --- */ html body .ec-shop .woocommerce a.remove{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;line-height:1} html body .ec-shop .woocommerce-form-coupon-toggle .showcoupon{display:inline-flex;align-items:center;min-height:44px} /* ===== スキルの templates/shop.css（色を店に合わせた写し） ===== */ /* ============================================================================ ネットショップ作成スキル — カート・購入手続きをサイトの見た目に寄せる ---------------------------------------------------------------------------- 使い方: サイトの CSS（assets/site.css 等）の末尾に足す。 色・角丸・余白は案件の変数に置き換える。 ★ WooCommerce のボタンCSSは詳細度が高い（.woocommerce a.button.alt ＝ 0,3,1）。 テーマ側は同じ詳細度以上まで上げないと勝てない。実測で一度負けた。 ============================================================================ */ .ec-shop, .zec-page { --ec-brand: #3c716a; /* 案件のブランドカラーに置き換える */ --ec-brand-dark: #2e5c56; --ec-text: #303c3b; --ec-muted: #6B7684; --ec-line: #dce2df; --ec-bg-soft: #F7F9FB; --ec-radius: 10px; max-width: 1040px; margin: 0 auto; padding: 24px 20px 72px; color: var(--ec-text); } /* ---- パンくず・見出し ---------------------------------------------------- */ .ec-shop .breadcrumb { font-size: 13px; color: var(--ec-muted); margin-bottom: 20px; } .ec-shop .breadcrumb a { color: var(--ec-muted); text-decoration: none; } .ec-shop .breadcrumb a:hover { text-decoration: underline; } .ec-shop .breadcrumb span { margin: 0 6px; } .ec-shop .page-head { margin-bottom: 28px; } .ec-shop .page-title { font-size: clamp(24px, 4vw, 32px); font-weight: 700; letter-spacing: .02em; margin: 0 0 8px; } .ec-shop .page-lead { font-size: 14px; color: var(--ec-muted); margin: 0; } /* ---- ボタン（★詳細度を .woocommerce a.button.alt 以上に上げる）----------- */ .ec-shop .woocommerce a.button.alt, .ec-shop .woocommerce button.button.alt, .ec-shop .woocommerce input.button.alt, .ec-shop .woocommerce #place_order { background: var(--ec-brand); color: #fff; border: none; border-radius: 999px; padding: 14px 28px; font-size: 16px; font-weight: 700; line-height: 1.4; text-shadow: none; box-shadow: 0 2px 8px rgba(47, 109, 174, .22); transition: background .2s, transform .1s; } .ec-shop .woocommerce a.button.alt:hover, .ec-shop .woocommerce button.button.alt:hover, .ec-shop .woocommerce input.button.alt:hover, .ec-shop .woocommerce #place_order:hover { background: var(--ec-brand-dark); color: #fff; } .ec-shop .woocommerce a.button.alt:active, .ec-shop .woocommerce button.button.alt:active { transform: translateY(1px); } .ec-shop .woocommerce a.button, .ec-shop .woocommerce button.button, .ec-shop .woocommerce input.button { background: #fff; color: var(--ec-text); border: 1px solid var(--ec-line); border-radius: 999px; padding: 11px 22px; font-weight: 600; } /* 購入手続きへ進むボタンは大きく・右寄せしない（スマホで押しやすく） */ .ec-shop .woocommerce .wc-proceed-to-checkout { padding: 16px 0 0; } .ec-shop .woocommerce .wc-proceed-to-checkout a.checkout-button { display: block; text-align: center; } /* ---- 表（カートの明細）--------------------------------------------------- */ .ec-shop .woocommerce table.shop_table { border: 1px solid var(--ec-line); border-radius: var(--ec-radius); border-collapse: separate; border-spacing: 0; overflow: hidden; } .ec-shop .woocommerce table.shop_table th { background: var(--ec-bg-soft); font-size: 13px; font-weight: 700; color: var(--ec-muted); padding: 12px 14px; border: none; } .ec-shop .woocommerce table.shop_table td { padding: 16px 14px; border: none; border-top: 1px solid var(--ec-line); vertical-align: middle; } .ec-shop .woocommerce table.shop_table .product-name a { color: var(--ec-text); font-weight: 700; text-decoration: none; } /* カート項目データ（セットの中身・名入れ等）を小さく添える */ .ec-shop .woocommerce table.shop_table .variation, .ec-shop .woocommerce .wc-item-meta { font-size: 12.5px; line-height: 1.7; color: var(--ec-muted); margin: 6px 0 0; padding: 0; list-style: none; } .ec-shop .woocommerce .wc-item-meta li p { display: inline; margin: 0; } /* 商品写真の枠 ★撮影画像を登録したら、この1行を消す（未登録だと「画像なし」の枠が出るため） */ /* 商品写真を登録している店なので、写真の枠を隠す1行は外した（build_theme.py） */ .ec-shop .woocommerce table.shop_table img { width: 64px; height: auto; border-radius: 6px; } /* ---- 合計欄 -------------------------------------------------------------- */ .ec-shop .woocommerce .cart_totals h2, .ec-shop .woocommerce-checkout #order_review_heading { font-size: 18px; font-weight: 700; margin: 32px 0 12px; } .ec-shop .woocommerce .order-total .amount { font-size: 20px; color: var(--ec-brand); } /* 購入手続きの「必須」「任意」と、会員登録なしの一文（functions-ec.php 9-B・2026-10-07） */ .ec-shop form.checkout label .required { text-decoration: none; border: 0; font-size: 11px; font-weight: 700; color: #fff; background: var(--ec-brand); padding: 1px 6px; border-radius: 3px; margin-left: 6px; vertical-align: 1px; } .ec-shop form.checkout label .optional { font-size: 11px; color: var(--ec-muted, #666); border: 1px solid var(--ec-line, #ccc); padding: 0 6px; border-radius: 3px; margin-left: 6px; vertical-align: 1px; } .ec-shop .zec-guest-note { margin: 0 0 16px; padding: 12px 16px; background: #f6f7f7; border-left: 4px solid var(--ec-brand); font-size: 14px; } .ec-shop form.checkout .form-row .description { font-size: 12px; color: var(--ec-muted, #666); margin-top: 4px; } /* 値段の「円」は数字より小さく（functions-ec.php 1-B） ★店のどこでも同じ比率にする。トップの見本（JSで描く値段）も同じ見せ方に合わせる */ .woocommerce-Price-currencySymbol { font-size: max(.5em, 10px); margin-left: .06em; font-weight: inherit; } /* 小さな文字の中でも10pxより小さくしない */ /* ---- 購入手続きを1カラムに（標準の2カラムは注文メモが右上に浮いて読みにくい）-- */ @media (min-width: 769px) { .ec-shop .woocommerce .col2-set { display: block; } .ec-shop .woocommerce .col2-set .col-1, .ec-shop .woocommerce .col2-set .col-2 { width: 100%; float: none; } } /* ---- 入力欄 -------------------------------------------------------------- */ .ec-shop .woocommerce form .form-row label { font-size: 14px; font-weight: 700; margin-bottom: 6px; } .ec-shop .woocommerce form .form-row input.input-text, .ec-shop .woocommerce form .form-row textarea, .ec-shop .woocommerce form .form-row select, .ec-shop .woocommerce .select2-container .select2-selection--single { border: 1px solid var(--ec-line); border-radius: 8px; padding: 12px 14px; font-size: 16px; /* ★16px未満だとiOSで拡大される */ line-height: 1.5; height: auto; } .ec-shop .woocommerce form .form-row input.input-text:focus, .ec-shop .woocommerce form .form-row textarea:focus { border-color: var(--ec-brand); outline: 2px solid rgba(47, 109, 174, .18); } /* ---- 決済手段 ------------------------------------------------------------ */ .ec-shop .woocommerce #payment { background: var(--ec-bg-soft); border: 1px solid var(--ec-line); border-radius: var(--ec-radius); } .ec-shop .woocommerce #payment ul.payment_methods { border-bottom: 1px solid var(--ec-line); } .ec-shop .woocommerce #payment ul.payment_methods li { padding: 6px 0; } .ec-shop .woocommerce #payment div.payment_box { background: #fff; border: 1px solid var(--ec-line); border-radius: 8px; font-size: 13.5px; line-height: 1.9; color: var(--ec-text); } .ec-shop .woocommerce #payment div.payment_box::before { display: none; } /* ---- お知らせ・エラー ---------------------------------------------------- */ .ec-shop .woocommerce-message, .ec-shop .woocommerce-info, .ec-shop .woocommerce-error { border-top: none; border-left: 4px solid var(--ec-brand); background: var(--ec-bg-soft); border-radius: 8px; font-size: 14px; line-height: 1.8; } .ec-shop .woocommerce-error { border-left-color: #C0392B; background: #FDF2F1; } .ec-shop .woocommerce-message::before, .ec-shop .woocommerce-info::before, .ec-shop .woocommerce-error::before { display: none; } /* ---- 補足 ---------------------------------------------------------------- */ .ec-shop .ec-shop-note { margin-top: 36px; padding: 18px 20px; background: var(--ec-bg-soft); border-radius: var(--ec-radius); font-size: 13px; line-height: 1.9; color: var(--ec-muted); } .ec-shop .ec-shop-note ul { margin: 0; padding-left: 1.1em; } .ec-shop .ec-shop-note a { color: var(--ec-brand); } /* ---- ショップ画面では邪魔なものを消す ------------------------------------ */ .ec-shop .float-buy, /* 追従購入ボタン（入力欄に重なる） */ .ec-shop .cta-fixed { display: none; } /* ---- スマートフォン ------------------------------------------------------ */ @media (max-width: 768px) { .ec-shop { padding: 16px 14px 56px; } .ec-shop .woocommerce table.shop_table td { padding: 12px 10px; } .ec-shop .woocommerce a.button.alt, .ec-shop .woocommerce button.button.alt, .ec-shop .woocommerce #place_order { width: 100%; padding: 16px 20px; } } /* ============================================================================ 追記（2026-08-17 実サーバー実測）— 注文パネルの行／系統の小見出し／Fluent Forms の上書き／決済手段の説明 ---------------------------------------------------------------------------- ・「注文パネルの行」「系統の小見出し」は templates/order-panel-sets.html の