@charset "UTF-8";

h1 {
    font-size: clamp(2rem, 2rem + 2vw, 4rem);
}

:root {
    --font-size--base: clamp(1rem, 0.8rem + 0.8vw, 1.4rem);

    --font-size--xs: calc(var(--font-size--base) * 0.8);
    --font-size--sm: calc(var(--font-size--base) * 0.9);
    --font-size--md: calc(var(--font-size--base) * 1.1);
    --font-size--lg: calc(var(--font-size--base) * 1.25);
    --font-size--xl: calc(var(--font-size--base) * 1.5);
    --font-size--2xl: calc(var(--font-size--base) * 2);


    --space: calc(var(--font-size--base) * 0.25); /* 4px */

    --space--1: var(--space); /* 4px */
    --space--2: calc(var(--space) * 2); /* 8px */
    --space--4: calc(var(--space) * 4); /* 16px */
    --space--6: calc(var(--space) * 6); /* 24px */
    --space--8: calc(var(--space) * 8); /* 32px */
    --space--12: calc(var(--space) * 12); /* 48px */
    --space--16: calc(var(--space) * 16); /* 64px */


    --radius--sm: 4px;
    --radius--md: 8px;
    --radius--lg: 16px;
    --radius--full: 9999px;



    --shadow-color: rgb(0 0 0 / 0.15);
    --shadow--sm: 1px 3px 6px var(--shadow-color);
    --shadow--md: 2px 8px 16px var(--shadow-color);
    --shadow--lg: 3px 13px 26px var(--shadow-color);
    --shadow--xl: 5px 21px 42px var(--shadow-color);


}

.font-size--base { font-size: var(--font-size--base);}
.font-size--xs { font-size: var(--font-size--xs);}
.font-size--sm { font-size: var(--font-size--sm);}
.font-size--md { font-size: var(--font-size--md);}
.font-size--lg { font-size: var(--font-size--lg);}
.font-size--xl { font-size: var(--font-size--xl);}
.font-size--2xl { font-size: var(--font-size--2xl);}
.font-size--3xl { font-size: var(--font-size--3xl);}

.cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #ecf4fb;
    padding: var(--space--8) var(--space--6);
    gap: var(--space--4);
}
.cta__title {
    font-weight: bold;
    font-size: var(--font-size--xl);
}
.cta__text {
    opacity: 0.9;
    font-size: var(--font-size--sm);
}
.cta__button {
    font-size: var(--font-size--base);
    margin-top: var(--space--2);
    padding: var(--space--2) var(--space--4);
    box-shadow: var(--shadow--md);
    background: #2a65ff;
    color: #fff;
    border-radius: 99em;
    text-decoration: none;
}

body { font-size: var(--font-size--base);}
h1 { font-size: var(--font-size--2xl);}
h2 { font-size: var(--font-size--xl);}
h3 { font-size: var(--font-size--md);}

/* font size依存でコンテンツ間の余白をつける */
.flow-content > * + * {
    margin-block-start: 1.5em;
}

/* padding hack */
.padding-frame-16-9 {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.padding-frame-16-9 > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.frame-16-9 {
    aspect-ratio: 16/9;
}
.frame-16-9 > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

img.img-16-9 {
    aspect-ratio: 16/9;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* card */
.card {
    display: grid;
    box-shadow: var(--shadow--md);
    border-radius: var(--radius--md);
    overflow: hidden ;
    max-width: 600px;
}
.card__media {
    aspect-ratio: 16/9;
}
.card__media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card__content {
    display: grid;
    gap: var(--space--4);
    padding: var(--space--6);
}
.card__title {
    font-size: var(--font-size--md);
}
.card__footer {
    display: flex;
    justify-content: end;
    padding: var(--space--6);
}

/*--- card horizon ---*/
.card-horizontal {
    display: flex;
    border-radius: var(--radius--md);
    box-shadow: var(--shadow--lg);
    overflow: hidden;
}
.card-horizontal__content {
    flex-grow: 1;
    padding: var(--space--4);
    align-self: center;
}
.card-horizontal__content > h3 {
    font-size: var(--font-size--md);
}
.card-horizontal__content > p {
    font-size: var(--font-size--sm);
    margin-top: var(--space--2);
}
.card-horizontal__image {
    aspect-ratio: 1 / 1;
    width: 25%;
    flex-shrink: 0;
}
.card-horizontal__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*--- card-horizon padding hack ---*/
.card-horizontal__padding-ratio {
    width: 25%;
    flex-shrink: 0;
}
.card-horizontal__padding-ratio > figure {
    position: relative;
    padding-top: 100%;
    width: 100%;
}
.card-horizontal__padding-ratio > figure > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}