施工菜单|窗户改造(内窗安装・覆盖工法)的费用
/* =========================================================================
翔工务店 施工菜单|窗户改造(内窗・覆盖工法)专用 高级感提升CSS
・这个一体版是将文章的“代码编辑器(文本)”完整粘贴
・文章正文的父类是 kakeru-window-menu(对其他页面没有任何影响)
・JIN 8.3 的主题CSS(标题・列表・链接・加粗)已被取消
========================================================================= */
.kakeru-window-menu,
.kakeru-window-menu * {
box-sizing: border-box;
}
.kakeru-window-menu {
–wc-ink: #211d18; /* 深咖啡色(文字・带) */
–wc-brown: #5f4327; /* 棕色 */
–wc-gold: #b0842f; /* 金色 */
–wc-gold-light: #e3c67f;
–wc-cream: #faf6ee; /* 奶油色 */
–wc-cream2: #f4ead6;
–wc-line: #e6dcc9; /* 线条 */
–wc-white: #ffffff;
–wc-red: #a8402f; /* 价格强调 */
–wc-mute: #7b7367;
–wc-serif: “Yu Mincho”, “YuMincho”, “Hiragino Mincho ProN”, “Noto Serif JP”, “游明朝”, serif;
clear: both;
color: #322d26;
font-size: 16px;
line-height: 1.95;
letter-spacing: .01em;
}
/* — JIN 的主题CSS取消 — */
.kakeru-window-menu h2,
.kakeru-window-menu h3 {
position: static !important;
overflow: visible !important;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
color: var(–wc-ink) !important;
counter-increment: none !important;
text-align: left !important;
}
.kakeru-window-menu h2::before,
.kakeru-window-menu h2::after,
.kakeru-window-menu h3::before,
.kakeru-window-menu h3::after {
display: none !important;
content: none !important;
}
.kakeru-window-menu ul,
.kakeru-window-menu ol {
margin: 0;
padding: 0;
border: 0;
background: none;
list-style: none;
}
.kakeru-window-menu ul li,
.kakeru-window-menu ol li {
margin: 0;
padding: 0;
border: 0;
background: none;
list-style: none;
}
.kakeru-window-menu ul li::before,
.kakeru-window-menu ul li::after,
.kakeru-window-menu ol li::before,
.kakeru-window-menu ol li::after {display: none !important;
content: none !important;
counter-increment: none !important;
}
.kakeru-window-menu strong,
.kakeru-window-menu b {
background: none !important;
color: inherit !important;
font-weight: 700;
}
.kakeru-window-menu a {
border: 0 !important;
color: #7a4f25 !important;
font-weight: 700;
text-decoration: none !important;
box-shadow: none !important;
}
.kakeru-window-menu p {
margin: 0 0 1.5em;
}
.kakeru-window-menu img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
border: 0;
border-radius: 10px;
box-shadow: none;
}
/* — 标题(明朝体 + 金色边框)营造高档感 — */
.kakeru-window-menu h2 {
margin: 62px 0 26px !important;
padding: 6px 4px 16px 20px !important;
border-left: 3px solid var(–wc-gold) !important;
border-bottom: 1px solid var(–wc-line) !important;
background: none !important;
color: var(–wc-ink) !important;
font-family: var(–wc-serif) !important;
font-size: 27px !important;
font-weight: 600 !important;
line-height: 1.55 !important;
letter-spacing: .04em !important;
}
.kakeru-window-menu h3 {
margin: 36px 0 18px !important;
padding: 4px 0 4px 16px !important;
border-left: 3px solid var(–wc-brown) !important;
background: none !important;
color: var(–wc-ink) !important;
font-family: var(–wc-serif) !important;
font-size: 21px !important;
font-weight: 600 !important;
line-height: 1.5 !important;
letter-spacing: .03em !important;
}
/* — 英雄区 — */
.kc-hero {
position: relative;
overflow: hidden;
margin: 8px 0 30px;
padding: 48px 26px 44px;
border: 1px solid #e7dcc4;
border-radius: 14px;
background:
radial-gradient(circle at 85% -10%, rgba(216,182,119,.28), transparent 42%),
radial-gradient(circle at 0% 120%, rgba(95,67,39,.10), transparent 45%),
linear-gradient(160deg, #fffdf8 0%, #f6ecd9 60%, #f0e2c6 100%);box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 14px 34px rgba(70,48,27,.10);
text-align: center;
}
.kc-hero::before {
content: “”;
position: absolute;
inset: 10px;
border: 1px solid rgba(176,132,47,.35);
border-radius: 9px;
pointer-events: none;
}
.kc-hero-label {
position: relative;
display: inline-block;
margin-bottom: 16px;
padding: 6px 20px;
border-radius: 999px;
background: linear-gradient(135deg, #2b2620 0%, #4a3520 100%);
color: #f4e6c8;
font-size: 13px;
font-weight: 700;
letter-spacing: .18em;
}
.kc-hero-title {
position: relative;
margin: 0 0 16px;
color: var(–wc-ink);
font-family: var(–wc-serif);
font-size: clamp(26px, 5vw, 38px);
font-weight: 600;
line-height: 1.5;
letter-spacing: .03em;
}
.kc-hero-title span {
color: var(–wc-brown);
}
.kakeru-window-menu .kc-hero p {
position: relative;
margin: 0 auto;
max-width: 40em;
color: #4a4339;
}
/* — 三个要点 — */
.kc-point-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin: 26px 0 34px;
}
.kc-point-card {
position: relative;
padding: 26px 16px 22px;
border: 1px solid var(–wc-line);
border-top: 3px solid var(–wc-gold);
border-radius: 12px;
background: linear-gradient(180deg, #fffefb 0%, #fdfaf3 100%);
box-shadow: 0 8px 22px rgba(70, 48, 27, .08);
text-align: center;
}
.kc-point-card small {
display: block;
margin-bottom: 8px;
color: var(–wc-mute);
font-size: 13px;
font-weight: 700;
letter-spacing: .05em;
}
.kakeru-window-menu .kc-point-card strong {
display: block;
color: var(–wc-ink) !important;
font-size: 22px;
line-height: 1.5;
}
.kakeru-window-menu .kc-point-card .kc-accent {
color: var(–wc-red) !important;
}
/* — 费用框 — */
.kc-price-box {
overflow: hidden;
margin: 24px 0;
border: 1px solid var(–wc-gold);
border-radius: 14px;background: var(–wc-white);
box-shadow: 0 12px 30px rgba(70, 48, 27, .12);
text-align: center;
}
.kc-price-head {
padding: 13px 16px;
background: linear-gradient(135deg, #2b2620 0%, #4a3520 100%);
color: #f4e6c8;
font-family: var(–wc-serif);
font-weight: 600;
font-size: 17px;
letter-spacing: .08em;
}
.kc-price-main {
padding: 28px 16px 20px;
background: linear-gradient(135deg, #fffdf8 0%, #f5e7c8 100%);
font-family: var(–wc-serif);
font-size: 20px;
font-weight: 600;
color: var(–wc-brown);
}
.kakeru-window-menu .kc-price-main strong {
display: block;
margin-top: 4px;
color: var(–wc-red) !important;
font-family: var(–wc-serif);
font-size: clamp(40px, 8vw, 60px);
font-weight: 700;
line-height: 1.2;
}
.kc-price-body {
padding: 20px 22px;
text-align: left;
}
.kakeru-window-menu .kc-price-body p {
margin: 0 0 10px;
}
.kakeru-window-menu .kc-price-body p:last-child {
margin-bottom: 0;
}
/* — 类型别卡片 — */
.kc-type-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
margin: 26px 0;
}
.kc-type-card {
display: flex;
overflow: hidden;
flex-direction: column;
border: 1px solid var(–wc-line);
border-radius: 12px;
background: var(–wc-white);
box-shadow: 0 8px 20px rgba(70, 48, 27, .08);
transition: transform .2s ease, box-shadow .2s ease;
}
.kc-type-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(70, 48, 27, .14);
}
.kc-type-name {
padding: 14px 16px;
background: linear-gradient(135deg, #2b2620 0%, #4a3520 100%);
color: #f6ead0;
font-family: var(–wc-serif);
font-size: 18px;
font-weight: 600;
letter-spacing: .03em;
text-align: center;
}
.kc-type-body {
flex: 1;
padding: 18px;
}
.kakeru-window-menu .kc-type-body p {
margin: 0 0 12px;
font-size: 15px;
}
.kakeru-window-menu .kc-type-maker {
margin-bottom: 0;
padding-top: 12px;border-top: 1px dashed var(–wc-line);
color: var(–wc-mute);
font-size: 13.5px;
}
.kc-type-price {
padding: 14px 16px;
border-top: 1px solid var(–wc-line);
background: var(–wc-cream);
text-align: center;
}
.kc-type-price small {
color: var(–wc-mute);
font-size: 13px;
font-weight: 700;
letter-spacing: .04em;
}
.kakeru-window-menu .kc-type-price strong {
display: block;
color: var(–wc-red) !important;
font-family: var(–wc-serif);
font-size: 26px;
font-weight: 700;
line-height: 1.35;
}
/* — 检查清单 — */
.kakeru-window-menu ul.kc-check-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 20px 0;
}
.kakeru-window-menu ul.kc-check-list li {
position: relative;
padding: 14px 14px 14px 46px;
border: 1px solid var(–wc-line);
border-radius: 10px;
background: linear-gradient(180deg, #fffefb 0%, #faf5ea 100%);
box-shadow: 0 3px 10px rgba(70,48,27,.05);
}
.kakeru-window-menu ul.kc-check-list li::before {
position: absolute;
top: 50%;
left: 15px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin-top: -11px;
border: 0;
border-radius: 50%;
background: linear-gradient(135deg, var(–wc-gold) 0%, var(–wc-gold-light) 100%);
color: #fff;
content: “\2714” !important;
font-family: inherit;
font-size: 13px;
font-weight: 900;
line-height: 1;
}
/* — 注释 — */
.kc-note {
margin: 22px 0;
padding: 18px 20px;
border: 1px solid #ece0c9;
border-left: 3px solid var(–wc-gold);
border-radius: 8px;
background: #fffaf0;
font-size: 14px;
}
.kakeru-window-menu .kc-note p {
margin: 0 0 7px;
}
.kakeru-window-menu .kc-note p:last-child {
margin-bottom: 0;
}
/* — 补助金部分 — */
.kc-subsidy {
margin: 24px 0;
padding: 26px 24px;
border: 1px solid var(–wc-gold);
border-radius: 14px;
background: radial-gradient(circle at 100% 0%, rgba(216,182,119,.22), transparent 45%),
linear-gradient(160deg, #fffdf8 0%, #f7efdd 100%);
box-shadow: 0 12px 30px rgba(70, 48, 27, .10);
}
.kc-subsidy-head {
margin: 0 0 6px;
color: var(–wc-brown);
font-size: 13px;
font-weight: 700;
letter-spacing: .14em;
text-align: center;
}
.kc-subsidy-title {
margin: 0 0 18px;
color: var(–wc-ink);
font-family: var(–wc-serif);
font-size: clamp(21px, 4vw, 26px);
font-weight: 600;
line-height: 1.5;
letter-spacing: .03em;
text-align: center;
}
.kakeru-window-menu .kc-subsidy >p {
max-width: 44em;
margin: 0 auto 20px;
text-align: center;
}
.kc-subsidy-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-bottom: 18px;
}
.kc-subsidy-card {
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(–wc-line);
border-radius: 12px;
background: var(–wc-white);
box-shadow: 0 6px 16px rgba(70, 48, 27, .07);
}
.kc-subsidy-badge {
padding: 10px 14px;
background: linear-gradient(135deg, #2b2620 0%, #4a3520 100%);
color: #f6ead0;
font-size: 13px;
font-weight: 700;
letter-spacing: .08em;
text-align: center;
}
.kc-subsidy-name {
padding: 14px 16px 6px;
color: var(–wc-ink);
font-family: var(–wc-serif);
font-size: 16px;
font-weight: 600;
line-height: 1.5;
text-align: center;
}
.kc-subsidy-amount {
padding: 0 16px 12px;
border-bottom: 1px dashed var(–wc-line);
color: var(–wc-red);
font-family: var(–wc-serif);
font-size: 22px;
font-weight: 700;
line-height: 1.3;
text-align: center;
}
.kc-subsidy-amount small {
display: block;
color: var(–wc-mute);
font-family: inherit;
font-size: 12px;
font-weight: 700;
}
.kakeru-window-menu .kc-subsidy-card p {
flex: 1;
margin: 0;
padding: 14px 16px;
font-size: 13.5px;
line-height: 1.8;
}
/* — 施工实绩卡 — */
.kc-case-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.kc-case-card {
overflow: hidden;
border: 1px solid var(–wc-line);
border-radius: 12px;
background: var(–wc-white);
box-shadow: 0 8px 20px rgba(70, 48, 27, .08);
}
.kakeru-window-menu .kc-case-card img {
width: 100%;
border-radius: 0;
}
.kc-case-body {
padding: 18px;
}
.kc-case-title {
margin: 0 0 8px;
color: var(–wc-ink);
font-family: var(–wc-serif);
font-size: 18px;
font-weight: 600;
line-height: 1.5;
}.kakeru-window-menu .kc-case-body p {
margin: 0;
font-size: 15px;
}
/* — 围绕框 — */
.kc-info-box {
margin: 22px 0;
padding: 22px;
border: 1px solid var(–wc-line);
border-radius: 12px;
background: var(–wc-cream);
}
.kakeru-window-menu .kc-info-box p:last-child {
margin-bottom: 0;
}
.kc-box-title {
margin: 0 0 12px;
padding-left: 14px;
border-left: 3px solid var(–wc-brown);
color: var(–wc-ink);
font-family: var(–wc-serif);
font-size: 19px;
font-weight: 600;
line-height: 1.5;
}
/* — 注意事项编号卡 — */
.kc-number-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.kc-number-card {
position: relative;
padding: 54px 20px 22px;
border: 1px solid var(–wc-line);
border-radius: 12px;
background: var(–wc-white);
box-shadow: 0 6px 16px rgba(70, 48, 27, .06);
}
.kc-number {
position: absolute;
top: 16px;
left: 18px;
width: 34px;
height: 34px;
border-radius: 50%;
background: linear-gradient(135deg, var(–wc-gold) 0%, var(–wc-brown) 100%);
color: #fff;
font-family: var(–wc-serif);
font-weight: 700;
line-height: 34px;
text-align: center;
}
.kc-number-title {
margin: 0 0 10px;
color: var(–wc-ink);
font-family: var(–wc-serif);
font-size: 18px;
font-weight: 600;
line-height: 1.5;
}
.kakeru-window-menu .kc-number-card p {
margin: 0;
font-size: 15px;
}
/* — 施工步骤 — */
.kc-step {
margin: 24px 0 36px;
padding: 22px;
border: 1px solid var(–wc-line);
border-radius: 12px;
background: var(–wc-white);
box-shadow: 0 6px 18px rgba(70, 48, 27, .06);
}
.kc-step-title {
margin: 0 0 18px;
padding: 12px 16px;
border-left: 3px solid var(–wc-brown);
background: var(–wc-cream);
border-radius: 0 8px 8px 0;
color: var(–wc-ink);
font-family: var(–wc-serif);
font-size: 20px;
font-weight: 600;
line-height: 1.5;
}
.kc-step-label {display: inline-block;
margin-right: 10px;
padding: 3px 12px;
border-radius: 999px;
background: linear-gradient(135deg, var(–wc-gold) 0%, var(–wc-gold-light) 100%);
color: #fff;
font-family: var(–wc-serif);
font-size: 13px;
letter-spacing: .06em;
vertical-align: 2px;
}
.kakeru-window-menu .kc-step p:last-child {
margin-bottom: 0;
}
/* 縦长・工程照片是为了不至于变得过大而设置上限 */
.kakeru-window-menu .kc-step img,
.kakeru-window-menu .kc-step-photo img {
max-width: 560px;
border-radius: 10px;
box-shadow: 0 8px 20px rgba(70, 48, 27, .10);
}
.kc-cap {
margin: -6px 0 26px !important;
color: var(–wc-mute);
font-size: 14px;
text-align: center;
}
/* — 服务区域 — */
.kc-area-box {
margin: 16px 0;
border: 1px solid var(–wc-line);
border-radius: 10px;
background: var(–wc-white);
overflow: hidden;
}
.kc-area-box summary {
padding: 15px 18px;
background: var(–wc-cream);
color: var(–wc-ink);
cursor: pointer;
font-weight: 700;
list-style: revert;
}
.kakeru-window-menu .kc-area-box p {
margin: 0;
padding: 16px 18px;
font-size: 14px;
}
/* — CTA — */
.kc-cta {
position: relative;
overflow: hidden;
margin: 46px 0 30px;
padding: 40px 24px 38px;
border-radius: 16px;
background:
radial-gradient(circle at 85% -20%, rgba(216,182,119,.35), transparent 45%),
linear-gradient(140deg, #241f19 0%, #3f2d1b 55%, #52381f 100%);
color: #f4ecdd;
text-align: center;
}
.kc-cta::before {
content: “”;
position: absolute;
inset: 12px;
border: 1px solid rgba(216,182,119,.35);
border-radius: 10px;
pointer-events: none;
}
.kc-cta-title {
position: relative;
margin: 0 0 14px;
color: #fff;
font-family: var(–wc-serif);
font-size: clamp(23px, 4.5vw, 31px);
font-weight: 600;
line-height: 1.5;
letter-spacing: .04em;
}
.kakeru-window-menu .kc-cta p {
position: relative;
margin: 0 auto 20px;
max-width: 42em;color: #ece2d1;
}
/* — 按钮(黄金光泽) — */
.kakeru-window-menu .kc-button {
position: relative;
display: inline-block;
min-width: 280px;
margin: 0;
padding: 16px 26px;
border: 0 !important;
border-radius: 8px;
background: linear-gradient(180deg, #e0a94a 0%, #c88a2f 55%, #b6791f 100%);
color: #fff !important;
font-size: 18px;
font-weight: 700;
letter-spacing: .04em;
text-decoration: none !important;
box-shadow: 0 6px 0 #915c18, 0 12px 22px rgba(70,48,27,.28);
transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.kakeru-window-menu .kc-button:hover {
filter: brightness(1.05);
transform: translateY(2px);
box-shadow: 0 4px 0 #915c18, 0 8px 16px rgba(70,48,27,.26);
}
.kc-hero .kc-button {
margin-top: 24px;
font-size: 17px;
}
.kc-cta-mini {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin: 32px 0;
padding: 22px 26px;
border: 1px solid var(–wc-gold);
border-radius: 14px;
background:
radial-gradient(circle at 100% 0%, rgba(216,182,119,.20), transparent 50%),
linear-gradient(135deg, #fffdf8 0%, #f7efdd 100%);
box-shadow: 0 10px 26px rgba(70,48,27,.10);
}
.kakeru-window-menu .kc-cta-mini p {
margin: 0;
color: var(–wc-ink);
font-family: var(–wc-serif);
font-size: 18px;
font-weight: 600;
line-height: 1.65;
text-align: left;
}
.kc-cta-mini small {
display: block;
color: var(–wc-mute);
font-family: “Yu Gothic”, “Hiragino Kaku Gothic ProN”, Meiryo, sans-serif;
font-size: 13.5px;
font-weight: 700;
}
.kakeru-window-menu .kc-cta-mini .kc-button {
flex-shrink: 0;
min-width: 250px;
font-size: 16px;
}
/* — 相关页面・社交媒体 — */
.kc-related {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 22px 0;
}
.kakeru-window-menu .kc-related a {
position: relative;
display: block;
padding: 15px 16px 15px 20px;border: 1px solid var(–wc-line) !important;
border-left: 3px solid var(–wc-gold) !important;
border-radius: 8px;
background: linear-gradient(180deg, #fffefb 0%, #faf5ea 100%);
transition: background .15s ease, transform .15s ease;
}
.kakeru-window-menu .kc-related a:hover {
background: var(–wc-cream2);
transform: translateX(2px);
}
.kc-sns {
margin-top: 34px;
padding-top: 26px;
border-top: 1px solid var(–wc-line);
text-align: center;
}
.kc-sns img {
display: inline-block;
margin: 8px auto 20px;
border-radius: 6px;
}
/* — 响应式 — */
@media (max-width: 767px) {
.kakeru-window-menu {
font-size: 15px;
line-height: 1.9;
}
.kakeru-window-menu h2 {
margin-top: 46px !important;
font-size: 22px !important;
}
.kakeru-window-menu h3 {
font-size: 18px !important;
}
.kc-hero {
padding: 34px 16px 30px;
}
.kc-point-grid,
.kc-case-grid,
.kc-number-grid,
.kc-related,
.kc-type-grid,
.kc-subsidy-grid {
grid-template-columns: 1fr;
}
.kakeru-window-menu ul.kc-check-list {
grid-template-columns: 1fr;
}
.kc-price-main {
font-size: 18px;
}
.kc-step {
padding: 15px;
}
.kc-step-title {
font-size: 17px;
}
.kakeru-window-menu .kc-step img,
.kakeru-window-menu .kc-step-photo img {
max-width: 100%;
}
.kc-cta-mini {
flex-direction: column;
padding: 20px 16px;
}
.kakeru-window-menu .kc-cta-mini p {
text-align: center;
}
.kakeru-window-menu .kc-button {
width: 100%;
min-width: 0;
}
}
株式会社翔工務店へ
株式会社翔工務店は平均年齢20代後半の若い会社ですが、技術はどこにも負けていません。
いちばんの強みは、足場工事、屋根工事、塗装工事とすべて自社で行えること。一般には分業されるこの業界にあって、一式で頼めるので管理に手間がかからず、コストも抑えることが出来ます。何より、トラブルがあればすぐにかけつけます!
自信をもって、宣言できます。私たちは、神奈川で一番若くて親切なリフォーム屋です!







