@charset "utf-8";

/* CSS Document */

:root {
    /* font-family */
    --font-family-primary: "Noto Sans JP", sans-serif;

    /* font-size */
    --font-base: 1.4rem;
    --font-sm: 1.2rem;
    --font-md: 1.6rem;
    --font-lg: 2rem;
    --font-xl: 2.4rem;

    /* color */
    --color-primary: #0BA239;
    --color-hover: #e5f3e9;
    --color-bg: #F4F2EC;
    --color-text-base: #333333;
    --color-text-sub: #787D87;

    /* gradation */
    --gradation: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(249, 248, 245, 1) 60%), #fff;

    /* box-shadow */
    --box-shadow-default: 0 0.2rem 0.8rem #E5E0CE60;
    --box-shadow-strong: 0 0.2rem 0.8rem #584d0040;

    /* radius */
    --radius-sm: .6rem;
    --radius-md: 1.2rem;
    --radius-lg: 2rem;
    --radius-full: 9999px;

    /* border */
    --border-default: 0.1rem solid #E2E3E4;

    /* transition */
    --trans-bounce: 0.5s cubic-bezier(0.3, 2, 0.6, 1);
}

/* =======================================================

Base Styles

======================================================= */
html {
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--font-family-primary);
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.75;
    color: var(--color-text-base);
    background-color: #fff;
    overflow-x: hidden;
}

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

.l-wrapper {
    overflow-x: hidden !important;
}

/* GSAP */
.fade-in,
.fade,
.fade-in-st,
.mv-copy,
.mv-blob img,
.slider--mv {
    opacity: 0;
}

/* スクリーンリーダー専用 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* =======================================================

Utility Classes

======================================================= */
/* ==============================================
layout
============================================== */
/* ---------------------
section wrap
--------------------- */
.section {
    padding: 5.6rem 0;
}

.section--sub-page {
    padding: 3.6rem 0 5.6rem;
}

