/* 部品：top-worries（STUDIOでは埋め込みだったもの） */
.sp-part--top-worries .spkx{
--spkx-ink: #1f1b14;
--spkx-body: #4a453b;
--spkx-struck: #9a9488;
--spkx-gold: #dcb043;
--spkx-gold-hover: #cfa232;
--spkx-gold-text: #8f6c17;
--spkx-town: #776c52;
--spkx-rule: #eee7d6;
--spkx-photo-pos: 50% 50%;
--spkx-serif: 'Noto Serif JP', 'Noto Serif CJK JP', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', serif;
--spkx-sans: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
position: relative;
width: 100%;
background: #ffffff;
color: var(--spkx-body);
font-family: var(--spkx-sans);
padding: clamp(72px, 9vw, 136px) 20px clamp(72px, 9vw, 128px);
overflow: hidden;
-webkit-font-smoothing: antialiased;
}.sp-part--top-worries .spkx,.sp-part--top-worries .spkx *,.sp-part--top-worries .spkx *::before,.sp-part--top-worries .spkx *::after{ box-sizing: border-box; }.sp-part--top-worries .spkx :where(h2, p, dl, dt, dd, ul, li, figure){ margin: 0; padding: 0; }.sp-part--top-worries .spkx :where(ul){ list-style: none; }.sp-part--top-worries .spkx-inner{ max-width: 1160px; margin: 0 auto; }.sp-part--top-worries .spkx-top{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
grid-template-areas:
"head visual"
"body visual";
grid-template-rows: auto 1fr;
column-gap: clamp(40px, 6vw, 96px);
row-gap: clamp(36px, 4vw, 56px);
}.sp-part--top-worries .spkx-head{ grid-area: head; }.sp-part--top-worries .spkx-visual{
grid-area: visual;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: clamp(18px, 2.4vw, 36px);
align-items: start;
}.sp-part--top-worries .spkx-body{ grid-area: body; align-self: end; }.sp-part--top-worries .spkx-worries{
container-type: inline-size;
display: grid;
gap: .35em;
}.sp-part--top-worries .spkx-worry{
font-family: var(--spkx-serif);
font-weight: 600;
font-size: clamp(16px, 4.2vw, 26px);
font-size: clamp(16px, calc(100cqi / 17.8), 28px);
line-height: 1.6;
letter-spacing: .02em;
color: var(--spkx-struck);
white-space: nowrap;
}.sp-part--top-worries .spkx-worry-text{ position: relative; display: inline-block; }.sp-part--top-worries .spkx-strike{
position: absolute;
left: -4%;
top: 57%;
width: 108%;
height: .7em;
transform: translateY(-50%);
overflow: visible;
pointer-events: none;
clip-path: inset(-30% 0 -30% 0);
}.sp-part--top-worries .spkx-strike path{
fill: none;
stroke: var(--spkx-gold);
stroke-width: 3px;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}.sp-part--top-worries .spkx-answer{
margin-top: clamp(20px, 2.4vw, 32px);
font-family: var(--spkx-serif);
font-weight: 700;
font-size: clamp(16px, 4.8vw, 22px);
line-height: 1.6;
letter-spacing: .04em;
color: var(--spkx-gold-text);
}.sp-part--top-worries .spkx-title{
grid-column: 2;
grid-row: 1;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
text-orientation: upright;
font-family: var(--spkx-serif);
font-weight: 900;
font-size: clamp(60px, 6.2vw, 92px);
line-height: 1;
letter-spacing: .06em;
color: var(--spkx-ink);
white-space: nowrap;
margin-top: -.04em;
}.sp-part--top-worries .spkx-title > span{ display: inline-block; }.sp-part--top-worries .spkx-photo{ grid-column: 1; grid-row: 1; }.sp-part--top-worries .spkx-photo img{
display: block;
width: 100%;
height: auto;
aspect-ratio: 5 / 6;
object-fit: cover;
object-position: var(--spkx-photo-pos);
border-radius: 2px;
background: #f3efe5;
}.sp-part--top-worries .spkx-body p{
max-width: 520px;
font-size: 15px;
line-height: 2.05;
letter-spacing: .03em;
text-align: justify;
color: var(--spkx-body);
}.sp-part--top-worries .spkx-body p + p{ margin-top: 1.5em; }.sp-part--top-worries .spkx-body .spkx-why{
font-family: var(--spkx-serif);
font-weight: 600;
font-size: clamp(17px, 1.55vw, 19px);
line-height: 1.95;
letter-spacing: .04em;
text-align: left;
color: var(--spkx-ink);
}.sp-part--top-worries .spkx-area{ margin-top: clamp(72px, 9vw, 120px); }.sp-part--top-worries .spkx-seam{
display: block;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M0 8H18' stroke='%23eadfbf' stroke-width='1'/%3E%3Cpath d='M5 1.8Q8.2 3 11.5 5.2M5 14.2Q8.2 13 11.5 10.8' stroke='%23dcb043' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
background-repeat: repeat-x;
background-position: left center;
background-size: 18px 16px;
}.sp-part--top-worries .spkx-fact{
display: grid;
grid-template-columns: clamp(120px, 16vw, 200px) minmax(0, 1fr);
column-gap: clamp(24px, 4vw, 64px);
align-items: baseline;
padding: clamp(28px, 3vw, 40px) 0;
}.sp-part--top-worries .spkx-fact + .spkx-fact{ border-top: 1px solid var(--spkx-rule); }.sp-part--top-worries .spkx-fact dt{
font-family: var(--spkx-serif);
font-weight: 600;
font-size: 15px;
letter-spacing: .08em;
color: var(--spkx-ink);
}.sp-part--top-worries .spkx-fact-lead{
font-family: var(--spkx-serif);
font-weight: 700;
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1.5;
letter-spacing: .05em;
color: var(--spkx-ink);
}.sp-part--top-worries .spkx-towns{
display: flex;
flex-wrap: wrap;
gap: .25em 1.15em;
margin-top: 18px;
font-size: 13px;
line-height: 1.75;
letter-spacing: .04em;
color: var(--spkx-town);
}.sp-part--top-worries .spkx-cta-row{
display: grid;
grid-template-columns: clamp(120px, 16vw, 200px) minmax(0, 1fr);
column-gap: clamp(24px, 4vw, 64px);
margin-top: clamp(8px, 1vw, 16px);
}.sp-part--top-worries .spkx-cta{
grid-column: 2;
justify-self: start;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 18px 34px 18px 40px;
background: var(--spkx-gold);
color: var(--spkx-ink);
border-radius: 999px;
font-family: var(--spkx-serif);
font-weight: 700;
font-size: 16px;
letter-spacing: .06em;
text-decoration: none;
transition: background-color .25s ease;
}.sp-part--top-worries .spkx-cta svg{ width: 18px; height: 18px; flex: none; transition: transform .25s ease; }.sp-part--top-worries .spkx-cta:hover{ background: var(--spkx-gold-hover); }.sp-part--top-worries .spkx-cta:hover svg{ transform: translateX(4px); }.sp-part--top-worries .spkx-cta:focus-visible{ outline: 3px solid var(--spkx-ink); outline-offset: 3px; }@media screen and (max-width: 900px){.sp-part--top-worries .spkx-top{
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"head"
"visual"
"body";
grid-template-rows: auto;
}.sp-part--top-worries .spkx-visual{ max-width: 560px; }.sp-part--top-worries .spkx-title{ font-size: clamp(46px, 13.5vw, 84px); }.sp-part--top-worries .spkx-photo img{ aspect-ratio: 1 / 1.08; }.sp-part--top-worries .spkx-body{ align-self: auto; }
}@media screen and (max-width: 640px){.sp-part--top-worries .spkx-fact,.sp-part--top-worries .spkx-cta-row{ grid-template-columns: minmax(0, 1fr); }.sp-part--top-worries .spkx-fact{ row-gap: 10px; align-items: start; }.sp-part--top-worries .spkx-cta{ grid-column: 1; justify-self: stretch; }
}.sp-part--top-worries .spkx.is-armed .spkx-strike{ clip-path: inset(-30% 100% -30% 0); opacity: 0; }.sp-part--top-worries .spkx.is-armed .spkx-worry{ color: #6d675b; }.sp-part--top-worries .spkx.is-armed .spkx-answer{ opacity: 0; transform: translateY(10px); }.sp-part--top-worries .spkx.is-armed .spkx-title > span{ opacity: 0; transform: translateY(-.35em); }.sp-part--top-worries .spkx.is-armed.is-in .spkx-strike{
clip-path: inset(-30% 0 -30% 0);
opacity: 1;
transition: clip-path .62s cubic-bezier(.7, 0, .3, 1) var(--spkx-d, 0s), opacity .01s linear var(--spkx-d, 0s);
}.sp-part--top-worries .spkx.is-armed.is-in .spkx-worry{
color: var(--spkx-struck);
transition: color .5s ease calc(var(--spkx-d, 0s) + .45s);
}.sp-part--top-worries .spkx.is-armed.is-in .spkx-answer{
opacity: 1;
transform: none;
transition: opacity .6s ease 1.15s, transform .6s ease 1.15s;
}.sp-part--top-worries .spkx.is-armed.is-in .spkx-title > span{
opacity: 1;
transform: none;
transition:
opacity .55s ease calc(1.45s + var(--i) * .09s),
transform .7s cubic-bezier(.2, .7, .2, 1) calc(1.45s + var(--i) * .09s);
}