@charset "utf-8";

/*
Theme Name: カネコ商会 八戸
Theme URI: NA
Author: NA
Author URI: NA
Description: NA
Version: 2025.0.0
*/

/* grecaptcha-badge */

.grecaptcha-badge { visibility: hidden; }

/* reset */

* {
    margin: 0;
    padding: 0;
}

.size-auto,
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
    max-width: 100%;
    height: auto;
}

address {
    font-style: normal;
}

h1, h2, h3, h4, h5, h6
{
    font-family: "Noto Sans JP", serif;
    font-optical-sizing: auto;
    font-weight: 900;
}

.visibility-hidden {
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
	overflow: hidden;
	position: absolute !important;
}

a img {
    -webkit-user-select: none;
    user-select: none;
}

@media (pointer: fine) {
    a[href]:not(.button, :has(img, svg)):hover,
    label:not(:has(img, svg)):hover,
    summary:not(:has(img, svg)):hover {
        text-shadow: 0 0 0.2em #ff0c;
    }

    @media not (prefers-reduced-motion: reduce) {
        .button,
        a[href]:has(img, svg),
        label:has(img, svg),
        summary:has(img, svg) {
            transition: filter 0.3s;
        }
    }

    input.button:not(:disabled):hover,
    .button[href]:hover,
    a[href]:has(img, svg):hover,
    label:has(img, svg):hover,
    summary:has(img, svg):hover {
        filter: drop-shadow(0 0 0.4em #ff0c);
    }
}

:root {
    --gothic-font-family: "Yu Gothic", YuGothic, "Hiragino Sans", "MS PGothic", sans-serif;
    --mincho-font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "MS PMincho", serif;
    --image-icon-new-window: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.86 15.86"><path d="M2.97,12.88h12.88V0H2.97v12.88ZM14.62,11.65H4.21V1.24h10.41v10.41Z"/><polygon points="1.24 14.62 1.24 9.17 1.24 4.21 1.24 2.97 0 2.97 0 15.86 12.88 15.86 12.88 14.62 11.65 14.62 1.24 14.62"/><polygon points="7.21 9.69 10.86 6.04 10.86 8.67 12.1 8.67 12.1 3.92 7.36 3.92 7.36 5.16 9.98 5.16 6.33 8.81 7.21 9.69"/></svg>');
    --image-icon-next: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8.8 8.8"><polygon points="2.6 8.8 1.8 8 5.4 4.4 1.8 .8 2.6 0 7.1 4.4 2.6 8.8"/></svg>');
    --image-icon-prev: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 8.8 8.8"><polygon points="1.8 4.4 6.3 0 7.1 .8 3.5 4.4 7.1 8 6.3 8.8 1.8 4.4"/></svg>');
    --image-icon-file: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M40.83,0H6v64h52V17.17L40.83,0ZM42,6.83l9.17,9.17h-9.17V6.83ZM54,60H10V4h28v16h16v40Z"/></svg>');
    --image-logo: url(assets/images/common/logo.svg);
}

@media not (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: smooth;
    }
}

.emergency {
    color: #ff5571;
}

body {
    min-width: 320px;
    margin: 0;
    font-family: var(--gothic-font-family);
    font-weight: 500;
    font-size: max(12px, 1dvw);
    font-feature-settings: "palt";
    line-height: 1.6;
    overflow-y: scroll;
}

/* duplex */

.duplex {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
}
.duplex__foreground {
    grid-column: 1;
    grid-row: 1;
    z-index: 0;
}
.duplex__background {
    grid-column: 1;
    grid-row: 1;
    z-index: -1;
}

/* honeycomb */