.inner {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.section-block:not(:first-child) {
    margin-top: 6.4rem;
}

.section-block>*+* {
    margin-top: 4.8rem;
}

.content-stack>*+* {
    margin-top: 2.4rem;
}


/* ---------------------
media grid
--------------------- */
.media-grid {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.media-grid__media,
.media-grid__text {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.media-grid__media img {
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: var(--font-md);
    border: 0.8rem solid var(--color-bg);
}

/* キャプションあり */
.media-grid__media figure {
    display: block;
    position: relative;
}


/* ---------------------
link grid
--------------------- */
.link-grid {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

/* 地区社会福祉協議会・地区福祉のまちづくり計画 */
.link-grid:has(.link-grid__inner) {
    gap: 4rem;
}

.link-grid__inner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0 1.6rem;
}

/* 老人福祉センター（アクセス、館内案内図）*/
.link-grid:has(.link-grid-stack) {
    gap: 2rem;
}

.link-grid-stack {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    padding: 1.6rem;
    border-radius: var(--radius-sm);
    border: var(--border-default);
}

.link-grid-stack img {
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: var(--font-md);
    border: 0.8rem solid var(--color-bg);
}



/* ---------------------
photo grid
--------------------- */
.photo-grid {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.photo-grid img {
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: var(--font-md);
    border: 0.6rem solid var(--color-bg);
}

/* キャプションあり */
.photo-grid figure {
    display: block;
    position: relative;
}

.photo-caption {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0.8rem 2rem;
    background-color: var(--color-primary);
    border-top-left-radius: var(--radius-md);
    font-size: var(--font-base);
    color: #fff;
}

/* アスペクト比維持不要 */
.media--free {
    aspect-ratio: auto !important;
    object-fit: initial !important;
    border-radius: 0 !important;
    border: none !important;
}


/* ---------------------
diagram grid
--------------------- */
.diagram-grid {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.diagram-grid img {
    width: 100%;
    border-radius: var(--radius-sm);
}

/* ---------------------
list
--------------------- */
.list>*+* {
    margin-top: 0.8rem;
}

.list__item {
    position: relative;
    padding-left: 1.4rem;
}

.list__item::before {
    position: absolute;
    content: '';
    top: 1rem;
    left: 0;
    width: 0.6rem;
    height: 0.6rem;
    background-color: var(--color-primary);
    border-radius: var(--radius-full);
}

/* 番号つき */
.list--decimal {
    display: inline-block;
    list-style: decimal;
}

.list--decimal .list__item {
    padding-left: 0;
    margin-left: 1.4em;
}

.list--decimal .list__item::before {
    display: none;
}

/* 横並び */
.list--flex {
    display: flex !important;
    flex-wrap: wrap;
    gap: 1.2rem;
}

.list--flex>*+* {
    margin-top: 0;
}

/* 背景あり */
.list--bg {
    display: inline-block;
    width: 100%;
    padding: 2rem;
    border-radius: var(--radius-sm);
    background-color: var(--color-bg);
}

/* フロー用 */
.list--step {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
    list-style: decimal;
    list-style-position: inside;
}

.list--step li {
    position: relative;
    padding: 2rem;
    background-color: var(--color-bg);
    border-radius: var(--radius-sm);
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--color-primary);
}

.list--step li:not(:last-child)::before {
    position: absolute;
    content: '';
    bottom: -3.6rem;
    left: 0;
    right: 0;
    margin: auto;
    width: 4rem;
    height: 4rem;
    background: url(../images/arrow.svg) no-repeat center/cover;
    transform: rotate(90deg);
}

.list--step li span {
    display: block;
    font-size: var(--font-base);
    font-weight: 500;
    color: var(--color-text-base);
}


/* 矢印なし */
.list--step.no-arrow {
    gap: 0.8rem;
}

.list--step.no-arrow li::before {
    visibility: hidden;
}


/* ---------------------
table
--------------------- */
.table {
    width: 100%;
    outline: 0.3rem solid var(--color-primary);
}

.table th {
    padding: 1.2rem;
}

.table td {
    padding: 1.2rem;
    outline: var(--border-default);
}

.table th.th--lv1 {
    background-color: var(--color-primary);
    outline: 0.1rem solid #fff;
    color: #fff;
    font-weight: 500;
}

.table th.th--lv2 {
    background-color: var(--color-hover);
    outline: 0.1rem solid #fff;
    font-weight: 500;
}

.td--center {
    text-align: center;
}

.td--right {
    text-align: right;
}

/* 横スクロール版 */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 0.3rem solid var(--color-primary);
}

.table-scroll__inner {
    min-width: 600px;
    width: 100%;
    border-collapse: collapse;
}


/* ---------------------
details
--------------------- */
.details summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 2rem;
    padding-left: 0;
    cursor: pointer;
    border-bottom: var(--border-default);
}

.details summary::-webkit-details-marker {
    display: none;
}

.heading-summary {
    position: relative;
    padding-left: 1.6rem;
    font-size: var(--font-md);
    font-weight: 600;
    transition: 0.3s;
}

.heading-summary::before {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 0.6rem;
    height: 100%;
    border-radius: var(--radius-full);
    background-color: var(--color-primary);
    transition: 0.3s;
}

summary:hover .heading-summary {
    padding-left: 2rem;
    color: var(--color-primary);
}

/* +と- */
.details summary::before,
.details summary::after {
    width: 0.3rem;
    height: 1.6rem;
    border-radius: var(--radius-full);
    background-color: var(--color-primary);
    content: '';
}

.details summary::before {
    position: absolute;
    right: 2rem;
    rotate: 90deg;
}

.details summary::after {
    transition: rotate .3s;
}

.details[open] summary {
    border-bottom: none;
}

.details[open] summary::after {
    rotate: 90deg;
}


/* ==============================================
icon
============================================== */
.icon {
    stroke: var(--color-primary);
    stroke-width: 0.3rem;
}

.icon-white {
    stroke: #fff;
}

.icon-sm {
    width: 2rem;
    height: 2rem;
}

.icon-md {
    width: 2.4rem;
    height: 2.4rem;
}

.icon-lg {
    width: 5.6rem;
    height: 5.6rem;
    stroke-width: 0.2rem;
}


/* ==============================================
legend
============================================== */
.legend--city-plan {
    display: inline-block;
    padding: 0rem 0.8rem;
    border-radius: var(--radius-sm);
    background-color: var(--color-hover);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary);
}



/* ==============================================
button / link
============================================== */
/* リンク先が無い場合hover無し */
[tabindex="-1"] {
    pointer-events: none;
}

/* ---------------------
Button ounded
--------------------- */
.btn {
    position: relative;
    display: inline-block;
    padding: 1rem 4.8rem 1rem 1.6rem;
    font-size: var(--font-sm);
    font-weight: 600;
    border: var(--border-default);
    border-radius: var(--radius-full);
    background-color: #fff;
    transition: var(--trans-bounce);
}

.btn::after {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    right: 1rem;
    margin: auto;
    width: 2.4rem;
    height: 2.4rem;
    background: var(--color-primary) url(../images/arrow_white.svg) no-repeat center/cover;
    border-radius: var(--radius-full);
    transition: var(--trans-bounce);
}

.btn:hover {
    transform: scale(0.98);
}

.btn:hover::after {
    transform: scale(1.1);
}

/* SNSリンク */
.btn--insta::after {
    background: url(../images/sns_insta.png) no-repeat center/cover;
}

.btn--fb::after {
    background: url(../images/sns_fb.png) no-repeat center/cover;
}

.btn--line::after {
    background: url(../images/sns_line.png) no-repeat center/cover;
}

/* 外部リンク */
.btn.external-link::after {
    background: var(--color-hover) url(../images/icons/icon-external.svg) no-repeat center/65%;
}

/* PDF */
.btn.icon-pdf::after {
    background: var(--color-hover) url(../images/icons/icon-pdf.svg) no-repeat center/65%;
}



/* ---------------------
Button Square
--------------------- */
.btn--square {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 2rem;
    padding: 1.2rem 4.8rem 1.2rem 1.2rem;
    font-size: var(--font-md);
    font-weight: 600;
    border: var(--border-default);
    border-radius: var(--radius-sm);
    background-color: #fff;
    transition: var(--trans-bounce);
}

.btn--square:has(.icon) {
    padding: 1.2rem 4.8rem 1.2rem 4.8rem;
}

.btn--square .icon {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 1.2rem;
    margin: auto;
}

.btn--square::after {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    right: 1.2rem;
    margin: auto;
    width: 2rem;
    height: 2rem;
    background: var(--color-primary) url(../images/arrow_white.svg) no-repeat center/cover;
    border-radius: var(--radius-full);
    transition: var(--trans-bounce);
}

/* 矢印下 */
.btn--square.arrow-bottom::after,
.btn--square.arrow-bottom:hover::after {
    transform: rotate(90deg);
}

/* ダウンロード */
.btn--square.icon-download::after {
    width: 3.2rem;
    height: 3.2rem;
    background: var(--color-hover) url(../images/icons/icon-download.svg) no-repeat center/60%;
    border-radius: var(--radius-sm);
}

/* PDF */
.btn--square.icon-pdf::after {
    width: 3.2rem;
    height: 3.2rem;
    background: var(--color-hover) url(../images/icons/icon-pdf.svg) no-repeat center/70%;
    border-radius: var(--radius-sm);
}

/* 外部リンク */
.btn--square.external-link::after {
    width: 3.2rem;
    height: 3.2rem;
    background: var(--color-hover) url(../images/icons/icon-external.svg) no-repeat center/70%;
    border-radius: var(--radius-sm);
}

.btn--square:hover {
    transform: scale(0.98);
}

.btn--square:hover::after {
    transform: scale(1.1);
}


/* ---------------------
Button Square S
--------------------- */
.btn--square-sm {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 2.4rem 0.8em 0.8rem;
    border-radius: var(--radius-sm);
    border: 0.1rem solid var(--color-primary);
    background-color: #fff;
    color: var(--color-primary) !important;
    font-size: var(--font-sm);
    font-weight: 500;
    transition: 0.2s;
}

.btn--square-sm::after {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    right: 0.6rem;
    margin: auto;
    width: 2rem;
    height: 2rem;
    background: url(../images/arrow.svg) no-repeat center/cover;
    transition: 0.3s;
}

.btn--square-sm:hover {
    background-color: var(--color-hover);
}

/* 背景グリーン */
.btn--square-sm.bg--green {
    background-color: var(--color-primary);
    color: #fff !important;
}

.btn--square-sm.bg--green::after {
    background: url(../images/arrow_white.svg) no-repeat center/cover;
}

.btn--square-sm.bg--green:hover {
    background-color: var(--color-primary);
    opacity: 0.8;
}


/* ---------------------
Button Square L
--------------------- */
.btn--square-lg {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.4rem 1.6rem 4rem;
    border-radius: var(--radius-md);
    background-color: var(--color-primary);
    text-align: center;
    font-size: var(--font-sm);
    font-weight: 600;
    line-height: 1.3;
    color: #fff !important;
    transition: var(--trans-bounce);
}

.btn--square-lg::after {
    position: absolute;
    content: '';
    bottom: 1.2rem;
    right: 1.2rem;
    width: 2.4rem;
    height: 2.4rem;
    background: #fff url(../images/arrow.svg) no-repeat center/cover;
    border-radius: var(--radius-full);
    transition: var(--trans-bounce);
}

.btn--square-lg:hover {
    transform: scale(0.98);
}

.btn--square-lg:hover::after {
    transform: scale(1.2);
}

.btn--square-lg .icon {
    margin-bottom: 1.2rem;
}

/* 背景ベージュ */
.btn--square-lg.bg--beige {
    background-color: var(--color-bg);
    color: var(--color-text-base) !important;
    padding: 2.4rem 1.6rem 4rem;
}

.btn--square-lg.bg--beige::after {
    background: var(--color-primary) url(../images/arrow_white.svg) no-repeat center/cover;
}

/* 外部リンク */
.btn--square-lg.external-link::after {
    background: transparent url(../images/icons/icon-external.svg) no-repeat center/cover;
}


/* ---------------------
Button Square thumbnail
--------------------- */
.btn--square-tmb {
    display: block;
    font-size: var(--font-base);
    font-weight: 600;
    border: var(--border-default);
    border-radius: var(--radius-sm);
    background-color: #fff;
    transition: var(--trans-bounce);
    overflow-y: hidden;
}

.tmb {
    display: block;
    width: 100%;
    padding: 1.6rem;
    aspect-ratio: 3/2 !important;
    background-color: var(--color-bg);
}

.tmb img {
    height: 100%;
    margin: 0 auto;
    box-shadow: var(--box-shadow-strong);
}

.tmb-title {
    display: block;
    position: relative;
    padding: 1.2rem 4.8rem 1.2rem 1.2rem;
}

.tmb-title::after {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    right: 1.2rem;
    margin: auto;
    width: 2rem;
    height: 2rem;
    background: var(--color-primary) url(../images/arrow_white.svg) no-repeat center/cover;
    border-radius: var(--radius-full);
    transition: var(--trans-bounce);
}

/* ダウンロード */
.tmb-title.icon-download::after {
    width: 3.2rem;
    height: 3.2rem;
    background: var(--color-hover) url(../images/icons/icon-download.svg) no-repeat center/60%;
    border-radius: var(--radius-sm);
}

/* PDF */
.tmb-title.icon-pdf::after {
    width: 3.2rem;
    height: 3.2rem;
    background: var(--color-hover) url(../images/icons/icon-pdf.svg) no-repeat center/70%;
    border-radius: var(--radius-sm);
}

.btn--square-tmb:hover {
    transform: scale(0.98);
}


/* ---------------------
Button List Type
--------------------- */
.btn--list-type {
    position: relative;
    display: flex;
    align-items: center;
    padding: 1.2rem 3.2rem 1.2rem 1.2rem;
    gap: 0.4rem;
    font-size: var(--font-sm);
    font-weight: 600;
    border-bottom: var(--border-default);
    transition: 0.3s;
}

.btn--list-type::after {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 2.4rem;
    height: 2.4rem;
    background: url(../images/arrow.svg) no-repeat center/cover;
}

.btn--list-type::before {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 0.8rem;
    height: 0.8rem;
    background-color: var(--color-primary);
    border-radius: var(--radius-full);
    transform: scale(0);
    transition: 0.3s;
}

.btn--list-type:hover {
    padding-left: 1.6rem;
    color: var(--color-primary) !important;
}

.btn--list-type:hover::before {
    transform: scale(1);
}

/* 矢印下向き */
.btn--list-type.arrow--down::after {
    transform: rotate(90deg);
}

/* 外部リンク */
.btn--list-type.external-link::after {
    background: url(../images/icons/icon-external.svg) no-repeat center/cover;
}

/* PDF */
.btn--list-type.icon-pdf::after {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--radius-sm);
    background: var(--color-hover) url(../images/icons/icon-pdf.svg) no-repeat center/90%;
}

