:root {
    --ease-squish-4: cubic-bezier(.5, -.7, .1, 1.5);
    --gray-6: #868e96;
    --gray-6-hsl: 210 7% 56%;
    --radius-round: 1e5px;
    --font-lineheight-1: 1.25;
    --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
    --font-serif: ui-serif, serif;
    --font-weight-4: 400;
    --font-weight-7: 700;
    --font-letterspacing-1: .025em;
    --font-lineheight-2: 1.375;
    --ease-elastic-3: cubic-bezier(.5, 1.25, .75, 1.25);
    --font-lineheight-3: 1.5;
    --font-lineheight-5: 2;
    --layer-1: 1;
    --ratio-square: 1;
    --radius-4: 2rem;
    --ratio-widescreen: 16/9;
    --radius-2: 5px;
    --ease-2: cubic-bezier(.25, 0, .4, 1);
    --gray-12-hsl: 210 40% 2%;
    --ease-elastic-2: cubic-bezier(.5, 1, .75, 1.25);
    --font-lineheight-4: 1.75;
    --ease-out-4: cubic-bezier(0, 0, .1, 1);
    --font-lineheight-00: .95;
    --layer-3: 3;
    --layer-2: 2;
    --ease-out-3: cubic-bezier(0, 0, .3, 1);
    --animation-shake-x: shake-x .75s var(--ease-out-5);
    --gray-0-hsl: 210 17% 98%;
    --layer-4: 4;
    --font-weight-8: 800;
    --ratio-landscape: 4/3;
    --gray-4: #ced4da;
    --font-lineheight-0: 1.1;
    --gray-9-hsl: 210 11% 15%;
    --font-letterspacing-2: .05em;
    --gray-12: #030507;
    --ease-out-5: cubic-bezier(0, 0, 0, 1);
    --ratio-ultrawide: 18/5;
    --ease-in-out-1: cubic-bezier(.1, 0, .9, 1);
    --ease-in-out-3: cubic-bezier(.5, 0, .5, 1);
    --shadow-2: 0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), 0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%));
    --shadow-color: 220 3% 15%;
    --shadow-strength: 1%
}

*,
*:before,
*:after {
    box-sizing: border-box
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin: 0
}

ul[role=list],
ol[role=list] {
    list-style: none
}

html:focus-within {
    scroll-behavior: smooth
}

body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1.5
}

a:not([class]) {
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto
}

img,
picture {
    max-width: 100%;
    display: block
}

input,
button,
textarea,
select {
    font: inherit
}

@media (prefers-reduced-motion:reduce) {
    html:focus-within {
        scroll-behavior: auto
    }

    *,
    *:before,
    *:after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important
    }
}

.CardColumn,
.CardMovie,
.CardRecipe,
.CardAmbassador,
.CardRestaurant {
    height: 100%;
	border: solid 1px var(--color-accent);
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: var(--unit-size-2);
    overflow: hidden;
    padding: var(--unit-size-1);
    position: relative;
    text-decoration: inherit;
    transition: box-shadow .3s var(--ease-elastic-3), transform .3s var(--ease-elastic-3)
}

.CardColumn .title,
.CardMovie .title,
.CardRecipe .title,
.CardAmbassador .title,
.CardRestaurant .title {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    font-size: var(--unit-size-2);
    font-weight: var(--font-weight-4);
    -webkit-line-clamp: 3;
    line-height: var(--font-lineheight-3);
    overflow: hidden
}

.CardColumn .desc,
.CardMovie .desc,
.CardRecipe .desc,
.CardAmbassador .desc,
.CardRestaurant .desc {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    font-size: var(--unit-size-0);
    -webkit-line-clamp: 6;
    line-height: var(--font-lineheight-5);
    overflow: hidden
}

.CardColumn .date,
.CardMovie .date,
.CardRecipe .date,
.CardAmbassador .date,
.CardRestaurant .date {
    font-size: var(--unit-size-0)
}

.CardColumn img,
.CardMovie img,
.CardRecipe img,
.CardAmbassador img,
.CardRestaurant im {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: auto
}

.CardColumn.new:before,
.CardMovie.new:before,
.CardRecipe.new:before,
.CardAmbassador.new:before,
.CardRestaurant.new:before {
    align-items: center;
    background-color: var(--color-primary);
    content: "New";
    display: flex;
    font-family: var(--font-display);
    font-size: var(--unit-size-2);
    font-weight: var(--font-weight-4);
    justify-content: center;
    left: 0;
    line-height: var(--font-lineheight-3);
    position: absolute;
    top: 0;
    transform: translate(-30%, 50%) rotate(-45deg);
    transform-origin: center;
    width: var(--unit-size-11);
    z-index: var(--layer-1)
}

.CardColumn:hover,
.CardMovie:hover,
.CardRecipe:hover {
    box-shadow: 0 var(--unit-size-00) var(--unit-size-0) calc(var(--unit-size-00) * -.3) #0000001a;
    transform: translateY(-1%)
}

.CardColumn>div {
    border-top: 2px solid var(--color-text);
    display: flex;
    gap: var(--unit-size-00);
    -webkit-padding-before: var(--unit-size-2);
    padding-block-start: var(--unit-size-2)
}

.CardColumn>div:nth-child(1) {
    align-items: center;
    gap: var(--unit-size-0)
}

.CardColumn>div:nth-child(2) {
    align-items: center;
    justify-content: space-between
}

.CardColumn>div:nth-child(2)>span {
    font-size: var(--unit-size-0)
}

.CardColumn>div:nth-child(3) {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    font-size: var(--unit-size-0);
    -webkit-line-clamp: 6;
    line-height: var(--font-lineheight-5);
    overflow: hidden
}

.CardColumn img {
    aspect-ratio: var(--ratio-square);
    border-radius: var(--radius-4);
    width: var(--unit-size-10)
}

.CardMovie>div:nth-child(1) {
    position: relative
}

.CardMovie>div:nth-child(1) img {
    aspect-ratio: var(--ratio-widescreen);
    border-radius: var(--radius-2)
}

.CardMovie>div:nth-child(1):before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='34' fill='none' viewBox='0 0 30 34'%3E%3Cpath fill='%23fff' d='M27 11.804c4 2.31 4 8.083 0 10.392L9 32.59c-4 2.309-9-.578-9-5.197V6.608c0-4.62 5-7.506 9-5.196l18 10.392Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: var(--unit-size-5);
    left: 50%;
    opacity: .65;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--unit-size-5)
}

.CardMovie .title+.desc {
    margin-top: var(--unit-size-0)
}

.CardRecipe img {
    aspect-ratio: var(--ratio-widescreen);
    border-radius: var(--radius-2)
}

.CardRecipe .title+.desc {
    margin-top: var(--unit-size-0)
}

.CardAmbassador {
    padding: var(--unit-size-4)
}

.CardAmbassador>div:nth-child(1) {
    display: flex;
    gap: var(--unit-size-3);
    align-items: center
}

