@charset "UTF-8";

/* =================================================================== */
/* 共通設定 */
/* =================================================================== */
strong {
    color: var(--main-color);
}

h2,
h3 {
    font-family: sans-serif;
}

:root {
    --ink: #17164d;
    --muted: #606574;
    --paper: #f1f3f7;
    --rule: #d9dce6;
}

/* =================================================================== */
/* ご挨拶 */
/* =================================================================== */
.greeting {
    padding: clamp(40px, 6vw, 90px) 0 0;
    background-color: #fff;
    position: relative; /* sectionの位置を相対的にする*/
    z-index: 1; /* 背景画像より上に表示 */
    overflow: hidden;
}

/* 見出しの両側のライン */
.greeting h3 {
    position: relative;
    display: table;
    margin: 0 auto 38px;
    padding: 0 72px;
    color: var(--main-color);
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",
    "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝",
    "ＭＳ 明朝", serif;
    font-size: clamp(1.2rem, 1.8vw, 2.4rem);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-align: center;
}

.greeting h3::before,
.greeting h3::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 54px;
    height: 1px;
    background: var(--main-color);
    opacity: 0.55;
    transform: translateY(-50%);
}

.greeting h3::before {
    left: 0;
}

.greeting h3::after {
    right: 0;
}

@media screen and (max-width: 868px) {
    .greeting h3 {
        margin-bottom: 28px;
        padding: 0 44px;
        font-size: 1.25rem;
        letter-spacing: 0.05em;
    }

    .greeting h3::before,
    .greeting h3::after {
        width: 28px;
    }
}

/* =================================================================== */
/* 電話・メールバナー */
/* =================================================================== */
.tel_bnr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    padding: 30px 0 20px 0;
    position: relative;
    z-index: 2;
}

.tel_bnr > *,
.tel_bnr figure,
.tel_bnr a,
.tel_bnr img {
    min-width: 0;
    max-width: 100%;
}

.tel_bnr img {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    width: 100%;
    height: auto;
}

@media screen and (max-width: 568px) {
    .tel_bnr {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =================================================================== */
/* ページ内バナー */
/* =================================================================== */
.bnr_sec1 {
    padding: var(--v-space) 0 var(--v-space);
    position: relative;
    background-color: var(--accent-color3);
}
.bnr_sec1::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: var(--base-color);
    clip-path: polygon(0 0, 50% 100%, 100% 0); /* ▼ 谷型 */
}

/* =================================================================== */
/* 業務内容 */
/* =================================================================== */
.secS {
    padding: var(--v-space2) 0 var(--v-space);
    background-color: #f7f8fa;
}

/* 見出し */
.secS-title {
    position: relative;
    margin: 0 0 1em;
    padding: 14px 18px 20px;
    color: var(--main-color);
    font-size: clamp(22px, 2.2vw, 26px);
    font-weight: 500;
    line-height: 1.45;
    text-align: center !important;
}

.secS-title:not(:first-of-type) {
    margin-top: 2em;
}

.secS-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 60px;
    height: 2px;
    background: var(--main-color);
    transform: translateX(-50%);
}

/* カード全体 */
.secS-card {
    display: grid;
    gap: 18px;
}

