@charset "UTF-8";
/* ========================================
   Lien café STAYGOLD - company.css
   会社概要ページ
======================================== */

/* セクション構造を他ページ（shop.phpなど）と揃え、外側（.section--pad）=パディング、
   内側（.inner）=max-width・中央寄せの役割分担にしている（common.cssの.section--pad参照）。
   ※ .inner--narrow（固定880px）を付与しているので、ここでの上書きは不要。 */

.owner-intro {
    position: relative;
    padding: 3rem 2rem;
    /* 白い紙目テクスチャ（white-bg.webp）を敷く。.link-panelなど他のカードと同じ作り。
       ※ .owner-intro自体はmax-width: 30remなどの自前の幅制限を持たないので、.link-panelのような768〜1199pxだけcoverに
         切り替える必要はなく、常に600px幅のタイルのままでよい。 */
    background-color: var(--color-bg);
    background-image:
        url('../images/white-bg.webp'),
        var(--img-placeholder);
    background-size: 600px auto, auto;
    background-repeat: repeat, repeat;
    background-position: center, center;
    border-radius: var(--radius-lg);
    /* 落ち影は付けない方針。カードの輪郭は::beforeのゴールドの内枠と、
       地のベージュ（section--light）との明度差だけで見せる（下の会社情報テーブルも影なし）。 */
    text-align: center;
    overflow: hidden;
}

.owner-intro::before {
    content: '';
    position: absolute;
    inset: 0.75rem;
    z-index: 1;
    border: 1px solid rgba(191, 160, 106, 0.45);
    border-radius: calc(var(--radius-lg) - 0.75rem);
    pointer-events: none;
}

/* オーナー会社（株式会社Lien）とショップ（Lien café STAYGOLD）の2つのロゴを、
   間にシンプルな縦のゴールドラインを入れて区切って並べる。
   ※ 常時横並び・中央揃え（画面幅に関係なく行を変えない）。
   ※ カード内の先頭要素なので上マージンは持たない（見出しはカードの外側にある）。 */
.owner-intro__logos {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-inline: auto;
}

/* ※ 画面が狭いときは元画像の縦横比を保ったまま縮小させる。
   heightを固定すると狭い幅で横にはみ出るので、width/heightをautoにして
   max-height（120px）とmax-width（親の幅）の両方に収まるようにする。
   両方を上限として指定すれば、ブラウザが縦横比を保ったまま小さい方に合わせてくれる。 */
.owner-intro__logo {
    flex: 0 1 auto;
    min-width: 0;
}

.owner-intro__logo-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 120px;
}

/* ロゴ同士の間の区切り線。高1pxのシンプルな横ライン。 */
.owner-intro__logos-divider {
    position: relative;
    display: block;
    flex-shrink: 0;
    /* 475px未満はロゴも小さくなるので、線も少し短くする（475px以上で 4rem に戻す）。 */
    width: 3.75rem;
    height: 1px;
    background-color: var(--color-gold);
    opacity: 0.6;
}

/* 線の両端に、少しすき間を空けて丸い点を置く。
   ※ 絶対配置なので、点を足しても線自体の幅（4rem）とロゴの位置は変わらない。
     点は左右の gap（1.25rem～2rem）の中に収まる。
   ※ 色は線と同じゴールド。親の opacity: 0.6 が疑似要素にもかかるので濃淡も揃う。 */
.owner-intro__logos-divider::before,
.owner-intro__logos-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--color-gold);
    transform: translateY(-50%);
}

.owner-intro__logos-divider::before {
    right: calc(100% + 0.25rem);
}

.owner-intro__logos-divider::after {
    left: calc(100% + 0.25rem);
}

.owner-intro__headline {
    margin-top: var(--spacing-md);
    font-family: var(--font-heading);
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.06em;
    text-align: center;
    color: var(--color-gold);
}

@media (min-width: 475px) {
    .owner-intro__logos-divider {
        width: 4rem;
    }
    .owner-intro__headline {
        font-size: 1.375rem;
    }
}

/* 576px未満だけ「人と人とがつながる場所を、/ 中野市に。」で改行させる。
   576px以上は1行に収まるので<br>を打ち消す。 */
.owner-intro__headline-br {
    display: inline;
}

@media (min-width: 576px) {
    .owner-intro__headline-br {
        display: none;
    }
}

.owner-intro__text {
    position: relative;
    margin: var(--spacing-sm) 0 0;
    font-size: 0.9375rem;
    line-height: 28.5px;
    text-align: left;
}

