@charset "utf-8";
   :where(:root) { --font-sans: YakuHanJP, "Roboto", "Zen Kaku Gothic New", sans-serif;
--font-en: "Roboto", var(--font-sans); --leading-none: 1;
--leading-tight: 1.25;
--leading-normal: 1.4;
--leading-relaxed: 1.75;
--leading-double: 2.25; --tracking-tight: -0.05em;
--tracking-normal: 0;
--tracking-relaxed: 0.05em;
--tracking-double: 0.1em; --header-height: 2.5rem;
--header-height-sp: 2.5rem;
--header-logo-width: 92;
--header-logo-height: 40;
--header-logo-aspect: 92 / 40;
--pd-inline: 1.5rem;
--main-container-width: min(100vw, 31rem);
--main-container-max-width: 496px;
--aside-container-width: calc(100vw - var(--main-container-width) / 2);
--section-space: 5rem;
--block-space: 4rem;
--el-space-tight: 1.5rem;
--el-space-normal: 2rem;
--el-space-wide: 2.5rem;
--el-space-double: 4rem; --section-container-width: min(100vw, 31rem);
--section-aside-width: var(--pd-inline);
--section-main-width: calc(
var(--section-container-width) - var(--section-aside-width)
);
--section-main-pd-left: 2.5rem;
--section-main-pd-right: var(--pd-inline);
--section-main-content-width: calc(
var(--section-main-width) - var(--section-main-pd-left)
); --second-layer-container-width: var(--section-main-width); --section-color: var(--base);
--section-bg-color: var(--white); --base-width: 23.4375rem; --current-container-width: var(--section-main-width);
--liquid-size: calc(var(--current-container-width) / var(--base-width));
--h2-space: 4.5rem;
--h3-space: 4rem;
--btn-space: 2.5rem; --page-title-size: 2rem;
--section-title-size: 2rem;
--text-size-normal: 1rem;
--text-size-small: 0.875rem;
--text-size-min: 0.8rem; --base: #444444;
--white: #fffefa;
--text-brown: #7f5c34;
--text-purple: #434a70;
--text-blue: #426270;
--text-green: #5b7042;
--text-red: #ff1500;
--bg-base: #999999;
--bg-gray: #efefef;
--bg-brown: #ece8df;
--bg-purple: #dfe1ec;
--bg-blue: #dfe8ec;
--bg-green: #e6ecdf;
--bg-orange: #f6f0e9;
--btn-brown: #e2e0cb; --btn-icon-width: 2.75rem;
--btn-icon-height: 2.25rem;
} :where(html, body) {
overflow-x: clip;
&:has(dialog[open]) {
overflow: hidden;
}
}
:where(html) {
scroll-behavior: smooth;
scroll-padding-top: 1.5rem;
}
:where(body) {
font-family: var(--font-sans);
font-weight: 400;
background-color: var(--bg-color-primary);
color: var(--base);
}
:where(h1, h2, h3, h4, h5, h6, p, li, ol, ul, dl, dt, dd) {
margin: 0;
padding: 0;
font-style: normal;
}
:where(img) {
width: 100%;
height: 100%;
}
:where(button) {
padding: 0;
border: none;
}
:where(
input[type="date"],
input[type="text"],
input[type="email"],
textarea,
select
) {
width: 100%;
border-color: currentColor;
border-radius: 0.25rem;
padding: 0.25rem 0.5rem;
}  .swiper-slide {
> img {
width: 100%;
}
}
.swiper-button-prev,
.swiper-button-next {
scale: 1;
transition: scale 0.3s ease;
}
@media (hover: hover) {
.swiper-button-prev:hover,
.swiper-button-next:hover {
scale: 1.3;
}
}     body {
background-color: var(--white);
@media (width <= 48rem) {
display: grid;
grid-template:
"header" var(--header-height-sp)
"main" auto
"footer " auto / auto;
}
@media (48rem < width <= 64rem) {
display: grid;
grid-template:
"aside-primary header" var(--header-height)
"aside-primary main" auto
"aside-primary footer" auto/ 1fr var(--main-container-max-width);
}
@media (64rem < width) {
display: grid;
grid-template:
"aside-primary header aside-secondary" var(--header-height)
"aside-primary main aside-secondary" auto
"aside-primary footer aside-secondary" auto/ 1fr var(
--main-container-max-width
)
1fr;
justify-content: center;
}
}
.header {
grid-area: header;
position: fixed;
top: 0;
left: 50%;
translate: -50% 0;
width: var(--main-container-width);
z-index: 1000;
@media (width <= 48rem) {
width: 100%;
max-width: var(--main-container-max-width);
margin-inline: auto;
}
@media (48rem < width <= 64rem) {
left: auto;
right: 0;
translate: 0 0;
}
}
.footer {
grid-area: footer;
@media (width <= 48rem) {
width: 100%;
max-width: var(--main-container-max-width);
margin-inline: auto;
}
}
.main {
grid-area: main; position: relative;
clip-path: inset(0);
@media (width <= 48rem) {
width: 100%;
max-width: var(--main-container-max-width);
margin-inline: auto;
}
}
.section {
display: flex;
flex-wrap: nowrap;
max-width: min(100vw, var(--main-container-max-width));
padding-block: var(--section-space);
.section__main {
width: var(--section-main-width);
}
.section__aside {
display: grid;
align-items: center;
z-index: 10;
order: -1;
width: var(--section-aside-width);
}
.section__head {
padding-left: var(--section-main-pd-left);
padding-right: var(--pd-inline);
}
.section__body {
padding-left: var(--section-main-pd-left);
padding-right: var(--pd-inline);
}  .section-full-width {
width: var(--section-container-width);
margin-left: calc(
(var(--section-aside-width) + var(--section-main-pd-left) * -1)
);
} .section-main-width {
width: var(--section-main-width);
margin-left: calc(var(--section-main-pd-left) * -1);
} .section-main-content-overflow {
width: calc(100% + var(--section-main-pd-right));
}
} .section--second-layer {
width: var(--second-layer-container-width);
}
.aside-primary {
grid-area: aside-primary;
border-right: 1px solid var(--base);
background-color: var(--bg-brown);
@media (width <= 48rem) {
display: none;
}
}
.aside-secondary {
grid-area: aside-secondary;
border-left: 1px solid var(--base);
background-color: var(--bg-brown);
@media (width <= 64rem) {
display: none;
}
} @keyframes mv-loop {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
.page--photo-wedding {
.bg-slider {
position: fixed;
top: 0;
left: 50%;
translate: -50% 0;
width: 100%;
height: 100%;
z-index: -100;
&::before,
&::after {
--bg-aspect-ratio: 2440 / 1564;
--bg-width: calc(100svh * var(--bg-aspect-ratio));
--animation-duration: 40s;
content: "";
position: absolute;
top: var(--header-height);
left: 0;
width: calc(var(--bg-width) * 2);
height: 100svh;
background:
linear-gradient(hwb(from var(--base) h w b / 0.65)),
url(//aba-sendai.com/assets/images/pages/photo-wedding/bg-gallery.webp) var(--base) center
left / contain repeat-x;
z-index: -100;
animation: mv-loop var(--animation-duration) linear infinite;
will-change: transform;
}
&::before { animation-delay: calc(var(--animation-duration) / 2);
}
}
.mv {
--section-color: var(--white);
--swiper-navigation-size: 1.5rem;
--swiper-navigation-color: var(--section-color);
--swiper-navigation-sides-offset: 0.25rem;
--swiper-navigation-top-offset: calc(50% - 1.5rem);
width: var(--main-container-width);
padding-inline: var(--pd-inline);
color: var(--section-color);
z-index: 100;
.mv-slider {
position: relative;
width: var(--main-container-width);
margin-left: calc(var(--pd-inline) * -1);
}
}
.intro {
--section-color: var(--base);
--section-bg-color: var(--white);
position: relative;
color: var(--section-color); padding-block: var(--section-space) 0;
&::after {
content: "";
position: absolute; inset: 0 calc(var(--pd-inline) * -2) 2.5rem;
background-color: var(--section-bg-color);
z-index: -10;
}
}
.intro-adjust-top {
margin-top: -1rem;
}
.intro-slider { width: calc(var(--section-main-width)); .swiper {
--slide-between: 1rem;
}
.swiper-slide {
padding-right: var(--slide-between);
}
.swiper-wrapper {
margin-right: calc(var(--slide-between) * -1);
}
}
.intro-text {
text-align: center;
line-height: var(--leading-double);
.intro-text__fukidashi {
position: relative;
display: inline-block;
padding: 1.25rem 2.25rem;
color: var(--text-purple);
font-size: 1.25rem;
line-height: var(--leading-relaxed);
&::before {
content: "";
position: absolute;
bottom: 0;
left: 0.125rem;
translate: -100% 0;
width: 2.5rem;
aspect-ratio: 1 / 1;
background: url(//aba-sendai.com/assets/images/pages/photo-wedding/icon-fukidashi-cloud.svg)
center/ contain no-repeat;
}
&::after {
content: "";
position: absolute;
inset: 0;
background: var(--bg-purple);
-webkit-mask-image: url(//aba-sendai.com/assets/images/pages/photo-wedding/bg-fukidashi.svg);
mask-image: url(//aba-sendai.com/assets/images/pages/photo-wedding/bg-fukidashi.svg);
-webkit-mask-size: contain;
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
z-index: -1;
}
}
.intro-text__em {
display: inline-block;
font-size: 1.25rem;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.5em;
}
}
.intro-message {
container: intro-message / inline-size;
--current-container-size: var(--section-container-width);
width: var(--section-container-width);
margin-left: calc(
(var(--section-main-pd-left) + var(--section-aside-width)) * -1
);
border-radius: 2.5rem;
padding: 5rem 1.5rem;
background: var(--bg-blue);
color: var(--text-blue);
.intro-message__inner {
width: fit-content;
margin-inline: auto;
padding-left: calc(5.5rem * var(--liquid-size));
}
.intro-message__text {
line-height: var(--leading-relaxed);
}
.intro-message__text--em {
display: inline-block;
margin-block: var(--el-space-wide);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.5em;
}
.intro-message__planner-img {
position: relative;
&::before {
content: "";
position: absolute;
top: calc(-1rem * var(--liquid-size));
left: 0;
translate: -100% 0;
width: calc(7.25rem * var(--liquid-size));
aspect-ratio: 116 / 160;
background: url(//aba-sendai.com/assets/images/pages/photo-wedding/message-planner.svg)
center/contain no-repeat;
z-index: 0;
}
}
.intro-message__closing {
background: var(--white);
border-radius: 1.25rem;
padding: 1.5rem;
.intro-message__closing-text {
font-size: 1.125rem;
text-align: center;
line-height: var(--leading-double);
}
}
}
.offer {
--section-color: var(--white);
--section-bg-color: transparent;
display: grid;
place-content: center;
height: 100svh;
.offer__text {
position: relative;
padding-block: 2.5rem;
color: var(--section-color);
font-size: 1.125rem;
text-align: center;
line-height: var(--leading-double);
&::before,
&::after {
content: "";
position: absolute;
width: 1px;
height: 50vh;
background-color: var(--white);
z-index: -10;
}
&::before {
top: 0;
left: 50%;
translate: -50% -100%;
}
&::after {
bottom: 0;
left: 50%;
translate: -50% 100%;
}
}
}
.and-more {
--section-color: var(--base);
--section-bg-color: var(--white);
display: grid;
place-content: center;
height: 100svh;
background: var(--section-bg-color);
.and-more__wrapper {
position: relative;
padding-block: 2.5rem;
}
.and-more__lead {
font-size: 2rem;
font-weight: bold;
text-align: center;
}
.and-more__text {
color: var(--section-color);
font-size: 1.125rem;
text-align: center;
line-height: var(--leading-double);
}
.and-more__slider {
position: relative;
height: calc(6rem * var(--section-container-width) / var(--base-width));
&::before,
&::after {
--bg-aspect-ratio: 672 / 96;
--bg-width: 42rem;
--animation-duration: 10s;
content: "";
position: absolute;
top: 0;
height: 100%;
aspect-ratio: var(--bg-aspect-ratio);
background: url(//aba-sendai.com/assets/images/pages/photo-wedding/and-more-img.webp) center
left / contain repeat-x;
animation: mv-loop var(--animation-duration) linear infinite;
will-change: transform;
}
&::before {
left: calc(var(--pd-inline) * -1);
}
&::after {
left: calc(
var(--pd-inline) * -1 + var(--section-container-width) *
var(--bg-width) / var(--base-width)
);
}
}
}
.case {
--section-color: var(--base);
--section-bg-color: var(--white);
background-color: var(--section-bg-color);
color: var(--section-color);
}
.photo-style {
background: var(--bg-brown);
color: var(--text-brown);
}
.flexible-plans {
background: var(--bg-green);
color: var(--text-green);
}
.about-us {
--section-color: var(--text-brown);
--section-bg-color: var(--bg-orange);
background-color: var(--section-bg-color);
color: var(--section-color);
}
}
.page--reserve {
.reserve {
--section-color: var(--text-brown);
--section-bg-color: var(--bg-brown);
color: var(--section-color);
background-color: var(--section-bg-color);
padding-block: var(--el-space-wide) 5rem;
}
}
.page--case {
.case {
--section-color: var(--base);
--section-bg-color: var(--white);
background-color: var(--section-bg-color);
color: var(--section-color);
.case__title {
position: relative;
margin-top: var(--el-space-wide);
color: var(--text-brown);
font-size: var(--text-size-normal);
&::before {
content: "（ " attr(data-num) " ）";
margin-right: 1em;
color: var(--section-color);
font-weight: normal;
}
}
.case__title-sub {
font-weight: bold;
}
.case__gallery {
margin-top: 5rem;
background-color: var(--bg-brown);
color: var(--text-brown);
}
}
.case__thumb--tate { aspect-ratio: 288 / 240;
> img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
.page--about {
--section-color: var(--text-brown);
--section-bg-color: var(--bg-brown);
background-color: var(--section-bg-color);
color: var(--section-color);
.about__title {
--text-size: 2.5rem;
position: relative;
padding-top: var(--text-size);
font-size: var(--text-size-small);
&::before {
content: "Art Bell Ange";
position: absolute;
top: 0;
left: 0;
font-size: var(--text-size);
line-height: var(--leading-none);
overflow-wrap: normal;
text-wrap: nowrap;
}
&::after {
content: "SENDAI";
position: absolute;
top: -1ex;
left: 11ch;
rotate: 90deg;
transform-origin: 0 100%;
font-size: var(--text-size);
font-weight: 100;
line-height: var(--leading-none);
overflow-wrap: normal;
}
}
.about__sub-title {
font-weight: bold;
}
.about__feature {
background-color: var(--white);
margin-top: 5rem;
padding-top: 5rem;
color: var(--text-purple);
}
.about-bg {
transition: background-color 1.5s cubic-bezier(0.22, 1, 0.36, 1);
&:has(.about__feature.js-active) {
background-color: var(--section-bg-color);
color: var(--section-color);
}
&:has(.about__banquet.js-active) {
background-color: var(--bg-green);
color: var(--text-green);
}
&:has(.about__chapel.js-active) {
background-color: var(--bg-gray);
color: var(--base);
}
}
} .header {
--el-pd: 0.5rem;
display: grid;
grid-template:
"logo . menu-btn" var(--header-height)
/ max-content 1fr auto;
&::before {
content: "";
position: absolute;
inset: 0;
border-bottom: 1px solid var(--base);
pointer-events: none;
z-index: 10;
}
&::after {
content: "";
position: absolute;
inset: 0;
background-color: hwb(from var(--white) h w b / 0.3);
backdrop-filter: blur(8px);
pointer-events: none;
z-index: -10;
}
.header__logo {
grid-area: logo;
padding: 0.25rem 0.5rem;
height: var(--header-height);
aspect-ratio: 90 / 40;
}
.header__menu-btn {
grid-area: menu-btn;
}
}
.menu-btn {
--btn-color: var(--base);
--btn-bg-color: var(--bg-brown);
position: relative;
display: grid;
width: 40px;
aspect-ratio: 1/1;
color: var(--btn-color);
background-color: var(--btn-bg-color);
&::after {
content: "";
position: absolute;
inset: 0;
border: 1px solid currentColor;
pointer-events: none;
}
@media (64rem < width) {
&::after {
border-right: none;
}
}
.menu-btn__label {
position: relative;
place-content: end center;
width: 100%;
height: 100%;
padding: var(--el-pd);
font-size: 0.5rem;
text-wrap: nowrap;
text-align: center;
&::before,
&::after {
content: "";
position: absolute;
left: 50%;
translate: -50% 0;
rotate: 0deg;
width: calc(100% - var(--el-pd) * 2);
height: 1px;
background: currentColor;
transition: rotate 0.3s ease;
}
&::before {
top: 8px;
}
&::after {
top: 16px;
} &:is(.header:has(dialog[open]) *) {
&::before,
&::after {
top: 12px;
}
&::before {
rotate: 15deg;
}
&::after {
rotate: -15deg;
}
}
}
}
.menu-btn--close {
--btn-color: var(--white);
--btn-bg-color: var(--base);
&::after {
border: 1px solid transparent;
}
}
.dialog-menu {
width: var(--main-container-width);
margin-top: var(--header-height);
background: transparent;
opacity: 0;
transition:
opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
display 0.7s cubic-bezier(0.22, 1, 0.36, 1) allow-discrete,
overlay 0.7s cubic-bezier(0.22, 1, 0.36, 1) allow-discrete;
&::backdrop {
opacity: 0;
transition:
opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
display 0.7s cubic-bezier(0.22, 1, 0.36, 1) allow-discrete,
overlay 0.7s cubic-bezier(0.22, 1, 0.36, 1) allow-discrete;
}
@media (48rem < width <= 64rem) {
margin-right: 0;
}
.dialog-menu__content {
position: relative;
overflow-y: auto;
height: 100dvh;
padding-block: var(--el-space-wide)
calc(var(--header-height) + var(--el-space-wide));
padding-inline: var(--pd-inline);
background: var(--bg-brown);
}
.dialog-menu__close {
position: fixed;
top: 0;
left: calc(50% - 40px);
translate: calc(var(--main-container-width) / 2);
@media (48rem < width <= 64rem) {
left: auto;
right: 0;
translate: 0 0;
}
} &[open] {
opacity: 1;
&::backdrop {
opacity: 1;
}
@starting-style {
opacity: 0;
&::backdrop {
opacity: 0;
}
}
}
}
.site-menu {
.site-menu__logo {
width: calc(var(--section-container-width) * 191 / 375);
margin-inline: auto;
padding-block: 5rem;
text-align: center;
}
.site-menu__sns {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
justify-content: center;
align-items: center;
}
.site-menu__colophon {
display: flex;
flex-wrap: wrap;
justify-content: center;
.site-menu__colophon-item {
padding-inline: 1rem;
& + .site-menu__colophon-item {
border-left: 1px solid var(--base);
}
}
.site-menu__colophon-link {
font-size: var(--text-size-small);
}
}
}
.footer {
container: footer / inline-size;
padding-block: 5rem 1rem;
padding-inline: var(--pd-inline);
}
.aside-menu {
position: fixed;
bottom: 0;
padding: var(--el-space-double) var(--el-space-tight);
@media (48rem < width <= 64rem) {
left: 0;
}
@media (64rem < width) {
right: 50vw;
translate: calc(
(var(--main-container-width) / 2 + var(--el-space-wide)) * -1
)
0;
}
}
.guide {
--section-color: var(--text-blue);
--section-bg-color: var(--bg-blue);
background-color: var(--section-bg-color);
color: var(--section-color);
.guide__note {
.guide__note-item {
font-size: var(--text-size-small);
}
}
.guide__wide {
width: calc(100% + var(--section-main-pd-left));
margin-left: calc(var(--section-main-pd-left) * -1);
}
}
.feature {
background: var(--white);
color: var(--text-purple);
}
.feature-list {
.feature-list__item {
padding-block: var(--el-space-normal);
}
}
.feature-content {
width: calc(
var(--section-main-width) - var(--section-aside-width) - var(--pd-inline) *
2
);
max-width: 100%;
.feature-content__title {
position: relative;
font-size: var(--text-size-min);
font-weight: normal;
text-align: right;
&::before {
content: "( " attr(data-title) " )";
position: absolute;
top: 50%;
left: 0;
translate: 0 -50%;
}
}
.feature-content__copy {
margin-top: 0.5rem;
text-align: center;
}
.feature-content__img {
margin-top: var(--el-space-tight);
text-align: center;
> img {
width: 100%;
}
}
.feature-content__text {
font-size: var(--text-size-normal);
letter-spacing: var(--leading-relaxed);
text-align: justify;
& + .feature-content__text {
margin-top: 1rem;
}
}
.feature-content__overflow {
width: calc(var(--section-main-content-width) + var(--pd-inline));
}
.feature-content__btn {
margin-top: var(--btn-space);
text-align: right;
}
}
.banquet {
padding-block: var(--el-space-double);
background: var(--white);
color: var(--text-purple);
.banquet__title {
position: relative;
padding-bottom: calc(2.5rem - 1cap);
line-height: var(--leading-none);
&::after {
content: attr(data-title);
position: absolute;
top: -0.25rem;
right: 0;
font-size: 3.75rem;
font-weight: bold;
}
}
.banquet__text {
margin-top: var(--el-space-normal);
}
.banquet__gallery {
margin-top: var(--el-space-normal);
}
}
.banquet-gallery {
container: banquet-gallery / inline-size;
display: grid;
gap: var(--el-space-normal);
.banquet-gallery__item--m {
width: 75cqi;
aspect-ratio: 239 / 160;
margin-left: auto;
}
.banquet-gallery__item--s {
width: 50cqi;
aspect-ratio: 1 / 1;
}
}
.access-map {
> iframe {
width: 100%;
aspect-ratio: 16 / 9;
}
.access-map__memo {
margin-top: 1rem;
font-size: var(--text-size-small);
& + .access-map__memo {
margin-top: 0.25rem;
}
}
}
.form {
--accent-color: var(--text-blue);
.form__list {
display: grid;
row-gap: var(--el-space-tight);
}
.form__comment {
color: var(--accent-color);
font-size: var(--text-size-min);
}
.form__require {
position: relative;
&::after {
content: "必須";
position: absolute;
top: 0;
right: 0;
width: fit-content;
height: auto;
border-radius: 2px;
padding: 0.125rem 0.25rem;
background-color: var(--white);
color: var(--text-red);
font-size: 0.6875rem;
}
}
.form__privacy {
.form__privacy-heading {
font-size: var(--text-size-min);
}
.form__privacy-text {
margin-top: 0.5rem;
font-size: var(--text-size-min);
}
}
input + input {
margin-top: 0.5rem;
}
}
.gallery {
padding-block: var(--el-space-double);
.gallery__title {
position: sticky;
top: var(--header-height);
mix-blend-mode: multiply;
font-size: var(--text-size-normal);
z-index: 10;
} .gallery__plan {
position: relative;
width: fit-content;
margin-left: auto;
padding-block: var(--el-space-wide);
padding-left: var(--pd-inline);
z-index: 10;
&::after {
content: "";
position: absolute;
top: 0;
right: calc(var(--pd-inline) * -1);
width: calc(100% + var(--el-space-tight));
translate: -0.125rem 0;
height: 100%;
border-radius: 1.5rem 0 0 1.5rem; background: var(--white);
z-index: -1;
}
}
}
.grid-img {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
.grid-img__full {
grid-column: span 2;
}
.grid-img__tate {
grid-row: span 2;
}
}
.anchor-link {
position: relative;
padding-left: 1.5em;
font-size: var(--text-size-small);
line-height: var(--leading-none);
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 1em;
height: 1lh;
background-color: currentColor;
-webkit-mask-image: url(//aba-sendai.com/assets/images/pages/photo-wedding/icon-angle-bracket.svg);
mask-image: url(//aba-sendai.com/assets/images/pages/photo-wedding/icon-angle-bracket.svg);
-webkit-mask-size: contain;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
}
@media (hover: hover) {
.anchor-link:hover {
color: hsl(from currentColor h s calc(l - 10));
transition: all 0.3s ease;
}
}
.anchor-link__list {
display: grid;
row-gap: 1rem;
}
.post-navi {
container: post-navi / inline-size;
padding-inline: var(--pd-inline);
.post-navi__cta {
padding-block: var(--el-space-double);
}
.post-navi__pagination {
position: relative;
justify-self: center;
padding-block: var(--el-space-double);
&::before {
content: "";
position: absolute;
top: 0;
left: 50%;
translate: -50% 0;
width: 100cqi;
height: 1px;
background-color: currentColor;
}
}
}
.pagination {
display: grid;
grid-template:
"top top" auto
"prev next" auto / 1fr 1fr;
gap: var(--el-space-double) var(--el-space-tight);
width: min(100%, 18rem);
.pagination__top {
grid-area: top;
justify-self: center;
}
.pagination__prev {
grid-area: prev;
justify-self: flex-start;
}
.pagination__next {
grid-area: next;
justify-self: flex-end;
}
}
.pagination-btn {
position: relative;
padding-right: 1.5em;
&::after {
content: "";
position: absolute;
top: 50%;
right: 0;
translate: 0 -50%;
width: 1em;
aspect-ratio: 1 / 1;
background-color: currentColor;
-webkit-mask-image: url(//aba-sendai.com/assets/images/pages/photo-wedding/icon-arrow-white.svg);
mask-image: url(//aba-sendai.com/assets/images/pages/photo-wedding/icon-arrow-white.svg);
-webkit-mask-size: contain;
mask-position: center bottom;
mask-size: contain;
mask-repeat: no-repeat;
}
}
.pagination-btn--return {
padding-right: 0;
padding-left: 1.5em;
&::after {
right: auto;
left: 0;
rotate: 180deg;
}
}
.contact-info {
.contact-info__title {
font-size: var(--text-size-normal);
font-weight: normal;
}
.contact-info__title-sub {
position: relative;
display: block;
font-size: var(--text-size-min);
&::before {
content: "（ ";
}
&::after {
content: " ）";
}
}
.contact-info__content {
margin-top: 1rem;
background: var(--white);
border-radius: 1rem;
padding: 1rem;
}
}
.split {
display: flex;
flex-wrap: nowrap;
.split__main {
padding-inline: var(--pd-inline);
flex: 1;
}
.split__aside {
display: grid;
align-items: center;
border-right: 1px solid var(--section-bg-color);
z-index: 10;
order: -1;
width: var(--section-aside-width);
}
}
.case-article {
.case-article__title {
position: sticky;
top: var(--header-height);
mix-blend-mode: multiply;
font-size: var(--text-size-normal);
z-index: 10;
}
.case-article__thumb {
margin-top: var(--el-space-normal);
text-align: center;
> img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.case-article__thumb--tate {
aspect-ratio: 240 / 192;
}
.case-article__lead {
margin-top: 1rem;
font-weight: bold;
text-align: center;
}
.case-article__tag-list {
margin-top: var(--el-space-wide);
margin-left: auto;
}
.case-article__plan {
margin-top: var(--el-space-wide);
}
.case-article__btn {
margin-top: var(--el-space-wide);
text-align: right;
}
}
.tag-list {
width: fit-content;
.tag-list__item {
font-size: var(--text-size-small);
font-weight: bold;
&::before {
content: "#";
}
}
}
.case-list {
display: grid;
.case-list__item {
+ .case-list__item {
position: relative;
&::after {
content: "";
position: absolute;
top: 0;
left: calc(50% + var(--section-aside-width) / 2);
translate: -50% 0;
width: calc(100% - var(--section-aside-width) - var(--pd-inline) * 2);
height: 1px;
background-color: var(--bg-base);
}
}
}
}
.plan-detail { .plan-detail__name {
font-weight: bold;
}
.plan-detail__price {
font-size: 1.25rem;
text-align: right;
}
.plan-detail__memo {
font-size: var(--text-size-min);
margin-right: 1em;
}
}
.plan-sammary {
position: relative;
display: grid;
justify-content: center;
gap: 0.5rem;
border-radius: 1rem;
padding: 1rem;
background: var(--white);
&::before {
content: "( PLAN )";
position: absolute;
top: 0;
left: 50%;
translate: -50% -100%;
font-size: var(--text-size-small);
line-height: var(--leading-none);
}
.plan-sammary__name {
font-size: var(--text-size-small);
font-weight: bold;
}
.plan-sammary__price {
display: inline-block;
width: fit-content;
margin-left: auto;
border: 1px solid currentColor;
padding: 0.25rem 1rem;
line-height: var(--leading-none);
}
}
.detail-list {
display: grid;
grid-template-columns: max-content 1fr;
gap: 1rem 0.75rem;
font-size: var(--text-size-small);
.detail-list__item {
display: grid;
grid-template-columns: subgrid;
grid-column: span 2;
}
}
.timeline {
position: relative;
display: grid;
grid-template-columns: max-content 1fr;
gap: 1rem;
padding-left: 1rem;
&::before,
&::after {
position: absolute;
left: -0.25rem;
translate: -100% 0;
font-size: 0.6875rem;
writing-mode: vertical-rl;
}
&::before {
content: "( START )";
top: 0;
}
&::after {
content: "( FINISH )";
bottom: 0;
}
.timeline__list {
position: relative;
display: grid;
column-gap: 1rem;
&::before {
content: "";
position: absolute;
top: 0.5cap;
left: -1rem;
translate: -50% 0;
width: 1px;
height: calc(100% - 1px);
background-color: currentColor;
}
&::after {
content: "";
position: absolute;
bottom: -0.5cap;
left: -1rem;
translate: -50% 0;
width: 0.5rem;
aspect-ratio: 1 / 1;
background: currentColor;
-webkit-mask-image: url(//aba-sendai.com/assets/images/pages/photo-wedding/icon-angle.svg);
mask-image: url(//aba-sendai.com/assets/images/pages/photo-wedding/icon-angle.svg);
-webkit-mask-size: contain;
mask-position: center bottom;
mask-size: contain;
mask-repeat: no-repeat;
}
}
.timeline__item {
position: relative;
&::before {
content: "";
position: absolute;
top: 0.5cap;
left: -1rem;
translate: -50% 0;
width: 0.5rem;
aspect-ratio: 1 / 1;
border-radius: 50%;
background: currentColor;
}
}
.timeline__label {
font-size: var(--text-size-small);
}
.timeline__comment {
position: relative;
width: fit-content;
margin-top: 0.5rem;
border-radius: 1rem;
background: var(--bg-brown);
padding: 0.5rem 0.5rem;
color: var(--text-brown);
font-size: 0.6875rem;
text-align: center;
line-height: var(--leading-tight);
&::before {
content: "";
position: absolute;
top: 0;
left: 1rem;
translate: 0 -100%;
width: 0.5rem;
height: calc(tan(60deg) * 0.75rem / 2);
clip-path: polygon(50% 0, 100% 100%, 0 100%);
background-color: var(--bg-brown);
}
}
.timeline__img {
display: flex;
flex-direction: column;
row-gap: 0.5rem;
justify-content: space-between;
& img {
width: 100%;
}
}
}
.promise {
position: relative;
border-radius: 2.5rem;
padding: var(--el-space-wide) var(--el-space-normal);
background: var(--white);
.promise__label {
position: absolute;
top: 0;
left: 50%;
translate: -50% -50%;
border-radius: 100vmax;
padding: 0.5rem 1rem;
background-color: var(--text-blue);
color: var(--white);
text-align: center;
}
.promise__lead {
text-align: center;
}
.promise__text {
text-align: center;
font-size: var(--text-size-min);
line-height: var(--leading-relaxed);
}
}
.site-nav {
display: grid;
row-gap: 0.75rem;
font-size: var(--text-size-min);
.site-nav__number {
position: relative;
&::before {
content: "( " attr(data-num) " )";
margin-right: 0.5em;
color: currentColor;
letter-spacing: var(--tracking-tight);
}
}
}
.site-nav--second-layer {
padding-left: 5em;
}
.site-nav--third-layer {
padding-left: 1.25em;
}
.site-title {
position: relative;
font-size: var(--page-title-size);
color: var(--section-color, #333333);
font-weight: bold;
letter-spacing: var(--tracking-normal);
line-height: var(--leading-tight);
text-indent: -0.5em;
text-wrap: nowrap;
&::before {
content: "#";
}
}
.heading2 {
position: relative;
font-size: var(--page-title-size); color: currentColor;
font-weight: bold;
letter-spacing: var(--tracking-normal);
line-height: var(--leading-tight);
text-wrap: nowrap;
}
.heading3 {
position: relative;
font-size: var(--text-size-normal);
color: currentColor;
font-weight: normal;
letter-spacing: var(--tracking-normal);
line-height: var(--leading-tight);
text-wrap: nowrap;
&::before {
content: "［ ";
}
&::after {
content: " ］";
}
}
.side-title-parent {
display: flex;
justify-content: flex-start;
writing-mode: vertical-rl;
}
.side-title {
position: sticky;
top: var(--header-height);
padding-bottom: 1em;
font-size: var(--text-size-small);
letter-spacing: 0.15em;
line-height: var(--leading-none);
.side-title__lead {
position: relative;
padding-inline: 0.25em;
margin-bottom: 0.5em;
border-top: 1px solid currentColor;
border-bottom: 1px solid currentColor;
font-weight: bold;
}
}
.case-card {
position: relative;
display: grid;
grid-template:
"num" min-content
"img" auto
"title" 1fr
"desc" auto / 1fr;
width: calc(100% - 3rem);
margin-inline: auto;
margin-bottom: 1.5rem;
padding: 1.25rem 1.25rem 2.25rem 1.25rem;
background-color: hwb(from var(--white) h w b / 0.9);
border-radius: 0.25rem;
&::before {
content: "( " attr(data-num) " )";
color: var(--base);
font-size: 0.875rem;
text-align: center;
}
.case-card__title {
grid-area: title;
margin-top: var(--el-space-tight);
color: var(--text-brown);
font-size: 0.75rem;
font-weight: bold;
line-height: var(--leading-none);
text-align: center;
}
.case-card__desc {
grid-area: desc;
margin-top: 0.75rem;
color: var(--base);
font-size: 0.875rem;
font-weight: bold;
line-height: var(--leading-normal);
text-align: center;
}
.case-card__img {
grid-area: img;
margin-top: var(--el-space-wide);
transition: filter 1.5s 0.5s ease;
clip-path: inset(0 round 6px);
> img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.case-card__img--tate {
margin-top: 0;
> img {
aspect-ratio: 240 / 192;
}
} .case-card__img:is(.swiper-slide-active *) {
filter: blur(0) grayscale(0);
}
.case-card__img:is(.swiper-slide-next *) {
filter: blur(4px) grayscale(80%);
}
.case-card__link-btn {
position: absolute;
bottom: -1.5rem;
right: -1rem;
display: grid;
place-content: center;
width: 5rem;
scale: 1;
aspect-ratio: 1 / 1;
border: 2px solid var(--white);
border-radius: 50%;
-webkit-mask-image: url(//aba-sendai.com/assets/images/pages/photo-wedding/icon-maru-btn.svg);
mask-image: url(//aba-sendai.com/assets/images/pages/photo-wedding/icon-maru-btn.svg);
-webkit-mask-size: contain;
mask-size: contain;
mask-repeat: no-repeat;
background: var(--white);
mix-blend-mode: difference;
opacity: 0.7;
transition: scale 0.3s ease;
}
@media (hover: hover) {
.case-card__link-btn:hover {
scale: 1.1;
}
}
}
.typical-case-list {
display: grid;
grid-template-columns: 1fr;
gap: var(--el-space-double);
}
.typical-case-card {
display: grid;
grid-template:
"caption" max-content
"img" 1fr / 1fr;
row-gap: 0.5rem;
> img {
grid-area: img;
width: 100%;
}
.typical-case-card__caption {
grid-area: caption;
font-size: 0.75rem;
text-align: center;
line-height: var(--leading-none);
}
}
.information {
display: grid;
grid-template-columns: max-content 1fr;
gap: 1.5rem;
.information__group {
display: grid;
grid-template-columns: subgrid;
grid-column: span 2;
}
.information__term {
font-size: var(--text-size-small);
}
}
.timetable {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0.5rem;
.timetable__group {
display: grid;
grid-template-columns: subgrid;
grid-column: span 2;
}
.timetable__label {
padding-inline: 0.5em;
background: var(--bg-gray);
font-size: var(--text-size-min);
text-align: center;
align-self: center;
}
.timetable__label--close {
background: transparent;
border-left: 1px solid var(--base);
border-right: 1px solid var(--base);
}
}
.cta-btn {
--btn-pd: 0.75rem;
--btn-color: var(--text-brown);
--btn-bg-color: var(--btn-brown);
--btn-hover-color: var(--white);
position: relative;
display: flex;
flex-wrap: wrap;
place-content: center;
width: fit-content;
min-width: 280px;
height: calc(var(--btn-icon-height) + var(--btn-pd) * 2);
background-color: var(--btn-bg-color);
padding-block: var(--btn-pd);
padding-inline: var(--btn-pd)
calc(calc(var(--btn-icon-width) + var(--btn-pd) * 1.5));
border-radius: 100vmax;
color: var(--btn-color);
line-height: var(--leading-none);
text-align: center;
transition: all 0.3s ease;
&::after {
content: "";
position: absolute;
top: 50%;
right: var(--btn-pd);
translate: 0 -50%;
width: var(--btn-icon-width);
aspect-ratio: 44 / 36;
background: currentColor;
-webkit-mask-image: url(//aba-sendai.com/assets/images/pages/photo-wedding/icon-btn.svg);
mask-image: url(//aba-sendai.com/assets/images/pages/photo-wedding/icon-btn.svg);
-webkit-mask-size: contain;
mask-size: contain;
mask-repeat: no-repeat;
}
}
@media (hover: hover) {
.cta-btn:hover {
color: var(--btn-hover-color);
background-color: var(--btn-color);
padding-inline: var(--btn-pd)
calc(calc(var(--btn-icon-width) + var(--btn-pd) * 0.5));
}
}
.secondary-btn {
position: relative;
display: inline-block;
width: fit-content;
margin-block: calc((var(--btn-icon-height) - 1lh) / 2);
padding-right: calc(var(--btn-icon-width) + 1rem);
color: currentColor;
line-height: var(--leading-none);
transition: all 0.3s ease;
&::after {
content: "";
position: absolute;
top: 50%;
right: 0;
translate: 0 -50%;
width: var(--btn-icon-width);
aspect-ratio: 44 / 36;
background: currentColor;
-webkit-mask-image: url(//aba-sendai.com/assets/images/pages/photo-wedding/icon-btn.svg);
mask-image: url(//aba-sendai.com/assets/images/pages/photo-wedding/icon-btn.svg);
-webkit-mask-size: contain;
mask-size: contain;
mask-repeat: no-repeat;
}
}
@media (hover: hover) {
.secondary-btn:hover {
color: hsl(from currentColor h s calc(l - 10));
padding-right: calc(var(--btn-icon-width) + 0.5rem);
}
}
.secondary-btn--return {
padding-right: 0;
padding-left: calc(var(--btn-icon-width) + 1rem);
&::after {
right: auto;
left: 0;
translate: 0 -50%;
rotate: 180deg;
}
}
@media (hover: hover) {
.secondary-btn--return:hover {
padding-right: 0;
padding-left: calc(var(--btn-icon-width) + 0.5rem);
}
}
.tertiary-btn {
border-bottom: 1px solid currentColor;
padding-bottom: 0.25em;
color: currentColor;
font-size: var(--text-size-small);
transition: all 0.3s ease;
}
@media (hover: hover) {
.tertiary-btn:hover {
color: hsl(from currentColor h s calc(l - 10));
}
}
.attention-block {
position: relative;
display: grid;
place-content: center;
min-height: 17rem;
&::after {
content: "";
position: absolute;
inset: 0;
background: url(//aba-sendai.com/assets/images/pages/photo-wedding/icon-attention.svg) center/
contain no-repeat;
z-index: -1;
}
.attention-block__text {
--interval-line-length: 6rem;
--interval-line-pd: 1.5rem;
position: relative;
padding-inline: calc(var(--interval-line-length) + var(--interval-line-pd));
writing-mode: vertical-rl;
text-align: center;
&::before,
&::after {
content: "";
position: absolute;
left: 50%;
translate: -50% 0;
width: 1px;
height: var(--interval-line-length);
background-color: var(--section-color);
}
&::before {
top: 0;
}
&::after {
bottom: 0;
}
}
}
.top-btn {
position: fixed;
bottom: 1rem;
right: calc(50vw - var(--main-container-width) / 2 + var(--pd-inline));
display: block;
width: 2rem;
aspect-ratio: 1 / 1;
background: url(//aba-sendai.com/assets/images/pages/photo-wedding/top-btn.svg) center/contain
no-repeat var(--bg-brown);
} .attention-block-scale {
&::after {
opacity: 0;
}
}
.attention-block-scale.js-active {
&::after {
animation: bounceIn 0.5s ease-out forwards;
}
}
@keyframes bounceIn {
0% {
transform: scale(0) translateY(-50px);
opacity: 0;
}
50% {
transform: scale(1.08) translateY(0);
opacity: 1;
}
70% {
transform: scale(0.9) translateY(-10px);
}
85% {
transform: scale(1.03) translateY(0);
}
100% {
transform: scale(1) translateY(0);
opacity: 1;
}
}  .js-topBtn {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
}
.js-topBtn.is-show {
opacity: 1;
visibility: visible;
} .js-fadeIn {
transition: 0.6s;
transition-timing-function: cubic-bezier(0.06, 0.15, 0.3, 0.6);
transition-property: transform, opacity;
opacity: 0;
transform: translateY(30px);
pointer-events: none;
}
.js-fadeIn.js-active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
} .js-scroll-color {
transition: all 1s cubic-bezier(0.22, 1, 0.36, 1);
&::after {
transition: all 1s cubic-bezier(0.22, 1, 0.36, 1);
}
}
.js-scroll-color.js-scroll-bg-color:not(.is-disable) {
&::after {
background-color: transparent;
}
}
.js-scroll-color.js-scroll-text-color:not(.is-disable) {
color: var(--white);
} .js-blur {
filter: blur(4px) grayscale(80%);
transition: filter 0.8s cubic-bezier(0.22, 1, 0.36, 1);
clip-path: inset(0 round 6px);
}
.js-blur.js-active {
filter: blur(0) grayscale(0);
} .js-reveal {
position: relative;
&::before,
&::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
transition: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
}
&::before {
background: currentColor;
transition-delay: 0.3s;
}
&::after {
background: var(--section-bg-color);
}
}
.js-reveal.js-active {
&::before {
width: 0%;
}
&::after {
width: 0%;
border: none;
}
} .js-textOpacity {
opacity: 0.3; transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-textOpacity.js-active {
opacity: 1;
} .u-p-blo {
display: inline-block;
}
.u-text-nowrap {
text-wrap: nowrap;
}
.u-center {
text-align: center;
}
.u-inline-center {
margin-inline: auto;
}
.u-text-vertical {
writing-mode: vertical-rl;
}
.u-fsz-small {
font-size: var(--text-size-small);
}
.u-fsz-min {
font-size: var(--text-size-min);
}
.u-pd-1ch {
padding-left: 1ch;
}
.u-mt-tight {
margin-top: var(--el-space-tight);
}
.u-mt-normal {
margin-top: var(--el-space-normal);
}
.u-mt-wide {
margin-top: var(--el-space-wide);
}
.u-mt-double {
margin-top: var(--el-space-double);
}
.u-section-pd-block {
padding-block: 5rem;
}
.u-pd-block-double {
padding-block: var(--el-space-double);
}
.u-pt-tight {
padding-top: var(--el-space-tight);
}
.u-pt-normal {
padding-top: var(--el-space-normal);
}
.u-pt-wide {
padding-top: var(--el-space-wide);
}
.u-pt-double {
padding-top: var(--el-space-double);
}
.u-pb-normal {
padding-bottom: var(--el-space-normal);
}
.u-pb-double {
padding-bottom: var(--el-space-double);
}
.u-color-green {
color: var(--text-green);
}
.u-color-brown {
color: var(--text-brown);
}
.u-separater {
position: relative;
padding-inline: 0.5em 1em;
&::before,
&::after {
content: "";
position: absolute;
top: 0;
width: 1px;
height: 100%;
background: currentColor;
}
&::before {
left: 0;
}
&::after {
right: 0.5em;
}
}
.u-bracket {
position: relative;
width: fit-content;
&::before {
content: "［ ";
}
&::after {
content: " ］";
}
}
.u-paren {
position: relative;
width: fit-content;
&::before {
content: "（ ";
}
&::after {
content: " ）";
}
}
.u-side-line {
position: relative;
&::before {
content: "";
position: absolute;
top: 0;
left: var(--section-aside-width);
translate: -1px 0;
width: 1px;
height: 100%;
background-color: var(--section-bg-color);
}
}