.honeycomb {
    --cell-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    list-style: none;
    width: fit-content;
    height: fit-content;
    margin-inline: auto;
    display: grid;
    padding-left: calc(var(--cell-width) * 0.25);
}
.honeycomb__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--cell-width);
    aspect-ratio: 200 / 173;
    clip-path: var(--cell-path);
    margin-left: calc(var(--cell-width) * -0.25);
}
.honeycomb__cell--odd-x {
    margin-top: calc(var(--cell-width) * (173 / 200) * -0.5);
    margin-bottom: calc(var(--cell-width) * (173 / 200) * -0.5);
}
.honeycomb__figure {
    aspect-ratio: 200 / 173;
    clip-path: var(--cell-path);
}
.honeycomb__image {
    display: block;
    aspect-ratio: 200 / 173;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* layout */

.page {
    min-height: 100dvh;
    background-color: #f8f8fc;
    background-image: url(assets/images/common/bg-header.webp), url(assets/images/common/bg-footer.webp);
    background-position: center top, center bottom;
    background-repeat: no-repeat no-repeat, no-repeat no-repeat;
    background-size: 100em 18.9375em, 100em 34.75em;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 6.25em 0 1fr 21.875em;
    grid-template-areas:
        "header"
        "menu"
        "content"
        "footer";
}

.page__header {
    grid-area: header;
}

.page__menu {
    grid-area: menu;
}

.page__content {
    grid-area: content;
    margin-block: 2em;
}

.page__footer {
    grid-area: footer;
}

/* button */

.button {
    background: #3336;
    display: flex;
    height: 3.2em;
    text-decoration: none;
    color: #fff6;
    align-items: center;
    justify-content: center;
    border-radius: 0.4em;
    padding: 0.2em 3em;
    position: relative;
    font-size: max(12px, 1em);
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-wrap: balance;
    cursor: not-allowed;
    border: none;
}
.button:disabled {
    background: #3336;
    color: #fff6;
}
input.button:not(:disabled),
.button[href] {
    cursor: pointer;
    color: #fff;
    background: #333;
    box-shadow: 0 0 0.2em #0003;
}
@media screen and (width < 768px) {
    .button {
        font-size: max(12px, 2.4dvw);
    }
}

.button-cover {
    position: relative;
    color: #ccc;
    display: flex;
    align-items: center;
}
.button-cover .button {
    width: 100%;
}
.button-cover:has(:disabled) {
    color: #fff6;
}

.button-cover:has(.button)::after,
.button::after {
    width: 1em;
    height: 1em;
    position: absolute;
    right: 1em;
    flex-shrink: 0;
}

.button[target="_blank"]:not(.button--prev)::after {
    content: '';
    -webkit-mask-image: var(--image-icon-new-window);
    mask-image: var(--image-icon-new-window);
    background: currentColor;
}

.button-cover:has(.button--next)::after,
.button--next::after,
.button:not([target="_blank"]):not(.button--prev)::after {
    content: '';
    -webkit-mask-image: var(--image-icon-next);
    mask-image: var(--image-icon-next);
    background: currentColor;
}

.button-cover:has(.button--prev)::before,
.button--prev::before {
    width: 1em;
    height: 1em;
    position: absolute;
    left: 1em;
    flex-shrink: 0;
    content: '';
    -webkit-mask-image: var(--image-icon-prev);
    mask-image: var(--image-icon-prev);
    background: currentColor;
    z-index: 1;
}

body.single-post .page-section__content--info-single a[href$=".pdf"]::after,
.button--file::after {
    content: '';
    -webkit-mask-image: var(--image-icon-file) !important;
    mask-image: var(--image-icon-file) !important;
}

.button--large {
    min-height: 4.8em;
    font-size: 1.2em;
    padding-inline: 6em;
}
.button--large::before {
    width: 2em;
    height: 2em;
    position: absolute;
    left: 2em;
}
@media screen and (width < 768px) {
    .button--large {
        font-size: max(12px, 3dvw);
    }
}

/* text anchor */

.text-anchor {
    background: #fff;
    color: #333;
    border-radius: 0.3em;
    padding-block: 0.3em;
    padding-inline: 0.3em;
    text-decoration: none;
    line-height: 1;
    box-shadow: 0 0 0.2em #0006;
}
.text-anchor::after {
    vertical-align: text-top;
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background: currentColor;
    flex-shrink: 0;
    margin-left: 0.1em;
}
.text-anchor:not([target="_blank"])::after {
    -webkit-mask-image: var(--image-icon-next);
    mask-image: var(--image-icon-next);
}
.text-anchor[target="_blank"]::after {
    -webkit-mask-image: var(--image-icon-new-window);
    mask-image: var(--image-icon-new-window);
}
@media (pointer: fine) {
    .text-anchor:hover {
        text-decoration: underline;
    }
}

/* list view */

.list-view {
    list-style: none;
}
.list-view__item {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "label";
}
.list-view__item:has(> .list-view__badge) {
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "label badge";
}
.list-view__item:has(> .list-view__detail) {
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "label  badge"
        "detail detail";
}
.list-view__label {
    grid-area: label;
}
.list-view__badge {
    grid-area: badge;
}
.list-view__detail {
    grid-area: detail;
}
ul.list-view__detail {
    list-style-type: '・';
    padding-left: 1em;
}

/* details */

@supports selector(details::details-content) {
    @media not (prefers-reduced-motion: reduce) {
        details::details-content {
            height: 0;
            overflow: hidden;
            transition: height 0.5s, content-visibility 0.5s allow-discrete;
        }
        details[open]::details-content {
            height: calc-size(auto, size);
        }
    }
}

/* notes */

ul.notes {
    list-style-type: '※';
    padding-left: 1em;
}

/* parentheses numbered list */

ol.parentheses {
    counter-reset: number;
    list-style: none;
    display: grid;
    grid-template-columns: max-content auto;
}
ol.parentheses li {
    display: contents;
}
ol.parentheses li::before {
    counter-increment: number;
    content: "("counter(number)")";
}

/* tab */

.tab {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1em 0.5em;
    max-width: 100%;
}
.tab__item {
    max-width: 100%;
}
.tab__link {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    line-height: 1;
    padding: 1em;
    text-decoration: none;
    border-radius: 0.4em;
    background: #333;
    color: #fff;
    border: solid 1px #333;
    cursor: default;
}
.tab__link[href] {
    background: #fff;
    color: #333;
    cursor: pointer;
    box-shadow: 0 0 0.2em #0003;
}

/* billboard */

.billboard {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}
@supports(word-break: auto-phrase) {
    .billboard {
        word-break: auto-phrase;
    }
}
@supports not (word-break: auto-phrase) {
    .billboard {
        word-break: break-all;
        text-wrap: balance;
    }
}

/* slide in */

@media not (prefers-reduced-motion: reduce) {
    .slide-in {
        opacity: 0;
        transform: translateY(2em);
    }
    .slide-in.slide-in--init {
        transition: filter 0.3s, opacity 0.7s, transform 0.7s;
    }
    .slide-in.slide-in--exec {
        opacity: 1;
        transform: translateY(0);
    }
}

/* smart photo */

.js-smartPhoto {
    display: block;
    position: relative;
}
.js-smartPhoto::after {
    content: '🔍';
    font-size: clamp(12px, 3em, 36px);
    position: absolute;
    right: 0;
    bottom: 0;
}

html:has(.smartphoto) {
    scrollbar-gutter: stable;
}
html:has(#menu-state:checked) {
    scrollbar-gutter: auto;
}

.smartphoto-count {
    display: none;
}
.smartphoto-img,
.smartphoto-img-clone {
    background-color: #fff;
}

/* header */

.page-header {
    position: relative;
    display: flex;
    align-items: center;
}
.page-header__link--home {
    position: absolute;
    left: 1em;
    top: 1.2em;
    display: block;
}
.page-header__logo {
    display: block;
    width: 16em;
    height: auto;
    filter: drop-shadow(0 0 0.2em #0003);
}

.page-header__knob {
    display: block;
    width: 3em;
    height: auto;
    margin-inline: auto;
    fill: #fff;
    cursor: pointer;
    filter: drop-shadow(0 0 0.2em #0003);
}
.page-header__knob svg {
    display: block;
}

@media screen and (width < 768px) {
    .page-header__link--home {
        position: initial;
        margin-inline: auto;
    }
    .page-header__knob {
        position: absolute;
        right: 1em;
        top: 2em;
    }
}

/* menu */

.page-menu {
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    overscroll-behavior: none;
}

.page-menu__modal {
    min-height: calc(100% + 1px);
    background-color: #f8f8fc;
    background-image: url(assets/images/common/bg-header.webp), url(assets/images/common/bg-footer.webp);
    background-position: center top, center bottom -16em;
    background-repeat: no-repeat no-repeat, no-repeat no-repeat;
    background-size: 100em 18.9375em, 100em 34.75em;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 6.25em 1fr calc(21.875em - 16em);
    grid-template-areas:
        "header"
        "content"
        "footer";
}

.page-menu__modal-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto 1fr;
    align-items: center;
    grid-template-areas:
        "header header"
        "brand  list"
        "footer footer";
    gap: 3em 2em;
    padding: 4em 1em;
}

.page-menu__content-header {
    grid-area: header;
}

.page-menu__brand {
    grid-area: brand;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
}
.page-menu__logo {
    justify-self: center;
    background: #000;
    filter: invert(100%);
    width: 24em;
    height: auto;
    -webkit-mask-image: var(--image-logo);
    mask-image: var(--image-logo);
}
.page-menu__contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "location location"
        "tel      fax";
    column-gap: 1em;
}
.page-menu__location {
    grid-area: location;
}
.page-menu__tel {
    grid-area: tel;
    justify-self: self-end;
}
.page-menu__fax {
    grid-area: fax;
    justify-self: self-start;
}
.page-menu__contact dt,
.page-menu__contact dd {
    display: inline;
}

.page-menu__list {
    grid-area: list;
    list-style: none;
    columns: 2;
    gap: 4em;
    width: fit-content;
}
@media screen and (width < 1280px) {
    .page-menu__list {
        columns: 1;
    }
}
.page-menu__item {
    padding-block: 1em;
}
.page-menu__anchor {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    width: fit-content;
    overflow: hidden;
}
.page-menu__eyebrow {
    font-family: "Koulen", serif;
    font-size: min(2em, 40px);
    color: #333;
    line-height: 1.2;
    display: flex;
    align-items: center;
}
.page-menu__eyebrow--lowercase {
    display: inline-block;
    transform: scaleY(50%) translateY(0.3em);
}
.page-menu__anchor .page-menu__eyebrow::after {
    content: '';
    background: #3339;
    display: block;
    width: 0.6em;
    height: 0.6em;
    margin-left:0.1em;
    flex-shrink: 0;
}
.page-menu__anchor:not([target="_blank"]) .page-menu__eyebrow::after {
    -webkit-mask-image: var(--image-icon-next);
    mask-image: var(--image-icon-next);
}
.page-menu__anchor[target="_blank"] .page-menu__eyebrow::after {
    -webkit-mask-image: var(--image-icon-new-window);
    mask-image: var(--image-icon-new-window);
}
.page-menu__label {
    display: block;
    font-family: "Noto Sans JP";
    font-size: min(1em, 20px);
    font-weight: 900;
    line-height: 1;
    color: #0c8d5a;
}

@media screen and (width < 768px) {
    .page-menu__modal-content {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto auto;
        grid-template-areas:
            "header"
            "list"
            "brand";
        justify-items: center;
    }
    .page-menu__item {
        width: fit-content;
        margin-inline: auto;
        text-align: center;
    }
    .page-menu__eyebrow {
        margin-left: 0.7em;
    }
}

/* メニュー駆動 */

.page-menu {
    display: none;
}
#menu-state:checked ~ .page-menu {
    display: block;
}
html:has(#menu-state:checked) {
    overflow-y: hidden;
}
body:has(#menu-state:checked) {
    overflow-y: hidden;
}

#menu-state:not(:checked):focus-visible ~ .page-header .page-header__knob {
    outline: Highlight auto 2px;
    outline: -webkit-focus-ring-color auto 5px;
}
#menu-state:checked:focus-visible ~ .page-menu .page-header .page-header__knob {
    outline: Highlight auto 2px;
    outline: -webkit-focus-ring-color auto 5px;
}

#menu-state:checked ~ .page__header a,
#menu-state:checked ~ .page__content a,
#menu-state:checked ~ .page__content area,
#menu-state:checked ~ .page__content button,
#menu-state:checked ~ .page__content iframe,
#menu-state:checked ~ .page__content input,
#menu-state:checked ~ .page__content object,
#menu-state:checked ~ .page__content select,
#menu-state:checked ~ .page__content textarea,
#menu-state:checked ~ .page__content summary,
#menu-state:checked ~ .page__footer a {
    visibility: hidden;
}

@media not (prefers-reduced-motion: reduce) {
    .page-menu__modal-content {
        opacity: 0;
        transform: translateY(1em);
        transition: opacity 1s, transform 1s;
    }
    #menu-state:checked ~ .page-menu .page-menu__modal-content {
        opacity: 1;
        transform: translateY(0);
    }
    @starting-style {
        #menu-state:checked ~ .page-menu .page-menu__modal-content {
            opacity: 0;
            transform: translateY(1em);
        }
    }
}

/* content */