@media (min-width:1024px) {
    .CardAmbassador>div:nth-child(1) {
        gap: var(--unit-size-4)
    }
}

.CardAmbassador>div:nth-child(1) img {
    aspect-ratio: var(--ratio-square);
    border-radius: var(--radius-4);
    width: 40%
}

.CardAmbassador .name-en {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--unit-size-0)
}

.CardAmbassador .name {
    -webkit-margin-before: var(--unit-size-0000);
    margin-block-start: var(--unit-size-0000);
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: var(--unit-size-4)
}

.CardAmbassador .restaurant-desc {
    -webkit-margin-before: var(--unit-size-00);
    margin-block-start: var(--unit-size-00);
    -webkit-box-orient: vertical;
    display: -webkit-box;
    font-size: var(--unit-size-0);
    -webkit-line-clamp: 6;
    line-height: var(--font-lineheight-5);
    overflow: hidden
}

.CardAmbassador>div:last-child {
    text-align: center;
    -webkit-margin-before: var(--unit-size-00);
    margin-block-start: var(--unit-size-00)
}

.CardRestaurant {
    flex-direction: column
}

@media (min-width: 1024px) {
    .CardRestaurant {
        flex-direction: row
    }
}

.CardRestaurant div:first-child {
    flex-shrink: 0
}

@media (min-width: 1024px) {
    .CardRestaurant div:first-child {
        width: 30%
    }
}

.CardRestaurant div:first-child img {
    width: 100%;
    aspect-ratio: var(--ratio-square);
    border-radius: var(--radius-2)
}

.CardRestaurant div:last-child {
    display: flex;
    flex-direction: column;
    gap: var(--unit-size-0000)
}

.CardRestaurant div:last-child span {
    font-size: var(--unit-size-0)
}

.CardRestaurant div:last-child h2 {
    font-family: var(--font-sans) !important;
    font-size: var(--unit-size-2) !important;
    font-weight: 700;
    line-height: var(--font-lineheight-2);
    text-align: left !important;
    margin-block: 0 var(--unit-size-0000) !important
}

.CardRestaurant div:last-child a {
    color: var(--color-text)
}

.CategorySelector .category-button {
    border: none;
    margin: 0;
    width: 100%;
    overflow: visible;
    background-color: var(--color-text);
    line-height: inherit;
    -webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;
    -webkit-appearance: none;
    font-family: var(--font-serif);
    font-weight: var(--font-weight-7);
    font-size: var(--unit-size-2);
    color: #fff;
    padding: var(--unit-size-0000) var(--unit-size-3);
    position: relative
}

@media (min-width:1024px) {
    .CategorySelector .category-button {
        display: none
    }
}

.CategorySelector .category-button span:after {
    background-image: var(--icon-chevron-right-white);
    background-repeat: no-repeat;
    background-position: right;
    position: absolute;
    right: var(--unit-size-00);
    top: 50%;
    content: "";
    display: block;
    width: var(--unit-size-3);
    height: var(--unit-size-3);
    transform: rotate(90deg) translate(-50%)
}

.CategorySelector .category-dropdown {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap
}

@media (max-width: 1023px) {
    .CategorySelector .category-dropdown {
        border-inline: var(--border-primary);
        background-color: #fff
    }
}

@media (min-width: 1024px) {
    .CategorySelector .category-dropdown {
        flex-direction: row;
        justify-content: center;
        gap: var(--unit-size-3)
    }
}

.CategorySelector .category-item {
    font-family: var(--font-serif);
    font-weight: var(--font-weight-7);
    text-decoration: none;
    color: inherit;
    transition: color .2s var(--ease-2)
}

@media (max-width:1023px) {
    .CategorySelector .category-item {
        font-size: var(--unit-size-2);
        border-bottom: var(--border-primary);
        text-align: center;
        padding: var(--unit-size-0000) var(--unit-size-3)
    }
}

@media (min-width:1024px) {
    .CategorySelector .category-item {
        font-size: var(--unit-size-3)
    }
}

.CategorySelector .category-item:hover {
    color: hsl(var(--gray-12-hsl) / 70%)
}

@media (min-width:1024px) {
    .CategorySelector .category-item.current {
        color: var(--color-quaternary);
        text-decoration: underline
    }
}

@media (max-width:1023px) {
    .category-dropdown.closed {
        display: none
    }

    .category-dropdown.open {
        display: flex
    }
}

@media (min-width:1024px) {
    .category-dropdown {
        display: flex
    }
}

.ContentFeed {
    padding-left: 0
}

.ContentFeed li {
    border-bottom: var(--border-primary)
}

.ContentFeed a {
    background-image: var(--icon-chevron-right);
    background-position: 100% 50%;
    background-repeat: no-repeat;
    background-size: var(--unit-size-3);
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: var(--unit-size-0);
    padding-block: var(--unit-size-4);
    padding-right: var(--unit-size-6);
    text-decoration: none;
    transition: color .2s var(--ease-2), transform .2s var(--ease-elastic-2)
}

@media (min-width:1024px) {
    .ContentFeed a {
        align-items: center;
        flex-direction: row;
        gap: var(--unit-size-6)
    }
}

.ContentFeed a:hover {
    color: hsl(var(--gray-12-hsl) / 70%);
    transform: translate(var(--unit-size-1))
}

.ContentFeed .date,
.ContentFeed .title {
    font-size: var(--unit-size-0)
}

.ContentFeed .title {
    font-weight: var(--font-weight-4)
}

[class^=grid-cols] {
    display: grid;
    gap: var(--unit-size-2);
    grid-template-columns: repeat(1, minmax(0, 1fr))
}

[class^=grid-cols-2-] {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.col-span-2 {
    grid-column: span 2 / span 2
}

@media (min-width: 1024px) {
    .grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }

    .grid-cols-2-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
}

.HeaderPrimary,
.HeaderSecondary {
    border: var(--border-primary)
}

.HeaderPrimary .title,
.HeaderSecondary .title {
    font-family: var(--font-serif);
    font-size: var(--unit-size-5)
}

@media (min-width:1024px) {

    .HeaderPrimary .title,
    .HeaderSecondary .title {
        font-size: var(--unit-size-6)
    }
}

:is(.HeaderPrimary .title)+span,
:is(.HeaderSecondary .title)+span {
    display: block;
    font-family: var(--font-display);
    font-size: var(--unit-size-1);
    font-weight: var(--font-weight-7);
    margin-top: var(--unit-size-00)
}

.HeaderPrimary p,
.HeaderSecondary p {
    line-height: var(--font-lineheight-4)
}

.HeaderPrimary {
    border-block: var(--border-primary)
}