/* 2列 */
.secS-card2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 各カード */
.secS-card > div {
    position: relative;
    display: grid;
    align-content: start;
    overflow: hidden;
    padding: 0;
    border-radius: 14px;
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

/* カードの表示順 */

/* 画像 */
.secS-card-img {
    order: 2;
    display: block;
    width: 100%;
    height: 350px;
    margin: 0;
    border-radius: 0;
    box-sizing: border-box;
    object-fit: cover;
}

/* カード見出し */
.secS-card h4 {
    order: 1;
    position: relative;
    margin: 0;
    padding: 18px 18px 8px;
    color: #222;
    font-size: clamp(18px, 1.6vw, 20px);
    font-weight: 500;
    line-height: 1.45;
    text-align: center !important;
}

/* 本文 */
.secS-card p {
    order: 3;
    margin: 0;
    padding: 12px 18px 20px;
    font-size: 16px;
    line-height: 1.8;
}

/* タブレット */
@media screen and (max-width: 868px) {

    .secS-card2 {
        grid-template-columns: 1fr;
    }

}

/* スマホ：見出し → 画像 → 本文 */
@media screen and (max-width: 480px) {

    .secS-card h4 {
        padding: 18px 14px 8px;
    }

    .secS-card-img {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .secS-card p {
        padding: 12px 16px 18px;
    }

}

/* 高品質・低価格・ハイスピード */
.secS-title-wide {
    margin-top: 2em;
}

.secS-card.secS-card-wide > div {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    grid-template-rows: auto 1fr;
    align-content: stretch;
}

.secS-card.secS-card-wide .secS-card-img {
    order: initial;
    grid-column: 1;
    grid-row: 1 / 3;
    width: 100%;
    height: 210px;
    min-height: 0;
    object-fit: cover;
}

.secS-card.secS-card-wide h4 {
    order: initial;
    grid-column: 2;
    grid-row: 1;
    padding: 24px 24px 8px;
}

.secS-card.secS-card-wide p {
    order: initial;
    grid-column: 2;
    grid-row: 2;
    padding: 12px 24px 24px;
}

@media screen and (max-width: 868px) {

    .secS-card.secS-card-wide > div {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        align-content: start;
    }

    .secS-card.secS-card-wide .secS-card-img {
        order: 1;
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: 190px;
        min-height: 0;
        object-fit: cover;
    }

    .secS-card.secS-card-wide h4 {
        order: 2;
        grid-column: 1;
        grid-row: 2;
        padding: 18px 18px 8px;
    }

    .secS-card.secS-card-wide p {
        order: 3;
        grid-column: 1;
        grid-row: 3;
        padding: 12px 18px 20px;
    }
}

@media screen and (max-width: 480px) {

    .secS-card.secS-card-wide .secS-card-img {
        order: 1;
        grid-row: 1;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .secS-card.secS-card-wide h4 {
        order: 2;
        grid-row: 2;
        padding: 18px 14px 8px;
    }

    .secS-card.secS-card-wide p {
        order: 3;
        grid-row: 3;
        padding: 12px 16px 18px;
    }
}


/* =================================================================== */
/* 業務内容：自社一貫生産 */
/* =================================================================== */
.secS-title--process {
	margin-top: clamp(40px, 5vw, 70px);
}

.secS-process-visual {
	position: relative;
	margin-bottom: clamp(70px, 8vw, 110px);
}

.secS-process {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	overflow: hidden;
	width: min(1100px, calc(100% - 80px));
	margin: 0 auto;
	border-radius: 14px;
	box-sizing: border-box;
	background-color: #ffffffe8;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
}

.secS-process__item {
	position: relative;
	min-width: 0;
	padding: clamp(30px, 3vw, 42px) clamp(22px, 2.5vw, 34px) clamp(34px, 3vw, 44px);
	box-sizing: border-box;
}

.secS-process__item + .secS-process__item {
	border-left: 1px solid #dfe2e8;
}

.secS-process__head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: clamp(24px, 2.5vw, 32px);
}

.secS-process__num {
	flex: 0 0 auto;
	color: var(--main-color);
	font-size: clamp(26px, 2.4vw, 34px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.02em;
}

.secS-process__en {
	position: relative;
	padding-left: 14px;
	color: var(--main-color);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.06em;
}

.secS-process__en::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: 26px;
	background-color: var(--main-color);
	transform: translateY(-50%);
	opacity: 0.45;
}

.secS-process__title {
	margin: 0 0 18px;
	color: #222;
	font-size: clamp(19px, 1.7vw, 22px);
	font-weight: 600;
	line-height: 1.5;
	text-align: left !important;
}

.secS-process__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.9;
}

.secS-process-visual__photo {
	position: relative;
	z-index: 1;
	margin: -100px auto 0;
	width: min(1220px, 100%);
	padding: 0 24px;
	box-sizing: border-box;
}

.secS-process-visual__photo img {
	display: block;
	width: 100%;
	height: 300px;
	border-radius: 0;
	object-fit: cover;
}


/* =================================================================== */
/* SP */
/* =================================================================== */
@media only screen and (max-width: 767px) {

	.secS-process-visual {
		margin-bottom: 60px;
	}

	.secS-process {
		grid-template-columns: 1fr;
		width: 90%;
	}

	.secS-process__item {
		padding: 24px 20px 26px;
	}

	.secS-process__item + .secS-process__item {
		border-top: 1px solid #dfe2e8;
		border-left: 0;
	}

	.secS-process__head {
		margin-bottom: 18px;
	}

	.secS-process__title {
		margin-bottom: 12px;
		font-size: 18px;
	}

	.secS-process__text {
		font-size: 15px;
		line-height: 1.8;
	}

	.secS-process-visual__photo {
		margin-top: -200px;
		padding: 0 0px;
	}

	.secS-process-visual__photo img {
		height: 300px;
        object-position: center top;
	}

}


/* =================================================================== */
/* 取扱商品・ご注文ガイド 共通の見出し／文字組 */
/* =================================================================== */
.spot-heading__en {
    color: var(--main-color);
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.spot-heading__ja {
    margin-top: 12px;
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.4;
    color: var(--ink);
}
.section-lead {
    font-size: clamp(20px, 2.4vw, 27px);
    font-weight: 700;
    color: var(--ink);
}

/* 取扱商品・ご注文ガイド共通：ダイユー版と同じ組版 */
#products,
#guide {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Noto Sans JP", "メイリオ", Meiryo, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0;
    overflow-wrap: anywhere;
    word-break: normal;
    line-break: strict;
    --main-color: #201c80;
    color: #222;
}

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

#products p,
#guide p {
    line-height: 1.95;
    letter-spacing: 0;
}