/* ダウンロード */
.btn--list-type.icon-download::after {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--radius-sm);
    background: var(--color-hover) url(../images/icons/icon-download.svg) no-repeat center/65%;
}

/* 矢印なし */
.btn--list-type.arrow-no::after {
    visibility: hidden;
}


/* ---------------------
Button under line
--------------------- */
.btn--under-line {
    position: relative;
    color: var(--color-primary) !important;
    text-decoration: underline !important;
}

.btn--under-line:hover {
    opacity: 0.7;
}

/* 外部リンク */
.btn--under-line.external-link {
    padding-right: 1.6rem;
}

.btn--under-line.external-link::after {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 1.6rem;
    height: 1.6rem;
    background: url(../images/icons/icon-external.svg) no-repeat center/cover;
}


/* ---------------------
tel link
--------------------- */
.tel-link {
    text-decoration: underline !important;
    cursor: pointer !important;
    color: var(--color-text-base) !important;
    background-color: transparent !important;
}

.fax-link {
    pointer-events: none !important;
    color: inherit !important;
    text-decoration: none !important;
    background-color: transparent !important;
}


/* ==============================================
heading
============================================== */
/* ---------------------
heading top page
--------------------- */
.top-heading {
    font-size: var(--font-xl);
    font-weight: 600;
}