.HeaderPrimary>div:first-child,
.HeaderPrimary>div.first_block {
    aspect-ratio: var(--ratio-widescreen);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

@media (min-width:1024px) {

    .HeaderPrimary>div:first-child,
    .HeaderPrimary>div.first_block {
        aspect-ratio: var(--ratio-ultrawide)
    }
}

.HeaderPrimary>div:first-child picture img,
.HeaderPrimary>div.first_block picture img {
    position: absolute;
    top: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%
}

.HeaderPrimary>div:first-child>ul,
.header-image>div:first-child>ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    background-color: rgba(255, 255, 255, .7);
    padding: var(--unit-size-1) var(--unit-size-1);
    margin: 0 0 0 0;
    list-style: none;
}

.HeaderPrimary>ul:first-child,
.header-image>ul:first-child {
    width: 100%;
    display: flex;
    padding: var(--unit-size-1) var(--unit-size-1);
    margin: 0 0 0 0;
    list-style: none;
}

.HeaderPrimary>div:first-child>ul li.active,
.HeaderPrimary>ul:first-child li.active,
.header-image>div:first-child>ul li.active,
.header-image>ul:first-child li.active {
    font-weight: var(--font-weight-7);
}

.HeaderPrimary>div:first-child>ul li a,
.HeaderPrimary>ul:first-child li a,
.header-image>div:first-child>ul li a,
.header-image>ul:first-child li a {
    color: rgb(3, 5, 7);
}

.HeaderPrimary>div:first-child>ul li::after,
.HeaderPrimary>ul:first-child li::after,
.header-image>div:first-child>ul li::after,
.header-image>ul:first-child li::after {
    content: " > ";
}

.HeaderPrimary>div:first-child>ul li:last-child::after,
.HeaderPrimary>ul:first-child li:last-child::after,
.header-image>div:first-child>ul li:last-child::after,
.header-image>ul:first-child li:last-child::after {
    content: none;
}

.HeaderPrimary>div:first-child>div,
.HeaderPrimary>div.first_block>div {
    position: relative;
    text-align: center
}

.HeaderPrimary>div~div {
    border-top: var(--border-primary);
    padding: var(--unit-size-4) var(--unit-size-3)
}

@media (min-width:1024px) {
    .HeaderPrimary>div~div {
        padding-block: var(--unit-size-6)
    }
}

.HeaderSecondary {
    padding: var(--unit-size-6) var(--unit-size-3)
}

.HeaderSecondary p {
    margin-top: var(--unit-size-2)
}

@media (min-width:1024px) {
    .HeaderSecondary {
        border-block: var(--border-primary);
        display: flex;
        padding: 0
    }

    .HeaderSecondary>div {
        display: flex;
        align-items: center;
        padding: var(--unit-size-4) var(--unit-size-3)
    }

    .HeaderSecondary>div:first-child {
        border-right: var(--border-primary);
        flex-shrink: 0
    }

    .HeaderSecondary p {
        margin-top: 0
    }
}

.hero-slider {
    margin-inline: calc(var(--unit-size-3) * -1);
    margin-top: calc(var(--unit-size-1) * -1);
    position: relative
}

@media (min-width:1024px) {
    .hero-slider {
        margin-top: calc(var(--unit-size-5) * -1);
        overflow: hidden
    }
}

.hero-slider .images {
    aspect-ratio: 1.15 / 1;
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: var(--layer-1)
}

@media (min-width:1024px) {
    .hero-slider .images {
        block-size: var(--unit-size-18);
        margin-inline: auto;
        overflow: visible;
        width: auto;
        aspect-ratio: 1 / 1.15
    }
}

.hero-slider .images img {
    aspect-ratio: 1.15 / 1;
    border-radius: var(--radius-round) var(--radius-round) 0 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%;
    height: auto
}

@media (min-width:1024px) {
    .hero-slider .images img {
        aspect-ratio: 1 / 1.15;
        block-size: var(--unit-size-18)
    }
}

.hero-slider .leads {
    margin-top: calc(var(--unit-size-7) * -1);
    position: relative;
    width: 100%;
    z-index: var(--layer-1)
}

@media (min-width:1024px) {
    .hero-slider .leads {
        align-items: center;
        display: flex;
        height: 100% !important;
        left: var(--unit-size-7);
        margin-top: 0;
        padding: 0;
        position: absolute;
        top: 0;
        width: var(--unit-size-15)
    }
}

.hero-slider .leads>div {
    display: flex;
    flex-direction: column;
    gap: var(--unit-size-0);
    opacity: 0;
    padding: var(--unit-size-3) var(--unit-size-8) var(--unit-size-3) var(--unit-size-3);
    position: absolute;
    transition: opacity .5s var(--ease-out-4), transform .5s var(--ease-out-4)
}

@media (min-width:1024px) {
    .hero-slider .leads>div {
        padding: 0;
        transform: scale(.7)
    }
}

.hero-slider .leads>div.active {
    opacity: 1
}

@media (min-width:1024px) {
    .hero-slider .leads>div.active {
        transform: scale(1)
    }
}

.hero-slider .leads div div a {
    z-index: 1;
    position: relative;
    display: none;
    /* リンクを初めは非表示にする */
}

.hero-slider .leads>div.active div a {
    z-index: 2;
    position: relative;
    display: block;
    /* アクティブなスライドのリンクを表示する */
    text-decoration: none;
    color: rgb(3, 5, 7);
}


.hero-slider .leads>div .number {
    font-family: var(--font-display);
    font-weight: var(--font-weight-7);
    font-size: var(--unit-size-8);
    line-height: var(--font-lineheight-00)
}

@media (min-width:1024px) {

    .hero-slider .leads>div .title,
    .hero-slider .leads>div p {
        background-color: var(--color-background2);
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone
    }

    .hero-slider .leads>div:hover a .title,
    .hero-slider .leads>div:hover a p {
        background-color: rgba(255, 203, 204, 0.5);
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }
}

.hero-slider .leads>div .title {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    font-size: var(--unit-size-4);
    -webkit-line-clamp: 2;
    overflow: hidden
}

@media (min-width:1024px) {
    .hero-slider .leads>div .title {
        display: inline
    }
}

.hero-slider .leads>div p {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    font-size: var(--unit-size-1);
    -webkit-line-clamp: 3;
    line-height: var(--font-lineheight-4);
    overflow: hidden
}

@media (min-width:1024px) {
    .hero-slider .leads>div p {
        display: inline
    }
}

@media (min-width:1024px) {
    .hero-slider .leads>div a {
        -webkit-margin-before: var(--unit-size-1);
        margin-block-start: var(--unit-size-1)
    }
}