#products h2,
#products h3,
#guide h2,
#guide h3 {
    font-family: inherit;
}

#products .spot-heading,
#guide .spot-heading {
    margin-bottom: clamp(32px, 4vw, 54px);
}

#products .spot-heading__en,
#guide .spot-heading__en {
    letter-spacing: .13em;
}

/* =================================================================== */
/* 取扱商品 */
/* =================================================================== */
.secP {
    padding-block: clamp(60px, 8vw, 110px);
    background-color: white !important;
}
.section-topline {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: end;
    margin-bottom: 32px;
}
.small-note {
    font-size: 13px;
    color: var(--muted);
}
.product-index {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border: 1px solid var(--rule);
    margin-bottom: 20px;
}
.product-index li + li {
    border-left: 1px solid var(--rule);
}
.product-index a {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 20px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}
.product-index a:hover {
    background: var(--paper);
}
.product-index span {
    color: var(--main-color);
}
.product {
    padding-block: clamp(38px, 5vw, 62px);
    border-bottom: 1px solid var(--rule);
}
.product-heading {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 24px;
    margin-bottom: 10px;
}
.product-number {
    font: 48px/1 Arial, sans-serif;
    color: var(--main-color);
    border-right: 1px solid var(--rule);
    padding-right: 24px;
}
.product-heading hgroup > p {
    font: 12px/1.5 Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted);
    margin-bottom: 5px;
}
.product-heading h3 {
    font-size: clamp(24px, 3vw, 32px);
    color: var(--ink);
    line-height: 1.4;
}
.product-body {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(28px, 5vw, 70px);
    align-items: start;
}
.product-copy h4 {
    font-size: clamp(18px, 1.8vw, 22px);
    color: var(--ink);
    line-height: 1.65;
    margin-bottom: 15px;
}
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.product-copy__title img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
}
.product-copy > p {
    font-size: 16px;
}
.product-details {
    margin: 24px 0 0;
    padding: 20px 24px;
    background: #f1f3f7;
    font-size: 14px;
}
.product-details > div + div {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--rule);
}
.product-details dt {
    color: var(--main-color);
    font-weight: 700;
    margin-bottom: 5px;
}
.product-details dd {
    margin: 0;
    line-height: 1.85;
}
.product-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-content: start;
}
.product-gallery__item {
    display: block;
    min-width: 0;
    background: #f7f8fa;
    border: 1px solid #eceef2;
    padding: 18px 18px 0;
}
.product-gallery__item:first-child:nth-last-child(3) {
    grid-column: 1 / -1;
}
.product-gallery__item img {
    width: 100%;
    height: 190px;
    object-fit: contain;
}
.product-gallery__item > span {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding-block: 13px;
    font-size: 13px;
    color: var(--muted);
}
.product-gallery__item > span > span {
    color: var(--main-color);
}