.page-content__header {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    align-items: center;
    text-align: center;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.page-content__eyebrow {
    font-family: "Koulen", serif;
    font-size: 3em;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.2em;
    margin-right: -0.2em;
}
.page-content__title {
    font-size: 1.2em;
    line-height: 1.2;
    letter-spacing: 0.1em;
    margin-right: -0.1em;
}
.page-content__footer {
    display: flex;
    justify-content: center;
    gap: 1em;
}

.page-section {
    display: flex;
    flex-direction: column;
    gap: 3em;
    scroll-margin-top: 1.5em;
}
.page-section--panel,
.page-section--sheet {
    backdrop-filter: blur(20px);
    padding: 4em;
    box-shadow: 0 0 3em #0001;
}
.page-section--sheet {
    background: #fffc;
}
.page-section__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.page-section__eyebrow {
    font-family: "Koulen", serif;
    font-size: 3em;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.2em;
    margin-right: -0.2em;
}
.page-section__title {
    font-size: 1.6em;
    letter-spacing: 0.2em;
    margin-right: -0.2em;
    white-space: nowrap;
}
.page-section__copy {
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-wrap: balance;
    text-align: center;
}
.page-section__image {
    display: block;
    width: 100%;
    height: auto;
}

.page-section-content__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2em;
}
.page-section-content__title {
    font-size: 1.4em;
    letter-spacing: 0.2em;
    margin-right: -0.2em;
}
.page-section-content__copy {
    text-wrap: balance;
}

@supports(margin-block: 1lh) {
    .page-content__eyebrow,
    .page-content__title,
    .page-section__eyebrow,
    .page-section__title,
    .page-section__copy,
    .page-section-content__eyebrow,
    .page-section-content__title,
    .page-section-content__copy,
    ul.notes > li {
        margin-block: calc((1lh - 1em) / 2 * -1);
    }
}

.page__layout {
    margin-inline: auto;
}
@media screen and (width < 1024px) {
    .page__layout {
        padding-inline: 2em;
    }
}
@media screen and (width < 768px) {
    .page__layout {
        padding-inline: 0;
        width: 90%;
        margin-inline: auto;
    }

    .page-section {
        gap: 5dvw;
    }

    .page-section--panel,
    .page-section--sheet {
        padding: 5dvw;
    }

    .page-section__eyebrow {
        font-size: 8dvw;
    }
    .page-section__title {
        font-size: min(20px, 5dvw);
    }
    .page-section__copy {
        font-size: max(12px, 2dvw);
        word-break: initial;
        overflow-wrap: initial;
        text-wrap: initial;
        text-align: initial;
    }
    .page-section-content__header {
        gap: 4dvw;
    }
    .page-section-content__title {
        font-size: max(12px, 2dvw);
    }
}

/* footer */

.page-footer {
    margin-top: auto;
    height: 21.875em;
    color: #333c;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.page-footer__logo {
    width: 18em;
    height: auto;
    filter: drop-shadow(0 0 0.2em #6663);
}

.page-footer__contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "location location"
        "tel fax";
    column-gap: 1em;
    margin-block: calc((-1em * 1.6 + 1em) / 2);
}
.page-footer__location {
    grid-area: location;
    text-align: center;
}
.page-footer__tel {
    grid-area: tel;
    display: flex;
}
.page-footer__fax {
    grid-area: fax;
    display: flex;
}

.button--niigata {
    background: #00ca97 !important;
    color: #fff !important;
}

.page-footer__copyright {
    margin-block: calc((-1em * 1.6 + 1em) / 2);
}

.page-footer__to-top-button.active {
    display: block;
    opacity: 1;
}
.page-footer__to-top-button {
    background: #0006;
    border: solid 1px #fff9;
    border-radius: 50%;
    position: fixed;
    right: 1em;
    bottom: 3.5em;
    width: 5em;
    height: 5em;
    backdrop-filter: blur(12px);
    display: none;
    opacity: 0;
    cursor: pointer;
}
@media not (prefers-reduced-motion: reduce) {
    .page-footer__to-top-button {
        transition: background-color 0.3s, border-color 0.3s, opacity 1s, display 1s allow-discrete;
    }
}
@media (pointer: fine) {
    .page-footer__to-top-button:hover {
        background: #000;
        border: solid 1px #fff;
    }
}
@starting-style {
    .page-footer__to-top-button.active {
        opacity: 0;
    }
    .page-footer__to-top-button {
        opacity: 1;
    }
}
.icon-to-top__cevron{
    fill: none;
    stroke: #fff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4px;
}

/* background */

.page__background--double-wave {
    background-image: url(assets/images/common/bg-wave-yellow-upper.svg), url(assets/images/common/bg-wave-yellow-lower.svg), url(assets/images/common/bg-wave-blue-upper.svg), url(assets/images/common/bg-wave-blue-lower.svg);
    background-size: 100dvw 25dvw, 100dvw 25dvw, 100dvw 15.625dvw, 100dvw 15.625dvw;
    background-repeat: repeat-x, repeat-x, repeat-x, repeat-x;
    background-position: left 0dvw top calc(var(--bg-wave-yellow-x) - 25dvw), left 0dvw top calc(var(--bg-wave-yellow-x) - 0.1dvw), left 0 top calc(var(--bg-wave-blue-x) - 15.625dvw), left 0 top calc(var(--bg-wave-blue-x) - 0.2dvw);
}
@media not (prefers-reduced-motion: reduce) {
    .page__background--double-wave.animation.animation--running {
        animation: 30s linear infinite bgFacingDouble both;
    }
}
@keyframes bgFacingDouble {
    from {
        background-position-x: 0dvw, 0dvw, 0dvw, 0dvw;
    }
    to {
        background-position-x: 100dvw, -100dvw, 100dvw, -100dvw;
    }
}

.page__background--yellow-wave {
    background-image: url(assets/images/common/bg-wave-yellow-upper.svg), url(assets/images/common/bg-wave-yellow-lower.svg);
    background-size: 100dvw 25dvw, 100dvw 25dvw;
    background-repeat: repeat-x, repeat-x;
    background-position: left 0dvw top calc(var(--bg-wave-yellow-x) - 25dvw), left 0dvw top calc(var(--bg-wave-yellow-x) - 0.1dvw);
}
@media not (prefers-reduced-motion: reduce) {
    .page__background--yellow-wave.animation.animation--running {
        animation: 30s linear infinite bgFacingSingle both;
    }
}

.page__background--blue-wave {
    background-image: url(assets/images/common/bg-wave-blue-upper.svg), url(assets/images/common/bg-wave-blue-lower.svg);
    background-size: 100dvw 15.625dvw, 100dvw 15.625dvw;
    background-repeat: repeat-x, repeat-x;
    background-position: left 0dvw top calc(var(--bg-wave-blue-x) - 15.625dvw), left 0dvw top calc(var(--bg-wave-blue-x) - 0.2dvw);
}
@media not (prefers-reduced-motion: reduce) {
    .page__background--blue-wave.animation.animation--running {
        animation: 30s linear infinite bgFacingSingle both;
    }
}

@keyframes bgFacingSingle {
    from {
        background-position-x: 0dvw, 0dvw;
    }
    to {
        background-position-x: 100dvw, -100dvw;
    }
}

/*** フロントページ ***/

.page-content--front-page {
    margin-block: 6em;
    display: flex;
    flex-direction: column;
    gap: 6em;
}
@media screen and (width < 768px) {
    .page-content--front-page {
        margin-top: 2em;
        margin-bottom: 3em;
    }
}

/* ヒーロー */

.hero {
    font-size: 1dvw;
}

.page__layout--hero {
    width: 100% !important;
    padding-inline: 0 !important;
    display: grid;
    grid-template-columns: 10% 8.6% 31.4% 40% 10%;
    grid-template-rows: 29em 19.6em 10em auto;
}

.hero__slogan {
    grid-column: 2/5;
    grid-row: 1;
    word-break: keep-all;
    overflow-wrap: anywhere;
    font-size: 3.4em;
    letter-spacing: 0.14em;
    width: 9em;
    margin-left: 5em;
    margin-top: 1.4em;
}
.hero__slogan strong {
    color: #0c8d5a;
    font-weight: inherit;
}