.hero-slider .images:hover+.leads .title,
.hero-slider .images:hover+.leads a p {
    background-color: rgba(255, 203, 204, 0.5);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.hero-slider .Pagination {
    flex-direction: column;
    position: absolute;
    right: var(--unit-size-3);
    top: var(--unit-size-16);
    z-index: var(--layer-1)
}

@media (min-width:1024px) {
    .hero-slider .Pagination {
        top: 50%;
        right: var(--unit-size-7);
        transform: translateY(-50%);
        display: flex
    }
}

.hero-slider .Pagination button {
    display: none
}

@media (min-width:1024px) {
    .hero-slider .Pagination button {
        display: flex
    }

    .hero-slider .Pagination button.prev:before {
        transform: translateY(-2%) rotate(-90deg)
    }

    .hero-slider .Pagination button.next:before {
        transform: translateY(2%) rotate(90deg)
    }
}

.hero-slider .Pagination button:hover {
    background-color: var(--color-primary)
}

.hero-slider .Pagination button.prev:hover {
    transform: translateY(-5%)
}

.hero-slider .Pagination button.next:hover {
    transform: translateY(5%)
}

.hero-slider .Pagination .status {
    flex-direction: column;
    gap: var(--unit-size-1)
}

.hero-slider .Pagination .status .bullet {
    cursor: pointer;
    display: block;
    width: var(--unit-size-0);
    height: var(--unit-size-0);
    border: 2px solid var(--color-text);
    border-radius: var(--radius-round);
    transition: background-color .2s var(--ease-2)
}

.hero-slider .Pagination .status .bullet.active {
    background-color: var(--color-text);
    pointer-events: none
}

.hero-slider .Pagination .status .bullet:not(.active):hover {
    background-color: var(--color-primary)
}

.hero-slider .images img {
    box-shadow: 0 var(--unit-size-0) var(--unit-size-1) var(--unit-size-00) #0000001a;
    transition: all .5s var(--ease-squish-4)
}

/* スライドがアクティブな場合のスタイル */
.hero-slider[data-slide="1"] .images a:nth-of-type(1) img,
.hero-slider[data-slide="2"] .images a:nth-of-type(2) img,
.hero-slider[data-slide="3"] .images a:nth-of-type(3) img,
.hero-slider[data-slide="4"] .images a:nth-of-type(4) img,
.hero-slider[data-slide="5"] .images a:nth-of-type(5) img {
    transform: translate(0);
    z-index: 5;
}

.hero-slider[data-slide="1"] .images a:nth-of-type(2) img,
.hero-slider[data-slide="2"] .images a:nth-of-type(3) img,
.hero-slider[data-slide="3"] .images a:nth-of-type(4) img,
.hero-slider[data-slide="4"] .images a:nth-of-type(5) img,
.hero-slider[data-slide="5"] .images a:nth-of-type(1) img {
    transform: translate(8%, 2%);
    z-index: 4;
}

.hero-slider[data-slide="1"] .images a:nth-of-type(3) img,
.hero-slider[data-slide="2"] .images a:nth-of-type(4) img,
.hero-slider[data-slide="3"] .images a:nth-of-type(5) img,
.hero-slider[data-slide="4"] .images a:nth-of-type(1) img,
.hero-slider[data-slide="5"] .images a:nth-of-type(2) img {
    transform: translate(16%, 4%);
    z-index: 3;
}

.hero-slider[data-slide="1"] .images a:nth-of-type(4) img,
.hero-slider[data-slide="2"] .images a:nth-of-type(5) img,
.hero-slider[data-slide="3"] .images a:nth-of-type(1) img,
.hero-slider[data-slide="4"] .images a:nth-of-type(2) img,
.hero-slider[data-slide="5"] .images a:nth-of-type(3) img {
    transform: translate(24%, 6%);
    z-index: 2;
}

.hero-slider[data-slide="1"] .images a:nth-of-type(5) img,
.hero-slider[data-slide="2"] .images a:nth-of-type(1) img,
.hero-slider[data-slide="3"] .images a:nth-of-type(2) img,
.hero-slider[data-slide="4"] .images a:nth-of-type(3) img,
.hero-slider[data-slide="5"] .images a:nth-of-type(4) img {
    transform: translate(32%, 8%);
    z-index: 1;
}


.LinkLarge,
.LinkSmall,
.LinkAccent {
    cursor: pointer;
    display: inline-flex;
    max-width: 100%;
    white-space: nowrap;
    text-decoration: none
}

.LinkLarge,
.LinkSmall {
    background-color: var(--color-accent);
    border-radius: var(--radius-round);
    color: #fff;
    justify-content: center
}

.LinkLarge:hover,
.LinkSmall:hover {
    animation: pulse 1.5s infinite
}

.LinkLarge {
    font-size: var(--unit-size-1);
    gap: var(--unit-size-00);
    min-width: var(--unit-size-12);
    padding: var(--unit-size-1) var(--unit-size-5)
}

.LinkLarge svg {
    height: var(--unit-size-3);
    width: var(--unit-size-3)
}

.LinkSmall {
    font-size: var(--unit-size-0);
    gap: var(--unit-size-000);
    min-width: var(--unit-size-10);
    padding: var(--unit-size-000) var(--unit-size-2)
}

.LinkSmall svg {
    height: var(--unit-size-2);
    width: var(--unit-size-2)
}

.LinkAccent {
    color: var(--color-text);
    font-size: var(--unit-size-0);
    font-weight: var(--font-weight-7);
    padding-block: var(--unit-size-1);
    -webkit-padding-start: var(--unit-size-3);
    padding-inline-start: var(--unit-size-3);
    position: relative;
    transition: transform .3s var(--ease-out-3)
}

.LinkAccent:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='65' height='68' fill='none' viewBox='0 0 65 68'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFD2D2' d='M2.957 19.964c1.981-4.173 8.345-7.157 12.623-10.59C19.858 5.942 22.525 0 32.243 0c3.96 0 7.869.792 11.724 2.35 3.856 1.585 7.315 3.803 10.325 6.708 3.01 2.904 5.44 6.443 7.315 10.589 1.849 4.146 2.8 8.82 2.8 14.022 0 4.542-.872 8.846-2.615 12.94-1.743 4.092-4.093 7.684-7.05 10.747a33.729 33.729 0 0 1-10.22 7.315c-3.855 1.795-7.948 2.667-12.253 2.667-4.304 0-8.318-.872-12.2-2.588-3.908-1.717-7.315-4.093-10.272-7.077-2.958-2.984-5.308-6.523-7.077-10.59C.95 43.017.053 38.633.053 33.907c0-5.149.977-9.796 2.957-13.995l-.053.053Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M0 0h64.38v67.364H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 0;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: -1
}

.LinkAccent:hover {
    transform: translate(6%)
}

.LinkAccent:hover:before {
    animation: var(--animation-shake-x)
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 var(--gray-6)
    }

    70% {
        box-shadow: 0 0 0 var(--unit-size-0) hsl(var(--gray-6-hsl) / 0%)
    }

    to {
        box-shadow: 0 0 0 0 hsl(var(--gray-6-hsl) / 0%)
    }
}

.Pagination {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    font-weight: 700;
    gap: var(--unit-size-2);
    justify-content: center
}

@media (min-width: 1024px) {
    .Pagination {
        gap: var(--unit-size-4);
    }
}

.Pagination .page_links,
.Pagination .page_none {
    display: none;
}

.Pagination .prev,
.Pagination .next,
.Pagination .prev2,
.Pagination .next2 {
    aspect-ratio: var(--ratio-square);
    width: var(--unit-size-6);
    height: var(--unit-size-6)
}