.top-heading--en {
    position: relative;
    display: block;
    padding-left: 2rem;
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--color-primary);
}

.top-heading--en::before {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 1.5rem;
    height: 1rem;
    background: url(../images/hd_blob.svg) no-repeat center/cover;
}


/* ---------------------
heading XL
--------------------- */
.heading-xl {
    position: relative;
    padding: 3.2rem 0.8rem 2rem;
    border-top: .4rem solid var(--color-bg);
    color: var(--color-primary);
    font-size: var(--font-xl);
    font-weight: 600;
}

.heading-xl::before {
    position: absolute;
    content: '';
    top: -0.4rem;
    left: 0;
    margin: auto;
    width: 8rem;
    height: 0.4rem;
    border-radius: var(--radius-full);
    background-color: var(--color-primary);
}

/* ---------------------
heading L
--------------------- */
.heading-lg {
    position: relative;
    padding: 0.8rem;
    padding-left: 2.4rem;
    background-color: var(--color-bg);
    border-radius: 0.4rem;
    font-size: var(--font-md);
    font-weight: 600;
}

.heading-lg::before {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 1.2rem;
    margin: auto;
    width: 0.4rem;
    height: 50%;
    border-radius: var(--radius-full);
    background-color: var(--color-primary);
}

/* ---------------------
heading M
--------------------- */
.heading-md {
    position: relative;
    padding-bottom: 0.4rem;
    padding-left: 0.4rem;
    border-bottom: 0.2rem solid #E2E3E4;
    font-size: var(--font-md);
    font-weight: 600;
}

.heading-md::before {
    position: absolute;
    content: '';
    bottom: -0.2rem;
    left: 0;
    margin: auto;
    width: 5.6rem;
    height: 0.3rem;
    border-radius: var(--radius-full);
    background-color: var(--color-primary);
}

/* ---------------------
heading S
--------------------- */
.heading-sm {
    position: relative;
    display: inline-block;
    padding-left: 2.2rem;
    color: var(--color-primary);
    font-weight: 600;
}

.heading-sm::before {
    position: absolute;
    content: '';
    top: 0.6rem;
    left: 0;
    margin: auto;
    width: 1.6rem;
    height: 1.2rem;
    background: url(../images/hd_blob.svg) no-repeat center/cover;
}


/* ==============================================
text
============================================== */
/* ※ */
.kome {
    display: block;
    position: relative;
    padding-left: 1.2em;
}

.kome::before {
    position: absolute;
    content: '※';
    top: 0;
    left: 0;
}

/* 赤字 */
.text-attention {
    color: #ff0000;
}


/* ==============================================
scrollbar
============================================== */
.scrollbar {
    overflow-y: auto;
    scrollbar-width: thin;
    -ms-overflow-style: auto;
    scrollbar-color: var(--color-primary) transparent;
}

.scrollbar::-webkit-scrollbar {
    width: 1.2rem;
    height: 1.2rem;
}

.scrollbar::-webkit-scrollbar-track {
    background: transparent;
    border: 0.2rem solid var(--color-primary);
    border-radius: var(--radius-full);
}

.scrollbar::-webkit-scrollbar-thumb {
    background: rgba(11, 162, 57, 0.18);
    border-radius: var(--radius-full);
}

.scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(11, 162, 57, 0.35);
}


/* ==============================================
Google Map
============================================== */
.map {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: var(--radius-sm);
}

.map--access {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: var(--radius-sm);
}


/* ==============================================
YouTube
============================================== */
.youtube {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--radius-sm);
}


/* =======================================================

header / footer

======================================================= */
/* ==============================================
header
============================================== */
#header {
    position: relative;
    display: block;
    width: 100%;
    z-index: 999;
}

.header-logo,
.hamburger-logo {
    position: absolute;
    top: 1.6rem;
    left: 1.6rem;
    display: block;
    width: clamp(12rem, 60vw, 28rem);
}

#header__nav {
    position: fixed;
    z-index: 99;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    visibility: hidden;
    transition: 0.3s;
    opacity: 0;
}

#header__nav.panelactive {
    position: fixed;
    z-index: 99;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    visibility: visible;
    background-color: var(--color-bg);
    transition: 0.3s;
    opacity: 1;
}

#header__nav-container {
    display: none;
    position: fixed;
    z-index: 99;
    width: 100%;
    height: 100vh;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

#header__nav-container::-webkit-scrollbar {
    display: none;
}

#header__nav.panelactive #header__nav-container {
    display: block;
    padding: 9.6rem 0 4.8rem;
}

div.header__nav-content {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    width: 80%;
    margin: 0 auto;
    padding-top: 3.2rem;
}