.hero__history {
    grid-column: 4;
    grid-row: 2;
    align-self: center;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.hero__history p {
    font-size: max(1.2em, 12px);
    line-height: 1.6;
}

.hero__affection {
    grid-column: 3;
    grid-row: 3;
    word-break: keep-all;
    overflow-wrap: anywhere;
    font-size: 2.4em;
    letter-spacing: 0.1em;
    width: 9em;
    margin-top: 0.4em;
}

.hero__commitment {
    grid-column: 3;
    grid-row: 4;
    word-break: keep-all;
    overflow-wrap: anywhere;
    width: 30em;
    display: flex;
    flex-direction: column;
}
.hero__commitment p {
    font-size: max(1.2em, 12px);
    line-height: 1.6;
}
.hero__commitment .button {
    margin-top: auto;
    max-width: 16em;
}
@media screen and (width < 1280px) {
    .hero__commitment .button {
        margin-top: 0.75em;
    }
}
@media screen and (width < 768px) {
    .hero__commitment .button {
        max-width: 100%;
    }
}

.hero__figure {
    grid-column: 4;
    grid-row: 3/5;
    align-self: self-end;
    aspect-ratio: 4/3;
}
.hero__image {
    display: block;
    aspect-ratio: 4/3;
    width: 100%;
    height: auto;
}

@media screen and (width < 768px) {
    .page__layout--hero {
        grid-template-columns: 10% 34% 46% 10%;
        grid-template-columns: 5% 39% 51% 5%;
        grid-template-rows: 29em 19.6em auto auto auto auto;
    }

    .hero__slogan {
        grid-column: 3;
        grid-row: 2;
        margin: 0;
        width: auto;
        text-align: right;
        align-self: center;
        font-size: 6.2em;
        line-height: 1.4;
    }
    .hero__history {
        grid-column: 2 / 4;
        grid-row: 3;
        text-align: right;
        color: #666;
    }
    .hero__history p {
        font-size: max(12px, 3dvw);
    }
    @supports(paint-order: stroke) {
        .hero__history p {
            -webkit-text-stroke: #f8f8fc 0.2em;
            paint-order: stroke;
        }
    }

    .hero__affection {
        grid-column: 2 / 4;
        grid-row: 5;
        width: auto;
        margin-top: 0.1em;
        font-size: 5em;
    }
    .hero__commitment {
        grid-column: 2 / 4;
        grid-row: 6;
        width: auto;
        color: #666;
    }
    .hero__commitment p {
        font-size: max(12px, 3dvw);
    }
    .hero__figure {
        grid-column: 2 / 4;
        grid-row: 4;
        margin-top: 6em;
    }
    .hero__image {
        border-radius: 4em;
    }
}

.honeycomb--hero {
    --cell-width: 22.6em;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, auto);
}
.honeycomb--hero .honeycomb__figure {
    width: 21.4em;
}
@media not (prefers-reduced-motion: reduce) {
    .honeycomb--hero .honeycomb__image {
        animation: 20s linear infinite cellBlink;
    }
}

.honeycomb--hero .honeycomb__cell:nth-child(1) {
    grid-column: 4;
    grid-row: 1;
}
@media not (prefers-reduced-motion: reduce) {
    .honeycomb--hero .honeycomb__cell:nth-child(1) .honeycomb__figure {
        animation: 10s linear infinite fluctuationColor;
    }
    .honeycomb--hero .honeycomb__cell:nth-child(1) .honeycomb__image {
        animation: 20s linear 10s infinite cellBlink;
    }
}
.honeycomb--hero .honeycomb__cell:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
}
@media not (prefers-reduced-motion: reduce) {
    .honeycomb--hero .honeycomb__cell:nth-child(2) .honeycomb__figure {
        animation: 20s linear infinite fluctuationColor;
    }
    .honeycomb--hero .honeycomb__cell:nth-child(2) .honeycomb__image {
        animation: 22s linear 12s infinite cellBlink;
    }
}
.honeycomb--hero .honeycomb__cell:nth-child(3) {
    grid-column: 3;
    grid-row: 2;
}
.honeycomb--hero .honeycomb__cell:nth-child(3) .honeycomb__figure {
    background: #b2df3f;
}
@media not (prefers-reduced-motion: reduce) {
    .honeycomb--hero .honeycomb__cell:nth-child(3) .honeycomb__figure {
        animation: 30s linear infinite fluctuationColor;
    }
}
.honeycomb--hero .honeycomb__cell:nth-child(4) {
    grid-column: 5;
    grid-row: 2;
}
@media not (prefers-reduced-motion: reduce) {
    .honeycomb--hero .honeycomb__cell:nth-child(4) .honeycomb__figure {
        animation: 40s linear infinite fluctuationColor;
    }
    .honeycomb--hero .honeycomb__cell:nth-child(4) .honeycomb__image {
        animation: 24s linear 14s infinite cellBlink;
    }
}
.honeycomb--hero .honeycomb__cell:nth-child(5) {
    grid-column: 2;
    grid-row: 3;
}
@media not (prefers-reduced-motion: reduce) {
    .honeycomb--hero .honeycomb__cell:nth-child(5) .honeycomb__figure {
        animation: 50s linear infinite fluctuationColor;
    }
    .honeycomb--hero .honeycomb__cell:nth-child(5) .honeycomb__image {
        animation: 26s linear 16s infinite cellBlink;
    }
}
.honeycomb--hero .honeycomb__cell:nth-child(6) {
    grid-column: 1;
    grid-row: 4;
}
@media not (prefers-reduced-motion: reduce) {
    .honeycomb--hero .honeycomb__cell:nth-child(6) .honeycomb__figure {
        animation: 60s linear infinite fluctuationColor;
    }
    .honeycomb--hero .honeycomb__cell:nth-child(6) .honeycomb__image {
        animation: 28s linear 18s infinite cellBlink;
    }
}
.honeycomb--hero .honeycomb__cell:nth-child(7) {
    grid-column: 2;
    grid-row: 5;
}
.honeycomb--hero .honeycomb__cell:nth-child(7) .honeycomb__figure {
    background: #e2f38B;
}
@media not (prefers-reduced-motion: reduce) {
    .honeycomb--hero .honeycomb__cell:nth-child(7) .honeycomb__figure {
        animation: 70s linear infinite fluctuationColor;
    }
}

@keyframes fluctuationColor {
    0% {
        background-color: #b2df3f;
    }
    50% {
        background-color: #e2f3bb;
    }
    100% {
        background-color: #b2df3f;
    }
}

@keyframes cellBlink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    60% {
        opacity: 0;
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* 事業内容について */

.service {
    --bg-wave-yellow-x: 26em;
}

.page__layout--service {
    display: flex;
    flex-direction: column;
    row-gap: 4em;
    max-width: 80em;
    margin-inline: auto;
}

.business-intro {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6em;
    list-style: none;
    font-size: 1dvw;
}
@media screen and (width < 1024px) {
    .business-intro {
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        gap: unset;
    }
    .business-intro__item {
        width: 30%;
    }
}
.business-intro__item {
    display: flex;
    flex-direction: column;
    gap: 2em;
}
.business-intro__figure {
    display: block;
    width: 100%;
}
.business-intro__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1/1;
}
.business-intro__eyebrow {
    font-family: "Koulen", serif;
    font-size: 4em;
    line-height: 1;
    color: #fff;
}
.business-intro__title {
    font-size: 1.6em;
    line-height: 1;
    margin-top: -0.6em;
}
@supports(paint-order: stroke) {
    .business-intro__title {
        -webkit-text-stroke: #e2f38b 0.25em;
        paint-order: stroke;
    }
}
.business-intro__copy {
    font-size: max(12px, 1.1em);
}
.business-intro__footer {
    margin-top: auto;
}

@media screen and (width < 768px) {
    .service {
        --bg-wave-yellow-x: 25vw;
    }
    .page__layout--service {
        row-gap: 2em;
    }
    .business-intro {
        flex-direction: column;
        gap: 8em;
    }
    .business-intro__item {
        width: 100%;
        margin-inline: auto;
    }
    .business-intro__image {
        font-size: max(12px, 1dvw);
        border-radius: 1em;
        aspect-ratio: 4 / 3;
    }
    .business-intro__eyebrow {
        font-size: 13em;
        text-shadow: 0 0 0.1em #0009;
        margin-top: -1.2em;
        margin-left: 0.2em;
    }
    .business-intro__title {
        font-size: max(12px, 3dvw);
        margin-top: 1em;
    }
    @supports(paint-order: stroke) {
        .business-intro__title {
            -webkit-text-stroke: initial;
            paint-order: stroke;
        }
    }
    .business-intro__copy {
        font-size: max(12px, 3dvw);
        color: #666;
    }
    .business-intro__footer {
        font-size: max(12px, 1dvw);
    }
}

/* ガス保安について */

.safety {
    --bg-wave-blue-x: 15em;
}