.Pagination a,
.Pagination button {
    border: 2px solid var(--color-text);
    border-radius: var(--radius-round);
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s var(--ease-2), transform .2s var(--ease-2)
}

.Pagination .status a,
.Pagination .status button {
    border: none;
}

.Pagination a.prev:before,
.Pagination button.prev:before,
.Pagination a.next:before,
.Pagination button.next:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: var(--icon-chevron-right);
    background-repeat: no-repeat;
    background-position: center;
    transform: translate(2%)
}

.Pagination a.prev2:before,
.Pagination button.prev2:before,
.Pagination a.next2:before,
.Pagination button.next2:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: var(--icon-chevron-right2);
    background-repeat: no-repeat;
    background-position: center;
    transform: translate(2%)
}

.Pagination a.prev:before,
.Pagination button.prev:before,
.Pagination a.prev2:before,
.Pagination button.prev2:before {
    transform: translate(-2%) rotate(180deg)
}

.Pagination a svg,
.Pagination button svg {
    block-size: var(--unit-size-4)
}

.Pagination a:hover,
.Pagination button:hover {
    background-color: var(--color-primary)
}

.Pagination a.prev:hover,
.Pagination button.prev:hover,
.Pagination a.prev2:hover,
.Pagination button.prev2:hover {
    transform: translate(-5%)
}

.Pagination a.next:hover,
.Pagination button.next:hover,
.Pagination a.next2:hover,
.Pagination button.next2:hover {
    transform: translate(5%)
}

.Pagination .status {
    align-items: center;
    display: flex;
    gap: var(--unit-size-0)
}