/* 本文の行下に細い罫線（原稿用紙風・ゴールドの破線）。
   行ピッチ（line-height）をpx固定にし、疑似要素をテキスト背面に重ねて
   mask二重がけで「行下端（縦）×破線（横）」の交わりだけを残す。
   参考：daiichi-printing の .sec-greeting__text と同じ手法。 */
.owner-intro__text::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-color: rgba(191, 160, 106, 0.35);
    -webkit-mask-image:
        linear-gradient(to bottom, transparent calc(28.5px - 1px), #000 0),
        repeating-linear-gradient(to right, #000 0 4px, transparent 4px 8px);
    mask-image:
        linear-gradient(to bottom, transparent calc(28.5px - 1px), #000 0),
        repeating-linear-gradient(to right, #000 0 4px, transparent 4px 8px);
    -webkit-mask-size: 100% 28.5px, 100% 100%;
    mask-size: 100% 28.5px, 100% 100%;
    -webkit-mask-repeat: repeat, repeat;
    mask-repeat: repeat, repeat;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.owner-intro__text strong {
    font-weight: 700;
    color: var(--color-primary-dark);
}

@media (min-width: 768px) {
    .owner-intro {
        padding: var(--spacing-xl) var(--spacing-lg);
    }
    .owner-intro__logos {
        gap: 2rem;
    }
    .owner-intro__headline {
        font-size: 1.75rem;
    }
    .owner-intro__text {
        font-size: 1rem;
        line-height: 32px;
    }

    .owner-intro__text::after {
        -webkit-mask-image:
            linear-gradient(to bottom, transparent calc(32px - 1px), #000 0),
            repeating-linear-gradient(to right, #000 0 4px, transparent 4px 8px);
        mask-image:
            linear-gradient(to bottom, transparent calc(32px - 1px), #000 0),
            repeating-linear-gradient(to right, #000 0 4px, transparent 4px 8px);
        -webkit-mask-size: 100% 32px, 100% 100%;
        mask-size: 100% 32px, 100% 100%;
    }
}

/* オーナー会社の紹介と同じセクション内に置くので、上のカードとの間隔は
   こちらが持つ（shop.phpの.shop-info-innerと同じ作り・同じ値）。 */
.company-profile-inner {
    margin-top: 4rem;
}

@media (min-width: 768px) {
    .company-profile-inner {
        margin-top: 5rem;
    }
}

.company-profile-inner .def-list {
    border-top: none;
    background-color: var(--color-white);
    background-image: url('../images/white-bg.webp');
    background-size: 600px auto;
    background-repeat: repeat;
    background-position: center;
    border: 1px solid rgba(191, 160, 106, 0.45);
    border-radius: var(--radius-lg);
    padding: 0;
    overflow: hidden;
}

/* 576px未満でもdt（見出し）とdd（内容）の横並びを維持する
   （共通の.def-rowは縦積みが既定なのでここで上書き。dtの幅は狭い画面でも
     項目名が収まるように6.5rem、576px以上で従来の9remに戻す。shop.phpの
     店舗情報テーブル・recruit.phpの募集要項テーブルと同じ作り）。 */
.company-profile-inner .def-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 0;
    border-bottom: 1px solid var(--color-border);
}

.company-profile-inner .def-row:last-child {
    border-bottom: none;
}

.company-profile-inner .def-row dt {
    flex: 0 0 6.5rem;
    display: flex;
    align-items: center;
    background-color: var(--color-bg-light);
    padding: 0.875rem 1rem;
    /* ロゴ（株式会社Lien）の青にちなんだ、彩度を押さえたスカイブルー。
       サイト全体の茶系・ベージュの背景に骋染むようにここだけのスコープ上書き。 */
    color: #5B94A8;
}

.company-profile-inner .def-row dd {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.875rem 1.25rem;
}

@media (min-width: 576px) {
    .company-profile-inner .def-row dt {
        flex: 0 0 9rem;
        padding: 0.875rem 1.25rem 0.875rem 1.75rem;
    }
}

@media (min-width: 768px) {
    .company-profile-inner .def-row dt {
        flex: 0 0 20%;
        padding: 1.125rem 1.5rem 1.125rem 2rem;
    }

    .company-profile-inner .def-row dd {
        padding: 1.125rem 1.5rem;
    }
}

.company-profile-inner .map-wrap {
    margin-top: 2rem;
}

@media (min-width: 768px) {
    .company-profile-inner .map-wrap {
        margin-top: 2.5rem;
    }
}