/* 5枚：上段2枚・下段3枚。文章側との高さを揃えやすいコンパクトな表示 */
.product-gallery:has(> .product-gallery__item:nth-child(5):last-child) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}
.product-gallery__item:first-child:nth-last-child(5),
.product-gallery__item:first-child:nth-last-child(5) ~ .product-gallery__item {
    grid-column: span 2;
    padding: 10px 10px 0;
}
.product-gallery__item:first-child:nth-last-child(5),
.product-gallery__item:first-child:nth-last-child(5) + .product-gallery__item {
    grid-column: span 3;
}
.product-gallery__item:first-child:nth-last-child(5) img,
.product-gallery__item:first-child:nth-last-child(5) ~ .product-gallery__item img {
    height: clamp(80px, 8vw, 110px);
}
.product-gallery__item:first-child:nth-last-child(5) > span,
.product-gallery__item:first-child:nth-last-child(5) ~ .product-gallery__item > span {
    gap: 3px;
    padding-block: 8px;
    font-size: 12px;
    line-height: 1.5;
}

/* 元画像に合わせたグリッド幅と余白 */
#products {
    background: transparent !important;
}

#products ul {
    padding: 0;
    list-style: none;
}

#products .product-index {
    margin-bottom: 20px;
    min-width: 0;
}

#products .product-number {
    line-height: 1;
}

#products .product-heading hgroup > p {
    line-height: 1.5;
    letter-spacing: .12em;
}

#products .product-gallery,
#products .product-body > *,
#products .product-gallery > * {
    min-width: 0;
}

#products .product-gallery__item:only-child {
    grid-column: 1 / -1;
}

#products .product-gallery__item:only-child img {
    height: clamp(230px, 25vw, 350px);
}

@media only screen and (max-width: 967px) {
    #products .section-topline,
    #products .product-body {
        grid-template-columns: 1fr;
    }

    #products .section-topline {
        gap: 12px;
    }

    #products .product-index {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #products .product-index li:nth-child(3),
    #products .product-index li:nth-child(5) {
        border-left: 0;
    }

    #products .product-index li:nth-child(n+3) {
        border-top: 1px solid var(--rule);
    }

    #products .product-index a {
        padding: 16px 10px;
        font-size: 13px;
        gap: 3px;
    }
	
    #products .product {
        scroll-margin-top: 35px;
    }


    #products .product-gallery__item img {
        height: 160px;
    }

    #products .product-gallery__item:first-child:nth-last-child(5) img,
    #products .product-gallery__item:first-child:nth-last-child(5) ~ .product-gallery__item img {
        height: clamp(80px, 8vw, 110px);
    }

    #products .product-gallery__item:first-child:nth-last-child(3) img {
        height: 210px;
    }

    #products .product-gallery__item {
        padding: 12px 12px 0;
    }

    /* 5点セットは上段2点・下段3点で表示 */
    #products .product-gallery__item:first-child:nth-last-child(5),
    #products .product-gallery__item:first-child:nth-last-child(5) ~ .product-gallery__item {
        padding: 10px 10px 0;
    }
}

/* =================================================================== */
/* ご注文ガイド */
/* =================================================================== */
.secF {
    background: var(--paper);
    padding-block: clamp(60px, 7vw, 100px);
}
.flow-list {
    margin-top: 35px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.flow-list > li {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 24px;
    padding: 30px;
    background: white;
}
.flow-number {
    font: 11px/1.4 Arial, sans-serif;
    color: var(--main-color);
    letter-spacing: .06em;
}
.flow-number b {
    display: block;
    font-size: 37px;
    font-weight: 400;
}
.flow-list h3 {
    font-size: 20px;
    color: var(--ink);
    margin-bottom: 10px;
}
.flow-list p {
    font-size: 15px;
}
.flow-list small {
    display: block;
    font-size: 13px;
    color: var(--muted);
    margin-top: 8px;
}
.pdf-link {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 28px;
    align-items: center;
    border: 1px solid var(--main-color);
    padding: 26px 32px;
    margin-top: 35px;
    background: #fff;
    color: var(--main-color);
}
.pdf-link__icon {
    font: 16px/1 Arial, sans-serif;
    border: 1px solid currentColor;
    padding: 19px 10px;
}
.pdf-link strong {
    display: block;
    font-size: 19px;
}
.pdf-link small {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    color: var(--muted);
}
.pdf-link__arrow {
    font-size: 26px;
}

/* 注文フローとPDFバナーの横はみ出し防止 */
#guide ol {
    padding: 0;
    margin: 0;
    list-style: none;
}