#header__nav.panelactive div.header__nav-content {
    animation-name: gnaviAnime;
    animation-duration: 1s;
    animation-delay: .2s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes gnaviAnime {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* --------------
hamburger
-------------- */
.header__hamburger {
    position: fixed;
    top: 0.8rem;
    right: 0.8rem;
    width: 8rem;
    height: 6.8rem;
    background: url(../images/mv_blob-g.svg) no-repeat center/cover;
    cursor: pointer;
    transition: var(--trans-bounce);
    z-index: 999;
}

.header__hamburger:hover {
    transform: scale(1.05);
}

.header__hamburger.active {
    transform: scale(0.8);
}

.header__hamburger.active:hover {
    transform: scale(0.85);
}

.header__hamburger::before,
.header__hamburger::after {
    position: absolute;
    font-size: var(--font-sm);
    top: 4rem;
    right: 0;
    left: 0;
    margin: auto;
    width: 3.6rem;
    height: 1.2rem;
    line-height: 0.6rem;
    color: #fff;
    transition: 0.3s;
}

.header__hamburger::before {
    content: 'menu';
    opacity: 1;
}

.header__hamburger::after {
    content: 'close';
    opacity: 0;
}

.header__hamburger.active::before {
    opacity: 0;
}

.header__hamburger.active::after {
    opacity: 1;
}

.header__hamburger span {
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 2.8rem;
    height: 0.2rem;
    border-radius: var(--radius-full);
    background-color: #fff;
    transition: 0.3s;
}

.header__hamburger span:nth-of-type(1) {
    top: 1.8rem;
}

.header__hamburger span:nth-of-type(2) {
    top: 2.8rem;
}

.header__hamburger.active span:nth-of-type(1) {
    transform: translateY(0.5rem) rotate(-24deg);
}

.header__hamburger.active span:nth-of-type(2) {
    transform: translateY(-0.5rem) rotate(24deg);
}

/* ---------------------
sub nav
--------------------- */
.header__nav--sub {
    padding-top: 2.4rem;
}

.header__nav-list--sub>*+* {
    margin-top: 0.8rem;
}

/* SNS icon */
.header__nav--sub .sns-links--min {
    width: 100%;
    justify-content: flex-end;
    margin-top: 1.6rem;
}

.header__nav--sub .sns-links--min a {
    width: 3.2rem;
}

/* Google検索 */
.search {
    width: 100% !important;
    position: absolute;
    top: 0;
    right: 0;
}

.gsc-search-box {
    max-width: none !important;
    width: 100% !important;
    margin: 0px !important;
}

.gsc-control-cse {
    padding: 0 !important;
    border: none !important;
    background-color: var(--color-bg) !important;
}

.gsc-input-box {
    border-radius: var(--radius-full) !important;
}

.gsib_b {
    padding: 0 !important;
}

.gsib_a {
    padding: 4px 10px 4px 48px !important;
}

/* Google検索　旧バージョン */
/* .search {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
}

.gsc-search-box {
    margin: 0px !important;
}

.gsc-control-cse {
    margin: 0 !important;
    padding: 0 !important;
    border: var(--border-default) !important;
    border-radius: var(--radius-full) !important;
}

.gsc-input-box {
    border: none !important;
    border-radius: var(--radius-full) !important;
}

.gsib_a {
    padding-left: 1.6rem !important;
}

.gsc-search-button-v2 {
    margin: 0 0.5rem 0 0 !important;
    padding: 0.8rem !important;
    background-color: var(--color-primary) !important;
    border-radius: var(--radius-full) !important;
    border: none !important;
    cursor: pointer;
}

.gsc-search-button-v2 svg {
    fill: #fff !important;
    width: 1.2rem;
    height: 1.2rem;
} */


/* ---------------------
main nav
--------------------- */
.header__nav-list {
    display: flex;
    flex-direction: column;
    margin-top: 2.4rem;
}

/* Button */
.btn--header-nav {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    width: 100%;
    padding: 1.6rem 4rem 1.6rem 0.8rem;
    border-bottom: var(--border-default);
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--color-text-base);
    transition: 0.3s;
}

.btn--header-nav::after {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    right: 0.8rem;
    margin: auto;
    width: 1.8rem;
    height: 1.8rem;
    background: var(--color-primary) url(../images/arrow_white.svg) no-repeat center/cover;
    border-radius: var(--radius-full);
    transform: rotate(90deg);
    transition: transform 0.3s;
}

.header__nav-item.is-open button.btn--header-nav::after {
    transform: rotate(270deg);
}

.btn--header-nav:hover {
    background-color: var(--color-bg);
}


/* ---------------------
mega menu
--------------------- */
.mega-menu {
    position: relative;
    width: 100%;
}

.mega-menu {
    position: static;
    width: 100%;
    max-height: 0;
    overflow: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
}

.header__nav-item.is-open .mega-menu {
    max-height: 100rem;
}

.mega-menu__inner {
    padding: 1.6rem;
    background-color: #fff;
    border-radius: 0 0 0.8rem 0.8rem;
}

.mega-menu__header {
    padding-bottom: 1.6rem;
    border-bottom: var(--border-default);
}

.mega-menu__header h2 {
    display: none;
}

/* Button */
.mega-menu__header-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.8rem 4rem 0.8rem 1.2rem;
    border-radius: var(--radius-sm);
    border: var(--border-default);
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--color-text-base);
    transition: 0.3s;
}

.mega-menu__header-btn::after {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    right: 0.8rem;
    margin: auto;
    width: 1.6rem;
    height: 1.6rem;
    background: var(--color-primary) url(../images/arrow_white.svg) no-repeat center/cover;
    border-radius: var(--radius-full);
}

.mega-menu__header-btn:hover {
    background-color: var(--color-hover);
}

.mega-menu__container {
    max-height: 20rem;
}


/* ==============================================
footer
============================================== */
#footer {
    position: relative;
    margin-top: -2rem;
    padding: 6.4rem 0 3.2rem;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-top: var(--border-default);
    text-align: center;
    background-color: #fff;
    z-index: 15;
}

.footer-logo {
    display: block;
    width: 70%;
    margin: 0 auto 1.6rem;
}

