*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{ scroll-behavior: smooth; }
body{
min-height:100vh;
background:
radial-gradient(900px 500px at 12% 0%, #FFE9E7 0%, transparent 60%),
radial-gradient(900px 500px at 100% 28%, #DDF1EB 0%, transparent 55%),
linear-gradient(180deg,#FFF7F5 0%, #F4FAF7 100%);
background-attachment: fixed;
font-family: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
font-size: 16px;
font-weight: 400;
color: #2A2A2A;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* ===== mobile-first stage: smartphone width fixed, centered on PC ===== */
.stage{
width:100%;
max-width: 480px;
margin: 0 auto;
background:#fff;
position:relative;
overflow:hidden;
}
@media (min-width: 481px){
body{ padding: 28px 0 0; }
/* sub pages (articles, privacy, thanks) sit flush to top edge */
body.article-page,
body.legal-page,
body.thanks-page{ padding: 0 0 0; }
.stage{
border-radius: 24px 24px 0 0;
box-shadow: 0 -2px 0 rgba(0,0,0,0), 0 30px 80px rgba(70,50,80,.12), 0 6px 20px rgba(0,0,0,.05);
clip-path: inset(0 round 24px 24px 0 0);
}
}
/* ===== background wave (top) — image asset 1 ===== */
.bg-wave{
position:absolute;
top:0; left:0; right:0;
width:100%;
/* native ratio 1850×850 ≈ 2.176 */
aspect-ratio: 1850 / 850;
background: url("../assets/bg-wave-top.jpg") center top / cover no-repeat;
/* the asset has a white/checker bg → multiply over white stage erases it cleanly */
mix-blend-mode: multiply;
pointer-events:none;
z-index: 1;
}
/* ===== main FV illustration — image asset 4 ===== */
.fv-main{
position:relative;
width:100%;
/* native 853×1844 */
aspect-ratio: 853 / 1844;
background: url("../assets/fv-main.jpg") center top / 100% auto no-repeat;
z-index: 2;
}
/* ===== logo (top-left) — transparent PNG ===== */
.logo{
position:absolute;
top: 18px;
left: 18px;
width: 132px;
/* native 912×432 ≈ 2.111 */
aspect-ratio: 912 / 432;
background: url("../assets/logo.png") center / contain no-repeat;
z-index: 5;
pointer-events:none;
}
/* ===== hamburger (viewport-fixed, top-right of stage) ===== */
.menu{
position: fixed;
top: 14px;
/* on mobile: 14px from viewport edge.
on PC: track the right edge of the centered 480px stage. */
right: max(14px, calc(50vw - 240px + 14px));
}
@media (min-width: 481px){
.menu{ top: 40px; } /* 上部に余白を取り、PCではステージの少し下から開始 */
}
.menu{
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, #F4A6AB 0%, #E27D85 60%, #D85F69 100%);
border: 0;
padding: 0;
cursor: pointer;
z-index: 90; /* above content, below open drawer (z:100) */
box-shadow:
0 10px 24px rgba(226,125,133,.42),
0 4px 10px rgba(0,0,0,.10),
inset 0 1px 0 rgba(255,255,255,.35);
display: flex;
align-items: center;
justify-content: center;
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, opacity .2s ease;
}
/* hide menu while drawer is open (drawer has its own × close button) */
body.menu-open .menu{ opacity: 0; pointer-events: none; }
.menu:hover{ transform: translateY(-1px); filter: brightness(1.04); }
.menu:active{ transform: translateY(0); }
.menu .bars{
position: relative;
display: block;
width: 24px;
height: 2px;
background: #fff;
border-radius: 2px;
}
.menu .bars::before,
.menu .bars::after{
content: "";
position: absolute;
left: 0;
width: 24px;
height: 2px;
background: #fff;
border-radius: 2px;
}
.menu .bars::before{ top: -8px; }
.menu .bars::after { top: 8px; }
.menu:focus-visible{ outline: 2px solid #E27D85; outline-offset: 3px; }
/* ===== PC-only side CTA rails (hidden on mobile) ===== */
.side-cta{ display:none; }
.side-cta .brand-logo,
.side-cta .benefit-stats,
.side-cta .contact-feats,
.side-cta .line-btn{ display:none; }
/* ----- PC panel triple-CTA stack (shown whenever side-cta is visible) ----- */
.side-cta .panel-cta{
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
position: relative;
z-index: 1;
}
.side-cta .pc-cta{
position: relative;
overflow: hidden;
display: flex; align-items: center; gap: 10px;
padding: 12px 14px;
border-radius: 999px;
text-decoration: none;
color: #fff;
font-weight: 700;
font-size: 13.5px;
letter-spacing: .04em;
transition: transform .15s ease, filter .15s ease, box-shadow .2s ease;
isolation: isolate;
}
.side-cta .pc-cta .ico{
display: inline-flex;
align-items: center; justify-content: center;
width: 26px; height: 26px;
border-radius: 50%;
background: rgba(255,255,255,.22);
flex-shrink: 0;
}
.side-cta .pc-cta:hover{ transform: translateY(-1px); filter: brightness(1.07); }
.side-cta .pc-cta.pink{
background: linear-gradient(135deg,#F4A6AB 0%, #E27D85 60%, #D85F69 100%);
box-shadow: 0 6px 16px rgba(226,125,133,.34), inset 0 1px 0 rgba(255,255,255,.4);
}
.side-cta .pc-cta.line{
background: linear-gradient(135deg,#7BD389 0%, #4FC267 60%, #06C755 100%);
box-shadow: 0 6px 16px rgba(6,199,85,.32), inset 0 1px 0 rgba(255,255,255,.4);
}
.side-cta .pc-cta.apply{
background: linear-gradient(135deg,#FF8A6E 0%, #E25577 50%, #C03A6A 100%);
box-shadow: 0 8px 20px rgba(192,58,106,.45), inset 0 1px 0 rgba(255,255,255,.4);
font-weight: 800;
animation: ctaPulseApplyMini 2.4s ease-in-out infinite;
}
@keyframes ctaPulseApplyMini{
0%, 100% { box-shadow: 0 8px 20px rgba(192,58,106,.45), inset 0 1px 0 rgba(255,255,255,.4); }
50% { box-shadow: 0 12px 28px rgba(192,58,106,.65), 0 0 0 5px rgba(226,85,119,.10), inset 0 1px 0 rgba(255,255,255,.5); }
}
/* sweeping shine on pc-cta */
.side-cta .pc-cta::before{
content:"";
position:absolute; top:0; left:-60%;
width:50%; height:100%;
background: linear-gradient(110deg,
rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
transform: skewX(-20deg);
z-index: 1;
animation: ctaShine 3.4s ease-in-out infinite;
}
.side-cta .pc-cta.line::before{ animation-delay: 1s; }
.side-cta .pc-cta.apply::before{ animation-delay: 2s; }
.side-cta .pc-cta > *{ position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce){
.side-cta .pc-cta{ animation: none; }
.side-cta .pc-cta::before{ display:none; }
}
@media (min-width: 1080px){
.side-cta{
position: fixed;
top: 50%;
transform: translateY(-50%);
width: min(290px, calc((100vw - 480px) / 2 - 56px));
display: flex;
flex-direction: column;
gap: 14px;
z-index: 20;
max-height: calc(100vh - 40px);
}
.side-cta.left { left: max(28px, calc((100vw - 480px) / 2 - 290px - 28px)); }
.side-cta.right { right: max(28px, calc((100vw - 480px) / 2 - 290px - 28px)); }
.side-cta .panel{
position: relative;
background: linear-gradient(160deg, rgba(255,255,255,.96) 0%, rgba(255,247,245,.92) 100%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(226,125,133,.22);
border-radius: 22px;
padding: 22px 20px 20px;
box-shadow:
0 30px 60px rgba(214,140,142,.22),
0 10px 24px rgba(0,0,0,.06),
inset 0 1px 0 rgba(255,255,255,.7);
text-align: center;
overflow: hidden;
}
/* decorative gradient ring on panels */
.side-cta .panel::before{
content:"";
position:absolute;
inset: -1px;
border-radius: 22px;
padding: 1.5px;
background: linear-gradient(135deg,
rgba(244,166,171,.5) 0%,
rgba(255,255,255,0) 35%,
rgba(169,220,208,.4) 65%,
rgba(255,255,255,0) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events:none;
}
/* corner sparkle */
.side-cta .panel::after{
content:"";
position: absolute;
top: -30px; right: -30px;
width: 120px; height: 120px;
background: radial-gradient(circle, rgba(244,166,171,.35) 0%, transparent 65%);
border-radius: 50%;
pointer-events:none;
}
/* Brand logo (left panel) */
.side-cta .brand-logo{
display: block;
width: 75%;
max-width: 180px;
margin: 4px auto 14px;
filter: drop-shadow(0 4px 10px rgba(214,140,142,.25));
position: relative;
z-index: 1;
}
.side-cta .eyebrow{
position: relative; z-index: 1;
font-size: 12px;
letter-spacing: .28em;
color: #B97A82;
font-weight: 700;
margin-bottom: 8px;
display: inline-block;
padding: 4px 12px;
background: linear-gradient(90deg, rgba(244,166,171,.15), rgba(169,220,208,.15));
border-radius: 999px;
}
.side-cta .head{
position: relative; z-index: 1;
font-family: "Shippori Mincho", "Noto Serif JP", serif;
font-size: 17px;
font-weight: 700;
color: #2A2A2A;
line-height: 1.55;
margin: 6px 0 16px;
letter-spacing: .02em;
}
.side-cta .head em{
font-style: normal;
background: linear-gradient(180deg,#F4A1A6 0%, #E27D85 60%, #D55F69 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
font-size: 23px;
font-weight: 800;
letter-spacing: .02em;
}
/* benefit stats (left panel) */
.side-cta .benefit-stats{
display: flex;
flex-direction: column;
gap: 10px;
list-style: none;
padding: 0;
margin: 0 0 18px;
position: relative;
z-index: 1;
}
.side-cta .benefit-stats .stat{
display: flex;
align-items: baseline;
justify-content: center;
gap: 10px;
padding: 12px 14px;
border-radius: 14px;
background: linear-gradient(135deg, #fff 0%, #FFF6F4 100%);
border: 1px solid rgba(226,125,133,.18);
box-shadow: 0 6px 16px rgba(214,140,142,.10);
text-align: left;
}
.side-cta .benefit-stats .stat.green{
background: linear-gradient(135deg, #fff 0%, #F0FAF6 100%);
border-color: rgba(79,163,143,.20);
box-shadow: 0 6px 16px rgba(79,163,143,.10);
}
.side-cta .benefit-stats .stat.orange{
background: linear-gradient(135deg, #fff 0%, #FFF7EE 100%);
border-color: rgba(230,147,86,.20);
box-shadow: 0 6px 16px rgba(230,147,86,.10);
}
.side-cta .benefit-stats .num{
font-family: "Shippori Mincho", serif;
font-weight: 800;
line-height: 1;
color: #E27D85;
letter-spacing: -.02em;
flex-shrink: 0;
}
.side-cta .benefit-stats .stat.green .num{ color: #4FA38F; }
.side-cta .benefit-stats .stat.orange .num{ color: #E69356; }
.side-cta .benefit-stats .num .big{ font-size: 22px; }
.side-cta .benefit-stats .num .unit{ font-size: 11px; margin-left: 1px; font-weight: 700; }
.side-cta .benefit-stats .label{
font-size: 12px;
color: #555;
font-weight: 600;
letter-spacing: .08em;
}
/* contact feats (right panel) */
.side-cta .contact-feats{
display: flex;
flex-direction: column;
gap: 8px;
list-style: none;
padding: 0;
margin: 0 0 16px;
position: relative;
z-index: 1;
}
.side-cta .contact-feats li{
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(220,241,235,.5) 100%);
border: 1px solid rgba(79,163,143,.18);
font-size: 12.5px;
color: #2A2A2A;
font-weight: 500;
text-align: left;
line-height: 1.45;
}
.side-cta .contact-feats li:nth-child(1){
background: linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(207,238,229,.6) 100%);
}
.side-cta .contact-feats li:nth-child(3){
background: linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(225,216,242,.5) 100%);
border-color: rgba(124,107,184,.20);
}
.side-cta .contact-feats li em{
font-style: normal; font-weight: 700; color: #4FA38F;
}
.side-cta .contact-feats li:nth-child(3) em{ color: #7C6BB8; }
.side-cta .contact-feats .ico{
width: 30px; height: 30px;
flex-shrink: 0;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #A9DCD0 0%, #4FA38F 100%);
color: #fff;
font-size: 13px;
box-shadow: 0 4px 8px rgba(79,163,143,.30);
}
.side-cta .contact-feats li:nth-child(3) .ico{
background: linear-gradient(135deg, #C8B5E8 0%, #7C6BB8 100%);
box-shadow: 0 4px 8px rgba(124,107,184,.28);
}
/* LINE button (right panel) */
.side-cta .line-btn{
display: flex !important;
align-items: center; justify-content: center; gap: 8px;
width: 100%;
padding: 12px;
margin-top: 8px;
border-radius: 999px;
background: linear-gradient(135deg,#7BD389 0%, #4FC267 60%, #06C755 100%);
color: #fff;
text-decoration: none;
font-weight: 700;
font-size: 14px;
box-shadow: 0 8px 20px rgba(6,199,85,.32), inset 0 1px 0 rgba(255,255,255,.4);
transition: transform .15s ease, filter .15s ease;
position: relative; z-index: 1;
}
.side-cta .line-btn:hover{ transform: translateY(-1px); filter: brightness(1.06); }
/* show all the special pieces on PC */
.side-cta .brand-logo,
.side-cta .benefit-stats,
.side-cta .contact-feats{ display: flex; }
.side-cta .brand-logo{ display: block; }
}
/* between 920 and 1080: simpler layout (logo + headline + button only) */
@media (min-width: 920px) and (max-width: 1079px){
.side-cta{
position: fixed;
top: 50%;
transform: translateY(-50%);
width: min(220px, calc((100vw - 480px) / 2 - 48px));
display: flex;
flex-direction: column;
gap: 14px;
z-index: 20;
}
.side-cta.left { left: max(24px, calc((100vw - 480px) / 2 - 220px - 24px)); }
.side-cta.right { right: max(24px, calc((100vw - 480px) / 2 - 220px - 24px)); }
.side-cta .panel{
background: rgba(255,255,255,.92);
-webkit-backdrop-filter: blur(14px) saturate(140%);
backdrop-filter: blur(14px) saturate(140%);
border: 1px solid rgba(226,125,133,.18);
border-radius: 20px;
padding: 20px 16px 18px;
box-shadow: 0 20px 44px rgba(214,140,142,.20), 0 4px 12px rgba(0,0,0,.05);
text-align: center;
}
.side-cta .brand-logo{ display: block; width: 110px; margin: 0 auto 12px; }
.side-cta .eyebrow{
font-size: 12px; letter-spacing: .22em; color: #B97A82;
font-weight: 700; margin-bottom: 6px;
}
.side-cta .head{
font-family: "Shippori Mincho", "Noto Serif JP", serif;
font-size: 16px; font-weight: 700; color: #2A2A2A;
line-height: 1.5; margin-bottom: 12px;
}
.side-cta .head em{ font-style: normal; color: #E27D85; font-size: 22px; }
}
.cta-btn{
display:flex; align-items:center; justify-content:center; gap: 8px;
width: 100%;
padding: 14px 14px;
border-radius: 999px;
border: none;
font-family: inherit;
font-weight: 700;
font-size: 14px;
letter-spacing: .04em;
cursor: pointer;
text-decoration: none;
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.cta-btn .arr{
display:inline-flex; align-items:center; justify-content:center;
width: 22px; height: 22px; border-radius: 50%;
background: rgba(255,255,255,.25);
transition: transform .2s ease;
}
.cta-btn:hover{ transform: translateY(-1px); filter: brightness(1.04); }
.cta-btn:hover .arr{ transform: translateX(2px); }
.cta-btn:active{ transform: translateY(0); }
.cta-btn.primary{
background: linear-gradient(135deg,#F4A6AB 0%, #E27D85 60%, #D85F69 100%);
color: #fff;
box-shadow: 0 10px 24px rgba(226,125,133,.42), inset 0 1px 0 rgba(255,255,255,.4);
}
.cta-btn.secondary{
background: linear-gradient(135deg,#A9DCD0 0%, #6FB6A8 60%, #4FA38F 100%);
color: #fff;
box-shadow: 0 10px 24px rgba(79,163,143,.36), inset 0 1px 0 rgba(255,255,255,.4);
}
/* ===== mobile sticky CTA bar (visible on phones) ===== */
.mobile-cta{
position: sticky;
bottom: 0;
z-index: 15;
display: flex;
gap: 10px;
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 30%, rgba(255,255,255,1) 100%);
}
.mobile-cta .cta-btn{ padding: 12px 10px; font-size: 14px; }
@media (min-width: 920px){ .mobile-cta{ display:none; } }
/* ===== form section (continuous with about-wrap, no break) ===== */
.form-wrap{
width: 100%;
max-width: 480px;
margin: 0 auto;
padding: 56px 22px 64px;
position: relative;
background: #fff;
border-radius: 0;
}
@media (min-width: 481px){
.form-wrap{
border-radius: 0;
box-shadow: none;
margin-top: 0;
}
}
.form-wrap h2{
font-family: "Shippori Mincho", "Noto Serif JP", serif;
font-size: 28px;
text-align: center;
margin: 0 0 6px;
background: linear-gradient(180deg,#F4A1A6 0%, #E27D85 60%, #D55F69 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
letter-spacing:.04em;
}
.form-wrap .lead{
text-align:center; color:#6E6E6E; font-size: 14px; margin: 0 0 28px;
letter-spacing:.02em;
}
.form-wrap label{
display:block; font-size: 13px; font-weight: 600; color: #555; margin: 14px 0 6px;
}
.form-wrap input, .form-wrap textarea, .form-wrap select{
width: 100%; padding: 13px 14px;
border: 1px solid #E8DDD9; border-radius: 12px;
background: #FFFBFA; color: #2a2a2a;
font-family: inherit; font-size: 16px; /* 16px = iOS で自動ズームを抑制 */
transition: border-color .15s ease, box-shadow .15s ease;
}
.form-wrap input:focus, .form-wrap textarea:focus, .form-wrap select:focus{
outline: none; border-color: #E27D85;
box-shadow: 0 0 0 3px rgba(226,125,133,.18);
}
.form-wrap textarea{ min-height: 120px; resize: vertical; }
.form-wrap .submit-row{ margin-top: 26px; }
.form-wrap .submit-row .cta-btn{ font-size: 15px; padding: 16px; }
/* ===== LINE friend-add card (alternative contact) ===== */
.line-card{
margin-top: 36px;
padding: 32px 22px 26px;
background:
radial-gradient(420px 180px at 100% 0%, rgba(123,211,137,.18) 0%, transparent 60%),
linear-gradient(180deg, #fff 0%, #F4FBF6 100%);
border: 1px solid rgba(6,199,85,.20);
border-radius: 18px;
box-shadow: 0 14px 30px rgba(6,199,85,.10), 0 2px 6px rgba(0,0,0,.03);
text-align: center;
position: relative;
}
.line-card__divider{
position: absolute;
top: -12px; left: 50%;
transform: translateX(-50%);
display: flex; align-items: center; gap: 10px;
background: transparent;
width: max-content;
}
.line-card__divider::before,
.line-card__divider::after{
content: "";
width: 28px; height: 1px;
background: rgba(6,199,85,.4);
}
.line-card__divider span{
background: #fff;
padding: 4px 14px;
font-size: 11px;
font-weight: 700;
letter-spacing: .24em;
color: #4FA38F;
border: 1px solid rgba(6,199,85,.25);
border-radius: 999px;
}
.line-card__icon{
margin: 6px auto 12px;
width: 56px; height: 56px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg,#7BD389 0%, #4FC267 60%, #06C755 100%);
color: #fff;
box-shadow: 0 8px 18px rgba(6,199,85,.32), inset 0 1px 0 rgba(255,255,255,.4);
}
.line-card__lead{
font-family: "Shippori Mincho", "Noto Serif JP", serif;
font-size: 16px;
font-weight: 700;
color: #2A2A2A;
margin: 0 0 6px;
line-height: 1.6;
letter-spacing: .02em;
}
.line-card__sub{
font-size: 13px;
color: #555;
line-height: 1.7;
margin: 0 0 18px;
}
.line-card__btn{
display: inline-flex;
align-items: center; justify-content: center;
gap: 10px;
padding: 14px 26px;
border-radius: 999px;
background: linear-gradient(135deg,#7BD389 0%, #4FC267 60%, #06C755 100%);
color: #fff;
text-decoration: none;
font-weight: 700;
font-size: 15px;
letter-spacing: .04em;
box-shadow: 0 12px 28px rgba(6,199,85,.40), inset 0 1px 0 rgba(255,255,255,.4);
transition: transform .15s ease, filter .15s ease, box-shadow .2s ease;
position: relative;
overflow: hidden;
isolation: isolate;
}
.line-card__btn:hover{ transform: translateY(-1px); filter: brightness(1.06); }
.line-card__btn .arr{
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px;
border-radius: 50%;
background: rgba(255,255,255,.22);
font-size: 13px;
transition: transform .2s ease;
}
.line-card__btn:hover .arr{ transform: translateX(3px); }
/* sweeping shine */
.line-card__btn::before{
content: "";
position: absolute; top: 0; left: -60%;
width: 50%; height: 100%;
background: linear-gradient(110deg,
rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
transform: skewX(-20deg);
animation: ctaShine 3.4s ease-in-out infinite;
z-index: 1;
}
.line-card__btn > *{ position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce){
.line-card__btn::before{ display: none; }
}
/* ===== About / Concerns / Solutions section ===== */
.about-wrap{
width: 100%;
max-width: 480px;
margin: 0 auto;
padding: 0 22px;
position: relative;
background: #fff;
}
@media (min-width: 481px){
.about-wrap{
box-shadow: 0 30px 80px rgba(70,50,80,.12), 0 6px 20px rgba(0,0,0,.05);
margin-top: -1px;
}
}
/* eyebrow strip with key benefits */
.keystrip{
margin: 0 -22px;
padding: 22px 22px 26px;
background: linear-gradient(180deg, #FFF6F4 0%, #F4FAF7 100%);
border-top: 1px solid rgba(226,125,133,.10);
text-align: center;
}
.keystrip .pills{
display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
margin-bottom: 12px;
}
.keystrip .pill{
font-size: 12px; letter-spacing:.06em; font-weight: 700;
padding: 5px 12px; border-radius: 999px;
background: #fff;
color: #E27D85;
border: 1px solid rgba(226,125,133,.25);
box-shadow: 0 2px 6px rgba(226,125,133,.08);
}
.keystrip .pill.teal{ color:#4FA38F; border-color: rgba(79,163,143,.28); }
.keystrip .lead{
font-family: "Shippori Mincho", "Noto Serif JP", serif;
font-size: 16px; line-height: 1.7; color:#2A2A2A;
margin: 6px 0 0;
}
.keystrip .lead em{
font-style: normal; color:#E27D85; font-weight: 700;
}
/* Section heading */
.sec-h{
font-family: "Shippori Mincho", "Noto Serif JP", serif;
text-align: center;
margin: 36px 0 18px;
}
.sec-h .kicker{
display:block; font-size: 12px; letter-spacing: .32em;
color:#B97A82; font-weight: 700;
font-family: system-ui, sans-serif;
}
.sec-h h2{
font-size: 22px; font-weight: 700; color:#2A2A2A;
margin: 6px 0 0; line-height: 1.5;
letter-spacing: .02em;
}
.sec-h h2 em{
font-style: normal;
background: linear-gradient(180deg,#F4A1A6 0%, #E27D85 60%, #D55F69 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.sec-h::after{
content: "";
display:block;
width: 36px; height: 2px;
margin: 14px auto 0;
background: linear-gradient(90deg, #F4A6AB, #9ED5C8);
border-radius: 2px;
}
/* Lead body copy */
.body-copy{
font-size: 14px;
line-height: 1.95;
color: #3a3a3a;
text-wrap: pretty;
letter-spacing: .02em;
}
.body-copy + .body-copy{ margin-top: 14px; }
/* animated left-to-right underline emphasis */
.body-copy .mark{
position: relative;
display: inline;
font-weight: 700;
color: #2A2A2A;
background-image: linear-gradient(#FFE0DE, #FFE0DE);
background-repeat: no-repeat;
background-position: 0 88%;
background-size: 0% 38%;
transition: background-size .9s cubic-bezier(.6,.2,.2,1);
padding: 0 2px;
}
.body-copy .mark.teal{
background-image: linear-gradient(#CFEEE5, #CFEEE5);
}
.body-copy .mark.in{
background-size: 100% 38%;
}
/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
.body-copy .mark{ transition: none; background-size: 100% 38%; }
}
/* pull quote */
.pull{
margin: 30px -4px 22px;
padding: 18px 18px 18px 22px;
border-left: 3px solid #E27D85;
background: linear-gradient(90deg, #FFF6F4 0%, rgba(255,255,255,0) 100%);
border-radius: 0 12px 12px 0;
font-family: "Shippori Mincho", "Noto Serif JP", serif;
font-size: 15px; line-height: 1.75; color:#2A2A2A;
font-weight: 600;
}
/* checklist of concerns */
.check-list{
list-style: none; padding: 0;
margin: 14px 0 0;
display: flex; flex-direction: column; gap: 10px;
}
.check-list li{
display: flex; align-items: flex-start; gap: 12px;
padding: 14px 14px;
background: #FFFBFA;
border: 1px solid #F0E2DF;
border-radius: 12px;
font-size: 14.5px; line-height: 1.6; color:#3a3a3a;
}
.check-list .box{
flex-shrink: 0;
width: 22px; height: 22px;
border-radius: 6px;
border: 1.5px solid #E27D85;
background: #fff;
display: flex; align-items: center; justify-content: center;
margin-top: 1px;
color: #E27D85;
font-weight: 800; font-size: 14px; line-height: 1;
}
.check-list .box::before{
content: "\2713"; /* check mark */
}
/* reasons (numbered cards) */
.reasons{ display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }
.reason{
position: relative;
padding: 22px 18px 20px;
border-radius: 16px;
background: #fff;
border: 1px solid rgba(226,125,133,.18);
box-shadow: 0 14px 30px rgba(214,140,142,.10), 0 2px 6px rgba(0,0,0,.03);
}
.reason .num{
position: absolute;
top: -16px; left: 16px;
width: 44px; height: 44px;
border-radius: 50%;
background: linear-gradient(135deg,#F4A6AB 0%, #E27D85 60%, #D85F69 100%);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-family: "Shippori Mincho", serif;
font-weight: 800; font-size: 20px;
box-shadow: 0 8px 18px rgba(226,125,133,.4), inset 0 1px 0 rgba(255,255,255,.4);
}
.reason:nth-child(2) .num{ background: linear-gradient(135deg,#A9DCD0 0%, #6FB6A8 60%, #4FA38F 100%); box-shadow: 0 8px 18px rgba(79,163,143,.4), inset 0 1px 0 rgba(255,255,255,.4); }
.reason:nth-child(3) .num{ background: linear-gradient(135deg,#F4C28A 0%, #E69356 100%); box-shadow: 0 8px 18px rgba(230,147,86,.4), inset 0 1px 0 rgba(255,255,255,.4); }
.reason h3{
margin: 8px 0 8px;
padding-left: 52px;
font-family: "Shippori Mincho", "Noto Serif JP", serif;
font-size: 16px; font-weight: 700; color:#2A2A2A;
line-height: 1.5;
letter-spacing: .02em;
}
.reason p{
margin: 0;
font-size: 14.5px; line-height: 1.85; color:#4a4a4a;
letter-spacing: .015em;
}
.reason .stat{
margin-top: 12px;
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
background: #FFF1EE; color: #E27D85;
font-size: 12px; font-weight: 700;
letter-spacing: .04em;
}
.about-wrap .end-spacer{ height: 24px; }
/* ===== Why-chosen (5 reasons) section ===== */
.why-chosen{
margin: 24px -22px 0;
padding: 40px 22px 36px;
background:
radial-gradient(800px 360px at 50% 0%, #FFEFEC 0%, transparent 60%),
linear-gradient(180deg, #FFFAF8 0%, #F4FAF7 100%);
border-top: 1px solid rgba(226,125,133,.10);
}
.why-chosen .badge{
margin: 0 auto 14px;
width: max-content;
padding: 6px 14px;
background: linear-gradient(135deg,#F4A6AB,#E27D85);
color: #fff;
font-size: 12px; letter-spacing: .24em; font-weight: 700;
border-radius: 999px;
box-shadow: 0 8px 18px rgba(226,125,133,.30);
}
.why-chosen h2.title{
font-family: "Shippori Mincho", "Noto Serif JP", serif;
text-align: center;
font-size: 21px; font-weight: 700; color:#2A2A2A;
line-height: 1.6;
letter-spacing: .02em;
margin: 0;
}
.why-chosen h2.title em{
font-style: normal; color: #E27D85;
font-size: 28px;
}
.why-chosen h2.title .br-name{
display: inline-block;
background: linear-gradient(180deg,#F4A1A6 0%, #E27D85 60%, #D55F69 100%);
-webkit-background-clip:text; background-clip:text; color: transparent;
font-weight: 800;
}
.why-chosen .intro{
font-size: 14.5px; line-height: 1.95; color:#3a3a3a;
margin: 22px 0 0;
text-wrap: pretty;
}
.why-chosen .intro + .intro{ margin-top: 12px; }
.why-chosen .sub-h{
margin: 30px 0 14px;
text-align: center;
font-family: "Shippori Mincho", serif;
font-size: 17px;
font-weight: 700;
color: #2A2A2A;
}
.why-chosen .sub-h::before,
.why-chosen .sub-h::after{
content: "";
display: inline-block;
width: 18px; height: 2px;
background: #E27D85;
vertical-align: middle;
margin: 0 10px;
border-radius: 2px;
}
.why-chosen .sub-h em{
font-style: normal; color:#E27D85;
}
.why-list{
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 10px;
}
.why-list li{
display: flex; gap: 12px;
padding: 14px 14px 14px 12px;
background: #fff;
border: 1px solid rgba(226,125,133,.18);
border-radius: 14px;
box-shadow: 0 8px 20px rgba(214,140,142,.08);
font-size: 14.5px; line-height: 1.7; color: #3a3a3a;
text-wrap: pretty;
}
.why-list li .n{
flex-shrink: 0;
width: 28px; height: 28px;
border-radius: 50%;
background: linear-gradient(135deg,#F4A6AB,#E27D85);
color: #fff;
font-family: "Shippori Mincho", serif;
font-weight: 800; font-size: 14px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 10px rgba(226,125,133,.32), inset 0 1px 0 rgba(255,255,255,.4);
margin-top: 1px;
}
.why-list li:nth-child(2) .n{ background: linear-gradient(135deg,#A9DCD0,#4FA38F); box-shadow: 0 4px 10px rgba(79,163,143,.32), inset 0 1px 0 rgba(255,255,255,.4); }
.why-list li:nth-child(3) .n{ background: linear-gradient(135deg,#F4C28A,#E69356); box-shadow: 0 4px 10px rgba(230,147,86,.32), inset 0 1px 0 rgba(255,255,255,.4); }
.why-list li:nth-child(4) .n{ background: linear-gradient(135deg,#C8B5E8,#7C6BB8); box-shadow: 0 4px 10px rgba(124,107,184,.32), inset 0 1px 0 rgba(255,255,255,.4); }
.why-chosen .closer{
margin: 28px 0 0;
padding: 18px 16px;
background: rgba(255,255,255,.7);
border: 1px solid rgba(226,125,133,.18);
border-radius: 14px;
font-size: 14.5px; line-height: 1.95; color:#3a3a3a;
text-wrap: pretty;
}
.why-chosen .closer .promise{
display: block;
margin-top: 10px;
font-family: "Shippori Mincho", serif;
font-weight: 700;
color: #E27D85;
}
/* ===== detailed 5 reasons (with image placeholders) ===== */
.detail-reasons{
margin: 36px -22px 0;
padding: 36px 22px 8px;
background: #fff;
}
.detail-reasons .sec-h2{
text-align:center;
margin: 0 0 24px;
}
.detail-reasons .sec-h2 .kicker{
display:block; font-size: 12px; letter-spacing: .32em;
color:#B97A82; font-weight: 700;
font-family: system-ui, sans-serif;
}
.detail-reasons .sec-h2 h2{
font-family: "Shippori Mincho", serif;
font-size: 20px; font-weight: 700; color:#2A2A2A;
margin: 6px 0 0; line-height: 1.55;
}
.detail-reasons .sec-h2 h2 em{
font-style:normal;
background: linear-gradient(180deg,#F4A1A6 0%, #E27D85 60%, #D55F69 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.dcard{
margin-top: 22px;
background: #fff;
border: 1px solid rgba(226,125,133,.18);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 14px 30px rgba(214,140,142,.10), 0 2px 6px rgba(0,0,0,.03);
}
.dcard .ph{
position: relative;
aspect-ratio: 16/9;
background:
repeating-linear-gradient(135deg, #FBE9E6 0 12px, #FFF6F4 12px 24px);
display:flex; align-items:center; justify-content:center;
color:#B97A82; font-size: 12px; letter-spacing:.18em; font-weight:700;
}
.dcard .ph.has-img::after{ display:none }
.dcard .ph::after{
content: "IMAGE PLACEHOLDER";
background: rgba(255,255,255,.7);
padding: 6px 12px; border-radius: 999px;
border: 1px dashed rgba(226,125,133,.4);
}
.dcard:nth-of-type(2) .ph{ background: repeating-linear-gradient(135deg, #DCF1EB 0 12px, #F4FBF8 12px 24px); color:#3F8C7B; }
.dcard:nth-of-type(3) .ph{ background: repeating-linear-gradient(135deg, #FBE5D2 0 12px, #FFF7EE 12px 24px); color:#B47744; }
.dcard:nth-of-type(4) .ph{ background: repeating-linear-gradient(135deg, #E1D8F2 0 12px, #F6F2FB 12px 24px); color:#6B5BA6; }
.dcard:nth-of-type(5) .ph{ background: repeating-linear-gradient(135deg, #E3EAF5 0 12px, #F4F8FD 12px 24px); color:#4A6699; }
.dcard .body{ padding: 20px 18px 22px; }
.dcard .num-line{
display:flex; align-items:center; gap:10px; margin-bottom: 8px;
}
.dcard .num-line .n{
width: 30px; height: 30px; border-radius:50%;
background: linear-gradient(135deg,#F4A6AB,#E27D85);
color:#fff; font-family: "Shippori Mincho", serif; font-weight:800;
display:flex; align-items:center; justify-content:center;
font-size: 15px;
box-shadow: 0 4px 10px rgba(226,125,133,.32), inset 0 1px 0 rgba(255,255,255,.4);
flex-shrink: 0;
}
.dcard:nth-of-type(2) .num-line .n{ background: linear-gradient(135deg,#A9DCD0,#4FA38F); box-shadow: 0 4px 10px rgba(79,163,143,.32), inset 0 1px 0 rgba(255,255,255,.4); }
.dcard:nth-of-type(3) .num-line .n{ background: linear-gradient(135deg,#F4C28A,#E69356); box-shadow: 0 4px 10px rgba(230,147,86,.32), inset 0 1px 0 rgba(255,255,255,.4); }
.dcard:nth-of-type(4) .num-line .n{ background: linear-gradient(135deg,#C8B5E8,#7C6BB8); box-shadow: 0 4px 10px rgba(124,107,184,.32), inset 0 1px 0 rgba(255,255,255,.4); }
.dcard:nth-of-type(5) .num-line .n{ background: linear-gradient(135deg,#9DBCEB,#4F7AC2); box-shadow: 0 4px 10px rgba(79,122,194,.32), inset 0 1px 0 rgba(255,255,255,.4); }
.dcard .num-line .label{
font-size: 11px; letter-spacing: .2em; color:#B97A82; font-weight:700;
}
.dcard h3{
margin: 0 0 12px;
font-family:"Shippori Mincho", serif;
font-size: 17px; font-weight: 700; line-height: 1.55;
color:#2A2A2A;
}
.dcard p{
margin: 0; font-size: 14.5px; line-height: 1.9; color:#4a4a4a;
text-wrap: pretty;
}
/* ===== Staff Voices ===== */
.staff-voices{
margin: 36px -22px 0;
padding: 44px 22px 36px;
background:
radial-gradient(620px 260px at 50% 0%, #FFF6F4 0%, transparent 65%),
#FFFCFB;
border-top: 1px solid rgba(226,125,133,.10);
}
.staff-voices .sv-head{
display: block;
text-align: center;
margin: 0 0 28px;
}
.staff-voices .sv-head .kicker{
display: block;
font-size: 12px; letter-spacing: .32em; color:#B97A82; font-weight:700;
line-height: 1.6;
font-family: system-ui, sans-serif;
}
.staff-voices .sv-head h2{
display: block;
margin: 8px 0 0;
padding: 0;
font-family:"Shippori Mincho", "Noto Serif JP", serif;
font-size: 22px; font-weight: 700; color:#2A2A2A;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
letter-spacing: .02em;
}
.staff-voices .sv-head::after{
content: "";
display: block;
width: 36px; height: 2px;
margin: 14px auto 0;
background: linear-gradient(90deg, #F4A6AB, #9ED5C8);
border-radius: 2px;
}
.sv-card{
margin-top: 28px;
}
.sv-card + .sv-card{ margin-top: 44px; }
/* default = mobile-first stacked layout (photo on top, quote below) */
.sv-hero{
position: relative;
display: block;
}
.sv-hero .photo{
width: 100%;
aspect-ratio: 4/3;
background-size: cover;
background-position: center 25%;
border-radius: 14px;
position: relative;
overflow: hidden;
}
/* English script font for "Style" signature */
.script-style{
font-family: "Allura", "Brush Script MT", cursive;
font-weight: 400;
color: #2A2A2A;
line-height: 1;
letter-spacing: -.01em;
}
.sv-hero .photo .badge{
position: absolute;
top: 14px; left: 14px;
background: #fff;
border: 1px solid rgba(226,125,133,.25);
padding: 8px 14px;
font-size: 11.5px;
line-height: 1.5;
font-weight: 600;
letter-spacing: .04em;
color:#3a3a3a;
border-radius: 8px;
box-shadow: 0 6px 14px rgba(214,140,142,.14);
z-index: 2;
}
.sv-hero .photo .badge .role{ display:block; font-size: 11px; color:#6e6e6e; font-weight: 500; }
.sv-hero .photo .badge .yrs{ display:block; margin-top:2px; }
.sv-hero .photo .script{
position: absolute;
right: 16px; bottom: 8px;
font-size: 44px;
pointer-events: none;
z-index: 1;
opacity: .85;
color: #fff;
text-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.sv-hero .quote-card{
position: relative;
background: #fff;
border-radius: 14px;
padding: 30px 20px 24px;
margin: -28px 14px 14px;
z-index: 3;
box-shadow: 0 14px 30px rgba(214,140,142,.14), 0 2px 6px rgba(0,0,0,.04);
border: 1px solid rgba(226,125,133,.12);
}
.sv-hero .quote-card::before{
content: "\201C";
position: absolute; top: -10px; left: 14px;
font-family: Georgia, serif;
font-size: 56px; line-height: 1;
color: #E27D85;
font-weight: 400;
}
.sv-hero .quote-card::after{
content: "\201D";
position: absolute; bottom: -28px; right: 14px;
font-family: Georgia, serif;
font-size: 56px; line-height: 1;
color: #E27D85;
}
.sv-hero .quote-card .headline{
font-family:"Shippori Mincho", serif;
font-size: 19px; font-weight: 700;
line-height: 1.55; color:#2A2A2A;
margin: 0 0 14px;
text-wrap: pretty;
}
.sv-hero .quote-card .headline em{
font-style: normal; color:#E27D85;
font-size: 22px;
letter-spacing: .02em;
}
.sv-hero .quote-card .body{
margin: 0;
font-size: 13.5px; line-height: 1.95; color:#3a3a3a;
text-wrap: pretty;
}
.sv-hero .quote-card .body em{
font-style: normal; color:#E27D85; font-weight: 700;
background: linear-gradient(180deg, transparent 60%, rgba(226,125,133,.18) 60%);
padding: 0 2px;
}
/* feature cards under hero */
.sv-feats{
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 28px; /* clearance under the closing quote " of quote-card */
}
.sv-feat{
display: flex; align-items: center; gap: 10px;
background: #fff;
border: 1px solid rgba(226,125,133,.14);
border-radius: 12px;
padding: 12px 12px;
box-shadow: 0 6px 16px rgba(214,140,142,.08);
}
.sv-feat .ico{
flex-shrink: 0;
width: 44px; height: 44px;
display:flex; align-items:center; justify-content:center;
font-size: 26px;
color: #E27D85;
}
.sv-feat--green .ico{ color: #4FA38F; }
.sv-feat .ico img{ width: 100%; height: 100%; object-fit: contain; }
.sv-feat .txt{
font-size: 12.5px; line-height: 1.65; color:#3a3a3a;
text-wrap: pretty;
}
.sv-feat .txt em{
font-style: normal; font-weight: 700; color:#E27D85;
}
.sv-feat--green .txt em{ color:#4FA38F; }
/* before / current panel */
.sv-compare{
margin-top: 12px;
background: linear-gradient(180deg, #FFF7F5 0%, #FDEEEC 100%);
border: 1px solid rgba(226,125,133,.18);
border-radius: 14px;
padding: 16px 14px 18px;
}
.sv-compare .title{
text-align: center;
font-family:"Shippori Mincho", serif;
font-size: 14.5px; font-weight: 700; color:#2A2A2A;
margin: 0 0 14px;
position: relative;
padding: 0 12px;
}
.sv-compare .title::before, .sv-compare .title::after{
content:""; display:inline-block; vertical-align: middle;
width: 28px; height: 1px; background: rgba(60,60,60,.35);
margin: 0 10px;
}
.sv-compare .row{
display: grid;
grid-template-columns: 1fr 26px 1fr;
align-items: center;
gap: 6px;
padding: 10px 0;
}
.sv-compare .row + .row{ border-top: 1px dashed rgba(226,125,133,.25); }
.sv-compare .cell{
text-align: center;
}
.sv-compare .cell .tag{
display:inline-block;
font-family: system-ui, sans-serif;
font-size: 11px; letter-spacing:.18em; font-weight:700;
color:#fff;
padding: 3px 10px;
border-radius: 4px;
margin-bottom: 6px;
}
.sv-compare .cell.before .tag{ background: #E89BA0; }
.sv-compare .cell.current .tag{ background: #4FA38F; }
.sv-compare .cell .lbl{
display:block; font-size: 12.5px; color:#555; margin-bottom: 2px;
}
.sv-compare .cell .num{
font-family:"Shippori Mincho", serif;
font-weight: 800;
line-height: 1;
color: #2A2A2A;
letter-spacing: -.01em;
}
.sv-compare .cell .num .big{ font-size: 30px; }
.sv-compare .cell .num .unit{ font-size: 14px; margin-left: 2px; }
.sv-compare .cell.before .num{ color: #C97077; }
.sv-compare .cell.current .num{ color: #3F8C7B; }
.sv-compare .arrows{
text-align: center;
color: #E27D85;
font-size: 14px; line-height: 1;
letter-spacing: 1px;
font-weight: 800;
}
/* ===== owner message ===== */
.owner{
margin: 36px -22px 0;
padding: 44px 22px 40px;
background:
radial-gradient(700px 280px at 50% 0%, #FFF1EE 0%, transparent 60%),
linear-gradient(180deg, #FFFAF8 0%, #F6F2EE 100%);
border-top: 1px solid rgba(226,125,133,.10);
}
.owner .kicker{
text-align:center; display:block;
font-size: 12px; letter-spacing: .32em; color:#B97A82; font-weight:700;
}
.owner h2{
font-family:"Shippori Mincho", serif;
text-align:center;
font-size: 22px; font-weight: 700; color:#2A2A2A;
line-height: 1.55; margin: 8px 0 22px;
}
.owner h2 em{ font-style:normal; color:#E27D85 }
.owner .lead-q{
font-family:"Shippori Mincho", serif;
text-align:center;
font-size: 17px; line-height: 1.7;
margin: 0 0 24px;
color:#2A2A2A; font-weight: 700;
}
.owner .lead-q em{
font-style:normal;
background: linear-gradient(180deg,#F4A1A6 0%, #E27D85 60%, #D55F69 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.owner p{
font-size: 14.5px; line-height: 1.95; color:#3a3a3a;
margin: 0 0 14px;
text-wrap: pretty;
}
.owner blockquote{
margin: 14px 0;
padding: 14px 16px;
background: rgba(255,255,255,.6);
border-left: 3px solid #E27D85;
border-radius: 0 12px 12px 0;
font-family:"Shippori Mincho", serif;
font-size: 14px; line-height:1.8; color:#2A2A2A;
}
.owner .signature{
margin-top: 26px;
padding-top: 18px;
border-top: 1px solid rgba(226,125,133,.18);
text-align: right;
font-family:"Shippori Mincho", serif;
}
.owner .signature .co{ font-size: 13px; color:#6e6e6e; letter-spacing:.04em; }
.owner .signature .name{
font-size: 18px; font-weight: 700; color:#2A2A2A;
margin-top: 4px;
}
.owner .signature .name .small{ font-size: 12px; color:#6e6e6e; font-weight: 500; margin-right:6px }
.owner .ext-link{
display:inline-flex; align-items:center; gap: 6px;
margin-top: 16px;
padding: 10px 14px;
border: 1px solid rgba(226,125,133,.4);
border-radius: 999px;
background: #fff;
color: #E27D85;
text-decoration: none;
font-size: 13px; font-weight: 700;
transition: background-color .15s ease, color .15s ease;
}
/* ====================================================== */
/* ===== 採用までの流れ (recruitment flow steps) ===== */
/* ====================================================== */
.recruit-flow{
margin: 0 -22px;
padding: 60px 22px 56px;
background:
radial-gradient(700px 280px at 50% 0%, #FFEFEC 0%, transparent 60%),
radial-gradient(500px 220px at 50% 100%, #FFF1ED 0%, transparent 65%),
linear-gradient(180deg, #FFFAF8 0%, #FCF4F1 100%);
border-top: 1px solid rgba(226,125,133,.10);
position: relative;
overflow: hidden;
}
/* corner decorative leaves (CSS-drawn) */
.recruit-flow::before,
.recruit-flow::after{
content: "";
position: absolute;
width: 110px; height: 110px;
background:
radial-gradient(circle at 30% 30%, rgba(244,166,171,.35), transparent 60%),
radial-gradient(circle at 70% 70%, rgba(169,220,208,.30), transparent 60%);
filter: blur(8px);
pointer-events: none;
}
.recruit-flow::before{ top: 12px; left: -20px; }
.recruit-flow::after { bottom: 12px; right: -20px; }
.recruit-flow .rf-head{
text-align: center;
margin-bottom: 44px;
position: relative;
}
.recruit-flow .rf-tag{
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 13px;
color: #6e6e6e;
letter-spacing: .04em;
font-weight: 500;
margin-bottom: 16px;
}
.recruit-flow .rf-tag::before,
.recruit-flow .rf-tag::after{
content: "";
width: 14px; height: 12px;
background: #F4A6AB;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.recruit-flow h2{
font-family: "Shippori Mincho", "Noto Serif JP", serif;
font-size: 32px;
font-weight: 800;
color: #6B4A40;
margin: 0 0 14px;
letter-spacing: .08em;
line-height: 1.25;
}
.recruit-flow h2::after{
content: "";
display: block;
width: 120px; height: 1px;
margin: 14px auto 0;
background: linear-gradient(90deg, transparent, rgba(214,140,142,.55), transparent);
}
.recruit-flow .rf-sub{
font-size: 13.5px;
color: #555;
line-height: 1.7;
margin: 0;
letter-spacing: .02em;
}
.recruit-flow .rf-steps{
list-style: none;
padding: 0;
margin: 0;
position: relative;
}
.rf-step{
position: relative;
display: flex;
align-items: flex-start;
gap: 18px;
padding: 0;
margin-bottom: 36px;
}
/* dashed connector line + arrowhead between consecutive steps */
.rf-step:not(:last-child)::after{
content: "";
position: absolute;
top: 104px;
left: 49px;
width: 0;
height: 26px;
border-left: 2px dashed currentColor;
opacity: .45;
}
.rf-step:not(:last-child) .rf-icon::after{
content: "";
position: absolute;
bottom: -34px;
left: 50%;
transform: translateX(-50%);
width: 0; height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 7px solid currentColor;
opacity: .55;
}
/* watercolor circle */
.rf-icon{
flex-shrink: 0;
width: 100px; height: 100px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.rf-icon i{
font-size: 36px;
color: inherit;
position: relative;
z-index: 1;
}
/* tiny sparkle decorations beside each circle */
.rf-icon .rf-spark{
position: absolute;
width: 10px; height: 10px;
background:
linear-gradient(transparent 4.5px, currentColor 4.5px 5.5px, transparent 5.5px),
linear-gradient(90deg, transparent 4.5px, currentColor 4.5px 5.5px, transparent 5.5px);
opacity: .55;
}
.rf-icon .sp-a{ top: -4px; right: -4px; }
.rf-icon .sp-b{ bottom: 8px; right: -10px; transform: scale(.7); }
/* color variants — watercolor texture via layered radial gradients */
.rf-step--pink{ color: #D85F69; }
.rf-step--pink .rf-icon{
background:
radial-gradient(circle at 25% 30%, rgba(255,200,205,.55) 0%, transparent 55%),
radial-gradient(circle at 75% 70%, rgba(244,166,171,.50) 0%, transparent 55%),
radial-gradient(circle at 50% 50%, rgba(255,235,236,.85) 0%, rgba(255,238,238,0) 70%);
}
.rf-step--green{ color: #4FA38F; }
.rf-step--green .rf-icon{
background:
radial-gradient(circle at 25% 30%, rgba(190,228,210,.55) 0%, transparent 55%),
radial-gradient(circle at 75% 70%, rgba(160,210,180,.50) 0%, transparent 55%),
radial-gradient(circle at 50% 50%, rgba(225,245,232,.85) 0%, rgba(225,245,232,0) 70%);
}
.rf-step--blue{ color: #5A88A8; }
.rf-step--blue .rf-icon{
background:
radial-gradient(circle at 25% 30%, rgba(190,215,235,.55) 0%, transparent 55%),
radial-gradient(circle at 75% 70%, rgba(160,195,225,.50) 0%, transparent 55%),
radial-gradient(circle at 50% 50%, rgba(225,238,248,.85) 0%, rgba(225,238,248,0) 70%);
}
.rf-step--teal{ color: #4FA39B; }
.rf-step--teal .rf-icon{
background:
radial-gradient(circle at 25% 30%, rgba(190,230,225,.55) 0%, transparent 55%),
radial-gradient(circle at 75% 70%, rgba(160,215,210,.50) 0%, transparent 55%),
radial-gradient(circle at 50% 50%, rgba(225,248,243,.85) 0%, rgba(225,248,243,0) 70%);
}
.rf-step--coral{ color: #E27D85; }
.rf-step--coral .rf-icon{
background:
radial-gradient(circle at 25% 30%, rgba(255,205,200,.55) 0%, transparent 55%),
radial-gradient(circle at 75% 70%, rgba(244,170,170,.50) 0%, transparent 55%),
radial-gradient(circle at 50% 50%, rgba(255,238,234,.85) 0%, rgba(255,238,234,0) 70%);
}
.rf-body{
flex: 1;
padding-top: 14px;
min-width: 0;
}
.rf-body h3{
font-family: "Shippori Mincho", "Noto Serif JP", serif;
font-size: 21px;
font-weight: 800;
margin: 0 0 10px;
color: inherit;
letter-spacing: .04em;
line-height: 1.3;
}
.rf-body h3 .rf-num{
display: inline-block;
margin-right: 4px;
font-weight: 800;
}
.rf-body p{
font-size: 14px;
line-height: 1.85;
color: #555;
margin: 0;
text-wrap: pretty;
}
/* closing line */
.recruit-flow .rf-closing{
text-align: center;
margin: 38px 0 0;
font-family: "Shippori Mincho", "Noto Serif JP", serif;
font-size: 16px;
color: #6B4A40;
font-weight: 700;
line-height: 1.85;
letter-spacing: .03em;
position: relative;
}
.recruit-flow .rf-closing em{
font-style: normal;
background: linear-gradient(180deg,#F4A1A6 0%, #E27D85 60%, #D55F69 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
font-size: 19px;
}
.recruit-flow .rf-closing .rf-heart{
color: #E27D85;
margin-left: 4px;
font-size: 18px;
vertical-align: -1px;
}
/* mobile fine-tuning (smaller circle, tighter gap) */
@media (max-width: 480px){
.recruit-flow{ padding: 52px 22px 48px; }
.recruit-flow h2{ font-size: 28px; }
.rf-step{ gap: 16px; margin-bottom: 30px; }
.rf-icon{ width: 90px; height: 90px; }
.rf-icon i{ font-size: 32px; }
.rf-step:not(:last-child)::after{
top: 94px; left: 44px; height: 22px;
}
.rf-step:not(:last-child) .rf-icon::after{ bottom: -28px; }
.rf-body{ padding-top: 10px; }
.rf-body h3{ font-size: 19px; }
.rf-body p{ font-size: 14.5px; }
}
/* ===== Recruit details (募集要項) ===== */
.recruit{
margin: 0 -22px;
padding: 44px 22px 44px;
background: #fff;
border-top: 1px solid rgba(226,125,133,.10);
}
.recruit .kicker{
text-align:center; display:block;
font-size: 12px; letter-spacing: .32em; color:#B97A82; font-weight:700;
}
.recruit h2.sec-title{
font-family:"Shippori Mincho", serif;
text-align:center;
font-size: 26px; font-weight: 700; color:#2A2A2A;
line-height: 1.4; margin: 8px 0 28px;
position: relative;
}
.recruit h2.sec-title::after{
content:""; display:block;
width: 36px; height: 3px; margin: 12px auto 0;
background: linear-gradient(90deg,#F4A1A6,#E27D85);
border-radius: 2px;
}
.recruit dl{
margin: 0; padding: 0;
border-top: 1px solid rgba(226,125,133,.18);
}
.recruit dt, .recruit dd{ margin: 0; padding: 14px 4px; }
.recruit dt{
font-family:"Shippori Mincho", serif;
font-size: 14px; font-weight: 700; color:#E27D85;
letter-spacing: .04em;
padding-bottom: 4px;
}
.recruit dd{
padding-top: 0; padding-bottom: 16px;
font-size: 14.5px; line-height: 1.85; color:#3a3a3a;
border-bottom: 1px solid rgba(226,125,133,.18);
text-wrap: pretty;
}
.recruit dd .note{
display:block;
font-size: 13px; color:#6e6e6e; margin-top: 4px;
}
.recruit dd ul{
margin: 4px 0 0; padding: 0; list-style: none;
}
.recruit dd ul li{
position: relative; padding-left: 14px;
margin: 4px 0;
}
.recruit dd ul li::before{
content: ""; position: absolute; left: 2px; top: 10px;
width: 5px; height: 5px; border-radius: 50%;
background: #E27D85;
}
.recruit dd .pay-line{
display: flex; align-items: baseline; gap: 8px;
padding: 8px 0;
}
.recruit dd .pay-line + .pay-line{ border-top: 1px dashed rgba(226,125,133,.2); }
.recruit dd .pay-line .role{
flex-shrink: 0; font-weight: 700; color:#2A2A2A; min-width: 5em;
}
.recruit dd .pay-line .amount{
font-family:"Shippori Mincho", serif;
font-weight: 700; color:#E27D85; font-size: 15px;
}
.charm{
margin-top: 32px;
padding: 22px 18px;
background: linear-gradient(180deg, #FFF7F5 0%, #FDEEEC 100%);
border: 1px solid rgba(226,125,133,.18);
border-radius: 16px;
}
.charm h3{
margin: 0 0 14px;
text-align:center;
font-family:"Shippori Mincho", serif;
font-size: 16px; font-weight:700; color:#2A2A2A;
}
.charm h3 em{ font-style:normal; color:#E27D85; }
.charm ul{ margin:0; padding:0; list-style:none; }
.charm li{
position: relative; padding: 8px 0 8px 26px;
font-size: 14px; line-height: 1.7; color:#3a3a3a;
border-bottom: 1px solid rgba(226,125,133,.14);
}
.charm li:last-child{ border-bottom: 0; }
.charm li::before{
content:""; position:absolute; left: 4px; top: 13px;
width: 14px; height: 14px;
background:
linear-gradient(135deg,#F4A6AB,#E27D85);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.charm li ul{ margin: 4px 0 0; }
.charm li ul li{
border: 0; padding: 2px 0 2px 14px;
font-size: 13px; color:#6e6e6e;
}
.charm li ul li::before{
content: "—"; background: none;
-webkit-mask: none; mask: none;
width: auto; height: auto; left: 0; top: 2px; color: #B97A82;
}
.recruit-cta{
margin-top: 28px;
padding: 20px 16px;
background: #FCFAF7;
border: 1px dashed rgba(226,125,133,.35);
border-radius: 14px;
}
.recruit-cta p{
margin: 0 0 8px;
font-size: 14px; line-height:1.85; color:#3a3a3a;
}
.recruit-cta p:last-child{ margin-bottom: 0; }
.recruit-cta .strong-line{
font-family:"Shippori Mincho", serif;
font-weight: 700; color:#2A2A2A;
font-size: 14px;
}
.recruit-cta .quotes{
margin: 10px 0;
padding: 12px 14px;
background: #fff;
border-radius: 10px;
font-size: 13.5px; line-height: 1.85; color:#555;
}
.recruit-cta .quotes .q{ display:block; }
.recruit-cta .quotes .q + .q{ margin-top: 4px; }
/* ===== FAQ ===== */
.faq{
margin: 0 -22px;
padding: 44px 22px 44px;
background: linear-gradient(180deg, #FFF9F7 0%, #FCF4F1 100%);
border-top: 1px solid rgba(226,125,133,.10);
}
.faq .kicker{
text-align:center; display:block;
font-size: 12px; letter-spacing: .32em; color:#B97A82; font-weight:700;
}
.faq h2.sec-title{
font-family:"Shippori Mincho", serif;
text-align:center;
font-size: 24px; font-weight: 700; color:#2A2A2A;
line-height: 1.4; margin: 8px 0 28px;
}
.faq h2.sec-title::after{
content:""; display:block;
width: 36px; height: 3px; margin: 12px auto 0;
background: linear-gradient(90deg,#F4A1A6,#E27D85);
border-radius: 2px;
}
.faq-item{
background: #fff;
border: 1px solid rgba(226,125,133,.18);
border-radius: 14px;
margin-bottom: 12px;
overflow: hidden;
box-shadow: 0 6px 16px rgba(214,140,142,.08);
}
.faq-item[open]{
border-color: rgba(226,125,133,.4);
box-shadow: 0 10px 24px rgba(214,140,142,.14);
}
.faq-item summary{
list-style: none;
cursor: pointer;
padding: 16px 48px 16px 16px;
position: relative;
display: flex; align-items: flex-start; gap: 10px;
font-family:"Shippori Mincho", serif;
font-size: 14.5px; font-weight: 700; color:#2A2A2A;
line-height: 1.55;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .qmark{
flex-shrink: 0;
width: 26px; height: 26px; border-radius: 50%;
background: linear-gradient(135deg,#F4A6AB,#E27D85);
color: #fff; font-weight: 800;
font-family: system-ui, sans-serif;
font-size: 14px;
display:flex; align-items:center; justify-content:center;
box-shadow: 0 3px 8px rgba(226,125,133,.32), inset 0 1px 0 rgba(255,255,255,.4);
}
.faq-item summary .toggle{
position: absolute; right: 16px; top: 50%;
transform: translateY(-50%);
width: 22px; height: 22px;
display:flex; align-items:center; justify-content:center;
transition: transform .25s ease;
color: #E27D85;
}
.faq-item summary .toggle::before,
.faq-item summary .toggle::after{
content:""; position:absolute; background: currentColor;
border-radius: 2px;
}
.faq-item summary .toggle::before{ width: 12px; height: 2px; }
.faq-item summary .toggle::after{ width: 2px; height: 12px; transition: transform .25s ease; }
.faq-item[open] summary .toggle::after{ transform: scaleY(0); }
.faq-item .a{
padding: 0 16px 18px 52px;
border-top: 1px dashed rgba(226,125,133,.22);
margin-top: 0;
}
.faq-item .a::before{
content: "A";
display:inline-flex; align-items:center; justify-content:center;
width: 22px; height: 22px; border-radius: 50%;
background: #FFF1ED; color:#E27D85;
font-family: system-ui, sans-serif; font-weight: 800; font-size: 12px;
margin: 14px 8px 6px -34px; vertical-align: middle;
}
.faq-item .a p{
margin: 8px 0 0;
font-size: 14px; line-height: 1.95; color:#3a3a3a;
text-wrap: pretty;
}
.faq-item .a ul{
margin: 8px 0; padding: 0; list-style: none;
}
.faq-item .a ul li{
position: relative; padding-left: 14px;
margin: 4px 0;
font-size: 14px; line-height: 1.75; color:#3a3a3a;
}
.faq-item .a ul li::before{
content:""; position:absolute; left: 2px; top: 9px;
width: 5px; height: 5px; border-radius: 50%;
background: #E27D85;
}
.faq-item .a .pointer{
display:block;
margin-top: 10px;
padding: 10px 12px;
background: linear-gradient(180deg, #FFF7F5 0%, #FDEEEC 100%);
border-left: 3px solid #E27D85;
border-radius: 0 10px 10px 0;
font-family:"Shippori Mincho", serif;
font-weight: 700; font-size: 14px; color:#2A2A2A;
line-height: 1.7;
}
.faq-item .a .pointer .arrow{
color: #E27D85; margin-right: 4px;
}
/* ===== triple CTA stack (post-About / post-Pillars) with shine + pulse ===== */
.dual-cta{
margin: 36px 0 8px;
display: flex;
flex-direction: column;
gap: 12px;
}
.dual-cta .ab{
position: relative;
overflow: hidden;
display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 20px 16px;
border-radius: 999px;
text-decoration: none;
font-weight: 700;
font-size: 16px;
letter-spacing: .04em;
color: #fff;
transition: transform .15s ease, box-shadow .2s ease, filter .15s ease;
isolation: isolate;
}
.dual-cta .ab .arr{
width: 26px; height: 26px;
font-size: 14px;
}
.dual-cta .ab.pink{
background: linear-gradient(135deg,#F4A6AB 0%, #E27D85 60%, #D85F69 100%);
box-shadow: 0 12px 28px rgba(226,125,133,.45), inset 0 1px 0 rgba(255,255,255,.4);
animation: ctaPulsePink 2.4s ease-in-out infinite;
}
.dual-cta .ab.line{
background: linear-gradient(135deg,#7BD389 0%, #4FC267 60%, #06C755 100%);
box-shadow: 0 12px 28px rgba(6,199,85,.4), inset 0 1px 0 rgba(255,255,255,.4);
animation: ctaPulseLine 2.4s ease-in-out infinite;
animation-delay: .6s;
}
.dual-cta .ab.apply{
background: linear-gradient(135deg,#FF8A6E 0%, #E25577 50%, #C03A6A 100%);
box-shadow: 0 14px 32px rgba(192,58,106,.5), inset 0 1px 0 rgba(255,255,255,.4);
animation: ctaPulseApply 2.4s ease-in-out infinite;
animation-delay: 1.2s;
font-size: 17px;
padding: 22px 16px;
}
.dual-cta .ab.apply::after{
content: "";
position: absolute;
inset: 3px;
border: 1.5px solid rgba(255,255,255,.4);
border-radius: 999px;
pointer-events: none;
}
.dual-cta .ab:hover{ transform: translateY(-2px); filter: brightness(1.05); }
.dual-cta .ab:active{ transform: translateY(0); }
/* sweeping shine */
.dual-cta .ab::before{
content: "";
position: absolute;
top: 0; left: -60%;
width: 50%; height: 100%;
background: linear-gradient(110deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,.55) 50%,
rgba(255,255,255,0) 100%);
transform: skewX(-20deg);
z-index: 1;
animation: ctaShine 3.2s ease-in-out infinite;
}
.dual-cta .ab.line::before{ animation-delay: 1.6s; }
.dual-cta .ab > *{ position: relative; z-index: 2; }
.dual-cta .ab .ico{
display:inline-flex; align-items:center; justify-content:center;
width: 22px; height: 22px;
}
.dual-cta .ab .arr{
display:inline-flex; align-items:center; justify-content:center;
width: 22px; height: 22px; border-radius: 50%;
background: rgba(255,255,255,.22);
transition: transform .2s ease;
font-size: 13px;
}
.dual-cta .ab:hover .arr{ transform: translateX(2px); }
@keyframes ctaShine{
0% { left: -60%; }
55% { left: 120%; }
100% { left: 120%; }
}
@keyframes ctaPulsePink{
0%, 100% { box-shadow: 0 10px 24px rgba(226,125,133,.42), inset 0 1px 0 rgba(255,255,255,.4); }
50% { box-shadow: 0 14px 32px rgba(226,125,133,.65), 0 0 0 6px rgba(226,125,133,.10), inset 0 1px 0 rgba(255,255,255,.5); }
}
@keyframes ctaPulseLine{
0%, 100% { box-shadow: 0 12px 28px rgba(6,199,85,.4), inset 0 1px 0 rgba(255,255,255,.4); }
50% { box-shadow: 0 16px 36px rgba(6,199,85,.55), 0 0 0 6px rgba(6,199,85,.10), inset 0 1px 0 rgba(255,255,255,.5); }
}
@keyframes ctaPulseApply{
0%, 100% { box-shadow: 0 14px 32px rgba(192,58,106,.5), inset 0 1px 0 rgba(255,255,255,.4); }
50% { box-shadow: 0 18px 40px rgba(192,58,106,.7), 0 0 0 8px rgba(226,85,119,.12), inset 0 1px 0 rgba(255,255,255,.5); }
}
@media (prefers-reduced-motion: reduce){
.dual-cta .ab{ animation: none; }
.dual-cta .ab::before{ display:none; }
}
/* ===== form: required marker, error states, alerts ===== */
.form-wrap label .req{
color: #E27D85;
font-weight: 700;
margin-left: 4px;
font-size: 12px;
}
.form-wrap input.error,
.form-wrap textarea.error,
.form-wrap select.error{
border-color: #E27D85;
background: #FFF6F4;
box-shadow: 0 0 0 3px rgba(226,125,133,.15);
}
.form-wrap .field-error{
display: none;
margin: 6px 0 0;
font-size: 13px;
color: #D85F69;
line-height: 1.5;
}
.form-wrap .field-error.show{ display: block; }
.form-wrap .privacy{
margin: 22px 0 0;
padding: 14px 16px;
background: #FCFAF7;
border-radius: 12px;
font-size: 13px;
line-height: 1.7;
color: #555;
}
.form-wrap .privacy a{ color: #E27D85; text-decoration: underline; }
.form-wrap .alert-error{
margin: 0 0 18px;
padding: 14px 16px;
border-radius: 12px;
background: #FFF1ED;
border: 1px solid rgba(226,125,133,.4);
color: #C84A56;
font-size: 14px;
line-height: 1.7;
}
.form-wrap .alert-error ul{
margin: 6px 0 0;
padding-left: 20px;
}
/* ===== global drawer menu (in-page navigation + CTAs) ===== */
.nav-drawer{
position: fixed;
inset: 0;
z-index: 100;
background: rgba(40,30,40,.55);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
opacity: 0;
visibility: hidden;
transition: opacity .25s ease, visibility .25s ease;
}
.nav-drawer.open{ opacity: 1; visibility: visible; }
.nav-drawer .panel{
position: absolute;
top: 0; right: 0;
width: min(360px, 88vw);
height: 100%;
background:
radial-gradient(420px 180px at 100% 0%, #FFF1ED 0%, transparent 60%),
linear-gradient(180deg, #fff 0%, #FFFAF8 60%, #FCF4F1 100%);
padding: 24px 26px 32px;
box-shadow: -10px 0 40px rgba(0,0,0,.22);
transform: translateX(100%);
transition: transform .35s cubic-bezier(.4,.0,.2,1);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.nav-drawer.open .panel{ transform: translateX(0); }
.nav-drawer .close{
position: absolute;
top: 14px; right: 14px;
width: 44px; height: 44px;
border: 0;
border-radius: 50%;
background: linear-gradient(135deg, #FFF1ED 0%, #FBE5E1 100%);
border: 1px solid rgba(226,125,133,.25);
color: #E27D85;
font-size: 22px;
line-height: 1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 10px rgba(214,140,142,.18);
transition: transform .15s ease, filter .15s ease;
}
.nav-drawer .close:hover{ transform: rotate(90deg); filter: brightness(1.05); }
.nav-drawer .nav-logo{
display: block;
width: 130px;
margin: 6px 0 22px;
filter: drop-shadow(0 4px 10px rgba(214,140,142,.15));
}
.nav-drawer .nav-sec{
margin: 18px 0 10px;
font-family: system-ui, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .32em;
color: #B97A82;
}
.nav-drawer .nav-sec:first-of-type{ margin-top: 4px; }
.nav-drawer ul{
list-style: none;
padding: 0; margin: 0 0 12px;
}
.nav-drawer li{
border-bottom: 1px solid rgba(226,125,133,.16);
}
.nav-drawer li:first-child{
border-top: 1px solid rgba(226,125,133,.16);
}
.nav-drawer li a{
display: flex;
align-items: center;
gap: 14px;
padding: 16px 6px;
color: #2A2A2A;
text-decoration: none;
font-family:"Shippori Mincho", "Noto Serif JP", serif;
font-weight: 700;
font-size: 15px;
line-height: 1.4;
letter-spacing: .02em;
transition: color .15s ease, background .2s ease;
}
.nav-drawer li a .num{
flex-shrink: 0;
font-family: "Shippori Mincho", serif;
font-size: 12px;
font-weight: 800;
color: #E27D85;
letter-spacing: .04em;
width: 28px;
}
.nav-drawer li a > span:nth-child(2){ flex: 1; }
.nav-drawer li a .arr{
color: #E27D85;
opacity: .6;
transition: transform .2s ease, opacity .2s ease;
font-size: 16px;
}
.nav-drawer li a:hover{
color: #E27D85;
background: linear-gradient(90deg, transparent 0%, rgba(255,241,237,.6) 100%);
}
.nav-drawer li a:hover .arr{ transform: translateX(4px); opacity: 1; }
/* CTA stack inside drawer */
.nav-drawer .nav-cta{
display: flex;
flex-direction: column;
gap: 10px;
}
.nav-drawer .nav-btn{
position: relative;
overflow: hidden;
display: flex;
align-items: center; justify-content: center;
gap: 10px;
padding: 16px 14px;
border-radius: 999px;
text-decoration: none;
color: #fff;
font-weight: 700;
font-size: 15px;
letter-spacing: .04em;
transition: transform .15s ease, filter .15s ease, box-shadow .2s ease;
isolation: isolate;
}
.nav-drawer .nav-btn .ico{
display: inline-flex;
align-items: center; justify-content: center;
width: 26px; height: 26px;
border-radius: 50%;
background: rgba(255,255,255,.22);
flex-shrink: 0;
}
.nav-drawer .nav-btn:hover{ transform: translateY(-1px); filter: brightness(1.06); }
.nav-drawer .nav-btn.pink{
background: linear-gradient(135deg,#F4A6AB 0%, #E27D85 60%, #D85F69 100%);
box-shadow: 0 8px 20px rgba(226,125,133,.40), inset 0 1px 0 rgba(255,255,255,.4);
}
.nav-drawer .nav-btn.line{
background: linear-gradient(135deg,#7BD389 0%, #4FC267 60%, #06C755 100%);
box-shadow: 0 8px 20px rgba(6,199,85,.36), inset 0 1px 0 rgba(255,255,255,.4);
}
.nav-drawer .nav-btn.apply{
background: linear-gradient(135deg,#FF8A6E 0%, #E25577 50%, #C03A6A 100%);
box-shadow: 0 10px 24px rgba(192,58,106,.50), inset 0 1px 0 rgba(255,255,255,.4);
font-weight: 800;
font-size: 16px;
padding: 18px 14px;
}
/* sweeping shine */
.nav-drawer .nav-btn::before{
content: "";
position: absolute; top:0; left: -60%;
width: 50%; height: 100%;
background: linear-gradient(110deg,
rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
transform: skewX(-20deg);
z-index: 1;
animation: ctaShine 3.4s ease-in-out infinite;
}
.nav-drawer .nav-btn.line::before{ animation-delay: 1s; }
.nav-drawer .nav-btn.apply::before{ animation-delay: 2s; }
.nav-drawer .nav-btn > *{ position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce){
.nav-drawer .nav-btn::before{ display: none; }
}
/* ===== thanks page ===== */
.thanks-wrap{
width: 100%;
max-width: 480px;
margin: 0 auto;
padding: 80px 28px 60px;
background: #fff;
text-align: center;
min-height: 100vh;
}
@media (min-width: 481px){
.thanks-wrap{
border-radius: 24px;
box-shadow: 0 30px 80px rgba(70,50,80,.12), 0 6px 20px rgba(0,0,0,.05);
margin-top: 28px;
min-height: auto;
}
}
.thanks-wrap .icon{
width: 80px; height: 80px;
margin: 0 auto 24px;
border-radius: 50%;
background: linear-gradient(135deg,#A9DCD0 0%, #6FB6A8 60%, #4FA38F 100%);
display: flex; align-items: center; justify-content: center;
color: #fff;
box-shadow: 0 14px 30px rgba(79,163,143,.34);
}
.thanks-wrap h1{
font-family:"Shippori Mincho", serif;
font-size: 26px;
font-weight: 700;
color: #2A2A2A;
margin: 0 0 14px;
letter-spacing: .04em;
}
.thanks-wrap .lead{
font-size: 14px;
line-height: 1.85;
color: #4a4a4a;
margin: 0 0 28px;
text-wrap: pretty;
}
.thanks-wrap .back{
display: inline-flex; align-items: center; gap: 8px;
padding: 14px 24px;
border-radius: 999px;
background: linear-gradient(135deg,#F4A6AB 0%, #E27D85 60%, #D85F69 100%);
color: #fff;
text-decoration: none;
font-weight: 700;
font-size: 14px;
box-shadow: 0 10px 24px rgba(226,125,133,.42);
transition: transform .15s ease, filter .15s ease;
}
.thanks-wrap .back:hover{ transform: translateY(-1px); filter: brightness(1.04); }
/* ===================================================== */
/* ===== PC enriched background decoration =========== */
/* ===================================================== */
.pc-deco{ display:none; pointer-events:none; }
@media (min-width: 920px){
/* PC: full-bleed watercolor salon illustration as fixed background */
body{
background:
/* soft white tint overlay for readability harmony */
linear-gradient(180deg, rgba(255,247,245,.30) 0%, rgba(244,250,247,.30) 100%),
url('../assets/bg-pc.jpg') center center / cover no-repeat;
background-attachment: fixed, fixed;
}
/* extra-soft dot grid (lower opacity since photo bg is already rich) */
body::before{
content:"";
position: fixed;
inset: 0;
background-image:
radial-gradient(circle, rgba(255,255,255,.30) 1px, transparent 1.5px);
background-size: 28px 28px;
background-position: 0 0;
pointer-events: none;
z-index: 0;
opacity: .45;
mix-blend-mode: overlay;
}
.pc-deco{
display: block;
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
overflow: hidden;
}
.pc-deco .orb{
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: .25; /* subtle — watercolor bg is the main visual */
mix-blend-mode: screen;
will-change: transform;
}
.pc-deco .orb-1{
width: 380px; height: 380px;
top: 8%; left: -80px;
background: radial-gradient(circle, rgba(244,166,171,.85) 0%, rgba(244,166,171,0) 70%);
animation: floatA 14s ease-in-out infinite;
}
.pc-deco .orb-2{
width: 320px; height: 320px;
top: 35%; right: -60px;
background: radial-gradient(circle, rgba(169,220,208,.85) 0%, rgba(169,220,208,0) 70%);
animation: floatB 16s ease-in-out infinite;
}
.pc-deco .orb-3{
width: 260px; height: 260px;
bottom: 12%; left: 4%;
background: radial-gradient(circle, rgba(255,205,170,.75) 0%, rgba(255,205,170,0) 70%);
animation: floatA 18s ease-in-out infinite reverse;
}
.pc-deco .orb-4{
width: 220px; height: 220px;
bottom: 18%; right: 8%;
background: radial-gradient(circle, rgba(200,181,232,.7) 0%, rgba(200,181,232,0) 70%);
animation: floatB 20s ease-in-out infinite;
animation-delay: -7s;
}
.pc-deco .orb-5{
width: 180px; height: 180px;
top: 50%; left: 38%;
background: radial-gradient(circle, rgba(255,235,170,.5) 0%, rgba(255,235,170,0) 70%);
animation: floatA 22s ease-in-out infinite;
animation-delay: -10s;
opacity: .35;
}
/* small twinkling sparkles */
.pc-deco .sparkle{
position: absolute;
width: 12px; height: 12px;
background:
linear-gradient(transparent 5px, rgba(255,255,255,.95) 5px 7px, transparent 7px),
linear-gradient(90deg, transparent 5px, rgba(255,255,255,.95) 5px 7px, transparent 7px);
filter: drop-shadow(0 0 6px rgba(255,200,160,.85));
animation: twinkle 3.6s ease-in-out infinite;
}
.pc-deco .sp-1{ top: 16%; left: 12%; animation-delay: 0s; }
.pc-deco .sp-2{ top: 68%; right: 18%; animation-delay: -1.2s; }
.pc-deco .sp-3{ top: 40%; left: 4%; animation-delay: -2.4s; }
/* keep stage above the decoration (do NOT include .side-cta here —
it must keep its position:fixed from its own media-query block) */
main.stage,
.about-wrap,
.form-wrap{
position: relative;
z-index: 5;
}
@keyframes floatA{
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(40px, -30px) scale(1.06); }
66% { transform: translate(-25px, 25px) scale(0.96); }
}
@keyframes floatB{
0%, 100% { transform: translate(0, 0) scale(1); }
40% { transform: translate(-35px, 20px) scale(1.08); }
75% { transform: translate(20px, -30px) scale(0.94); }
}
@keyframes twinkle{
0%, 100% { opacity: 0.2; transform: scale(.8) rotate(0deg); }
50% { opacity: 1; transform: scale(1.2) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce){
.pc-deco .orb,
.pc-deco .sparkle{ animation: none; }
}
}
/* mobile-specific font tweaks (readability boost on phones) */
@media (max-width: 480px){
body{ font-size: 16.5px; }
.body-copy{ font-size: 15.5px; line-height: 2; }
.pull{ font-size: 16px; }
.keystrip .lead{ font-size: 17px; }
.sec-h h2{ font-size: 23px; }
.form-wrap h2{ font-size: 26px; }
.form-wrap label{ font-size: 14px; }
.recruit dt{ font-size: 15px; }
.recruit dd .pay-line .amount{ font-size: 17px; }
.charm h3{ font-size: 17px; }
.faq-item summary{ font-size: 15.5px; }
.why-chosen h2.title{ font-size: 22px; }
.why-chosen h2.title em{ font-size: 30px; }
.dcard h3{ font-size: 18px; }
.owner h2{ font-size: 23px; }
.owner blockquote{ font-size: 15px; }
.sv-hero .quote-card .headline{ font-size: 19.5px; }
/* stack feat cards vertically on phones */
.sv-feats{ grid-template-columns: 1fr; gap: 8px; }
.sv-feat{ align-items: flex-start; }
}
/* ====================================================== */
/* ===== column section on main LP ===================== */
/* ====================================================== */
.columns{
width: 100%;
max-width: 480px;
margin: 0 auto;
padding: 56px 22px 56px;
background:
radial-gradient(620px 260px at 50% 0%, #FFF1ED 0%, transparent 65%),
linear-gradient(180deg, #FFFAF8 0%, #FCF4F1 100%);
border-top: 1px solid rgba(226,125,133,.10);
position: relative;
z-index: 5;
}
@media (min-width: 481px){
.columns{
box-shadow: 0 30px 80px rgba(70,50,80,.12), 0 6px 20px rgba(0,0,0,.05);
}
}
.columns .columns-head{
text-align: center;
margin-bottom: 28px;
}
.columns .columns-head .kicker{
display: block;
font-size: 12px; letter-spacing: .32em; color:#B97A82; font-weight: 700;
font-family: system-ui, sans-serif;
}
.columns .columns-head h2{
font-family:"Shippori Mincho", "Noto Serif JP", serif;
font-size: 22px; font-weight: 700; color:#2A2A2A;
margin: 8px 0 0; line-height: 1.5;
letter-spacing: .02em;
}
.columns .columns-head h2 em{
font-style: normal;
background: linear-gradient(180deg,#F4A1A6 0%, #E27D85 60%, #D55F69 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.columns .columns-head::after{
content: "";
display:block;
width: 36px; height: 2px;
margin: 14px auto 0;
background: linear-gradient(90deg, #F4A6AB, #9ED5C8);
border-radius: 2px;
}
.columns .columns-head .lead{
font-size: 13.5px; color:#555; line-height: 1.7;
margin: 16px 0 0;
}
.column-list{
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 14px;
}
.column-link{
display: flex; align-items: stretch; gap: 14px;
padding: 14px 14px;
background: #fff;
border: 1px solid rgba(226,125,133,.18);
border-radius: 14px;
box-shadow: 0 8px 20px rgba(214,140,142,.10), 0 2px 6px rgba(0,0,0,.03);
text-decoration: none;
color: #2A2A2A;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
position: relative;
}
.column-link:hover{
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(214,140,142,.18), 0 4px 10px rgba(0,0,0,.05);
border-color: rgba(226,125,133,.4);
}
.column-thumb{
flex-shrink: 0;
width: 76px;
align-self: stretch;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
color: #fff;
font-size: 26px;
}
.column-link[data-color="pink"] .column-thumb{ background: linear-gradient(135deg,#F4A6AB,#E27D85); }
.column-link[data-color="green"] .column-thumb{ background: linear-gradient(135deg,#A9DCD0,#4FA38F); }
.column-link[data-color="orange"] .column-thumb{ background: linear-gradient(135deg,#F4C28A,#E69356); }
.column-link[data-color="purple"] .column-thumb{ background: linear-gradient(135deg,#C8B5E8,#7C6BB8); }
.column-link[data-color="blue"] .column-thumb{ background: linear-gradient(135deg,#9DBCEB,#4F7AC2); }
.column-link[data-color="coral"] .column-thumb{ background: linear-gradient(135deg,#FFB07A,#E27D85); }
.column-body{
flex: 1;
display: flex; flex-direction: column;
min-width: 0;
}
.column-tag{
display: inline-block;
align-self: flex-start;
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
color: #B97A82;
background: #FFF1ED;
padding: 3px 10px;
border-radius: 999px;
margin-bottom: 6px;
}
.column-body h3{
font-family:"Shippori Mincho", "Noto Serif JP", serif;
font-size: 14px; font-weight: 700;
color: #2A2A2A;
margin: 0;
line-height: 1.55;
letter-spacing: .02em;
text-wrap: pretty;
}
.column-body .read-more{
margin-top: auto;
padding-top: 8px;
font-size: 11.5px;
color: #E27D85;
font-weight: 700;
letter-spacing: .04em;
}
/* ====================================================== */
/* ===== privacy notice on forms ====================== */
/* ====================================================== */
.form-wrap .privacy-consent{
margin: 16px 0 0;
text-align: center;
font-size: 13px;
color: #555;
line-height: 1.7;
}
.form-wrap .privacy-consent a{
color: #E27D85;
text-decoration: underline;
font-weight: 700;
}
.form-wrap .privacy-consent a:hover{ filter: brightness(1.08); }
/* ====================================================== */
/* ===== legal page (privacy policy) ==================== */
/* ====================================================== */
.legal-wrap{
width: 100%;
max-width: 720px;
margin: 0 auto;
padding: 60px 22px 60px;
background: #fff;
min-height: 100vh;
position: relative;
z-index: 5;
}
@media (min-width: 481px){
.legal-wrap{
border-radius: 22px 22px 0 0;
box-shadow: 0 30px 80px rgba(70,50,80,.12), 0 6px 20px rgba(0,0,0,.05);
margin-top: 28px;
min-height: auto;
}
}
.legal-head{
text-align: center;
margin-bottom: 36px;
border-bottom: 1px solid rgba(226,125,133,.18);
padding-bottom: 28px;
position: relative;
}
.legal-back{
display: inline-block;
font-size: 13px;
color: #B97A82;
text-decoration: none;
margin-bottom: 18px;
letter-spacing: .04em;
}
.legal-back:hover{ color: #E27D85; }
.legal-head .kicker{
display: block;
font-size: 12px; letter-spacing: .32em; color: #B97A82; font-weight: 700;
font-family: system-ui, sans-serif;
}
.legal-head h1{
font-family:"Shippori Mincho", "Noto Serif JP", serif;
font-size: 28px; font-weight: 700; color: #2A2A2A;
margin: 8px 0 14px;
letter-spacing: .04em;
}
.legal-head .legal-sub{
font-size: 13.5px;
line-height: 1.85;
color: #555;
margin: 0;
text-wrap: pretty;
}
.legal-body{ margin-bottom: 40px; }
.legal-body section{ margin-bottom: 28px; }
.legal-body h2{
font-family:"Shippori Mincho", "Noto Serif JP", serif;
font-size: 16px;
font-weight: 700;
color: #2A2A2A;
margin: 0 0 12px;
padding: 0 0 0 14px;
border-left: 3px solid #E27D85;
letter-spacing: .04em;
}
.legal-body p, .legal-body ul{
font-size: 14px;
line-height: 1.95;
color: #3a3a3a;
margin: 0 0 10px;
text-wrap: pretty;
}
.legal-body ul{
padding-left: 20px;
}
.legal-body ul li{ margin-bottom: 4px; }
.legal-contact{
margin-top: 12px;
padding: 14px 16px;
background: #FFF7F5;
border-radius: 10px;
border: 1px solid rgba(226,125,133,.14);
font-size: 13.5px;
line-height: 1.85;
}
.legal-updated{
text-align: right;
font-size: 12px;
color: #888;
margin-top: 24px;
}
.legal-foot{
text-align: center;
padding-top: 28px;
border-top: 1px solid rgba(226,125,133,.18);
}
.legal-back-btn{
display: inline-flex; align-items: center; gap: 8px;
padding: 14px 26px;
border-radius: 999px;
background: linear-gradient(135deg,#F4A6AB 0%, #E27D85 60%, #D85F69 100%);
color: #fff;
text-decoration: none;
font-weight: 700;
font-size: 14px;
box-shadow: 0 10px 24px rgba(226,125,133,.42);
transition: transform .15s ease, filter .15s ease;
}
.legal-back-btn:hover{ transform: translateY(-1px); filter: brightness(1.04); }
/* ====================================================== */
/* ===== article page (column article) ================ */
/* ====================================================== */
/* article pages inherit body bg (gradient on mobile, watercolor + orbs on PC) */
.article-stage{
width: 100%;
max-width: 480px;
margin: 0 auto;
background: #fff;
position: relative;
z-index: 5;
}
@media (min-width: 481px){
.article-stage{
border-radius: 22px 22px 0 0;
margin-top: 28px;
box-shadow: 0 30px 80px rgba(70,50,80,.12), 0 6px 20px rgba(0,0,0,.05);
}
}
.article{
padding: 50px 22px 28px;
}
.article-back{
display: inline-block;
font-size: 13px;
color: #B97A82;
text-decoration: none;
margin-bottom: 18px;
letter-spacing: .04em;
}
.article-back:hover{ color: #E27D85; }
.article-meta{
display: flex; align-items: center; gap: 12px;
margin-bottom: 14px;
}
.article-cat{
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
color: #fff;
background: linear-gradient(135deg,#F4A6AB,#E27D85);
padding: 4px 12px;
border-radius: 999px;
}
.article-meta time{
font-size: 12px; color: #888;
font-family: system-ui, sans-serif;
}
.article h1{
font-family:"Shippori Mincho", "Noto Serif JP", serif;
font-size: 24px;
font-weight: 700;
color: #2A2A2A;
margin: 0 0 18px;
letter-spacing: .02em;
line-height: 1.45;
}
.article-lead{
font-size: 15px;
line-height: 1.95;
color: #3a3a3a;
margin: 0 0 28px;
padding: 18px 18px;
background: linear-gradient(180deg, #FFF7F5 0%, #FDEEEC 100%);
border-left: 3px solid #E27D85;
border-radius: 0 12px 12px 0;
text-wrap: pretty;
}
.article-toc{
margin: 0 0 32px;
padding: 18px 20px;
background: #FFFCFB;
border: 1px solid rgba(226,125,133,.18);
border-radius: 14px;
}
.article-toc h2{
font-family:"Shippori Mincho", serif;
font-size: 14px;
color: #B97A82;
letter-spacing: .12em;
margin: 0 0 12px;
padding: 0;
border: 0;
}
.article-toc ol{
margin: 0; padding-left: 20px;
}
.article-toc li{
font-size: 14px;
line-height: 1.85;
color: #3a3a3a;
margin-bottom: 4px;
}
.article-toc a{
color: #3a3a3a;
text-decoration: none;
transition: color .15s ease;
}
.article-toc a:hover{ color: #E27D85; }
.article > section{
margin-bottom: 32px;
}
.article > section h2{
font-family:"Shippori Mincho", "Noto Serif JP", serif;
font-size: 19px;
font-weight: 700;
color: #2A2A2A;
margin: 0 0 14px;
padding: 0 0 8px 0;
border-bottom: 2px solid #E27D85;
letter-spacing: .02em;
line-height: 1.5;
}
.article > section h3{
font-family:"Shippori Mincho", "Noto Serif JP", serif;
font-size: 16px;
font-weight: 700;
color: #2A2A2A;
margin: 18px 0 8px;
padding: 0 0 0 12px;
border-left: 3px solid rgba(226,125,133,.6);
letter-spacing: .02em;
}
.article > section p{
font-size: 14.5px;
line-height: 1.95;
color: #3a3a3a;
margin: 0 0 12px;
text-wrap: pretty;
}
.article > section ul,
.article > section ol{
margin: 8px 0 14px;
padding-left: 22px;
}
.article > section li{
font-size: 14px;
line-height: 1.85;
color: #3a3a3a;
margin-bottom: 4px;
}
.article > section em{
font-style: normal;
font-weight: 700;
background: linear-gradient(180deg, transparent 60%, rgba(226,125,133,.18) 60%);
padding: 0 2px;
}
.article-cta-block{
margin-top: 36px;
padding: 24px 20px;
background: linear-gradient(180deg, #FFF7F5 0%, #FDEEEC 100%);
border: 1px solid rgba(226,125,133,.18);
border-radius: 16px;
}
.article-cta-block .article-cta-lead{
font-family:"Shippori Mincho", serif;
font-size: 15px;
font-weight: 700;
color: #2A2A2A;
text-align: center;
line-height: 1.7;
margin: 0 0 18px;
text-wrap: pretty;
}
.article-cta-block .dual-cta{ margin: 0; }
/* related articles list */
.related-articles{
margin: 0;
padding: 36px 22px 28px;
border-top: 1px solid rgba(226,125,133,.18);
background: #FFFCFB;
}
.related-articles .related-title{
text-align: center;
font-family:"Shippori Mincho", "Noto Serif JP", serif;
font-size: 18px;
font-weight: 700;
color: #2A2A2A;
margin: 0 0 4px;
}
.related-articles .related-title::after{
content: "";
display: block;
width: 36px; height: 2px;
margin: 10px auto 22px;
background: linear-gradient(90deg, #F4A6AB, #9ED5C8);
border-radius: 2px;
}
.related-list{
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.related-list li a{
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
background: #fff;
border: 1px solid rgba(226,125,133,.14);
border-radius: 10px;
text-decoration: none;
color: #2A2A2A;
transition: transform .15s ease, border-color .15s ease;
}
.related-list li a:hover{
transform: translateX(2px);
border-color: rgba(226,125,133,.4);
}
.related-list .r-num{
flex-shrink: 0;
color: #E27D85;
font-family:"Shippori Mincho", serif;
font-weight: 800;
font-size: 13px;
width: 24px;
}
.related-list .r-title{
flex: 1;
font-family:"Shippori Mincho", serif;
font-size: 13.5px;
font-weight: 700;
line-height: 1.6;
color: #2A2A2A;
text-wrap: pretty;
}
/* article page form spacing */
body.article-page .form-wrap{
padding-top: 36px;
border-top: 1px solid rgba(226,125,133,.18);
}
body.article-page .line-card{ margin-bottom: 40px; }
body.article-page .form-wrap,
body.article-page .related-articles{
max-width: 480px;
margin: 0 auto;
}
@media (max-width: 480px){
.article{ padding: 40px 20px 24px; }
.article h1{ font-size: 22px; }
.article-lead{ font-size: 14.5px; padding: 14px 14px; }
.article > section h2{ font-size: 18px; }
.article > section p{ font-size: 14.5px; }
.related-articles{ padding: 28px 18px 24px; }
}