#guide .flow-list {
    margin-top: 35px;
    min-width: 0;
}

#guide .pdf-link {
    min-width: 0;
}

#guide .pdf-link strong {
    font-weight: 400;
}

#guide .flow-list > li,
#guide .flow-list > li > *,
#guide .pdf-link > * {
    min-width: 0;
}

@media only screen and (max-width: 767px) {
    #guide .flow-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    #guide .flow-list > li {
        grid-template-columns: 45px minmax(0, 1fr);
        gap: 16px;
        padding: 24px 20px;
    }

    #guide .pdf-link {
        padding: 20px 16px;
        gap: 13px;
    }

    #guide .pdf-link strong {
        font-size: 16px;
    }

    #guide .pdf-link small {
        font-size: 13px;
    }

    #guide .pdf-link__icon {
        font-size: 12px;
        padding: 17px 7px;
    }
}

/* =================================================================== */
/* よくある質問 */
/* =================================================================== */
.faq_sec1 {
    padding: var(--v-space2) 0 var(--v-space);
    background-color: #fff;

    position: relative;
    z-index: 1;
}

.faq-item {
    display: grid;
    grid-template-columns: 1.5em 1fr;
    column-gap: 10px;
    row-gap: 5px;
}

.faq-label {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    font-size: 110%;
    line-height: 1.5;
    border-radius: 3px;
    width: 1.5em;
    text-align: center;
    align-self: start;
    /* ラベルを上揃え */
}

.faq-label.q {
    background-color: var(--main-color);
}

.faq-label.a {
    background-color: var(--sub-color);
}

.faq-question,
.faq-answer {
    margin: 0;
    line-height: 1.6;
    text-align: justify;
}

.faq-question {
    font-weight: bold;
}

hr.faqHr {
    height: 0px;
    border: 1px dashed var(--accent-color2);
    margin: 20px auto;
}

/* =================================================================== */
/* 会社案内 */
/* =================================================================== */
.info_sec1 {
    padding: var(--v-space2) 0 var(--v-space);
    background-color: #FFF;
    background-image: url(../img/bg_01.jpg);
    background-size: cover;
    background-position: bottom;

    position: relative; /* sectionの位置を相対的にする*/
    z-index: 1; /* 背景画像より上に表示 */
}

.info_sec1::before {
    content: "";
    position: absolute;
    inset: 0; /* top:0;right:0;bottom:0;left:0 */
    background-color: rgba(255, 255, 255, 0.6); /* 白を60%透過 */
    z-index: -1; /* 背景の下に置く */
}

/* 概要・アクセス部分のテーブル */
.info1 {
    font-weight: bold;
    border-bottom: 1px dashed var(--accent-color2);
    padding: 5px;
    width: 5.25em;
    line-height: 1.5;
    letter-spacing: 0.06em;
}
.info2 {
    border-bottom: 1px dashed var(--accent-color2);
    padding: 5px;
    width: 400px;
    line-height: 1.5;
    letter-spacing: 0.06em;
}
@media screen and (max-width: 568px) {
    .info1 {
        display: block;
        padding: 8px 2px 2px 2px;
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0);
    }
    .info2 {
        display: block;
        padding: 2px;
        width: 99%;
    }
}

/*会社概要*/
.bg_b {
    background: rgba(255, 255, 255, 0.9);
    padding: 40px;
    border-radius: 20px;
}
@media screen and (max-width: 568px) {
    .bg_b {
        padding: 20px;
    }
}

/* =================================================================== */
/* アクセス */
/* =================================================================== */
.access_sec1 {
    padding: var(--v-space2) 0 2em;
    background-color: #FFF;

    position: relative; /* sectionの位置を相対的にする*/
    z-index: 1; /* 背景画像より上に表示 */
}

/* アクセス部分のテーブル */
.access1 {
    font-weight: bold;
    border-bottom: 1px dashed var(--accent-color2);
    padding: 5px;
    width: 5.25em;
}
.access2 {
    border-bottom: 1px dashed var(--accent-color2);
    padding: 5px;
    width: 400px;
    line-height: 1.5;
    letter-spacing: 0.06em;
}

@media screen and (max-width: 568px) {
    .access1 {
        display: block;
        padding: 8px 2px 2px 2px;
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0);
    }
    .access2 {
        display: block;
        padding: 2px;
        width: 99%;
    }
}