.footer__nav-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.8rem 2.4rem;
    margin-top: 3.2rem;
    color: var(--color-text-sub);
    font-size: var(--font-base);
    text-decoration: underline;
}

.footer__nav-list a:hover {
    opacity: 0.7;
}

.footer__nav--r {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.sns-links--min {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 3.6rem;
}

.sns-links--min a {
    width: 3.2rem;
    transition: var(--trans-bounce);
}

.sns-links--min a:hover {
    transform: scale(1.1);
}

.copyright {
    text-align: center;
    font-size: 1rem;
    color: var(--color-text-sub);
}


/* =======================================================

Top Page

======================================================= */
/* ==============================================
mv
============================================== */
#mv {
    position: relative;
    aspect-ratio: 2/3;
    margin-bottom: 6.4rem;
    background: var(--gradation);
    z-index: 1;
}

/* スライダー全体の楕円マスク */
.slider--mv {
    position: absolute;
    top: 32vw;
    right: -20vw;
    width: 120%;
    aspect-ratio: 4 / 3;
    clip-path: ellipse(50% 50% at center);
    transform: rotate(-30deg);
    overflow: hidden;
}

.slider--mv .swiper-slide img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    transform: rotate(30deg) scale(1.1);
}


.mv-copy img {
    position: absolute;
    top: 22vw;
    left: 6vw;
    width: 36vw;
    z-index: 10;
}

/* blob */
.mv-blob--p {
    position: absolute;
    bottom: 5vw;
    left: 3vw;
    width: 32vw;
}

.mv-blob--g {
    position: absolute;
    bottom: -3vw;
    left: 34vw;
    width: 14vw;
}

/* illust */
.mv-illust--f {
    position: absolute;
    bottom: 0;
    right: 20vw;
    width: 20vw;
    z-index: 10;
}

.mv-illust--m {
    position: absolute;
    bottom: 0;
    right: 3vw;
    width: 19vw;
    z-index: 10;
}


/* ==============================================
pickup
============================================== */
#pickup {
    position: relative;
    border-radius: var(--radius-lg);
    background-color: #eeeadc;
}

.pickup__inner>*+* {
    margin-top: 3.2rem;
}

/* ---------------------
main
--------------------- */
.pickup__main-content {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

/* 最初の1つだけ全幅にする */
.pickup__main-content> :nth-child(1) {
    grid-column: 1 / -1;
    width: 100%;
}

.pickup__container>*+*,
.pickup__items>*+* {
    margin-top: 1.2rem;
}

.pickup__items {
    text-align: center;
    padding: 3.2rem;
    border-radius: var(--radius-md);
    background-color: #ffffffd7;
    box-shadow: var(--box-shadow-default);
}

.pickup__items h3 {
    font-size: var(--font-lg);
    font-weight: 600;
}

.pickup__items h3 span {
    display: block;
    text-align: center;
    font-size: var(--font-md);
}

.pickup__items p,
.pickup__items a {
    width: 100%;
    text-align: left;
}

.pickup__items p {
    font-size: var(--font-base);
}

/* ---------------------
sub
--------------------- */
.pickup__sub-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
    grid-template-rows: auto;
    gap: 1.2rem;
}

/* ==============================================
news
============================================== */
#news {
    margin-top: -2rem;
    padding: 8.6rem 0 0;
    background: var(--gradation);
}

.news__inner {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.news__container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.news-list {
    width: 100%;
}

.news-list__items {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem 1.2rem;
    width: 100%;
    padding: 1.6rem;
    border-bottom: var(--border-default);
    transition: 0.3s;
}

.news-list__items::before {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 1rem;
    height: 1rem;
    background-color: var(--color-primary);
    border-radius: var(--radius-full);
    transform: scale(0);
    transition: 0.3s;
}

.news-list__items:hover {
    padding-left: 2rem;
    color: var(--color-primary);
}

.news-list__items:hover::before {
    transform: scale(1);
}

.news__date {
    font-size: var(--font-sm);
    color: var(--color-text-sub);
}

.news__category {
    display: inline-block;
    min-width: 8rem;
    padding: 0.1rem 0.8rem;
    border: 0.1rem solid var(--color-primary);
    border-radius: var(--radius-full);
    text-align: center;
    font-size: var(--font-sm);
    color: var(--color-primary);
    transition: 0.3s;
}

.news__title {
    display: block;
    width: 100%;
    font-size: var(--font-base);
}

.news__container .btn {
    margin-top: 2rem;
    margin-left: auto;
    margin-right: 0;
}


/* ==============================================
support-links
============================================== */
.support-links__inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 1.2rem;
}

/* 最初の1つだけ全幅にする */
.support-links__inner> :nth-child(1) {
    grid-column: 1 / -1;
    width: 100%;
}


/* ==============================================
sns
============================================== */
#sns {
    position: relative;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background-color: var(--color-bg);
    overflow: hidden;
}

.sns__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.sns__container {
    position: relative;
    width: 90%;
    margin: 0 auto;
    padding: 4.8rem 1.6rem;
    background-color: #fff;
    border-radius: var(--radius-md);
    text-align: center;
    z-index: 10;
}

.sns__container>*+* {
    margin-top: 2.4rem;
}

.sns__container .top-heading--en {
    width: 5rem;
    text-align: center;
    margin: 0 auto;
}

.sns__container h3 {
    font-size: var(--font-lg);
    font-weight: 600;
}

.sns-illust--m {
    position: absolute;
    bottom: -1.6rem;
    left: -3.2rem;
    width: 10rem;
}

.sns-illust--f {
    position: absolute;
    bottom: -1.6rem;
    right: -3.2rem;
    width: 10rem;
}

.sns-links {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.6rem;
    width: 100%;
}

.sns-links .btn {
    width: 70%;
    margin: 0 auto;
    text-align: left;
}