.Pagination button {
    background-color: transparent;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.SiteFooter {
    background-color: var(--color-text);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: var(--unit-size-8) var(--unit-size-3)
}

.SiteFooter .site-logo {
    margin-inline: auto;
    width: 100%;
    height: auto
}

.SiteFooter>div>nav {
    display: flex;
    gap: var(--unit-size-8);
    margin-block: var(--unit-size-5)
}

.SiteFooter>div>div {
    align-items: center;
    display: flex;
    flex-direction: column
}

.SiteFooter>div>div ul {
    flex-direction: row;
    gap: var(--unit-size-2)
}

.SiteFooter>div>div img {
    height: var(--unit-size-5);
    width: var(--unit-size-5)
}

.SiteFooter>div>div p {
    font-size: var(--unit-size-0)
}

.SiteFooter>div>div p.foot_mailto {
    font-size: var(--unit-size-00);
    text-align: center;
}

.SiteFooter>div>div p.foot_mailto a {
    color: #fff;
    text-decoration: none;
    transition: color .2s var(--ease-2)
}

.SiteFooter nav a {
    color: #fff;
    text-decoration: none;
    transition: color .2s var(--ease-2)
}

.SiteFooter nav a:hover {
    color: hsl(var(--gray-0-hsl) / 70%)
}

.SiteFooter ul {
    display: flex;
    flex-direction: column;
    gap: var(--unit-size-1);
    padding: 0
}

.SiteFooter .sns a {
    text-decoration: none;
    transition: opacity .2s var(--ease-2)
}

.SiteFooter .sns a:hover {
    opacity: .7
}

@media (min-width:1024px) {
    .SiteFooter {
        display: grid;
        flex-direction: row;
        grid-template-columns: 1fr 1fr;
        padding: var(--unit-size-8) 0
    }

    .SiteFooter .site-logo {
        justify-self: center;
        width: var(--unit-size-16)
    }

    .SiteFooter>div {
        display: flex;
        gap: var(--unit-size-8)
    }

    .SiteFooter>div>nav {
        display: flex;
        gap: var(--unit-size-8);
        margin-block: 0
    }

    .SiteFooter>div>nav ul {
        margin-block: 0
    }

    :is(.SiteFooter>div>nav ul)>li~li {
        -webkit-margin-before: var(--unit-size-0);
        margin-block-start: var(--unit-size-0)
    }

    .SiteFooter>div>div {
        justify-content: end;
        margin-inline: auto var(--unit-size-8);
        text-align: right
    }
}

.SiteHeader {
    align-items: center;
    border-inline: var(--border-primary);
    border-top: var(--border-primary);
    display: flex;
    justify-content: space-between;
    margin: var(--unit-size-000) var(--unit-size-000) 0;
    padding: var(--unit-size-3);
    position: relative;
    z-index: var(--layer-4)
}

.SiteHeader .site-logo {
    width: var(--unit-size-14);
    display: block;
    transition: opacity .2s var(--ease-2)
}

.SiteHeader .site-logo:hover {
    opacity: .7
}

.SiteHeader .site-logo img {
    height: auto
}

.SiteHeader nav ul {
    display: flex;
    margin: 0;
    padding: 0
}

.SiteHeader nav a {
    color: var(--color-text);
    font-weight: var(--font-weight-8);
    text-decoration: none;
    transition: color .2s var(--ease-2);
    position: relative;
}

.SiteHeader nav a::after {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
    background: #000000;
    bottom: -1px;
    transform: scale(0, 1);
    transform-origin: center top;
    transition: transform 0.3s;
}

.SiteHeader nav a:hover {
    color: hsl(var(--gray-12-hsl) / 70%);
    /**opacity: .7;
    background-color: #ffcbcc;**/
}

.SiteHeader nav a:hover::after {
    transform: scale(1, 1);
}

@media (max-width:1023px) {
    .SiteHeader nav a:hover {
        background-color: none;
    }
}

@media (max-width:1023px) {
    .SiteHeader .menu:before {
        content: "";
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        pointer-events: none;
        transition: background-color .6s var(--ease-in-out-1)
    }

    .SiteHeader .menu.is-open:before {
        background-color: hsl(var(--gray-12-hsl) / 30%)
    }

    .SiteHeader .menu.is-open nav {
        right: 0
    }

    .SiteHeader .toggle-menu {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: transparent;
        border: none;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: var(--unit-size-00);
        outline: none;
        padding: var(--unit-size-0) 0;
        position: relative;
        transition: opacity .2s var(--ease-2)
    }

    .SiteHeader .toggle-menu:before,
    .SiteHeader .toggle-menu:after {
        border-top: 2px solid var(--color-text);
        content: "";
        width: var(--unit-size-5)
    }

    .SiteHeader .toggle-menu:hover {
        opacity: .7
    }

    .SiteHeader nav {
        display: block;
        height: 100%;
        position: fixed;
        right: -100%;
        top: 0;
        width: var(--unit-size-14);
        transition: right .6s var(--ease-in-out-3);
        animation-duration: 1s;
        background-color: var(--color-text);
        box-shadow: var(--shadow-2)
    }

    .SiteHeader nav ul {
        flex-direction: column;
        padding: var(--unit-size-5) var(--unit-size-3);
        gap: var(--unit-size-00)
    }

    .SiteHeader nav ul a {
        color: #fff;
        display: inline-block;
        font-size: var(--unit-size-2);
        padding: var(--unit-size-0000);
        transition: opacity .2s var(--ease-2)
    }

    .SiteHeader nav ul a:hover {
        color: #fff;
        opacity: .7
    }

    .SiteHeader nav .sns {
        display: flex;
        flex-direction: row;
        padding-top: 0
    }

    .SiteHeader nav .sns a {
        text-decoration: none;
        transition: opacity .2s var(--ease-2)
    }

    .SiteHeader nav .sns a:hover {
        opacity: .7
    }

    .SiteHeader nav .sns a img {
        height: var(--unit-size-5);
        width: var(--unit-size-5)
    }

    .SiteHeader nav .toggle-menu {
        gap: 0;
        padding: var(--unit-size-1) 0;
        position: absolute;
        top: var(--unit-size-5);
        right: var(--unit-size-6)
    }

    .SiteHeader nav .toggle-menu:before,
    .SiteHeader nav .toggle-menu:after {
        border-color: #fff
    }

    .SiteHeader nav .toggle-menu:before {
        transform: translateY(50%) rotate(45deg)
    }

    .SiteHeader nav .toggle-menu:after {
        transform: translateY(-50%) rotate(-45deg)
    }
}

@media (min-width:1024px) {
    .SiteHeader {
        font-size: var(--unit-size-1);
        margin: var(--unit-size-3) var(--unit-size-3) 0
    }

    .SiteHeader .site-logo {
        width: var(--unit-size-16)
    }

    .SiteHeader .toggle-menu {
        display: none
    }

    .SiteHeader nav {
        position: relative
    }

    .SiteHeader nav ul {
        gap: var(--unit-size-3)
    }

    .SiteHeader nav li:first-child {
        display: none
    }
}

.Tag {
    background-color: var(--color-text);
    border-radius: var(--radius-round);
    color: #fff;
    display: inline-flex;
    font-size: var(--unit-size-00);
    justify-content: center;
    line-height: var(--font-lineheight-1);
    max-width: 100%;
    padding: var(--unit-size-0000) var(--unit-size-00);
    white-space: nowrap
}

.TagGroup {
    display: flex;
    flex-wrap: wrap;
    gap: var(--unit-size-00)
}


body.Search .HeaderPrimary .title {
    color: #fff
}

:is(body.Search .HeaderPrimary .title)+span {
    color: #fff
}

body.Search .page-content {
    padding: 0 var(--unit-size-3) var(--unit-size-6);
    margin-bottom: var(--unit-size-3);
    overflow: hidden
}

@media (min-width: 1024px) {
    body.Search .page-content {
        padding-inline: var(--unit-size-9)
    }
}

body.Search .banner_area {
    margin-block: var(--unit-size-6)
}

@media (min-width: 1024px) {
    body.Search .banner_area {}
}

body.Search .page-content .search h2 {
    font-family: var(--font-serif);
    text-align: center;
    margin-block: var(--unit-size-6)
}

@media (min-width: 1024px) {
    body.Search .page-content .search h2 {
        font-size: var(--unit-size-4)
    }
}

body.Search .page-content .search h2 span {
    display: inline-block;
    padding-bottom: var(--unit-size-0);
    border-bottom: var(--border-primary)
}

body.Search .page-content .search .search_area {
    background-color: var(--color-gray);
}
body.Search .page-content .search .tabs {
    font-size: var(--unit-size-1);
    margin-top: var(--unit-size-5)
}

body.Search .page-content .search ul {
    list-style-type: none;
    padding: 0;
    margin: 0 -1.5px
}

body.Search .page-content .search li {
    flex-grow: 1;
    min-width: 50%;
    padding: 1.5px
}

@media (min-width: 1024px) {
    body.Search .page-content .search li {
        min-width: auto
    }
}

body.Search .page-content .search .tab-list {
    display: flex;
    flex-wrap: wrap
}

body.Search .page-content .search .tab-list button {
    color: var(--color-text);
	border: solid 1px var(--color-accent);
}

body.Search .page-content .search .tab {
    width: 100%;
    background-color: #fff;
    border: none;
    padding: var(--unit-size-1) var(--unit-size-4);
    cursor: pointer
}

body.Search .page-content .search .tab.selected {
    background-color: var(--color-accent);
    color: #fff;
    cursor: default
}

body.Search .page-content .search .panels {
    margin-top: 1.5px
}

body.Search .page-content .search .panel {
    display: flex;
    flex-direction: column;
    padding: var(--unit-size-2)
}

@media (min-width: 1024px) {
    body.Search .page-content .search .panel {
        flex-direction: row;
        padding: 0
    }
}

@media (min-width: 1024px) {
    body.Search .page-content .search .panel>div {
        padding: var(--unit-size-2)
    }
}

@media (min-width: 1024px) and (min-width: 1024px) {
    body.Search .page-content .search .panel>div {
        padding: var(--unit-size-4)
    }
}

body.Search .page-content .search .panel>div:first-child {
    white-space: nowrap
}

@media (min-width: 1024px) {
    body.Search .page-content .search .panel>div:first-child {
        width: 20%;
        flex-shrink: 0
    }
}

body.Search .page-content .search .panel ul {
    margin-top: var(--unit-size-00);
    display: flex;
    flex-wrap: wrap
}

@media (min-width: 1024px) {
    body.Search .page-content .search .panel ul {
        margin-top: 0;
        justify-content: flex-start;
        gap: var(--unit-size-4) var(--unit-size-6)
    }
}

body.Search .page-content .search .panel li {
    padding-block: var(--unit-size-00)
}

@media (min-width: 1024px) {
    body.Search .page-content .search .panel li {
        flex-grow: 0;
        padding-block: 0;
        width: auto
    }
}

body.Search .page-content .search .panel li label {
    cursor: pointer
}

body.Search .page-content .search .panel li input[type=radio] {
    display: none
}

:is(body.Search .page-content .search .panel li input[type="radio"]):checked+span:before {
    border: 0;
    background-color: var(--color-accent)
}

:is(body.Search .page-content .search .panel li input[type="radio"]):checked+span:after {
    width: var(--unit-size-000);
    height: var(--unit-size-000);
    background-color: #fff;
    top: 50%;
    left: calc(var(--unit-size-2) / 2);
    transform: translate(-50%, -50%)
}

:is(body.Search .page-content .search .panel li input[type="radio"])+span {
    padding-left: var(--unit-size-4);
    display: inline-block;
    position: relative
}

:is(body.Search .page-content .search .panel li input[type="radio"])+span:before,
:is(body.Search .page-content .search .panel li input[type="radio"])+span:after {
    content: "";
    position: absolute;
    display: block;
    border-radius: 50%
}

:is(body.Search .page-content .search .panel li input[type="radio"])+span:before {
    width: var(--unit-size-2);
    height: var(--unit-size-2);
    background-color: #fff;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border: 1px solid var(--color-accent);
}

body.Search .page-content .search .panel li input[type=checkbox] {
    display: none
}

:is(body.Search .page-content .search .panel li input[type="checkbox"]):checked+span:before {
    border: 0;
    background-color: var(--color-accent)
}

:is(body.Search .page-content .search .panel li input[type="checkbox"]):checked+span:after {
    width: var(--unit-size-1);
    height: var(--unit-size-000);
    border-left: 3px solid white;
    border-bottom: 3px solid white;
    transform: rotate(-45deg) translate(-50%, -50%);
    transform-origin: 0 0;
    top: 45%;
    left: calc(var(--unit-size-2) / 2)
}

:is(body.Search .page-content .search .panel li input[type="checkbox"])+span {
    padding-left: var(--unit-size-4);
    display: inline-block;
    position: relative
}

:is(body.Search .page-content .search .panel li input[type="checkbox"])+span:before,
:is(body.Search .page-content .search .panel li input[type="checkbox"])+span:after {
    content: "";
    position: absolute;
    display: block
}

:is(body.Search .page-content .search .panel li input[type="checkbox"])+span:before {
    width: var(--unit-size-2);
    height: var(--unit-size-2);
    background-color: #fff;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border: 1px solid var(--color-accent)
}

body.Search .page-content .search-from-genre {
    margin-top: 3px
}

body.Search .page-content .search-submit {
    margin-top: var(--unit-size-4);
    text-align: center
}

body.Search .page-content .search-submit button {
    border: none
}

body.Search .page-content .search-accordion {
    display: flex;
    flex-direction: column
}

body.Search .page-content .search-accordion.expanded>.search-accordion-toggle:before {
    position: absolute;
    bottom: 0;
    left: var(--unit-size-2);
    content: "";
    display: block;
    width: calc(100% - (var(--unit-size-2) * 2));
    border-top: 3px solid var(--color-background)
}

@media (min-width: 1024px) {
    body.Search .page-content .search-accordion.expanded>.search-accordion-toggle:before {
        left: var(--unit-size-4);
        width: calc(100% - (var(--unit-size-4) * 2))
    }
}

body.Search .page-content .search-accordion.expanded>.search-accordion-toggle:after {
    height: 0;
    opacity: 0
}

body.Search .page-content .search-accordion .panel {
    position: relative
}

body.Search .page-content .search-accordion .panel:after {
    position: absolute;
    bottom: 0;
    left: var(--unit-size-2);
    content: "";
    display: block;
    width: calc(100% - (var(--unit-size-2) * 2));
    border-top: 3px solid var(--color-background)
}

@media (min-width: 1024px) {
    body.Search .page-content .search-accordion .panel:after {
        left: var(--unit-size-4);
        width: calc(100% - (var(--unit-size-4) * 2))
    }
}

body.Search .page-content .search-accordion .search-accordion-toggle {
    color: var(--color-text);
    font-size: var(--unit-size-2);
    border: 0;
    background-color: #fff;
    padding: var(--unit-size-2);
    width: 100%;
    cursor: pointer;
    position: relative
}

body.Search .page-content .search-accordion .search-accordion-toggle:after {
    transition: height .25s ease .25s, opacity .25s ease;
    display: block;
    content: "";
    background-image: url(/files/user/assets/icon-chevron-down-7010ee32.svg);
    background-repeat: no-repeat;
    background-size: var(--unit-size-3);
    background-position: 50%;
    width: 100%;
    height: var(--unit-size-4);
    transform: rotate(180deg)
}

body.Search .page-content .search-accordion .search-accordion-content {
    padding: 0;
    flex-direction: column
}

body.Search .page-content .search-accordion .search-accordion-content .search-accordion-toggle:after {
    transform: rotate(0)
}

body.Search .page-content .search-result {
    margin-top: var(--unit-size-5);
    padding-top: var(--unit-size-5)
}

body.Search .page-content .search-result h2 {
    font-family: var(--font-serif);
    text-align: center;
    margin-block: var(--unit-size-2)
}

@media (min-width: 1024px) {
    body.Search .page-content .search-result h2 {
        font-size: var(--unit-size-4)
    }
}

body.Search .page-content .search-result h2 span {
    display: inline-block;
    padding-bottom: var(--unit-size-0);
    border-bottom: var(--border-primary)
}

:is(body.Search .page-content .search-result h2)+p {
    margin-bottom: var(--unit-size-4);
    text-align: center
}

@media (min-width: 1024px) {
    :is(body.Search .page-content .search-result h2)+p {
        margin-bottom: var(--unit-size-6)
    }
}

body.Search .page-content .search-result .Pagination {
    margin-top: var(--unit-size-6)
}

body.Search .page-content .search-result-meta {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: var(--unit-size-1);
    align-items: center;
    margin-bottom: var(--unit-size-6);
    flex-wrap: nowrap
}

@media (min-width: 1024px) {
    body.Search .page-content .search-result-meta {
        gap: var(--unit-size-6);
        flex-direction: row;
        align-items: flex-start
    }
}

body.Search .page-content .search-result-meta>div {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: var(--unit-size-1)
}

body.Search .page-content .search-result-meta>div>div:first-child {
    white-space: nowrap
}

body.Search .page-content .search-result-meta>div>div:last-child {
    max-width: var(--unit-size-18)
}

:root {
    --color-accent: #FF7651;
    --color-accent-pale: #F1E9D2;
    --color-news-accent: #FF7651;
    --color-news-accent-pale: #F1E9D2;
    --color-background: #F3EFD8;
    --color-background2: rgba(243, 239, 216, 0.5);
    --color-text: var(--gray-12);
    --color-primary: #FFD584;
    --color-primary-rgb: 255, 213, 132;
    --color-secondary: #FFD2D2;
    --color-tirtiary: #FFF1F9;
    --color-quaternary: #F47E7E;
    --color-quinary: #CCE8F1;
    --color-accent: #FF7651;
    --color-accent-pale: #F1E9D2;
    --color-gray-4: #ced4da;
    --font-sans: "Noto Sans JP", sans-serif;
    --font-serif: "Noto Serif JP", serif;
    --font-display: "Libre Baskerville", serif;
    --unit-scale: 1.25;
    --unit-base: 2.8vw;
    --unit-size-00: calc(var(--unit-size-0) / var(--unit-scale));
    --unit-size-000: calc(var(--unit-size-00) / var(--unit-scale));
    --unit-size-0000: calc(var(--unit-size-000) / var(--unit-scale));
    --unit-size-0: var(--unit-base);
    --unit-size-1: calc(var(--unit-size-0) * var(--unit-scale));
    --unit-size-2: calc(var(--unit-size-1) * var(--unit-scale));
    --unit-size-3: calc(var(--unit-size-2) * var(--unit-scale));
    --unit-size-4: calc(var(--unit-size-3) * var(--unit-scale));
    --unit-size-5: calc(var(--unit-size-4) * var(--unit-scale));
    --unit-size-6: calc(var(--unit-size-5) * var(--unit-scale));
    --unit-size-7: calc(var(--unit-size-6) * var(--unit-scale));
    --unit-size-8: calc(var(--unit-size-7) * var(--unit-scale));
    --unit-size-9: calc(var(--unit-size-8) * var(--unit-scale));
    --unit-size-10: calc(var(--unit-size-9) * var(--unit-scale));
    --unit-size-11: calc(var(--unit-size-10) * var(--unit-scale));
    --unit-size-12: calc(var(--unit-size-11) * var(--unit-scale));
    --unit-size-13: calc(var(--unit-size-12) * var(--unit-scale));
    --unit-size-14: calc(var(--unit-size-13) * var(--unit-scale));
    --unit-size-15: calc(var(--unit-size-14) * var(--unit-scale));
    --unit-size-16: calc(var(--unit-size-15) * var(--unit-scale));
    --unit-size-17: calc(var(--unit-size-16) * var(--unit-scale));
    --unit-size-18: calc(var(--unit-size-17) * var(--unit-scale));
    --unit-size-19: calc(var(--unit-size-18) * var(--unit-scale));
    --unit-size-20: calc(var(--unit-size-19) * var(--unit-scale));
    --border-primary: 2px solid var(--color-text);
    --icon-chevron-right2: url(data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A%23030507%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M9.5%2C10L5.5%2C6.3C5.2%2C6%2C5.2%2C5.5%2C5.5%2C5.2c0.3-0.3%2C0.8-0.3%2C1.1-0.1c0%2C0%2C0%2C0%2C0%2C0l4.5%2C4.2c0.3%2C0.3%2C0.3%2C0.8%2C0%2C1.1c0%2C0%2C0%2C0%2C0%2C0l-4.5%2C4.2c-0.3%2C0.3-0.8%2C0.3-1.1%2C0c-0.3-0.6-0.1-1.2%2C0.5-1.5%22%2F%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M13.7%2C10L9.8%2C6.3C9.5%2C6%2C9.5%2C5.5%2C9.7%2C5.2c0.3-0.3%2C0.8-0.3%2C1.1-0.1c0%2C0%2C0%2C0%2C0%2C0l4.5%2C4.2c0.3%2C0.3%2C0.3%2C0.8%2C0%2C1.1c0%2C0%2C0%2C0%2C0%2C0l-4.5%2C4.2c-0.3%2C0.3-0.8%2C0.3-1.1%2C0c-0.3-0.6-0.1-1.2%2C0.5-1.5%22%2F%3E%3C%2Fsvg%3E);
    --icon-chevron-right: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22%23030507%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M7.21%2014.77a.75.75%200%2001.02-1.06L11.168%2010%207.23%206.29a.75.75%200%20111.04-1.08l4.5%204.25a.75.75%200%20010%201.08l-4.5%204.25a.75.75%200%2001-1.06-.02z%22%20clip-rule%3D%22evenodd%22%20%2F%3E%3C%2Fsvg%3E);
    --icon-chevron-right-white: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22%23ffffff%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M7.21%2014.77a.75.75%200%2001.02-1.06L11.168%2010%207.23%206.29a.75.75%200%20111.04-1.08l4.5%204.25a.75.75%200%20010%201.08l-4.5%204.25a.75.75%200%2001-1.06-.02z%22%20clip-rule%3D%22evenodd%22%20%2F%3E%3C%2Fsvg%3E);
    --icon-plus: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2222%22%20height%3D%2222%22%20fill%3D%22none%22%20viewBox%3D%220%200%2022%2022%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M12.3%201.5a1.3%201.3%200%200%200-2.7%200v8.1h-8a1.3%201.3%200%201%200%200%202.8h8v8a1.3%201.3%200%201%200%202.8%200v-8h8a1.3%201.3%200%200%200%200-2.8h-8v-8Z%22%2F%3E%3C%2Fsvg%3E);
    --icon-minus: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2222%22%20height%3D%224%22%20fill%3D%22none%22%20viewBox%3D%220%200%2022%204%22%3E%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22%20d%3D%22M.2%202A1.4%201.4%200%200%201%201.5.7h19a1.3%201.3%200%201%201%200%202.7h-19A1.4%201.4%200%200%201%20.2%202Z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E)
}