.page__layout--safety {
    padding-top: 4em;
    display: flex;
    flex-direction: column;
    max-width: 60em;
    margin-inline: auto;
    gap: 4em;
}
.safety__content {
    font-size: 1.2em;
    text-align: center;
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-wrap: balance;
}
.safety__footer {
    width: fit-content;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 1.2em;
}
.safety__guidance {
    font-size: 1em;
    text-align: center;
    line-height: 1;
}
.safety__phone-number {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.8em;
    line-height: 1;
}

.icon--phone {
    height: 1em;
    fill:#333;
}

@media screen and (width < 768px) {
    .safety {
        --bg-wave-blue-x: 29vw;
    }
    .page__layout--safety {
        padding-top: 0;
        margin-inline: auto;
        gap: 2em;
    }
    .safety__content {
        font-size: max(12px, 3dvw);
        color: #666;
    }
    @supports(paint-order: stroke) {
        .safety__content {
            -webkit-text-stroke: #f8f8fc 0.4em;
            paint-order: stroke;
        }
    }
    .safety__footer {
        gap: 2em;
    }
    .safety__guidance {
        font-size: 4.6dvw;
    }
    .safety__phone-number {
        font-size: 8dvw;
    }
}

/* お知らせ */

.page__layout--info {
    width: 100%;
    max-width: 60em;
    margin-inline: auto;
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-template-rows: max-content 1fr;
    grid-template-areas:
        "header content"
        "footer content";
    gap: 1em 3em;
    padding-bottom: calc(6em + 20dvw);
    align-items: top;
}
@media screen and (width < 768px) {
    .page__layout--info {
        width: 90%;
        margin-inline: auto;
        grid-template-columns: auto;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "header"
            "content"
            "footer";
        gap: 2em 0;
    }
}

.info__header {
    grid-area: header;
}
.info__content {
    grid-area: content;
}
.info__footer {
    grid-area: footer;
    align-self: self-end;
}

.button--more {
    background: #00bc88 !important;
    color: #fff !important;
}