.bg-blob--p {
    position: absolute;
    bottom: 64vw;
    left: -20vw;
    width: clamp(48rem, 70vw, 64rem);
    z-index: 1;
}

.bg-blob--g {
    position: absolute;
    top: -10vw;
    right: -10vw;
    width: clamp(48rem, 70vw, 64rem);
    z-index: 1;
}

/* loop slider */
div.loop-slider {
    width: 100%;
    height: 20rem;
    margin-top: 4.8rem;
    background: url("../images/sns_loop-img.png") repeat-x 0 0 / auto 100%;
    animation: slide_img 200s linear infinite;
    z-index: 5;
}

@keyframes slide_img {
    100% {
        background-position: -10000px 0;
    }
}


/* =======================================================

Sub Page

======================================================= */
/* ==============================================
page header
============================================== */
#page-header {
    position: relative;
    width: 100%;
    padding: 8rem 0 7.2rem;
    background-color: var(--color-bg);
    overflow: hidden;
    z-index: 1;
}

#page-header::before {
    position: absolute;
    content: '';
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2rem;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background-color: #fff;
    z-index: 10;
}


/* ---------------------
breadcrumb
--------------------- */
.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: var(--font-sm);
}

.breadcrumb__item {
    display: flex;
    align-items: center;
}

.breadcrumb__item:not(:last-child)::after {
    content: "-";
    margin: 0 0.8rem;
    color: var(--color-text-sub);
}

.breadcrumb__link {
    color: var(--color-primary) !important;
    text-decoration: underline !important;
}

.breadcrumb__link:hover {
    opacity: 0.7;
}

.breadcrumb__current {
    text-decoration: none;
    color: var(--color-text-sub) !important;
}

/* ---------------------
title
--------------------- */
.page-header__title {
    display: inline-block;
    margin-top: 3.2rem;
    font-size: var(--font-lg);
    font-weight: 600;
}

/* 宇老連ロゴ */
.page-header__title.guide-ooicho-utsunomiya {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.guide-ooicho-utsunomiya-logo {
    width: 7.2rem;
}


/* ---------------------
background blob
--------------------- */
.sub-hd-blob--p {
    position: absolute;
    top: -6vw;
    right: 20vw;
    width: 24rem;
    z-index: 1;
}

.sub-hd-blob--g {
    position: absolute;
    bottom: -8vw;
    right: -10vw;
    width: 20rem;
    z-index: 1;
}

.page-header__inner {
    position: relative;
    z-index: 10;
}


/* ==============================================
category index
============================================== */
.cat-index__inner {
    display: flex;
    flex-direction: column;
    gap: 4.8rem;
}

/* ---------------------
nav
--------------------- */
.cat-index__nav {
    display: none;
}

/* ---------------------
container
--------------------- */
.cat-index__container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
}

.cat-index__content {
    width: 100%;
    padding: 2.4rem;
    border-radius: var(--radius-sm);
    background-color: var(--color-bg);
    text-align: center;
}

.cat-index__header h2,
.cat-index__links {
    margin-top: 1.6rem;
}

.cat-index__header h2 {
    font-size: var(--font-lg);
    font-weight: 600;
}

.cat-index__content.wide {
    grid-column: 1 / -1;
    text-align: left;
}

.cat-index__links ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}


/* ==============================================
modal
============================================== */
.modal {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

.modal__content {
    position: relative;
    width: 90%;
    margin: 6rem auto;
    padding: 0.4rem 0.4rem 8rem 0.4rem;
    background-color: var(--color-hover);
    border-radius: var(--radius-md);
    transform: scale(0.95);
    transition: transform 0.3s ease;
    z-index: 1;
}

.modal.active .modal__content {
    transform: scale(1);
}

.modal__close {
    position: absolute;
    top: -1.2rem;
    right: -1.2rem;
    border: none;
    cursor: pointer;
    background: none;
    width: 3.2rem;
    transition: var(--trans-bounce);
    z-index: 2;
}

.modal__close img {
    border: none;
    aspect-ratio: 1/1;
}

.modal__footer {
    width: 100%;
    padding: 2rem 0;
    z-index: 2;
}

.modal__footer-close {
    display: block;
    margin: 0 auto;
    padding: 0.8rem 2.4rem;
    border-radius: var(--radius-full);
    background-color: var(--color-primary);
    color: #fff;
    font-size: var(--font-body);
    font-family: var(--font-family-primary);
    font-weight: 600;
    transition: var(--trans-bounce);
    flex-shrink: 0;
    cursor: pointer;
}

.modal__close:hover,
.modal__footer-close:hover {
    transform: scale(0.9);
}

.modal__body {
    width: 100%;
    height: 100%;
    padding: 1.6rem;
    background: #fff;
    border-radius: var(--radius-sm);
    overflow-y: auto;
}

.modal__body .photo-grid {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}


/* ==============================================
slider
============================================== */
.slider--sub-page {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* メインスライダー */
.slider-main,
.slider-main--thumbs-none {
    width: 100%;
    margin-bottom: 1.2rem;
    border-radius: var(--radius-sm);
    overflow-x: hidden;
}

.slider-main .swiper-slide,
.slider-main--thumbs-none .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg);
    border-radius: var(--radius-sm);
}

.slider-main .swiper-slide img,
.slider-main--thumbs-none .swiper-slide img {
    height: 100%;
}

/* サムネイルスライダー */
.swiper-thumbs {
    width: 100%;
    overflow: hidden;
}

.swiper-thumbs .swiper-slide {
    opacity: 0.4;
    cursor: pointer;
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: opacity 0.3s;
}

.swiper-thumbs .swiper-slide-thumb-active {
    opacity: 1;
    border: 0.3rem solid var(--color-primary);
}

.swiper-thumbs .swiper-slide:hover {
    opacity: 0.7;
}

/* ==============================================
news
============================================== */
/* --------------
category
-------------- */
.category {
    padding: 2rem;
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
}