@media (min-width: 1024px) {
    :root {
        --unit-base: 1vw
    }
}

.font-sans {
    font-family: var(--font-sans) !important
}

.font-serif {
    font-family: var(--font-serif) !important
}

.font-display {
    font-family: var(--font-display) !important
}

.font-400 {
    font-weight: var(--font-weight-4) !important
}

.font-700 {
    font-weight: var(--font-weight-7) !important
}

.type-0 {
    font-size: var(--unit-size-0) !important
}

.type-1 {
    font-size: var(--unit-size-1) !important
}

.type-2 {
    font-size: var(--unit-size-2) !important
}

.type-3 {
    font-size: var(--unit-size-3) !important
}

.type-4 {
    font-size: var(--unit-size-4) !important
}

.type-5 {
    font-size: var(--unit-size-5) !important
}

.type-6 {
    font-size: var(--unit-size-6) !important
}

.type-7 {
    font-size: var(--unit-size-7) !important
}

.type-8 {
    font-size: var(--unit-size-8) !important
}

.type-9 {
    font-size: var(--unit-size-9) !important
}

.type-10 {
    font-size: var(--unit-size-10) !important
}

.type-11 {
    font-size: var(--unit-size-11) !important
}

.type-12 {
    font-size: var(--unit-size-12) !important
}

