…
Creative
Web制作・デザイン
*/
.c-categories {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 300px));
justify-content: center; /* 枚数が少なくても中央にそろう */
gap: 24px;
margin: 0;
padding: 0;
list-style: none;
}
.c-categories > li {
display: flex;
}
.c-categories .c-category {
flex: 1;
}
.c-category {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
max-width: 340px;
border-radius: var(--ks-radius);
background: var(--ks-pink-pale);
box-shadow: var(--ks-shadow);
color: var(--ks-text);
text-decoration: none;
transition: transform 0.3s, box-shadow 0.3s;
}
.c-category__img {
display: block;
width: 100%;
aspect-ratio: 16/10;
object-fit: cover;
transition: transform 0.5s;
}
.c-category__body {
position: relative;
display: block;
flex: 1; /* カードの高さをそろえる */
margin: -34px 10px 10px; /* 写真の下側に少し重ねる */
padding: 10px 16px 14px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.88);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.c-category__en {
display: block;
font-family: var(--ks-font-script);
font-size: 2rem;
font-style: italic;
font-weight: 500;
line-height: 1.1;
padding-right: 40px; /* 右上の矢印のぶん */
color: var(--ks-text);
}
.c-category__ja {
display: block;
margin-top: 4px;
font-family: var(--ks-font-ja);
font-size: 0.82rem;
letter-spacing: 0.04em;
color: var(--ks-text-sub);
}
.c-category__body::after {
/* 右下の丸い矢印 */
content: "";
position: absolute;
right: 14px;
top: 14px;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--ks-pink-strong);
transition: transform 0.25s;
}
.c-category__body::before {
/* 丸の中の矢印 */
content: "";
position: absolute;
z-index: 1;
right: 21px;
top: 21px;
width: 14px;
height: 14px;
background-color: var(--ks-white);
-webkit-mask: var(--ks-icon-arrow-right) center/contain no-repeat;
mask: var(--ks-icon-arrow-right) center/contain no-repeat;
transition: transform 0.25s;
}
.c-category {
/* 写真がまだないとき： */
}
.c-category__img--music {
background: url("../svg/heartbeat.svg") center/46% auto no-repeat, radial-gradient(60% 80% at 20% 20%, rgba(227, 202, 202, 0.9), transparent 70%), radial-gradient(60% 80% at 85% 85%, rgba(232, 221, 209, 0.9), transparent 70%), var(--ks-cream);
}
.c-category__img--soft {
background: radial-gradient(60% 80% at 20% 20%, rgba(227, 202, 202, 0.9), transparent 70%), radial-gradient(60% 80% at 85% 85%, rgba(232, 221, 209, 0.9), transparent 70%), var(--ks-cream);
}
.c-category {
/* 準備中のカード（リンクなし）： …
*/
}
.c-category.is-soon {
cursor: default;
}
.c-category.is-soon .c-category__body::before, .c-category.is-soon .c-category__body::after {
display: none;
}
.c-category__soon {
position: absolute;
z-index: 1;
top: 12px;
right: 12px;
padding: 0.35em 0.9em;
border-radius: var(--ks-radius-pill);
background: rgba(255, 255, 255, 0.9);
font-family: var(--ks-font-en);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--ks-text-sub);
}
.c-category:not(.is-soon):hover {
transform: translateY(-4px);
box-shadow: 0 14px 32px rgba(149, 90, 99, 0.24);
}
.c-category:not(.is-soon):hover .c-category__img {
transform: scale(1.04);
}
.c-category:hover .c-category__body::before, .c-category:hover .c-category__body::after {
transform: translateX(3px);
}
.c-category:focus-visible {
outline: 3px solid var(--ks-pink-strong);
outline-offset: 4px;
}
.c-work-card {
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: var(--ks-radius);
background: var(--ks-white);
box-shadow: var(--ks-shadow);
transition: transform 0.3s, box-shadow 0.3s;
}
.c-work-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 32px rgba(149, 90, 99, 0.24);
}
.c-work-card__link {
display: block;
color: inherit;
text-decoration: none;
}
.c-work-card__thumb {
position: relative;
overflow: hidden;
aspect-ratio: 16/10;
background: var(--ks-gray-light);
}
.c-work-card__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
transition: transform 0.5s;
}
.c-work-card:hover .c-work-card__thumb img {
transform: scale(1.04);
}
.c-work-card__type {
position: absolute;
top: 12px;
left: 12px;
padding: 0.25em 0.9em;
border-radius: var(--ks-radius-pill);
background: rgba(255, 255, 255, 0.92);
color: var(--ks-pink-strong);
font-size: 0.78rem;
font-weight: 700;
}
.c-work-card__body {
padding: 18px 20px 8px;
}
.c-work-card__title {
margin: 0;
font-size: 1.05rem;
font-weight: 700;
line-height: 1.6;
}
.c-work-card__role {
margin: 6px 0 0;
color: var(--ks-text-sub);
font-size: 0.86rem;
line-height: 1.6;
}
.c-work-card__tags {
margin-top: auto;
padding: 8px 20px 20px;
}
.c-work-card__tags .c-tag {
padding: 0.35em 1em;
font-size: 0.8rem;
}
.c-work-card:has(.c-work-card__link:focus-visible) {
outline: 3px solid var(--ks-pink-strong);
outline-offset: 4px;
}
.c-work-card__link:focus-visible {
outline: none; /* カード全体に印を出すので、中のリンクには出さない */
}
.c-work-card__title {
font-family: var(--ks-font-heading);
font-weight: 600;
letter-spacing: 0.06em;
}
.c-work-card {
/* ---------- まとめの実績：入っているサイトの画面写真を、少しずつずらして重ねる ---------- */
}
.c-work-card__stack {
position: absolute;
inset: 0;
display: block;
background: var(--ks-beige);
}
.c-work-card__stack img {
position: absolute;
width: 60%;
height: auto;
aspect-ratio: 16/10;
border-radius: 4px;
box-shadow: 0 6px 16px rgba(61, 52, 54, 0.16);
}
.c-work-card__stack img:nth-child(1) {
top: 10%;
left: 6%;
}
.c-work-card__stack img:nth-child(2) {
top: 22%;
left: 20%;
}
.c-work-card__stack img:nth-child(3) {
top: 34%;
left: 34%;
}
.c-work-card__count {
margin: 6px 0 0;
color: var(--ks-pink-strong);
font-size: 0.84rem;
font-weight: 700;
}
.c-deco {
position: absolute;
z-index: 0;
height: auto;
pointer-events: none;
user-select: none;
}
.c-deco--dots {
top: 8%;
right: 4%;
width: clamp(80px, 11vw, 150px);
opacity: 0.85;
}
.c-deco--sparkle {
top: 12%;
left: 8%;
width: clamp(48px, 6vw, 84px);
}
.c-deco--leaf {
right: 6%;
bottom: 10%;
width: clamp(60px, 8vw, 110px);
transform: rotate(12deg);
}
.c-deco--heart {
top: 18%;
right: 12%;
width: clamp(34px, 4vw, 56px);
transform: rotate(10deg);
}
.c-deco--blob-pink {
top: 16%;
left: -3%;
width: clamp(140px, 22vw, 300px);
opacity: 0.55;
}
.c-deco--blob-yellow {
right: -2%;
bottom: 6%;
width: clamp(130px, 20vw, 280px);
opacity: 0.55;
}
@media (max-width: 680px) {
.c-deco--leaf, .c-deco--heart {
display: none; /* スマホでは文字と重なりやすいので出さない */
}
.c-deco--dots {
top: 2%;
right: 2%;
}
}
.c-deco {
/* 飾りがふわふわ浮かぶ（それぞれ少しずつずらす） */
}
@media (prefers-reduced-motion: no-preference) {
.c-deco {
animation: ks-float 7s ease-in-out infinite;
}
.c-deco--sparkle, .c-deco--heart {
animation-duration: 5s;
}
.c-deco--leaf {
animation-delay: -2s;
}
.c-deco--blob-pink, .c-deco--blob-yellow {
animation-duration: 11s;
}
}
.c-deco {
/* ---------- 朝の光（飾り） ---------- */
}
.c-deco--light {
width: clamp(240px, 32vw, 460px);
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, rgba(234, 213, 205, 0.7) 0%, rgba(234, 213, 205, 0.25) 40%, rgba(234, 213, 205, 0) 70%);
}
.c-deco--light-left {
top: 6%;
left: -8%;
}
.c-deco--light-right {
right: -8%;
bottom: 4%;
}
/* 本文へスキップ（キーボードで最初に Tab を押したときだけ見える） */
.c-skip-link:focus {
position: fixed;
top: 12px;
left: 12px;
z-index: 1000;
width: auto;
height: auto;
padding: 0.8em 1.4em;
clip: auto;
border-radius: var(--ks-radius-pill);
background: var(--ks-white);
box-shadow: var(--ks-shadow);
color: var(--ks-pink-strong);
font-weight: 700;
text-decoration: none;
}
.admin-bar .c-skip-link:focus {
top: 48px; /* ログイン中の管理バーに隠れないように */
}
.p-global-nav__list {
display: flex;
align-items: center;
gap: 32px;
margin: 0;
padding: 0;
list-style: none;
}
.p-global-nav__list a {
color: var(--ks-text);
font-family: var(--ks-font-en);
font-size: 1.08rem;
font-weight: 600;
letter-spacing: 0.06em;
text-decoration: none;
transition: color 0.25s;
}
.p-global-nav__list a:hover {
color: var(--ks-pink-strong);
}
.p-global-nav__list .p-global-nav__contact {
padding: 0.55em 1.5em;
border-radius: var(--ks-radius-pill);
background: var(--ks-pink-strong);
color: var(--ks-white);
}
.p-global-nav__list .p-global-nav__contact:hover {
background: var(--ks-pink-strong-dark);
color: var(--ks-white);
}
@media (max-width: 1023px) {
.p-global-nav {
position: fixed;
top: 72px;
right: 0;
left: 0;
padding: 24px 24px 40px;
background: var(--ks-white);
box-shadow: 0 12px 24px rgba(149, 90, 99, 0.12);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
}
.admin-bar .p-global-nav {
top: 118px;
}
.is-nav-open .p-global-nav {
opacity: 1;
visibility: visible;
transform: none;
}
.p-global-nav__list {
flex-direction: column;
gap: 20px;
}
.p-global-nav__list a {
font-size: 1.1rem;
}
}
.p-global-nav {
/* メニュー：英語の下に日本語を小さく添える */
}
.p-global-nav__list a {
display: flex;
flex-direction: column;
align-items: center;
line-height: 1.3;
}
.p-global-nav__ja {
margin-top: 2px;
font-family: var(--ks-font-ja);
font-size: 0.66rem;
font-weight: 500;
letter-spacing: 0.08em;
color: var(--ks-text-sub);
}
.p-global-nav__list .p-global-nav__contact .p-global-nav__ja {
color: rgba(255, 255, 255, 0.92);
}
@media (max-width: 1023px) {
.p-global-nav__list a {
flex-direction: row;
align-items: baseline;
gap: 12px;
padding: 8px 0;
}
.p-global-nav__ja {
font-size: 0.8rem;
}
.p-global-nav__list .p-global-nav__contact {
justify-content: center;
padding: 0.8em 1.5em;
}
}
.p-global-nav__list a.is-external::after {
display: none; /* メニューでは日本語の横に出す */
}
.p-global-nav__list a.is-external .p-global-nav__en::after {
content: " ↗";
font-size: 0.85em;
opacity: 0.7;
}
/* 下層ページの見出し */
.p-page-hero {
padding: clamp(56px, 8vw, 96px) 24px clamp(40px, 6vw, 64px);
text-align: center;
}
.p-page-hero .c-heading {
margin: 0;
}
.p-page-hero.u-wave-white {
padding-bottom: calc(clamp(40px, 6vw, 64px) + var(--ks-wave-h) * 0.7);
}
/* ---------- About ---------- */
.p-about {
display: grid;
grid-template-columns: 240px 1fr;
gap: clamp(32px, 5vw, 64px);
align-items: center;
max-width: 880px;
margin: 0 auto;
}
.p-about__image {
display: grid;
place-items: end center;
aspect-ratio: 1;
overflow: hidden;
border-radius: 50%;
background: radial-gradient(60% 60% at 30% 30%, rgba(227, 202, 202, 0.8), transparent 70%), radial-gradient(60% 60% at 75% 75%, rgba(232, 221, 209, 0.8), transparent 70%), var(--ks-cream);
}
.p-about__image img {
width: 85%;
}
.p-about__name {
margin: 0 0 16px;
font-family: var(--ks-font-script);
font-size: 3rem;
font-style: italic;
font-weight: 500;
line-height: 1;
color: var(--ks-pink-dark); /* 大きな文字なので、この濃さで読みやすさの基準（3 以上）を満たす */
}
.p-about__name span {
display: block;
margin-top: 10px;
font-family: var(--ks-font-ja);
font-size: 0.9rem;
letter-spacing: 0.1em;
color: var(--ks-text-sub);
}
.p-about__text p {
margin: 0 0 1em;
}
.p-about__text .c-sns {
margin-top: 24px;
}
@media (max-width: 680px) {
.p-about {
grid-template-columns: 1fr;
text-align: left;
}
.p-about__image-wrap {
width: 200px;
margin: 0 auto;
}
.p-about__name {
text-align: center;
}
}
.p-about {
/* About の似顔絵のまわり：水彩の丸を重ねる */
}
.p-about__image-wrap {
position: relative;
}
.p-about__image-wrap::before {
content: "";
position: absolute;
inset: -10% -14% -6% -6%;
z-index: -1;
background: url("../img/decoration/deco-watercolor-yellow.png") center/contain no-repeat;
opacity: 0.7;
}
.p-about__image-wrap::after {
content: "";
position: absolute;
top: -6%;
right: -4%;
width: 22%;
aspect-ratio: 1;
background: url("../img/decoration/deco-sparkle-2.png") center/contain no-repeat;
transform: rotate(-8deg);
}
.p-about__image-wrap .p-about__image {
position: relative;
}
.p-about {
/* ---------- わたしについて：いま取り組んでいること ---------- */
}
.p-about__sub {
margin: 64px 0 24px;
font-size: 1.1rem;
text-align: center;
}
.p-about__sub {
font-family: var(--ks-font-heading);
font-weight: 600;
letter-spacing: 0.06em;
}
.p-about {
/* About：似顔絵のまわりは、光と細い線の輪 */
}
.p-about__image-wrap::before {
inset: -18%;
background: radial-gradient(circle, rgba(234, 213, 205, 0.75) 0%, rgba(234, 213, 205, 0) 68%);
opacity: 1;
}
.p-about__image-wrap::after {
top: -5%;
right: -5%;
width: 110%;
height: 110%;
aspect-ratio: auto;
border: 1px solid var(--ks-pink-soft);
border-radius: 50%;
background: none;
transform: translate(6%, 4%);
}
.p-about__image {
background: radial-gradient(60% 60% at 30% 30%, rgba(234, 213, 205, 0.8), transparent 70%), radial-gradient(60% 60% at 75% 75%, rgba(232, 221, 209, 0.9), transparent 70%), var(--ks-white);
}
/* ---------- 制作実績のカード ---------- */
.p-works-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 28px;
}
/* 絞り込み */
.p-works-filter {
margin: 0 0 40px;
}
.p-works-filter .c-tags {
justify-content: center;
}
/* ---------- 制作実績の詳細 ---------- */
.p-work-detail__header {
padding: clamp(48px, 7vw, 88px) 24px clamp(40px, 6vw, 64px);
text-align: center;
}
.p-work-detail__header-inner {
max-width: 880px;
margin: 0 auto;
}
.p-work-detail__header .c-tags {
justify-content: center;
}
.p-work-detail__type {
display: inline-block;
margin: 0 0 12px;
padding: 0.25em 1em;
border-radius: var(--ks-radius-pill);
background: var(--ks-white);
color: var(--ks-pink-strong);
font-size: 0.8rem;
font-weight: 700;
}
.p-work-detail__title {
margin: 0 0 20px;
font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
line-height: 1.5;
}
.p-work-detail__inner {
max-width: 880px;
margin: 0 auto;
padding: clamp(40px, 6vw, 64px) 24px clamp(72px, 10vw, 120px);
}
.p-work-detail__image {
margin: 0 0 40px;
}
.p-work-detail__image img {
display: block;
width: 100%;
border-radius: var(--ks-radius);
box-shadow: var(--ks-shadow);
}
.p-work-detail__meta {
display: grid;
gap: 8px;
margin: 0 0 32px;
}
.p-work-detail__meta div {
display: grid;
grid-template-columns: 7em 1fr;
gap: 16px;
padding: 12px 0;
border-bottom: 1px dashed var(--ks-pink-soft);
}
.p-work-detail__meta dt {
color: var(--ks-pink-strong);
font-weight: 700;
}
.p-work-detail__meta dd {
margin: 0;
}
.p-work-detail__content {
margin: 0 0 40px;
}
.p-work-detail__points {
margin: 0 0 48px;
padding: 28px 32px;
border-radius: var(--ks-radius);
background: var(--ks-cream);
}
.p-work-detail__points h2 {
margin: 0 0 12px;
font-size: 1.05rem;
color: var(--ks-pink-strong);
}
.p-work-detail__points p {
margin: 0;
}
.p-work-detail {
/* 工夫したポイントの箇条書き（くすみローズの小さな丸） */
}
.p-work-detail__point-list {
margin: 0;
padding: 0;
list-style: none;
}
.p-work-detail__point-list li {
position: relative;
padding-left: 1.3em;
line-height: 1.9;
}
.p-work-detail__point-list li + li {
margin-top: 10px;
}
.p-work-detail__point-list li::before {
content: "";
position: absolute;
top: 0.8em;
left: 0.2em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ks-pink);
}
.p-work-detail__link {
margin: 0 0 64px;
text-align: center;
}
.p-work-detail__auth {
max-width: 520px;
margin: 0 auto 24px;
padding: 20px 24px;
border: 1.5px dashed var(--ks-pink-soft);
border-radius: var(--ks-radius);
font-size: 0.9rem;
text-align: left;
}
.p-work-detail__auth p {
margin: 0 0 12px;
}
.p-work-detail__auth dl {
display: flex;
flex-wrap: wrap;
gap: 8px 32px;
margin: 0;
}
.p-work-detail__auth dl div {
display: flex;
gap: 10px;
}
.p-work-detail__auth dt {
font-family: var(--ks-font-en);
font-weight: 700;
}
.p-work-detail__auth dd {
margin: 0;
}
.p-work-detail__auth code {
padding: 0.1em 0.6em;
border-radius: 6px;
background: var(--ks-pink-pale);
font-size: 0.95rem;
}
.p-work-detail {
/* まとめの実績に入っているサイト：「〇〇のひとつです」と、ほかのサイトへのリンク */
}
.p-work-detail__case-of {
margin: 48px 0 0;
padding: 24px 28px;
border: 1px solid #E6DCD4;
border-radius: 4px;
background: var(--ks-white);
}
.p-work-detail__case-of-text {
margin: 0;
line-height: 1.9;
}
.p-work-detail__case-of-text a, .p-work-detail__case-of-list a {
color: var(--ks-pink-strong);
font-weight: 700;
}
.p-work-detail__case-of-sub {
margin: 16px 0 0;
color: var(--ks-text-sub);
font-size: 0.85rem;
}
.p-work-detail__case-of-list {
display: flex;
flex-wrap: wrap;
gap: 4px 28px;
margin: 4px 0 0;
padding: 0;
list-style: none;
}
.p-work-detail__case-of-list li {
--case-color: var(--ks-pink-soft);
display: flex;
align-items: center;
gap: 8px;
}
.p-work-detail {
/* サイトのテーマカラーの丸（飾り） */
}
.p-work-detail__case-of-list li::before {
content: "";
width: 12px;
height: 12px;
border: 1px solid rgba(61, 52, 54, 0.15);
border-radius: 50%;
background: var(--case-color);
}
.p-work-detail__case-of-list a {
display: inline-block;
padding: 10px 0;
}
.p-work-detail__nav {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 16px;
align-items: center;
padding-top: 32px;
border-top: 1px solid var(--ks-pink-pale);
font-size: 0.88rem;
}
.p-work-detail__nav a {
color: var(--ks-text-sub);
text-decoration: none;
}
.p-work-detail__nav a:hover {
color: var(--ks-pink-strong);
}
.p-work-detail__nav .c-btn {
color: var(--ks-text);
}
.p-work-detail__nav-next {
text-align: right;
}
@media (max-width: 600px) {
.p-work-detail__nav {
grid-template-columns: 1fr;
text-align: center;
}
.p-work-detail__nav-next {
text-align: center;
}
.p-work-detail__points {
padding: 24px 20px;
}
}
.p-work-detail__header.u-wave-white {
padding-bottom: calc(clamp(40px, 6vw, 64px) + var(--ks-wave-h) * 0.7);
}
.p-work-detail__points--request {
background: var(--ks-gray-light);
}
.p-work-detail__title {
font-family: var(--ks-font-heading);
font-weight: 600;
letter-spacing: 0.06em;
}
/* ---------- Contact ---------- */
.p-contact__lead {
margin: 0 0 32px;
text-align: center;
}
.p-contact__form {
max-width: 720px;
margin: 0 auto;
overflow: hidden;
border-radius: var(--ks-radius);
background: var(--ks-white);
box-shadow: var(--ks-shadow);
}
.p-contact__placeholder {
max-width: 560px;
margin: 0 auto;
padding: 32px;
border: 1.5px dashed var(--ks-pink-soft);
border-radius: var(--ks-radius);
color: var(--ks-text-sub);
text-align: center;
}
.p-contact {
/* ---------- お問い合わせ（Contact Form 7） ---------- */
}
.p-contact__lead strong {
color: var(--ks-pink-strong);
}
.p-contact__form--cf7 {
padding: clamp(24px, 4vw, 40px);
}
.p-contact__form--cf7 label {
display: block;
font-weight: 700;
}
.p-contact__form--cf7 input[type=text], .p-contact__form--cf7 input[type=email], .p-contact__form--cf7 input[type=tel], .p-contact__form--cf7 select, .p-contact__form--cf7 textarea {
width: 100%;
margin-top: 6px;
padding: 12px 14px;
border: 1.5px solid #E3D6D6;
border-radius: 10px;
background: var(--ks-white);
font: inherit;
}
.p-contact__form--cf7 input:focus, .p-contact__form--cf7 textarea:focus {
border-color: var(--ks-pink-strong);
}
.p-contact__form--cf7 .wpcf7-submit {
display: block;
min-width: 220px;
min-height: 56px;
margin: 8px auto 0;
border: 0;
border-radius: var(--ks-radius-pill);
background: var(--ks-pink-strong);
color: var(--ks-white);
font: inherit;
font-weight: 700;
cursor: pointer;
}
.p-contact__form--cf7 .wpcf7-submit:hover {
background: var(--ks-pink-strong-dark);
}
/* ---------- お問い合わせフォーム（送り先は Google フォーム） ---------- */
/* 見積もりの例（p-estimate）と同じ、細い線の紙。部品は template-parts/contact-form.php */
.p-contact-form {
max-width: 720px;
margin: 0 auto;
padding: clamp(24px, 4vw, 44px);
border: 1px solid #E6DCD4;
border-radius: 4px;
background: var(--ks-white);
}
.p-contact-form__note {
margin: 0 0 28px;
color: var(--ks-text-sub);
font-size: 0.85rem;
}
.p-contact-form__row {
margin: 0 0 26px;
padding: 0;
border: 0;
}
.p-contact-form__label {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 8px;
padding: 0;
font-weight: 700;
font-size: 0.95rem;
}
.p-contact-form__badge {
display: inline-block;
padding: 0.15em 0.7em;
border: 1px solid var(--ks-pink-strong);
border-radius: 3px;
background: var(--ks-pink-strong);
color: var(--ks-white);
font-size: 0.72rem;
font-weight: 700;
line-height: 1.5;
}
.p-contact-form__badge--optional {
border-color: #CDBFBA;
background: transparent;
color: var(--ks-text-sub);
}
.p-contact-form__input {
display: block;
width: 100%;
min-height: 48px;
padding: 12px 14px;
border: 1px solid #D9CCC5;
border-radius: 4px;
background: #FFFDFB;
color: var(--ks-text);
font: inherit;
line-height: 1.6;
}
.p-contact-form__input::placeholder {
color: #9A8E8F;
}
.p-contact-form__input--textarea {
resize: vertical;
}
.p-contact-form__input:focus {
border-color: var(--ks-pink-strong);
outline: 2px solid color-mix(in srgb, var(--ks-pink-strong) 35%, transparent);
outline-offset: 1px;
}
.p-contact-form {
/* 一度さわってから、まちがっているとき（入れずに次へ進んだときなど）だけ、線の色を変える */
}
.p-contact-form__input:user-invalid {
border-color: #B4475A;
}
.p-contact-form {
/* 選択肢：押しやすい大きさの枠。選ぶと淡いローズになる */
}
.p-contact-form__choices {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
}
.p-contact-form__choice {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 8px 16px 8px 12px;
border: 1px solid #D9CCC5;
border-radius: 4px;
background: #FFFDFB;
font-size: 0.9rem;
line-height: 1.5;
cursor: pointer;
transition: background-color 0.2s, border-color 0.2s;
}
.p-contact-form__choice:hover {
border-color: var(--ks-pink);
}
.p-contact-form__choice:has(input:checked) {
border-color: var(--ks-pink-strong);
background: var(--ks-pink-pale);
}
.p-contact-form__choice input, .p-contact-form__check input {
flex-shrink: 0;
width: 18px;
height: 18px;
margin: 0;
accent-color: var(--ks-pink-strong);
}
.p-contact-form {
/* わな：人には見えない場所に置く（display: none だと、自動で送るプログラムが気づきやすい） */
}
.p-contact-form__trap {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.p-contact-form__agree {
margin: 34px 0 0;
padding: 20px 0 0;
border-top: 1px dotted var(--ks-pink);
}
.p-contact-form__agree-text {
margin: 0;
color: var(--ks-text-sub);
font-size: 0.85rem;
line-height: 1.8;
}
.p-contact-form__agree-text a {
color: var(--ks-pink-strong);
}
.p-contact-form__check {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
margin-top: 8px;
font-weight: 700;
cursor: pointer;
}
.p-contact-form__error {
margin: 16px 0 0;
padding: 12px 16px;
border-left: 3px solid #B4475A;
background: #FBF0F0;
color: #8E2F3F;
font-size: 0.9rem;
}
.p-contact-form__submit {
margin: 28px 0 0;
text-align: center;
}
.p-contact-form__submit .c-btn {
min-width: 240px;
}
.p-contact-form__submit .c-btn:disabled {
opacity: 0.6;
cursor: wait;
}
.p-contact-form {
/* 送信したあとのお知らせ */
}
.p-contact-form--done {
text-align: center;
}
.p-contact-form--done:focus {
outline: none;
}
.p-contact-form__done-title {
margin: 0;
color: var(--ks-pink-strong);
font-family: var(--ks-font-heading);
font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem);
font-weight: 600;
letter-spacing: 0.06em;
}
.p-contact-form__done-text {
margin: 14px 0 0;
color: var(--ks-text-sub);
line-height: 1.9;
}
/* ---------- 固定ページ ---------- */
.p-page-content {
max-width: 800px;
margin: 0 auto;
padding: clamp(40px, 6vw, 64px) 24px clamp(72px, 10vw, 120px);
}
.p-page-content--center {
text-align: center;
}
.p-page-content h2 {
margin: 2em 0 0.8em;
padding-bottom: 0.4em;
border-bottom: 2px solid var(--ks-pink-soft);
font-size: 1.25rem;
}
.p-page-content h2 {
font-family: var(--ks-font-heading);
font-weight: 600;
letter-spacing: 0.06em;
}
.p-page-content {
/* 文章・箇条書き（プライバシーポリシーなど） */
}
.p-page-content p, .p-page-content li {
line-height: 1.95;
}
.p-page-content ul {
margin: 0 0 1.2em;
padding-left: 1.4em;
}
.p-page-content li + li {
margin-top: 0.4em;
}
.p-page-content li::marker {
color: var(--ks-pink);
}
.p-page-content a {
color: var(--ks-pink-strong);
}
/* トップの文字は順番に浮かび上がり、最後に MacBook が浮かび上がる */
@media (prefers-reduced-motion: no-preference) {
.p-hero__content > *, .p-hero__device {
animation: ks-fade-up 1s ease-out both;
}
.p-hero__content > :nth-child(1) {
animation-delay: 0.3s;
}
.p-hero__content > :nth-child(2) {
animation-delay: 0.7s;
}
.p-hero__content > :nth-child(3) {
animation-delay: 1.1s;
}
.p-hero__content > :nth-child(4) {
animation-delay: 1.4s;
}
.p-hero__device {
animation-delay: 0.9s;
}
}
.p-hero {
/* ---------- ヒーロー ---------- */
/* 左に文字、右に MacBook Air（幅が狭いときは文字の下）。地はグレージュで、下の波でアイボリーへつなぐ */
}
.p-hero {
position: relative;
overflow: hidden;
padding: clamp(40px, 6vw, 88px) 24px calc(var(--ks-wave-h) + clamp(40px, 5vw, 64px));
background: radial-gradient(ellipse 55% 65% at 75% 35%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, var(--ks-beige) 0%, var(--ks-yellow-pale) 100%);
}
.p-hero__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
align-items: center;
gap: clamp(32px, 5vw, 80px);
max-width: 1200px;
margin: 0 auto;
}
.p-hero .c-catch {
margin: 0;
}
.p-hero__eyebrow {
display: inline-block;
margin: 0 0 14px;
padding: 0.35em 1.1em;
border-radius: var(--ks-radius-pill);
background: rgba(255, 255, 255, 0.85);
color: var(--ks-pink-strong);
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.08em;
}
.p-hero__lead {
margin: 16px 0 0;
color: var(--ks-text);
font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.1rem);
font-weight: 500;
line-height: 1.9;
}
.p-hero__buttons {
display: flex;
flex-wrap: wrap;
gap: 12px 16px;
margin-top: 28px;
}
.p-hero__buttons .c-btn {
min-height: 52px;
}
.p-hero {
/* 少し狭いパソコン：文字が窮屈にならないよう、左右を半分ずつにする */
}
@media (min-width: 960px) and (max-width: 1179px) {
.p-hero__inner {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
.p-hero {
/* タブレット・スマホ：文字を上、MacBook を下に。文字はまん中ぞろえ */
}
@media (max-width: 959px) {
.p-hero__inner {
grid-template-columns: minmax(0, 1fr);
}
.p-hero__content {
text-align: center;
}
.p-hero__buttons {
justify-content: center;
}
.p-hero__device {
width: min(100%, 640px);
margin: 0 auto;
}
}
@media (max-width: 599px) {
.p-hero {
padding-top: 24px;
}
}
.p-hero {
/* スマホ：開いてすぐ iPhone が見えるように、「小見出し → キャッチ → iPhone → 説明 → ボタン」の順に並べかえる
（.p-hero__content の箱をなくして、中の文字を 1 つずつ並べられるようにしている） */
}
@media (max-width: 599px) {
.p-hero__inner {
gap: 0;
}
.p-hero__content {
display: contents;
}
.p-hero__eyebrow {
order: 1;
justify-self: center;
margin-bottom: 10px;
}
.p-hero .c-catch {
order: 2;
line-height: 1.5;
}
.p-hero__device {
order: 3;
margin-top: 20px;
}
.p-hero__lead {
order: 4;
margin-top: 28px;
}
.p-hero__buttons {
order: 5;
}
.p-hero .c-catch {
font-size: 1.7rem;
}
.p-hero__lead {
font-size: 0.92rem;
}
.p-hero__buttons {
margin-top: 18px;
}
.p-hero__buttons .c-btn {
min-height: 46px;
padding: 0 1.6em;
font-size: 0.92rem;
}
}
@media (prefers-reduced-motion: no-preference) {
.is-intro .p-hero__content > :nth-child(1) {
animation-delay: calc(var(--ks-intro-wait) + 0.3s);
}
.is-intro .p-hero__content > :nth-child(2) {
animation-delay: calc(var(--ks-intro-wait) + 0.7s);
}
.is-intro .p-hero__content > :nth-child(3) {
animation-delay: calc(var(--ks-intro-wait) + 1.1s);
}
.is-intro .p-hero__content > :nth-child(4) {
animation-delay: calc(var(--ks-intro-wait) + 1.4s);
}
.is-intro .p-hero__device {
animation-delay: calc(var(--ks-intro-wait) + 0.9s);
}
}
.p-hero {
/* ---------- スマホの幅：枠を iPhone に変える ---------- */
/* 画面は各作品のスマホの見た目（assets/img/hero/sp/）。スマホ向けの画面写真がない作品は出さない */
}
@media (max-width: 599px) {
.p-hero__device {
width: min(58vw, 220px);
}
}
.p-hero {
/* ---------- ヒーロー：キャッチと小見出しを、明朝体らしくゆったり ---------- */
}
.p-hero .c-catch {
letter-spacing: 0.14em;
}
.p-hero__eyebrow {
border: 1px solid var(--ks-pink-soft);
background: rgba(251, 248, 244, 0.85);
font-weight: 500;
letter-spacing: 0.12em;
}
/* ---------- オープニング（トップを最初に開いたときだけ） ---------- */
/* 時間の流れ（秒）：
0〜2.2 前のヒーロー（写真＋キャッチ）。写真はゆっくり寄る
2.2〜3.0 キャッチが消え、写真はぼけながら薄くなって背景に残る。同時に作品の画面が出はじめる
2.3〜3.3 作品の画面が 1 枚ずつ（0.15 秒ずつずらして）、ピントが合うように並ぶ。並んだあとはゆっくり漂う
2.9〜 まん中に「Works」（字の間が詰まりながら）→ 3.5 秒から心電図ラインが描かれる
5.2〜5.9 作品が外へ広がりながら、「Works」と一緒に消える
5.7〜6.4 オープニング全体が消えて、今のヒーローが浮かび上がる（main.js の INTRO_TIME = 6400 と合わせる）
出すかどうかは inc/setup.php が に付ける is-intro で決める（動きを減らす設定の人・2 回目以降は出ない） */
.p-intro {
display: none;
}
@media (prefers-reduced-motion: no-preference) {
.is-intro .p-intro {
position: fixed;
inset: 0;
z-index: 200;
display: block;
overflow: hidden;
background: radial-gradient(ellipse 55% 65% at 50% 45%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, var(--ks-beige) 0%, var(--ks-yellow-pale) 100%);
animation: ks-intro-out 0.7s ease 5.7s forwards;
}
}
.p-intro {
/* 飛ばしたとき（画面を押す・キーを押す・スクロール）は、すぐ消す */
}
@media (prefers-reduced-motion: no-preference) {
.is-intro.is-intro-done .p-intro {
animation: ks-intro-out 0.4s ease forwards;
}
}
.p-intro {
/* ① 前のヒーロー */
}
@media (prefers-reduced-motion: no-preference) {
.p-intro__photo {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: flex-end;
animation: ks-intro-photo-dim 0.8s ease-in 2.2s forwards;
}
.p-intro__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 30% center;
animation: ks-intro-zoom 3s ease-out both;
}
.p-intro__veil {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(251, 248, 244, 0) 30%, rgba(251, 248, 244, 0.5) 62%, rgba(251, 248, 244, 0.62) 100%);
}
.p-intro__content {
position: relative;
width: min(44%, 560px);
margin-right: 7%;
text-align: center;
}
.p-intro__content {
animation: ks-intro-out 0.5s ease-in 2.2s forwards; /* キャッチは消す（写真だけ背景に残す） */
}
.p-intro__content > * {
animation: ks-fade-up 1s ease-out both;
}
.p-intro__content > :nth-child(1) {
animation-delay: 0.2s;
}
.p-intro__content > :nth-child(2) {
animation-delay: 0.5s;
}
.p-intro .c-catch {
margin: 0;
letter-spacing: 0.14em;
text-shadow: 0 0 24px rgba(251, 248, 244, 0.9);
}
}
.p-intro {
/* ② 制作実績の画面：写真をボードに貼るように、少し傾けて上下に並べる。まん中に「Works」 */
}
@media (prefers-reduced-motion: no-preference) {
.p-intro__works {
position: absolute;
inset: 0;
z-index: 1; /* 薄く残した写真より上に */
}
.p-intro__shot {
position: absolute;
display: block;
width: min(25vw, 360px);
aspect-ratio: 16/10;
overflow: hidden;
border: 5px solid var(--ks-white);
border-radius: 10px;
background: var(--ks-white);
box-shadow: 0 18px 40px rgba(61, 52, 54, 0.16);
rotate: var(--r, 0deg);
/* 入る（ピントが合う）→ ゆっくり漂う → 外へ広がりながら消える */
animation: ks-intro-card-in 1s cubic-bezier(0.2, 0.8, 0.3, 1) calc(2.3s + var(--i) * 0.15s) both, ks-intro-drift 3.6s linear 2.3s both, ks-intro-card-out 0.7s ease-in calc(5.2s + var(--i) * 0.04s) forwards;
}
.p-intro__shot img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
}
.p-intro {
/* 置く場所・傾き・漂う向き（--dx・--dy。まん中から外へ） */
}
@media (prefers-reduced-motion: no-preference) {
.p-intro__shot:nth-of-type(1) {
top: 9%;
left: 5%;
--r: -5deg;
--dx: -14px;
--dy: -10px;
}
.p-intro__shot:nth-of-type(2) {
top: 4%;
left: 37%;
--r: 3deg;
--dx: 4px;
--dy: -14px;
}
.p-intro__shot:nth-of-type(3) {
top: 11%;
right: 5%;
--r: 6deg;
--dx: 14px;
--dy: -8px;
}
.p-intro__shot:nth-of-type(4) {
bottom: 8%;
left: 8%;
--r: 4deg;
--dx: -14px;
--dy: 10px;
}
.p-intro__shot:nth-of-type(5) {
bottom: 4%;
left: 39%;
--r: -3deg;
--dx: -4px;
--dy: 14px;
}
.p-intro__shot:nth-of-type(6) {
bottom: 10%;
right: 6%;
--r: -6deg;
--dx: 14px;
--dy: 8px;
}
.p-intro__title {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
translate: -50% -50%;
animation: ks-intro-out 0.6s ease-in 5.2s forwards;
}
.p-intro__title-en {
color: var(--ks-pink-strong);
font-family: var(--ks-font-en);
font-size: clamp(3rem, 2rem + 4vw, 5.5rem);
font-style: italic;
line-height: 1;
text-shadow: 0 0 30px rgba(251, 248, 244, 0.95);
animation: ks-intro-tracking 1.2s cubic-bezier(0.2, 0.8, 0.3, 1) 2.9s both;
}
}
.p-intro {
/* 心電図ライン：ロゴと同じ線が、左から描かれる */
}
@media (prefers-reduced-motion: no-preference) {
.p-intro__beat {
width: clamp(90px, 10vw, 130px);
height: auto;
margin-top: 4px;
color: var(--ks-pink);
}
.p-intro__beat path {
stroke-dasharray: 1;
stroke-dashoffset: 1;
animation: ks-intro-draw 1.1s ease-in-out 3.5s forwards;
}
.p-intro__title-ja {
margin-top: 6px;
color: var(--ks-text);
font-family: var(--ks-font-heading);
font-size: clamp(0.9rem, 0.8rem + 0.4vw, 1.1rem);
letter-spacing: 0.2em;
text-shadow: 0 0 20px rgba(251, 248, 244, 0.95);
animation: ks-fade-up 0.9s ease-out 3.6s both;
}
}
.p-intro {
/* スマホ：縦長の写真にして、上の空の部分に文字を置く。作品の画面はスマホの見た目（縦長）で、上に 3 枚・下に 2 枚 */
}
@media (prefers-reduced-motion: no-preference) and (max-width: 599px) {
.p-intro__photo {
align-items: flex-start;
justify-content: center;
}
.p-intro__img {
object-position: center bottom;
}
.p-intro__veil {
background: linear-gradient(180deg, rgba(251, 248, 244, 0.6) 0%, rgba(251, 248, 244, 0) 55%);
}
.p-intro__content {
width: 90%;
margin: 22vh 0 0;
}
.p-intro .c-catch {
font-size: 1.7rem;
}
.p-intro__shot {
width: 29vw;
aspect-ratio: 390/844;
border-width: 3px;
border-radius: 12px;
}
.p-intro__shot:nth-of-type(1) {
top: 5%;
left: 3%;
--r: -5deg;
}
.p-intro__shot:nth-of-type(2) {
top: 2%;
left: 35.5%;
--r: 3deg;
}
.p-intro__shot:nth-of-type(3) {
top: 6%;
right: 3%;
--r: 6deg;
}
.p-intro__shot:nth-of-type(4) {
top: auto;
bottom: 5%;
left: 12%;
--r: 4deg;
}
.p-intro__shot:nth-of-type(5) {
top: auto;
bottom: 3%;
left: auto;
right: 12%;
--r: -4deg;
}
.p-intro__shot--pc-only {
display: none;
}
}
/* ---------- MacBook Air（CSS で描いた枠。画面の中に制作実績を映す）。スマホの幅では iPhone に変わる（下の方） ---------- */
/* 大きさは .device の幅に合わせて伸び縮みする（cqi ＝ .device の幅の 1%）。色はスターライト（あたたかいシルバー） */
.p-device {
position: relative;
container-type: inline-size;
/* ふた（画面の側） */
}
.p-device__frame {
position: relative;
margin: 0 6.5cqi;
padding: 1.5cqi 1.5cqi 2.1cqi;
border-radius: 2.6cqi 2.6cqi 0.6cqi 0.6cqi;
background: #141416;
box-shadow: 0 0 0 0.3cqi #d9cfc3, inset 0 0 0 0.15cqi #3a3a3d, 0 2cqi 5cqi rgba(61, 52, 54, 0.14); /* ふたの影 */
}
.p-device__screen {
position: relative;
overflow: hidden;
border-radius: 0.6cqi 0.6cqi 0 0;
background: var(--ks-white);
}
.p-device {
/* 画面にうっすら光が映りこむ */
}
.p-device__screen::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(118deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 36%);
pointer-events: none;
}
.p-device {
/* 画面のいちばん上の帯と、まん中のカメラの切り欠き（ノッチ） */
}
.p-device__bar {
position: relative;
display: block;
height: 2.2cqi;
background: #f7f4f0;
border-bottom: 1px solid rgba(61, 52, 54, 0.06);
}
.p-device__notch {
position: absolute;
top: 0;
left: 50%;
width: 11cqi;
height: 100%;
border-radius: 0 0 0.8cqi 0.8cqi;
background: #141416;
transform: translateX(-50%);
}
.p-device {
/* スライドの並び：横に並べて、1 枚ずつピタッと止まるようにする（指や横スクロールでも動かせる） */
}
.p-device__slides {
display: flex;
aspect-ratio: 16/10;
margin: 0;
padding: 0;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none; /* スクロールバーは出さない */
list-style: none;
}
.p-device__slides::-webkit-scrollbar {
display: none;
}
.p-device__slide {
flex: 0 0 100%;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.p-device__link {
display: block;
height: 100%;
}
.p-device__link:focus-visible {
outline: 3px solid var(--ks-pink-strong);
outline-offset: -3px;
}
.p-device__shot {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
.p-device {
/* 本体（キーボードの側）。手前のふちだけが見えている */
}
.p-device__base {
position: relative;
z-index: 1;
height: 2.4cqi;
margin-top: -0.1cqi;
border-radius: 0.3cqi 0.3cqi 5cqi 5cqi/0.3cqi 0.3cqi 2.4cqi 2.4cqi;
background: linear-gradient(180deg, #f6f1ea 0%, #e7ded2 38%, #cbbdad 100%);
box-shadow: inset 0 0.15cqi 0 rgba(255, 255, 255, 0.85), inset 0 -0.25cqi 0 rgba(140, 122, 104, 0.35); /* 下のふちの影 */
}
.p-device {
/* 開けるときに指をかける、まん中のくぼみ */
}
.p-device__base::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 14cqi;
height: 1cqi;
border-radius: 0 0 1.2cqi 1.2cqi/0 0 1cqi 1cqi;
background: linear-gradient(180deg, #c3b6a7 0%, #ddd3c7 100%);
transform: translateX(-50%);
}
.p-device {
/* 机に落ちる影 */
}
.p-device::after {
content: "";
position: absolute;
right: 3cqi;
bottom: -2.2cqi;
left: 3cqi;
height: 4cqi;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(61, 52, 54, 0.22), rgba(61, 52, 54, 0));
}
@media (prefers-reduced-motion: no-preference) {
.p-device__slides {
scroll-behavior: smooth;
}
}
.p-device {
/* 本体：まるい角、黒いふち、スターライトのふち取り */
}
@media (max-width: 599px) {
.p-device__frame {
margin: 0;
padding: 3.6cqi;
border-radius: 15cqi;
box-shadow: 0 0 0 1.4cqi #d9cfc3, 0 0 0 1.8cqi #c9bcad, inset 0 0 0 0.6cqi #3a3a3d, 0 6cqi 12cqi rgba(61, 52, 54, 0.18); /* 本体の影 */
}
.p-device__screen {
border-radius: 11.5cqi;
}
}
.p-device {
/* いちばん上の時計などが出る帯（ステータスバー）と、まん中の黒いカプセル（ダイナミックアイランド） */
}
@media (max-width: 599px) {
.p-device__bar {
height: 11cqi;
border-bottom: 0;
background: var(--ks-white);
}
.p-device__notch {
top: 3.2cqi;
width: 30cqi;
height: 8.4cqi;
border-radius: 999px;
}
.p-device__slides {
aspect-ratio: 390/820;
}
.p-device__slide--pc-only {
display: none;
}
}
.p-device {
/* MacBook の本体（キーボードの側）はないので消し、影を足元に小さく */
}
@media (max-width: 599px) {
.p-device__base {
display: none;
}
.p-device::after {
right: 12cqi;
bottom: -7cqi;
left: 12cqi;
height: 8cqi;
}
}
@media (max-width: 599px) {
.p-hero-slider__dot--pc-only {
display: none;
}
}
.p-hero-slider {
/* ---------- MacBook の下：作品名と操作ボタン ---------- */
}
.p-hero-slider__bar {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-top: clamp(26px, 3vw, 34px);
}
.p-hero-slider__bar[hidden], .p-hero-slider__controls[hidden], .p-hero-slider__button[hidden] {
display: none;
}
.p-hero-slider__caption {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 4px 10px;
min-height: 1.9em;
margin: 0;
color: var(--ks-text);
font-size: 0.9rem;
line-height: 1.5;
text-align: center;
}
.p-hero-slider__type {
padding: 0.15em 0.9em;
border: 1px solid var(--ks-pink-soft);
border-radius: var(--ks-radius-pill);
background: rgba(255, 255, 255, 0.75);
color: var(--ks-pink-strong);
font-size: 0.75rem;
letter-spacing: 0.08em;
}
.p-hero-slider__controls {
display: flex;
align-items: center;
gap: 6px;
}
.p-hero-slider {
/* 丸いボタン（押せる大きさは 44px） */
}
.p-hero-slider__button {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid var(--ks-pink-soft);
border-radius: 50%;
background: rgba(255, 255, 255, 0.75);
color: var(--ks-pink-strong);
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.p-hero-slider__button:hover {
border-color: var(--ks-pink);
background: var(--ks-white);
}
.p-hero-slider {
/* ボタンの中の印（矢印・止める・再生）。色は文字と同じ */
}
.p-hero-slider__button::before {
content: "";
width: 18px;
height: 18px;
background: currentColor;
-webkit-mask: var(--ks-icon-arrow-right) center/contain no-repeat;
mask: var(--ks-icon-arrow-right) center/contain no-repeat;
}
.p-hero-slider__button--prev::before {
transform: scaleX(-1);
}
.p-hero-slider__button--pause {
margin-left: 6px;
}
.p-hero-slider__button--pause::before {
width: 16px;
height: 16px;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='5' width='4' height='14' rx='1'/%3E%3Crect x='14' y='5' width='4' height='14' rx='1'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='5' width='4' height='14' rx='1'/%3E%3Crect x='14' y='5' width='4' height='14' rx='1'/%3E%3C/svg%3E");
}
.p-hero-slider__button--pause.is-paused::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13a1 1 0 0 0 1.5.86l10.5-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13a1 1 0 0 0 1.5.86l10.5-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5z'/%3E%3C/svg%3E");
}
.p-hero-slider {
/* 今どの作品かを示す点（押すボタンではなく、目印） */
}
.p-hero-slider__dots {
display: flex;
gap: 8px;
padding: 0 8px;
}
.p-hero-slider__dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ks-pink-soft);
transition: background-color 0.3s ease, transform 0.3s ease;
}
.p-hero-slider__dot.is-active {
background: var(--ks-pink-strong);
transform: scale(1.3);
}
@media (max-width: 599px) {
.p-hero-slider__caption {
font-size: 0.82rem;
}
}
/* ---------- まとめの実績（グループ・系列・マルチサイト）の事例 ---------- */
/* 画面写真のうしろに、各サイトのテーマカラー（--case-color）をずらして敷く。「同じ形で、色だけ違う」が見てわかるように */
/* 部品は template-parts/case.php。トップ（p-case--front）と、まとめの詳細ページ（p-case--single）で使う */
.p-case__head {
display: grid;
grid-template-columns: auto 1fr;
gap: 16px 56px;
align-items: end;
}
.p-case__client {
grid-column: 1/-1;
margin: 0;
color: var(--ks-pink-strong);
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.08em;
}
.p-case__title {
margin: 0;
font-family: var(--ks-font-heading);
font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem);
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.06em;
}
.p-case__lead {
margin: 0;
color: var(--ks-text-sub);
line-height: 2;
}
.p-case__sites {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* サイトの数（2〜4 つほど）に合わせて並ぶ。4 つでも 1 列に入る幅 */
gap: 0 28px; /* 縦の間は、各サイトの下の余白（&__site の padding-bottom）でとる */
margin: 48px 0 0;
padding: 0;
list-style: none;
}
.p-case {
/* 画面写真（色見本カードつき）・名前・キャッチの 3 段を、となりのサイトとそろえる（subgrid：親の行の高さを、中の要素でも使う）。
名前は「まとめの中での短い名前」で 1 行に収め、2 行になりやすいキャッチはいちばん下の段にして、すき間ができないようにしている */
}
.p-case__site {
--case-color: var(--ks-pink-soft); /* テーマカラーが空のとき */
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
row-gap: 0;
padding-bottom: 40px;
}
.p-case__link {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
row-gap: 0;
align-items: start;
color: inherit;
text-decoration: none;
}
.p-case {
/* 入っていない段があっても（キャッチが空でも）、ほかの段がずれないように、置く段を決めておく */
}
.p-case__visual {
grid-row: 1;
}
.p-case__name {
grid-row: 2;
}
.p-case__catch {
grid-row: 3;
}
.p-case {
/* 画面写真のうしろの色見本カード：テーマカラーの板を右下にずらして敷き、下のふちに色の名前を書く */
}
.p-case__visual {
position: relative;
display: block;
padding: 0 14px 34px 0;
}
.p-case__visual::before {
content: "";
position: absolute;
top: 14px;
right: 0;
bottom: 0;
left: 14px;
border-radius: 6px;
background: color-mix(in srgb, var(--case-color) 60%, var(--ks-white));
transition: background-color 0.3s;
}
.p-case__shot {
position: relative;
z-index: 1;
display: block;
overflow: hidden;
aspect-ratio: 16/10;
border: 1px solid rgba(61, 52, 54, 0.12);
border-radius: 6px;
background: var(--ks-white);
transition: transform 0.3s;
}
.p-case__shot img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.p-case__chip {
position: absolute;
right: 12px;
bottom: 8px;
color: var(--ks-text);
font-size: 0.74rem;
letter-spacing: 0.12em;
line-height: 1.4;
}
.p-case__link:hover .p-case__shot {
transform: translate(-4px, -4px);
}
.p-case__link:hover .p-case__visual::before {
background: color-mix(in srgb, var(--case-color) 80%, var(--ks-white));
}
.p-case__name {
margin-top: 18px;
font-family: var(--ks-font-heading);
font-size: 1.08rem;
font-weight: 600;
line-height: 1.6;
letter-spacing: 0.04em;
}
.p-case__link:hover .p-case__name {
color: var(--ks-pink-strong);
text-decoration: underline;
}
.p-case__catch {
margin-top: 4px;
color: var(--ks-text-sub);
font-size: 0.86rem;
line-height: 1.7;
}
.p-case__foot {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 16px 40px;
margin: 8px 0 0; /* サイトの下に 40px の余白があるので、合わせて 48px */
padding: 24px 0 0;
border-top: 1px solid var(--ks-pink-soft);
}
.p-case__facts {
display: flex;
flex: 1 1 360px; /* 360px より狭くなったら、右のリンクを下に回して、1 行を全部使う（細く縮まないように） */
flex-wrap: wrap;
gap: 16px 48px;
margin: 0;
}
.p-case__fact--wide {
flex: 1 1 280px;
max-width: 560px;
}
.p-case__fact dt {
color: var(--ks-pink-strong);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.08em;
}
.p-case__fact dd {
margin: 6px 0 0;
font-size: 0.92rem;
line-height: 1.8;
}
.p-case__more {
margin: 0;
}
.p-case__more a {
display: inline-block;
padding: 10px 0;
color: var(--ks-pink-strong);
font-weight: 700;
}
.p-case__more a::after {
content: " →"/""; /* 読み上げさせない飾り */
}
.p-case {
/* まとめの詳細ページ：見出しは 1 列で、上の余白を少なく */
}
.p-case--single {
margin-bottom: 8px; /* 下の「担当」などとの間（サイトの下の 40px と合わせて 48px） */
}
.p-case--single .p-case__head {
grid-template-columns: 1fr;
}
.p-case--single .p-case__sites {
margin-top: 32px;
}
@media (max-width: 959px) {
.p-case__head {
grid-template-columns: 1fr;
}
.p-case__sites {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* タブレットでは 2 つずつ */
gap: 0 20px;
}
}
@media (max-width: 599px) {
.p-case {
/* スマホ：ご依頼の内容・担当を縦に並べ、くわしく見るのリンクはその下に */
}
.p-case__foot {
display: block;
}
.p-case__facts {
flex-direction: column;
gap: 16px;
}
.p-case__fact--wide {
flex: none;
max-width: none;
}
.p-case__more {
margin-top: 12px;
}
.p-case__sites {
grid-template-columns: 1fr;
max-width: 420px;
margin-right: auto;
margin-left: auto;
}
}
/* ---------- 制作実績：そのほか ---------- */
.p-works-other {
margin-top: clamp(64px, 9vw, 96px);
}
.p-works-other__title {
display: flex;
align-items: center;
gap: 16px;
margin: 0 0 28px;
font-family: var(--ks-font-heading);
font-size: 1.15rem;
font-weight: 600;
letter-spacing: 0.06em;
}
.p-works-other {
/* 見出しの右に細い線をのばす */
}
.p-works-other__title::after {
content: "";
flex: 1;
height: 1px;
background: var(--ks-pink-soft);
}
/* ---------- できること：ご依頼の形（デザイン案がある方／新しくつくる方） ---------- */
/* 上に「だれに・何を頼めるか」（左に説明、右にできることの一覧）、下に見積もりの例（p-estimate）を横に並べる。
細い線で区切るだけにして、カードにはしない。見積もりの例は 3〜4 枚あるので、横に並べて縦に長くならないようにしている */
.p-plan {
padding: clamp(40px, 6vw, 64px) 0;
border-top: 1px solid var(--ks-pink-soft);
text-align: left;
}
.p-plan:last-of-type {
border-bottom: 1px solid var(--ks-pink-soft);
}
.p-plan__intro {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 56px;
}
.p-plan {
/* 左の列：だれに・見出し・説明 */
}
.p-plan__who, .p-plan__title, .p-plan__text {
grid-column: 1;
}
.p-plan {
/* 右の列：できることの一覧（左の 3 つの高さのまん中に） */
}
.p-plan__can {
grid-column: 2;
grid-row: 1/span 3;
align-self: center;
}
.p-plan__who {
margin: 0;
color: var(--ks-pink-strong);
font-size: 0.88rem;
font-weight: 700;
letter-spacing: 0.06em;
}
.p-plan__title {
margin: 8px 0 0;
font-family: var(--ks-font-heading);
font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem);
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.06em;
}
.p-plan__text {
margin: 16px 0 0;
line-height: 1.95;
}
.p-plan__can {
margin: 20px 0 0;
padding: 0;
list-style: none;
}
.p-plan__can li {
position: relative;
padding: 6px 0 6px 1.6em;
font-size: 0.92rem;
line-height: 1.7;
}
.p-plan {
/* 頭に短い線（飾り） */
}
.p-plan__can li::before {
content: "";
position: absolute;
top: 1.05em;
left: 0;
width: 0.9em;
height: 1px;
background: var(--ks-pink-strong);
}
.p-plan__bills {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* パソコンでは 3 枚まで横に並ぶ */
gap: 20px;
margin-top: 32px;
}
.p-plan {
/* 4 枚以上：2 枚ずつ */
}
.p-plan__bills--pair {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 959px) {
.p-plan__intro {
grid-template-columns: 1fr;
}
.p-plan__can {
grid-column: 1;
grid-row: auto;
}
.p-plan__bills {
grid-template-columns: repeat(2, minmax(0, 1fr)); /* タブレットでは 2 枚ずつ */
}
}
@media (max-width: 599px) {
.p-plan__bills {
grid-template-columns: 1fr; /* スマホでは 1 枚ずつ */
}
}
/* ---------- 見積もりの例（見積書のような紙） ---------- */
/* 内訳は点線でつなぎ、合計は二重線の下に大きく。数字が小さくならないように、合計ははっきり大きくする */
.p-estimate {
display: flex;
flex-direction: column;
padding: 24px 24px 20px;
border: 1px solid #E6DCD4;
border-radius: 4px;
background: var(--ks-white);
}
.p-estimate__label {
margin: 0;
color: var(--ks-text-sub);
font-size: 0.78rem;
letter-spacing: 0.16em;
}
.p-estimate__case {
margin: 6px 0 0;
padding-bottom: 14px;
border-bottom: 1px solid #E6DCD4;
font-family: var(--ks-font-heading);
font-size: 1.02rem;
font-weight: 600;
line-height: 1.6;
}
.p-estimate__items {
margin: 10px 0 12px;
}
.p-estimate__item {
display: flex;
align-items: baseline;
gap: 8px;
padding: 6px 0;
font-size: 0.86rem;
line-height: 1.6;
}
.p-estimate {
/* 品目と金額のあいだの点線 */
}
.p-estimate__item::after {
content: "";
order: 1;
flex: 1;
min-width: 16px;
border-bottom: 1px dotted var(--ks-pink);
}
.p-estimate__item dt {
order: 0;
}
.p-estimate__item dd {
order: 2;
flex-shrink: 0;
margin: 0;
}
.p-estimate__total {
display: flex;
align-items: baseline;
gap: 6px;
margin: auto 0 0; /* 紙のいちばん下へ（となりの紙と合計の高さがそろう） */
padding-top: 14px;
border-top: 3px double var(--ks-pink-soft);
color: var(--ks-pink-strong);
}
.p-estimate__total-label {
margin-right: auto;
color: var(--ks-text);
font-size: 0.9rem;
font-weight: 700;
}
.p-estimate__num {
font-family: var(--ks-font-en);
font-size: clamp(2.2rem, 1.8rem + 1vw, 2.6rem); /* 4 枚横に並んでも 1 行に収まる大きさ */
font-weight: 600;
line-height: 1;
letter-spacing: 0.02em;
}
.p-estimate__yen {
font-size: 1rem;
font-weight: 700;
}
.p-estimate__note {
margin: 12px 0 0;
color: var(--ks-text-sub);
font-size: 0.8rem;
line-height: 1.7;
}
/* ---------- 料金の目安 ---------- */
/* ご依頼の形（p-plan）・保守・注意書き・約束ごとをまとめる枠 */
.p-price {
text-align: center;
}
.p-price__lead {
margin: 0 auto 40px;
max-width: 880px;
line-height: 1.9;
}
.p-price__lead strong {
color: var(--ks-pink-strong);
}
.p-price__notes {
max-width: 760px;
margin: 24px auto 0;
padding: 0;
color: var(--ks-text-sub);
font-size: 0.82rem;
line-height: 1.8;
list-style: none;
text-align: left;
}
.p-price__notes li {
padding-left: 1.2em;
text-indent: -1.2em;
}
.p-price__notes li::before {
content: "※"/""; /* 読み上げさせない飾り */
margin-right: 0.2em;
}
/* 公開後の保守・オプション（2 列。スマホでは縦に並ぶ） */
/* 見積もりの例（p-estimate）と同じ、細い線の紙。角丸の上に色の帯を付けるカードは使わない（2026-11-09） */
.p-price-support {
margin-top: 40px;
padding: 28px clamp(20px, 3vw, 36px);
border: 1px solid #E6DCD4;
border-radius: 4px;
background: var(--ks-white);
text-align: left;
}
.p-price-support__title {
margin: 0;
color: var(--ks-text);
font-family: var(--ks-font-heading);
font-size: 1.15rem;
letter-spacing: 0.06em;
}
.p-price-support__lead {
margin: 6px 0 0;
color: var(--ks-text-sub);
font-size: 0.85rem;
}
.p-price-support__cols {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 8px 40px;
margin-top: 16px;
}
.p-price-support__sub {
margin: 0;
padding-bottom: 8px;
border-bottom: 1px dashed var(--ks-pink-soft);
color: var(--ks-pink-strong);
font-size: 0.9rem;
font-weight: 700;
}
.p-price-support__list {
margin: 0;
}
.p-price-support__row {
display: grid;
grid-template-columns: 1fr auto;
gap: 2px 12px;
padding: 10px 0;
}
.p-price-support__row + .p-price-support__row {
border-top: 1px solid var(--ks-pink-pale);
}
.p-price-support__row dt {
font-size: 0.92rem;
font-weight: 500;
}
.p-price-support__yen {
margin: 0;
color: var(--ks-pink-strong);
font-weight: 500;
font-size: 0.92rem;
}
.p-price-support__desc {
grid-column: 1/-1;
margin: 0;
color: var(--ks-text-sub);
font-size: 0.8rem;
line-height: 1.7;
}
/* ご依頼の前に（開け閉めできる約束ごと） */
.p-price-terms {
max-width: 760px;
margin: 20px auto 0;
border: 1px solid var(--ks-pink-soft);
border-radius: var(--ks-radius);
background: rgba(255, 255, 255, 0.6);
text-align: left;
}
.p-price-terms__summary {
position: relative;
min-height: 44px;
padding: 12px 48px 12px 20px;
color: var(--ks-pink-strong);
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
list-style: none;
}
.p-price-terms__summary::-webkit-details-marker {
display: none;
}
.p-price-terms {
/* 右の ＋ の印（開くと − になる） */
}
.p-price-terms__summary::after {
content: ""/"";
position: absolute;
top: 50%;
right: 20px;
width: 12px;
height: 12px;
margin-top: -6px;
background: linear-gradient(currentColor, currentColor) center/12px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center/1.5px 12px no-repeat;
}
.p-price-terms[open] .p-price-terms__summary::after {
background: linear-gradient(currentColor, currentColor) center/12px 1.5px no-repeat;
}
.p-price-terms__list {
margin: 0;
padding: 0 20px 18px 2.4em;
font-size: 0.85rem;
line-height: 1.8;
}
.p-price-terms__list li + li {
margin-top: 6px;
}
/* ---------- 大切にしていること（手紙のような文章） ---------- */
/* 番号は付けない。明朝体で、行間を広く。大事な言葉（mark）に淡いローズの線を引く */
.p-strengths {
max-width: 720px;
margin: 0 auto;
padding-left: clamp(20px, 4vw, 40px);
border-left: 1px solid var(--ks-pink-soft);
}
.p-strengths__text {
margin: 0 0 1.6em;
font-family: var(--ks-font-heading);
font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
line-height: 2.2;
letter-spacing: 0.05em;
}
.p-strengths mark {
padding: 0 0.1em;
background: linear-gradient(transparent 62%, var(--ks-pink-pale) 62%);
color: inherit;
font-weight: 600;
}
.p-strengths__sign {
margin: 0;
color: var(--ks-pink-strong);
font-family: var(--ks-font-en);
font-size: 1.8rem;
font-style: italic;
text-align: right;
}
/* ---------- 使える技術 ---------- */
.p-skills {
display: grid;
gap: 16px;
max-width: 880px;
margin: 0 auto;
}
.p-skills__group {
display: grid;
grid-template-columns: 9em 1fr;
gap: 16px;
align-items: center;
padding: 20px 24px;
border-radius: var(--ks-radius);
background: var(--ks-gray-light);
}
.p-skills__title {
color: var(--ks-pink-strong);
font-weight: 700;
}
.p-skills dd {
margin: 0;
}
@media (max-width: 599px) {
.p-skills__group {
grid-template-columns: 1fr;
gap: 10px;
}
}
.p-skills__title {
font-family: var(--ks-font-heading);
font-weight: 600;
letter-spacing: 0.06em;
}
/* ---------- 制作の流れ ---------- */
/* 番号は付けず、1 本の線の上に点を並べる。パソコンでは横に、タブレット・スマホでは縦に */
.p-flow {
position: relative;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 0 20px;
margin: 0;
padding: 0;
list-style: none;
/* 横の線（点の高さ） */
}
.p-flow::before {
content: "";
position: absolute;
top: 7px;
right: 0;
left: 0;
height: 1px;
background: var(--ks-pink);
}
.p-flow {
/* 線の右はしの矢じり（飾り） */
}
.p-flow::after {
content: "";
position: absolute;
top: 3px;
right: 0;
width: 8px;
height: 8px;
border-top: 1px solid var(--ks-pink);
border-right: 1px solid var(--ks-pink);
transform: rotate(45deg);
}
.p-flow {
/* 見出し・「だれが」の印・説明文の 3 段を、となりの手順とそろえる（subgrid：親の行の高さを、中の要素でも使う）。
見出しが 2 行になっても、印と説明文の高さはずれない。見出しは 1 行に収まる長さにしておくと、すき間もできない */
}
.p-flow__item {
position: relative;
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
row-gap: 0;
align-items: start;
justify-items: start; /* 印が横にのびないように */
padding-top: 36px;
}
.p-flow {
/* 線の上の点 */
}
.p-flow__item::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 15px;
height: 15px;
box-sizing: border-box;
border: 1px solid var(--ks-pink-strong);
border-radius: 50%;
background: var(--ks-beige);
}
.p-flow {
/* お客様がすることは、点を塗る */
}
.p-flow__item:has(.p-flow__who--you)::before {
background: var(--ks-pink-strong);
}
.p-flow__title {
margin: 0;
font-family: var(--ks-font-heading);
font-size: 1.05rem;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.04em;
}
.p-flow__who {
display: inline-block;
margin: 10px 0 0;
padding: 0.1em 0.8em;
border: 1px solid var(--ks-pink);
border-radius: var(--ks-radius-pill);
color: var(--ks-pink-strong);
font-size: 0.76rem;
font-weight: 700;
}
.p-flow__who--you {
border-color: var(--ks-pink-strong);
background: var(--ks-pink-strong);
color: var(--ks-white);
}
.p-flow__text {
margin: 10px 0 0;
color: var(--ks-text-sub);
font-size: 0.88rem;
line-height: 1.8;
}
@media (max-width: 959px) {
.p-flow {
grid-template-columns: 1fr;
/* 縦に並ぶときは、そろえる必要がないので、ふつうの並びに戻す */
}
.p-flow__item {
display: block;
grid-row: auto;
}
.p-flow {
gap: 0;
max-width: 560px;
margin: 0 auto;
/* 縦の線 */
}
.p-flow::before {
top: 8px;
bottom: 8px;
left: 7px;
width: 1px;
height: auto;
}
.p-flow::after {
top: auto;
right: auto;
bottom: 4px;
left: 3px;
transform: rotate(135deg);
}
.p-flow__item {
padding: 0 0 32px 40px;
}
.p-flow__item::before {
top: 4px;
}
.p-flow__title {
display: inline;
margin-right: 10px;
}
.p-flow__who {
margin-top: 0;
vertical-align: 0.15em;
}
.p-flow__text {
margin-top: 6px;
}
}
/* ---------- よくある質問 ---------- */
.p-faq {
max-width: 800px;
margin: 0 auto;
}
.p-faq__item {
margin: 0 0 12px;
border-radius: var(--ks-radius);
background: var(--ks-white);
box-shadow: 0 4px 14px rgba(149, 90, 99, 0.1);
}
.p-faq__q {
position: relative;
padding: 18px 56px 18px 56px;
font-weight: 700;
line-height: 1.6;
list-style: none;
cursor: pointer;
}
.p-faq__q::-webkit-details-marker {
display: none;
}
.p-faq__q::before {
content: "Q";
position: absolute;
top: 16px;
left: 20px;
font-family: var(--ks-font-en);
font-size: 1.15rem;
color: var(--ks-pink-strong);
}
.p-faq__q::after {
content: "";
position: absolute;
top: 50%;
right: 24px;
width: 10px;
height: 10px;
border-right: 2px solid var(--ks-pink-strong);
border-bottom: 2px solid var(--ks-pink-strong);
transform: translateY(-70%) rotate(45deg);
transition: transform 0.3s;
}
.p-faq__item[open] .p-faq__q::after {
transform: translateY(-30%) rotate(-135deg);
}
.p-faq__a {
position: relative;
margin: 0;
padding: 0 24px 20px 56px;
color: var(--ks-text-sub);
}
.p-faq__a::before {
content: "A";
position: absolute;
top: -2px;
left: 22px;
font-family: var(--ks-font-en);
font-size: 1.15rem;
font-weight: 700;
color: var(--ks-pink-dark);
}
.p-cta {
padding: clamp(56px, 8vw, 88px) 24px;
text-align: center;
}
.p-cta__inner {
max-width: 720px;
margin: 0 auto;
}
.p-cta__title {
margin: 0 0 12px;
font-family: var(--ks-font-hand);
font-size: clamp(1.3rem, 1rem + 1.2vw, 1.8rem);
font-weight: 600;
}
.p-cta__text {
margin: 0 0 28px;
color: var(--ks-text-sub);
}
.p-cta__title {
font-family: var(--ks-font-heading);
font-weight: 600;
letter-spacing: 0.06em;
}
/* ---------- 9. 背景 ---------- */
.u-bg-cream {
background-color: var(--ks-cream);
}
.u-bg-gray {
background-color: var(--ks-gray-light);
}
.u-bg-pink {
background-color: var(--ks-pink-pale);
}
.u-bg-yellow {
background-color: var(--ks-yellow-pale);
}
/* 水彩っぽいふんわり背景（CSS だけなので、どんなに大きくしてもぼやけない） */
.u-bg-watercolor-pink {
background: radial-gradient(60% 70% at 15% 20%, rgba(227, 202, 202, 0.75), transparent 70%), radial-gradient(50% 60% at 85% 80%, rgba(234, 219, 211, 0.7), transparent 70%), radial-gradient(40% 50% at 70% 15%, rgba(244, 233, 230, 0.9), transparent 70%), var(--ks-cream);
}
.u-bg-watercolor-yellow {
background: radial-gradient(60% 70% at 20% 25%, rgba(232, 221, 209, 0.8), transparent 70%), radial-gradient(50% 60% at 80% 80%, rgba(244, 233, 230, 0.85), transparent 70%), var(--ks-cream);
}
.u-bg-sky {
background: linear-gradient(180deg, #B9D6F2 0%, #DCEBF8 55%, #FBEFF2 100%);
}
/* ドット柄（背景色と重ねて使える） */
.u-bg-dots {
background-image: radial-gradient(rgba(149, 90, 99, 0.35) 1.6px, transparent 2px);
background-size: 16px 16px;
}
.u-wave-top, .u-wave-bottom, .u-wave-white {
position: relative;
}
.u-wave-top::before, .u-wave-bottom::after, .u-wave-white::after {
content: "";
position: absolute;
right: 0;
left: 0;
z-index: 1;
height: var(--ks-wave-h);
background-repeat: no-repeat;
background-size: 100% 100%;
pointer-events: none;
}
/* クリーム色のセクションの上：上のセクションにかぶせる */
.u-wave-top::before {
bottom: calc(100% - 1px);
background-image: url("../svg/wave-cream-top.svg");
}
/* クリーム色のセクションの下：下のセクションにかぶせる */
.u-wave-bottom::after {
top: calc(100% - 1px);
background-image: url("../svg/wave-cream-bottom.svg");
}
/* 写真や水彩の背景の下：白い波で次のセクションへつなぐ */
.u-wave-white::after {
bottom: -1px;
background-image: url("../svg/wave-white-bottom.svg");
}
/* スクロールで浮かび上がる（JavaScript が動くときだけ。動かないときは最初から見える） */
@media (prefers-reduced-motion: no-preference) {
.has-js .u-reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.9s ease, transform 0.9s ease;
}
.has-js .u-reveal.is-inview {
opacity: 1;
transform: none;
}
}
/* カードは1枚ずつ少し遅らせる */
@media (prefers-reduced-motion: no-preference) {
.has-js .u-reveal:nth-child(2) {
transition-delay: 0.12s;
}
.has-js .u-reveal:nth-child(3) {
transition-delay: 0.24s;
}
.has-js .u-reveal:nth-child(4) {
transition-delay: 0.36s;
}
}
/* =========================================================
依頼につながる構成（2026-11-06 追加）
ヒーロー・実績の数字・こんな方へ・料金・大切にしていること・使える技術・流れ・よくある質問
========================================================= */
.u-sp-only {
display: none;
}
@media (max-width: 599px) {
.u-sp-only {
display: inline;
}
}
/* ---------- ご相談への案内（一覧・詳細の下） ---------- */
.u-pc-only {
display: inline;
}
@media (max-width: 599px) {
.u-pc-only {
display: none;
}
}