.category__list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
}

.category__list li a {
    display: inline-block;
    min-width: 8rem;
    padding: 0.1rem 0.8rem;
    background-color: #fff;
    border: 0.1rem solid var(--color-primary);
    border-radius: var(--radius-full);
    text-align: center;
    font-size: var(--font-sm);
    color: var(--color-primary);
    transition: 0.3s;
}

.category__list li a:hover {
    background-color: var(--color-hover);
}

.category__current {
    background-color: var(--color-primary) !important;
    color: #fff !important;
}

.category__current:hover {
    background-color: var(--color-primary) !important;
}


/* --------------
pagination
-------------- */
div.archive-pagination {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

div.nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    font-size: 1.4rem;
}

div.archive-pagination a {
    display: inline-block;
    border-radius: var(--radius-full);
    padding: 0.4rem 1.2rem;
    transition: 0.3s;
    border: var(--border-default);
}

div.archive-pagination a:hover {
    background: var(--color-primary);
    color: #fff;
}

.screen-reader-text {
    display: none;
}


/* ==============================================
news detail
============================================== */
.news__content-hd {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.8rem;
    padding-bottom: 1.6rem;
    border-bottom: var(--border-default);
}

.news__content-hd .news__title {
    font-size: var(--font-base);
    font-weight: 600;
}

.news__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.4rem;
}

/* お知らせ本文 */
.news__content-inner {
    width: 100%;
    padding-bottom: 2.4rem;
    border-bottom: var(--border-default);
    font-size: var(--font-base);
}

.news__content-inner a {
    color: var(--color-primary) !important;
    text-decoration: underline !important;
    font-weight: 700;
}

.news__content-inner a :hover {
    opacity: 0.5;
}

.news__content-inner img {
    height: auto;
}

/* cms用 */
div.gallery img {
    border: none !important;
    width: 100% !important;
    height: auto;
}

dl.gallery-item {
    width: 100% !important;
}

dd.gallery-caption {
    display: block !important;
    width: 100%;
}

div.wp-caption {
    width: 100% !important;
    margin: 0 auto;
    text-align: center;
}

div.wp-caption img {
    width: 100% !important;
    height: auto;
}

img.alignright {
    display: block;
    margin: 0 0 0 auto !important;
}

img.alignleft {
    display: block;
    margin: 0 auto 0 0 !important;
}

img.aligncenter {
    display: block;
    margin: 0 auto !important;
}

div.alignright {
    display: block;
    margin: 0 0 0 auto !important;
}

div.alignleft {
    display: block;
    margin: 0 auto 0 0 !important;
}

div.aligncenter {
    display: block;
    margin: 0 auto !important;
}


/* ==============================================
inquiry
============================================== */
.inquiry-block {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    width: 100%;
    margin: 0 auto;
    padding: 2rem;
    background-color: var(--color-bg);
    border-radius: var(--radius-md);
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

/* --------------
ラベル・必須
-------------- */
.form-label {
    color: var(--color-primary);
    font-weight: 600;
}

.form-required {
    margin-right: 1.2rem;
    padding: 0.2rem 0.8rem;
    background-color: var(--color-primary);
    border-radius: var(--radius-full);
    font-size: var(--font-sm);
    color: #fff;
}

/* --------------
input / select / textarea
-------------- */
.form-control {
    width: 100%;
    padding: 0.8rem;
    border-radius: var(--radius-sm);
    border: 0.2rem solid #E2E3E4;
    font-size: var(--font-base);
    font-family: var(--font-family-primary);
}

textarea.form-control {
    height: 20rem;
}

/* --------------
入力内容確認
-------------- */
.form-value {
    padding-bottom: 1.6rem;
    border-bottom: 0.2rem solid #fff;
}

/* --------------
error
-------------- */
.error-disp {
    font-size: var(--font-sm);
    color: #ca2800;
    font-weight: 600;
}

/* --------------
privacy-check
-------------- */
label.privacy-check {
    display: block;
    width: 100%;
    border: 0.2rem solid #E2E3E4;
    padding: 2.4rem 1.6rem;
    border-radius: var(--radius-sm);
    background-color: #fff;
    text-align: center;
    transition: .3s;
    cursor: pointer;
}

label.privacy-check:hover {
    border: 0.3rem solid var(--color-primary);
}

label.privacy-check span.error-disp {
    display: block;
    margin: 0.8rem auto 0;
    text-align: center;
}


/* --------------
btn--inquiry
-------------- */
input.btn--inquiry,
a.btn--inquiry {
    display: block;
    width: 100%;
    padding: 2.4rem 1.6rem;
    border-radius: var(--radius-sm);
    background-color: var(--color-primary);
    border: none;
    color: #fff;
    font-size: var(--font-md);
    font-family: var(--font-family-primary);
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: var(--trans-bounce);
}

input.btn--inquiry:hover,
a.btn--inquiry:hover {
    transform: scale(0.98);
}


/* 戻る */
.btn--inquiry-back {
    display: block;
    width: 12rem;
    margin: 1.2rem auto 0;
    padding: 0.8rem;
    background-color: var(--color-text-sub);
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: var(--font-base);
    color: #fff !important;
    cursor: pointer;
}

.btn--inquiry-back:hover {
    opacity: 0.7;
}

/* お問い合わせ内容ヘルプ */
.btn--help {
    position: relative;
    display: inline-block;
    margin-top: 1.2rem;
    padding-left: 2rem;
    font-size: 1.2rem;
    color: var(--color-text-sub) !important;
    text-decoration: underline !important;
    font-weight: 500;
}

.btn--help::before {
    position: absolute;
    content: '?';
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: var(--radius-full);
    background-color: var(--color-text-sub);
    font-size: 1rem;
    color: #fff;
    line-height: 1.6rem;
    text-align: center;
}

.btn--help:hover {
    opacity: 0.7;
}