.type-13 {
    font-size: var(--unit-size-13) !important
}

.type-14 {
    font-size: var(--unit-size-14) !important
}

.type-15 {
    font-size: var(--unit-size-15) !important
}

.type-16 {
    font-size: var(--unit-size-16) !important
}

.type-17 {
    font-size: var(--unit-size-17) !important
}

.type-18 {
    font-size: var(--unit-size-18) !important
}

.type-19 {
    font-size: var(--unit-size-19) !important
}

.type-20 {
    font-size: var(--unit-size) !important
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0
}

.title {
    font-weight: var(--font-weight-7);
    line-height: var(--font-lineheight-1)
}


hr {
    border-color: var(--color-text);
    border-width: 2px 0 0 0;
    height: 0;
    margin: 0;
    margin: var(--unit-size-1) 0
}

@media (min-width: 1024px) {
    .section {
        border-color: var(--color-text);
        border-style: solid;
        border-width: 2px 2px 0 2px;
        padding: var(--unit-size-3)
    }
}

html.sr .reveal {
    visibility: hidden
}

@keyframes shake-x {

    0%,
    to {
        transform: translate(0)
    }

    20% {
        transform: translate(-5%)
    }

    40% {
        transform: translate(5%)
    }

    60% {
        transform: translate(-5%)
    }

    80% {
        transform: translate(5%)
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --shadow-color: 220 40% 2%;
        --shadow-strength: 25%
    }
}