.headline {
    list-style: none;
    display: flex;
    flex-direction: column;
    border-top: solid 1px #ddd;
    border-bottom: solid 1px #ddd;
    height: fit-content;
    align-self: center;
}
.headline--notfound {
    align-items: center;
    justify-content: center;
    height: 5em;
    color: #999;
}
.headline__item:has(+ .headline__item) {
    border-bottom: solid 1px #ddd;
}
.headline__item--notfound {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3em;
    color: #999;
}
.headline__anchor {
    width: 100%;
    line-height: 1.2;
    color: #333;
    text-decoration: none;
    display: grid;
    grid-template-columns: max-content 1fr 1em;
    grid-template-areas:
        "timestamp  title      icon"
        "categories categories icon";
    gap: 0.2em 0.5em;
    padding-block: 0.5em;
}
.headline__anchor::after {
    grid-area: icon;
    content: '';
    display: block;
    width: 1em;
    height: 1em;
    background: currentColor;
    align-self: center;
}
.headline__anchor:not([target="_blank"])::after {
    -webkit-mask-image: var(--image-icon-next);
    mask-image: var(--image-icon-next);
}
.headline__anchor[target="_blank"]::after {
    -webkit-mask-image: var(--image-icon-new-window);
    mask-image: var(--image-icon-new-window);
}
.headline__date {
    grid-area: timestamp;
}
.headline__date--sticky {
    color: red;
}
.headline__title {
    grid-area: title;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.headline__categories {
    grid-area: categories;
    font-size: 0.8em;
    line-height: 1.2;
    color: #fff;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}
.headline__category {
    max-width: 100%;
    padding-inline: 1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (pointer: fine) {
    .headline__anchor:hover .headline__date,
    .headline__anchor:hover .headline__title {
        text-decoration: underline;
    }
}

.info__background {
    background-image: url(assets/images/front-page/bg-info01.jpg);
    background-size: 160dvw 20dvw;
    background-repeat: repeat-x;
    background-position: left 0 bottom 0;
}
@media not (prefers-reduced-motion: reduce) {
    .info__background.animation.animation--running {
        animation: 120s linear infinite bgScrollLeft both;
    }
}
@keyframes bgScrollLeft {
    0% {
        background-position: left 0dvw bottom 0;
    }
    100% {
        background-position: left -160dvw bottom 0;
    }
}

/* カネコ商会 八戸について */

.page__layout--company {
    max-width: 60em;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "  header facade"
        "greeting facade"
        " profile facade"
        " profile cert  "
        " profile nav   "
        "     map map   "
        "     cta cta   ";
    gap: 1em 4em;
}

.company__header {
    grid-area: header;
    align-items: flex-start;
}

.company__facade {
    grid-area: facade;
}

.company__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.company__map {
    grid-area: map;
    width: 100%;
    aspect-ratio: 3 / 1;
    margin-block: 4em;
}

.company__greeting {
    grid-area: greeting;
}

.company__profile {
    grid-area: profile;
    display: grid;
    grid-template-columns: max-content max-content;
    gap: 1em;
}
.company-profile__item {
    display: contents;
}
.executive-profile {
    display: grid;
    grid-template-columns: max-content max-content;
    column-gap: 1em;
}
.executive-profile__item {
    display: contents;
}
.company-profile__item dt {
    text-align: right;
}
.executive-profile__name {
    display: flex;
    justify-content: space-between;
    column-gap: 0.5em;
}
.correspondent-bank {
    list-style: none;
}
.company-profile__item--invoice-id dt {
    font-size: 0.5em;
    line-height: 1;
    transform:scaleY(2);
    display: flex;
    align-items: center;
}

.company__lpg-distributor-certificate {
    grid-area: cert;
}

.company__menu {
    grid-area: nav;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
    gap: 1em;
}

.button--stride {
    grid-column: span 2;
}

.company__cta {
    grid-area: cta;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2em;
    padding-inline: 4em;
}

.button--contact {
    background: #61cbff !important;
    color: #fff !important;
}
.button--contact::before {
    content: '';
    --image-icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24.3 24.3'%3E%3Cdefs%3E%3Cstyle%3E .mail %7B fill: none; stroke: %23000; stroke-miterlimit: 10; stroke-width: 2px; %7D %3C/style%3E%3C/defs%3E%3Cpolyline class='mail' points='1 9.8 12.2 14.4 23.3 9.8'/%3E%3Crect class='mail' x='1' y='3.6' width='22.3' height='17.1' rx='1.5' ry='1.5'/%3E%3C/svg%3E");
    -webkit-mask-image: var(--image-icon-mail);
    mask-image: var(--image-icon-mail);
    background: currentColor;
}

.button--e-shop {
    background: #f9ae3b !important;
    color: #fff !important;
}
.button--e-shop::before {
    content: '';
    --image-icon-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 355.51 355.51'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23000000;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M162.91,221.14c.03-2.85-.15-5.82-.55-8.85-.69,7.61-3.97,13.55-9.37,15.51-9.22,3.36-21.14-6.12-26.62-21.17-5.48-15.05-2.44-29.97,6.78-33.33,3.98-1.45,8.47-.5,12.73,2.25-4.07-4.53-8.61-8.06-13.38-10.28-5.75-2.68-11.38-3.16-16.29-1.37s-8.92,5.77-11.6,11.52c-5.09,10.92-4.87,26.39.59,41.38,5.46,14.99,15.23,26.99,26.15,32.08,5.75,2.68,11.38,3.15,16.29,1.37,2.15-.78,4.08-1.95,5.8-3.46.14-9.42,3.53-18.48,9.47-25.65Z'/%3E%3Cpath class='cls-1' d='M34.55,196.72c-13.05,5.12-23.47,14.9-29.42,27.65-6.14,13.18-6.79,27.96-1.82,41.62,4.97,13.66,14.97,24.57,28.14,30.71,13.18,6.14,27.96,6.79,41.62,1.82,1.59-.58,3.14-1.24,4.67-1.95-15.31-14.71-27.17-32.84-34.64-53.38-5.51-15.14-8.35-30.82-8.56-46.47Z'/%3E%3Cpath class='cls-1' d='M68.49,88.74c10.62-3.86,16.11-15.65,12.25-26.26-1.87-5.14-5.63-9.25-10.59-11.56-4.96-2.31-10.52-2.56-15.67-.68-5.14,1.87-9.25,5.63-11.56,10.59-2.31,4.96-2.56,10.52-.68,15.67s5.63,9.25,10.59,11.56c4.96,2.31,10.52,2.56,15.67.68Z'/%3E%3Cpath class='cls-1' d='M34.63,189.5c.72-18.49,5.12-36.84,13.17-54.12,15.92-34.13,44.17-60.03,79.56-72.91,35.39-12.88,73.68-11.21,107.81,4.71,17.27,8.06,32.43,19.28,44.87,32.98.03-.01.07-.03.1-.04,9.62-3.5,19.74-4.52,29.59-3.1-20.24-27.71-49.1-48.8-81.89-59.69-35.81-11.9-73.52-11.35-109.05,1.59-12.04,4.38-23.34,10.03-33.81,16.81.82,1.4,1.52,2.89,2.09,4.45,2.49,6.84,2.17,14.23-.91,20.83-3.07,6.59-8.53,11.6-15.37,14.09s-14.23,2.17-20.83-.91c-1.55-.72-3.02-1.59-4.38-2.56-4.1,5.19-7.95,10.64-11.47,16.37-17.93,29.21-26.45,63.59-24.3,97.56,6.36-6.81,14.37-12.26,23.71-15.66.36-.13.73-.26,1.1-.38Z'/%3E%3Cpath class='cls-1' d='M232.33,73.3c-32.5-15.15-68.95-16.75-102.65-4.48-33.7,12.26-60.6,36.92-75.75,69.42-6.72,14.4-10.75,29.58-12.11,44.95,5.38-14.5,14.23-28.61,26.22-41.65,18.4-20.02,42.86-35.96,70.73-46.11,48.42-17.62,99.53-14.45,134.14,6.99-11.42-12.01-25.1-21.9-40.57-29.12Z'/%3E%3Cpath class='cls-1' d='M141.07,101.77c-26.86,9.78-50.4,25.11-68.07,44.33-13.8,15.02-23.21,31.46-27.63,48.16,20.33-26.78,58.48-52.26,104.28-68.94,27.22-9.91,55-15.87,80.33-17.23,16.33-.88,31.18.17,43.9,3.03-32.76-23.07-84.09-27.09-132.8-9.36Z'/%3E%3Cpath class='cls-1' d='M324.08,108.28c-12.43-5.8-26.28-6.7-39.28-2.61,9.89,12.12,17.78,25.94,23.29,41.07,7.49,20.57,10.05,42.11,7.76,63.25,1.29-.37,2.58-.77,3.84-1.23,28.2-10.26,42.8-41.56,32.53-69.76-4.97-13.66-14.97-24.57-28.15-30.71Z'/%3E%3Cpath class='cls-1' d='M289.1,123.22c-30.57-14.07-84.38-10.75-137.14,8.45-26.25,9.55-50.5,22.32-70.12,36.93-18.61,13.85-32.24,28.7-39.5,42.98,1.25,9.89,3.62,19.71,7.11,29.3,12.26,33.69,36.92,60.6,69.42,75.75,32.5,15.15,68.95,16.75,102.65,4.48,69.56-25.32,105.55-102.51,80.23-172.06-3.33-9.15-7.58-17.79-12.64-25.84ZM249.96,210.79c-3.45,7.41-8.78,12.6-15.41,15.01-1.46.53-2.96.91-4.49,1.16,1.15,2.01,2.14,4.13,2.95,6.36,3.75,10.3,3.26,21.44-1.37,31.37-4.63,9.93-12.85,17.47-23.15,21.22s-21.44,3.26-31.37-1.37c-9.93-4.63-17.47-12.85-21.22-23.15-.81-2.23-1.41-4.5-1.82-6.76h0c-1.32.79-2.69,1.45-4.14,1.98-6.63,2.41-14.04,1.86-21.45-1.59-12.5-5.83-23.59-19.25-29.64-35.89-4.73-12.98-5.89-26.43-3.29-37.86,2.72-11.97,9.24-20.38,18.34-23.69,6.63-2.41,14.04-1.86,21.45,1.59,12.5,5.83,23.59,19.25,29.64,35.89,2.41,6.61,3.86,13.33,4.39,19.82,0,0,0,0,0,0,3.26-2.52,6.96-4.59,11.03-6.07,4.05-1.47,8.23-2.28,12.41-2.45,0,0,0,0,0,0-3.77-5.32-6.97-11.41-9.38-18.02-4.73-12.98-5.89-26.43-3.29-37.86,2.73-11.97,9.24-20.38,18.34-23.69,6.63-2.41,14.04-1.86,21.45,1.59,12.5,5.83,23.59,19.25,29.64,35.89s6.19,34.04.36,46.54Z'/%3E%3Cpath class='cls-1' d='M182.73,215.13c-8.6,3.13-15.47,9.43-19.34,17.73-3.87,8.3-4.28,17.61-1.14,26.21s9.43,15.47,17.72,19.34c8.3,3.87,17.61,4.28,26.21,1.14,17.76-6.46,26.95-26.17,20.49-43.94-3.13-8.6-9.43-15.47-17.72-19.34-8.3-3.87-17.61-4.28-26.21-1.14Z'/%3E%3Cpath class='cls-1' d='M200.81,133.1c-4.91,1.79-8.92,5.77-11.6,11.52-2.22,4.76-3.43,10.4-3.64,16.48,1.49-4.84,4.32-8.46,8.3-9.91,9.22-3.36,21.14,6.12,26.62,21.17,5.48,15.05,2.44,29.97-6.78,33.33-5.39,1.96-11.7-.47-17.11-5.82,1.63,2.56,3.39,4.93,5.26,7.1,0,0,0,0,0,0,3.39.63,6.73,1.68,9.94,3.18,5.33,2.48,9.96,6.01,13.69,10.33,0,0,0,0,0,0,2.35.07,4.63-.25,6.76-1.03,14.74-5.36,19.68-29.1,11.02-52.9-5.46-14.99-15.23-26.99-26.15-32.08-5.75-2.68-11.38-3.15-16.29-1.37Z'/%3E%3C/svg%3E");
    -webkit-mask-image: var(--image-icon-person);
    mask-image: var(--image-icon-person);
    background: currentColor;
    width: 4em;
    height: 4em;
    left: 1em;
}

@media screen and (width < 768px) {
    .page__layout--company {
        margin-inline: auto;
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "facade"
            "profile"
            "cert"
            "map"
            "greeting"
            "nav"
            "cta";
        row-gap: 2em;
    }

    .company__header {
        align-items: center;
    }

    .company__profile {
        font-size: max(12px, 3dvw);
        margin-inline: auto;
    }

    .company__image {
        border-radius: 1em;
    }

    .company__map {
        aspect-ratio: 4 / 3;
        margin-block: 0;
    }

    .company__greeting {
        font-size: max(12px, 3dvw);
    }

    .company__cta {
        padding-inline: 0;
        grid-template-columns: 1fr;
    }
}

/*** ＬＰガス・設備 ***/

.page-content--lpg_eq {
    --bg-wave-yellow-x: 80em;
    --bg-wave-blue-x: 160em;
}

.page__layout--lpg_eq {
    display: flex;
    flex-direction: column;
    gap: 8em;
    max-width: 60em;
}
@media screen and (width < 768px) {
    .page-content--lpg_eq {
        --bg-wave-yellow-x: 132dvw;
        --bg-wave-blue-x: 300dvw;
    }

    .page__layout--lpg_eq {
        gap: 5dvw;
    }
}
@media screen and (width < 480px) {
    .page-content--lpg_eq {
        --bg-wave-blue-x: 400dvw;
    }
}

/* ご利用お申し込み手続き */

.procedure {
    display: flex;
    flex-direction: column;
    gap: 2.6em;
    max-width: 40em;
    margin-inline: auto;
}
@media screen and (width < 768px) {
    .procedure {
        gap: 4dvw;
    }
}

.procedure__list-view {
    counter-reset: step;
    display: flex;
    flex-direction: column;
    gap: 2em;
}
.procedure__list-view .list-view__item {
    gap: 1.2em;
    counter-increment: step;
    background: #e2f3bb;
    border-radius: 2.5em;
    padding: 1.2em;
    position: relative;
}
.procedure__list-view .list-view__item:has(+ .list-view__item)::after {
    content: "▼";
    color: #0c8d5a;
    font-size: 2em;
    line-height: 1;
    position: absolute;
    bottom: -1em;
    width: 100%;
    text-align: center;
}

.procedure__list-view .list-view__label {
    display: flex;
    align-items: center;
    margin-left: 0.2em;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.2;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.procedure__list-view .list-view__label::before {
    content: counter(step)".";
    display: inline-block;
    width: 1.2em;
    flex-shrink: 0;
    color: #0c8d5a;
    margin-left: 0.2em;
}
.procedure__list-view .list-view__badge {
    font-weight: bold;
    line-height: 1;
    color: #0c8d5a;
    background: #fffc;
    padding: 1em;
    border-radius: 1.5em;
    align-self: center;
}
.procedure__list-view .list-view__detail {
    background: #fffc;
    border-radius: 1.5em;
    padding: 1.2em 1.2em 1.1em 2em;
}

.page-section__footer--procedure {
    align-self: center;
}

/* よくあるお問い合わせ */

.faq {
    display: flex;
    flex-direction: column;
    gap: 1.6em;
    background: #e2eaf4;
    padding: 3.6em 2em 4em;
}
@media screen and (width < 768px) {
    .faq {
        padding: 5dvw;
    }
}

.faq__list {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.faq__item {
    background: #0c8d5a;
    color: #fff;
    padding: 1em;
    border-radius: 0.2em;
    box-shadow: 0 0 8px #0006;
}
.faq__item:has(> .faq__question:focus-visible) {
    outline: Highlight auto 2px;
    outline: -webkit-focus-ring-color auto 5px;
}

.faq__question {
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    padding: 1em;
    margin: -1em;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.6em;
}
.faq__question::-webkit-details-marker {
    display: none;
}
.faq__item[open] .faq__question {
    margin-bottom: 0;
}
.faq__question::before {
    content: "Q.";
    font-weight: bold;
    font-family: var(--mincho-font-family);
}
.faq__question::after {
    content: "＋";
    font-size: 2em;
    margin-block: -0.5em;
    align-self: center;
}
.faq__item[open] .faq__question::after {
    transform: scale(120%) rotate(45deg);
}
.faq__question:focus-visible {
    outline: none;
}
@supports selector(details::details-content) {
    .faq__question {
        transition: margin-bottom 0.5s;
    }
    .faq__question::after {
        transition: transform 0.5s;
    }
}

.faq__answer {
    background: #fffe;
    color: #333;
    border-radius: 0.2em;
    padding: 1.3em 1.3em 1.3em 0.6em;
    display: grid;
    grid-template-columns: 1.5em 1fr;
    grid-template-areas: "label content";
}
.faq__answer::before {
    display: inline-block;
    content: "A. ";
    font-weight: bold;
    font-family: var(--mincho-font-family);
    margin-left: 0.2em;
    grid-column: label;
}
.faq__answer > * {
    grid-column: content;
}

.faq__answer ul:not(.notes),
.faq__answer ol {
    padding-left: 2em;
}
.faq__answer dt {
    font-weight: bold;
}
.faq__answer dd {
    padding-left: 1em;
}

/* 関連カテゴリー */

.page-section--relation {
    position: relative;
}
.page-section__header--relation {
    position: absolute;
    top: 0;
    right: 0;
    width: min-content;
    align-items: flex-end;
    text-align: right;
}

.relation__list {
    list-style: none;
    display: grid;
    grid-template-columns: calc(50% - 3em) calc(50% - 3em);
    gap: 4em 6em;
    margin-top: 20em;
    margin-bottom: 2em;
}
.relation__item:nth-child(odd) {
    margin-top: -50%;
}

.relation__anchor {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
    border-radius: 11em 11em 1em 1em;
    color: inherit;
    text-decoration: inherit;
}

.relation__figure {
    width: 100%;
    border-radius: 16em;
    overflow: hidden;
    display: grid;
    box-shadow: 0 0 8px #0006;
}
.relation__image {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 4/3;
    width: 100%;
    height: auto;
    object-fit: cover;
}
.relation__figure figcaption {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    font-family: "Koulen", serif;
    font-size: 2.4em;
    font-weight: bold;
    letter-spacing: 0.2em;
    margin-right: -0.2em;
}
@supports(paint-order: stroke) {
    .relation__figure figcaption {
        -webkit-text-stroke: #fff 0.15em;
        paint-order: stroke;
    }
}

.relation__label {
    font-size: 1.6em;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.2em;
}
@supports(margin-block: 1lh) {
    .relation__label {
        margin-block: calc((1lh - 1em) / 2 * -1);
    }
}

.relation__anchor[target="_blank"] .relation__label::after {
    content: '';
    -webkit-mask-image: var(--image-icon-new-window);
    mask-image: var(--image-icon-new-window);
    background: #3339;
    display: block;
    width: 0.8em;
    height: 0.8em;
    margin-left: 0.1em;
    flex-shrink: 0;
}

@media screen and (width < 768px) {
    .relation__list {
        grid-template-columns: calc(50% - 1dvw) calc(50% - 1dvw);
        gap: 4dvw 2dvw;
    }
    .relation__item {
        font-size: 1.6dvw;
    }
}

@media screen and (width < 480px) {
    .page-section__header--relation {
        position: relative;
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .relation__list {
        margin-block: 0;
        grid-template-columns: 1fr;
        gap: 5dvw;
    }

    .relation__item:nth-child(odd) {
        margin-top: 0;
    }

    .relation__item {
        font-size: 3dvw;
    }

    .relation__anchor {
        gap: 1em;
        border-radius: 2em;
    }

    .relation__figure {
        border-radius: 2em;
    }

    .relation__image {
        aspect-ratio: 21 / 9;
    }
}

/*** ＬＰガス・設備 ***/

.page-content--lpg_eq02 {
    margin-bottom: 10em;
}

.page__layout--lpg_eq02 {
    display: flex;
    flex-direction: column;
    gap: 8em;
    max-width: 60em;
}
@media screen and (width < 768px) {
    .page-content--lpg_eq02 {
        margin-bottom: 6em;
    }

    .page__layout--lpg_eq02 {
        gap: 10dvw;
    }
}

.page-section__image--lpg_eq02-intro {
    max-width: 239px;
    margin-inline: auto;
    margin-bottom: 1em;
}

.lpg-introduction__list {
    counter-reset: number;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4em;
}

.lpg-introduction__item {
    counter-increment: number;
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-template-areas:
        "count title"
        "blank copy";
    align-items: center;
}
.lpg-introduction__item:nth-child(even) {
    margin-left: 6em;
}

@media screen and (width < 768px) {
    .lpg-introduction__list {
        gap: 1em;
    }
    .lpg-introduction__item:nth-child(even) {
        margin-left: initial;
    }
}

.lpg-introduction__title {
    display: contents;
    grid-area: title;
    color: #0c8d5a;
    font-family: var(--gothic-font-family);
    font-weight: 500;
    font-size: 2em;
}

.lpg-introduction__title::before {
    grid-area: count;
    content: counter(number);
    font-size: 3em;
    line-height: 1;
    border-right: solid 3px #0c8d5a;
    padding-right: 0.3em;
    margin-right: 0.3em;
}

.lpg-introduction__copy {
    grid-area: copy;
    font-size: 1.4em;
}

@media screen and (width < 768px) {
    .lpg-introduction__title {
        font-size: max(1em, 3vw);
        font-weight: bold;
    }
    .lpg-introduction__title::before {
        font-size: 1em;
        border-right: solid 2px #0c8d5a;
    }
    .lpg-introduction__copy {
        font-size: max(1em, 2.145vw);
    }
}

.lpg-usage-explanation__figure {
    float: right;
    margin: 0 0 1em 4em;
}
.lpg-usage-explanation__image {
    display: block;
    width: 28em;
    height: auto;
}
.lpg-usage-explanation__item + .lpg-usage-explanation__item {
    margin-top: 2em;
}
.lpg-usage-explanation__title {
    font-size: 1em;
}

@media screen and (width < 768px) {
    .lpg-usage-explanation__figure {
        float: none;
        margin: 0;
    }
    .lpg-usage-explanation__image {
        width: 100%;
    }
    .lpg-usage-explanation__item {
        margin-top: 1em !important;
    }
}

.lpg-file-download-buttons {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
}
@media screen and (width < 768px) {
    .lpg-file-download-buttons {
        grid-template-columns: 1fr;
    }
}

/*** プライバシーポリシー ***/

.privacy-policy-articles {
    display: flex;
    flex-direction: column;
    gap: inherit;
    max-width: 60em;
    margin-inline: auto;
    counter-reset: article-number;
}

.privacy-policy-articles * {
    font-size: 1em;
}

.privacy-policy-articles section > * > h1,
.privacy-policy-articles section > * > h2,
.privacy-policy-articles section > * > h3,
.privacy-policy-articles section > * > h4,
.privacy-policy-articles section > * > h5,
.privacy-policy-articles section > * > h6 {
    margin-top: 1em;
}

.privacy-policy-articles ul {
    padding-left: 1em;
}

.privacy-policy-article-numbered::before {
    counter-increment: article-number;
    content: counter(article-number) ". ";
}

.page__layout--privacy {
    display: flex;
    flex-direction: column;
    gap: 2em;
    margin-bottom: 4em;
}
@media screen and (width < 768px) {
    .page__layout--privacy {
        margin-bottom: 2em;
    }
}

/*** お問い合わせ ***/

.page__layout--contact {
    max-width: 60em;
    display: flex;
    flex-direction: column;
    gap: 4em;
    margin-bottom: 4em;
}

.page__layout--contact-sent {
    max-width: 60em;
    display: flex;
    flex-direction: column;
    gap: 2em;
    margin-bottom: 4em;
    min-height: 100%;
    justify-content: space-evenly;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 2em;
    accent-color: #0c8d5a;
    max-width: 30em;
    margin-inline: auto;
    font-size: clamp(16px, 1dvw, 24px);
}
@media screen and (width < 768px) {
    .contact-form {
        gap: 5dvw;
    }
}

.contact-form label {
    cursor: pointer;
}

.contact-form input:not(.button),
.contact-form button,
.contact-form textarea {
    font-size: 1em;
}

.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="email"],
.contact-form textarea,
.contact-form .wpcf7-radio {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 0.2em 0.5em;
}
.contact-form .wpcf7-radio {
    padding-block: 0.5em;
}

.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="email"],
.contact-form textarea,
.contact-form .wpcf7-radio,
.contact-form .privacy-policy-articles {
    border-radius: 0.2em;
    border: solid 1px #0002;
}

.contact-form fieldset {
    display: contents;
}

.contact-form textarea {
    resize: vertical;
    min-height: 5em;
    max-height: 24em;
    field-sizing: content;
}

.contact-form .wpcf7-spinner {
    display: none;
}

.contact-form .wpcf7-form-control:not(.button) {
    display: block;
}

.contact-form .wpcf7-acceptance {
    line-height: 1;
}

.contact-form__item {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
}

.contact-form__label {
    font-family: var(--gothic-font-family);
    font-weight: bold !important;
    font-size: 1em;
    line-height: 1.2;
    margin-block: calc((1em - 1em * 1.2) / 2);
    display: flex;
    gap: 0.25em;
    align-items: center;
    width: fit-content;
    height: min-content;
}
.contact-form__label::before {
    line-height: 1;
    font-size: 0.75em;
    padding: 0.2em;
    border-radius: 0.2em;
}
.contact-form__label.required::before {
    content: '必須';
    color: #0c8d5a;
    border: solid 1px #0c8d5a;
}
.contact-form__label.optional::before {
    content: '任意';
    color: #777;
    border: solid 1px #777;
}

.wpcf7-not-valid-tip {
    font-size: 0.75em;
}

.contact-form__guidance {
    font-size: 0.75em;
}
.wpcf7-form-control-wrap + .contact-form__guidance {
    margin-top: 0.25em;
}

.contact-form .wpcf7-list-item > label {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 0.4em;
}
.contact-form .wpcf7-list-item > label > input[type="radio"],
.contact-form .wpcf7-list-item > label > input[type="checkbox"] {
    width: 1.4em;
    height: 1.4em;
}

.wpcf7-form-control-wrap[data-name="your-purpose"] .wpcf7-radio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
    gap: 0.7em;
}
.wpcf7-form-control-wrap[data-name="your-purpose"] .wpcf7-list-item,
.wpcf7-form-control-wrap[data-name="pp-acceptance"] .wpcf7-list-item {
    margin-left: 0.1em;
}
.contact-form .privacy-policy-articles {
    max-height: 12em;
    background: #fff;
    overflow-y: auto;
    padding: 0 12px 0 0.5em;
    font-size: 14px;
}
.contact-form .simplebar-content-wrapper {
    overscroll-behavior: none;
}
.contact-form .simplebar-content > article + article {
    margin-top: 1em;
}
.contact-form .wpcf7-form-control-wrap[data-name="pp-acceptance"] {
    display: block;
    margin-top: 0.5em;
}

.contact-form__value .hidden {
    display: none;
}

.contact-form__buttons {
    grid-column: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
}
.contact-form__buttons .button-cover:has(.wpcf7-previous),
.contact-form__buttons .wpcf7-previous {
    grid-column: 1;
}
.contact-form__buttons .button-cover:has(.wpcf7-submit),
.contact-form__buttons .wpcf7-submit {
    grid-column: 2;
}

.contact-form .wpcf7-response-output {
    grid-column: 2;
    margin: 0 !important;
}
.contact-form .wpcf7-response-output:empty {
    display: none;
}

body.page--contact-confirm .page__header > *,
body.page--contact-confirm .page__footer > * {
    visibility: hidden;
}

.wpcf7-privacy_policy:focus-within {
    outline: Highlight auto 2px;
    outline: -webkit-focus-ring-color auto 5px;
}

/*** お知らせ archive ***/

.page__layout--info-archive {
    display: flex;
    flex-direction: column;
    gap: 2em;
    max-width: 60em;
    margin-bottom: 4em;
    height: calc(100% - 4em);
}
@media screen and (width < 768px) {
    .page__layout--info-archive {
        gap: 5dvw;
    }
}

.page-section--info-archive {
    height: 100%;
}

.page-section__footer--info-archive .pagination .page-numbers {
    list-style: none;
    display: flex;
    gap: 0.5em;
    justify-content: center;
}
.page-section__footer--info-archive .pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3em;
    line-height: 1;
    text-decoration: none;
}
.page-section__footer--info-archive .pagination .page-numbers .page-numbers:not(.dots) {
    width: 3em;
    border-radius: 0.4em;
    border: solid 1px #333;
    box-shadow: 0 0 0.2em #0003;
    cursor: pointer;
}
.page-section__footer--info-archive .pagination .page-numbers .page-numbers.current {
    background: #333;
    color: #fff;
    box-shadow: none;
    cursor: default;
}

/*** お知らせ single ***/

.page-content__timestamp--sticky {
    color: red;
}

.page__layout--info-single {
    display: flex;
    flex-direction: column;
    gap: 2em;
    height: 100%;
}
.page-content__header--info-single {
    display: flex;
    flex-direction: column;
    max-width: 60em;
    margin-inline: auto;
}
.page-content__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    list-style: none;
}
.page-content__category {
    color: #fff;
    font-size: 0.8em;
    padding: 0 1em;
}

.page-content__title--info-single {
    font-size: 2em;
}
@supports(word-break: auto-phrase) {
    .page-content__title--info-single {
        word-break: auto-phrase;
    }
}
@supports not (word-break: auto-phrase) {
    .page-content__title--info-single {
        word-break: break-all;
        text-wrap: balance;
    }
}

.page-section__content--info-single {
    width: fit-content;
    margin-inline: auto;
}

.page-section--info-single {
    width: 100%;
    max-width: 60em;
    margin-inline: auto;
    box-sizing: border-box;
}

.page-section--important-posts {
    margin-top: auto;
}

.page-section--important-posts,
.page-section--latest-posts {
    width: 100%;
    max-width: 60em;
    margin-inline: auto;
    gap: 2em;
}

.page-section__content--info-single .alignleft {
    float: left;
    margin-right: 20px;
}
.page-section__content--info-single .alignright {
    float: right;
    margin-left: 20px;
}
.page-section__content--info-single .aligncenter {
    display: block;
    margin-inline: auto;
}

.page-section__content--info-single h1,
.page-section__content--info-single h2,
.page-section__content--info-single h3,
.page-section__content--info-single h4,
.page-section__content--info-single h5,
.page-section__content--info-single h6 {
    clear: both;
    line-height: 1.2;
    font-family: var(--gothic-font-family);
    font-weight: bold;
}
.page-section__content--info-single h1 {
    font-size: 1.5em;
}
.page-section__content--info-single h2 {
    font-size: 1.4em;
}
.page-section__content--info-single h3 {
    font-size: 1.3em;
}
.page-section__content--info-single h4 {
    font-size: 1.2em;
}
.page-section__content--info-single h5 {
    font-size: 1.1em;
}
.page-section__content--info-single h6 {
    font-size: 1.0em;
}

.page-section__content--info-single .wp-caption-text {
    margin-top: -0.25em;
    font-size: 12px;
    opacity: .7;
}

.page-section__content--info-single ul,
.page-section__content--info-single ol {
    padding-left: 40px;
}

.page-section__content--info-single a {
    color: -webkit-link;
    color: -moz-hyperlinkText;
}

.page-section__content--info-single hr {
    margin-block: 1em;
    display: block;
    height: 1px;
    border: solid 1px #ddd;
}

.page-section__content--info-single iframe,
.page-section__content--info-single img {
    max-width: 100%;
}

.page-section__content--info-single blockquote {
    margin: 1em 40px;
    border: solid 1px #ccc;
    padding-inline: 0.25em;
}