/*
Theme Name: deliver
Theme URI: https://deliver.co.jp/
Author: 株式会社デリバー
Description: 株式会社デリバー コーポレートサイト用オリジナルテーマ
Version: 1.0.1
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: deliver
*/

/* 基本のスタイルは assets/css/style.css（assets/scss からビルド）。
   ここは管理画面のテーマエディターから直す小さな調整用（assets/css/style.css の後に読み込み）。 */
@media screen and (min-width: 1024px) {
	.p-row__label { flex-basis: clamp(180px, 16vw, 260px); }
	.p-row__body { max-width: 1040px; }
	.p-row--stack .p-row__body, .p-news, .p-profile, .p-contact, .p-row--box { max-width: 1040px; }
	.p-values__body { max-width: 820px; }
}

/* フッターの上の余白 */
.p-footer { margin-top: clamp(48px, 6vw, 96px); padding-top: 32px; }
@media screen and (max-width: 767px) {
	body:has(.p-container[data-barba-namespace="home"]) .p-footer { margin-top: 0; padding-top: 16px; }
}

/* 「問い合わせを、増やしたい。」などは、PCでも折りたたみ */
@media screen and (min-width: 768px) {
	.p-goals, [data-slug="service"] .p-goals { gap: 0; }
	.p-goals__item { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: 48px; border-bottom: 1px solid var(--ink); }
	.p-goals__item:first-child { border-top: 1px solid var(--ink); }
	.p-goals__body { display: contents; }
	.p-goals__title { grid-column: 1 / -1; }
	.p-goals__toggle { position: relative; padding: 28px 48px 28px 0; pointer-events: auto; cursor: pointer; }
	.p-goals__toggle::before, .p-goals__toggle::after { content: ""; position: absolute; top: 50%; right: 4px; width: 16px; height: 1px; background: currentColor; transition: transform .25s; }
	.p-goals__toggle::after { transform: rotate(90deg); }
	.p-goals__toggle[aria-expanded="true"]::after { transform: rotate(0); }
	.p-goals__item .p-goals__text, .p-goals__item .p-goals__means { display: none; }
	.p-goals__item.is-open .p-goals__text, .p-goals__item.is-open .p-goals__means { display: block; }
	.p-goals__item.is-open .p-goals__text, [data-slug="service"] .p-goals__item.is-open .p-goals__text { margin: 0 0 32px; }
	.p-goals__item.is-open .p-goals__means { padding-bottom: 32px; }
}

/* モーダルの最後の「× 閉じる」 */
.c-modal__bottom { margin-top: 40px; text-align: center; }
.c-modal__bottom-close { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 160px; min-height: 52px; padding: 0 28px; border: 1px solid var(--ink); border-radius: 50%; background: transparent; color: var(--ink); font: inherit; font-weight: 500; font-size: 13px; cursor: pointer; transition: background .3s, color .3s; }
.c-modal__bottom-close:hover { background: var(--ink); color: var(--bg); }
.c-modal__bottom-x { position: relative; width: 12px; height: 12px; }
.c-modal__bottom-x::before, .c-modal__bottom-x::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: currentColor; transform: rotate(45deg); }
.c-modal__bottom-x::after { transform: rotate(-45deg); }

/* お知らせ記事のタイトル下の線は黒 */
.p-article__head { border-bottom-color: var(--ink); }

/* 「プライバシーポリシーに同意する」を中央に */
.p-form__agree .mwform-checkbox-field { display: inline-block; }
.p-form__agree .mwform-checkbox-field label { display: inline-flex; justify-content: center; }
.p-form__agree .horizontal-item, .p-form__agree .vertical-item { margin: 0 !important; }

/* ロゴはマークだけ */
.p-header__logo .c-logo { width: 34px; }
.p-footer__logo .c-logo { width: 30px; }
.p-menu__visual svg { width: 48px; }
@media screen and (max-width: 767px) { .p-header__logo .c-logo { width: 30px; } }

.p-form__agree .mwform-checkbox-field-text a { text-decoration: underline; text-underline-offset: 3px; }

/* ハンバーガーメニュー：メニュー一覧を左に、ロゴマークは小さく右下に */
.p-menu__inner { position: relative; }
.p-menu__main { order: -1; }
.p-menu__visual { position: absolute; right: clamp(32px, 6vw, 56px); bottom: 40px; margin: 0; }
.p-menu__visual svg { width: 26px; }
@media screen and (max-width: 767px) { .p-menu__inner { flex-direction: column; } .p-menu__visual { bottom: 24px; } }

/* 言語の切り替え：いま選んでいる言語は下線（黄色にはしない） */
.c-settings__lang .is-current { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ハンバーガー：開くボタン・閉じるボタン・言語切り替えの高さと右端をそろえる */
.p-menu__inner { padding-top: 24px; }
.p-menu__side { display: flex; align-items: flex-start; justify-content: flex-end; padding-right: 48px; }
.p-menu__close { top: 22px; right: calc(clamp(32px, 6vw, 56px) - 12px); }
.p-menu__close span { width: 24px; margin-left: -12px; transform: rotate(25deg); }
.p-menu__close span + span { transform: rotate(-25deg); }
.admin-bar .p-menu { top: 32px; }
.admin-bar .p-menu__close { top: 54px; }
@media screen and (max-width: 782px) { .admin-bar .p-menu { top: 46px; } .admin-bar .p-menu__close { top: 60px; } }
@media screen and (max-width: 767px) {
	.p-header { padding-top: 16px; }
	.p-menu__inner { padding-top: 14px; }
	.p-menu__close { top: 14px; }
	.p-menu__side { justify-content: flex-start; padding-right: 0; }
}

/* PC：本文の右端をそろえる（どのセクションも同じ幅に収める） */
@media screen and (min-width: 1024px) {
	.p-row { max-width: 1320px; }
	.p-row__body, .p-row--stack .p-row__body { max-width: none; }
	.p-row--box { max-width: 1320px; }
}

/* スマホでも「まずは、お気軽にご相談ください。」の枠は中央そろえ */
@media screen and (max-width: 767px) {
	.p-row--box, .p-row--box.p-row--center { align-items: center; text-align: center; }
}

/* ロゴ：マウスを乗せても動かさない（薄くもしない） */
.p-header__logo:hover, .p-header__logo:hover .c-logo { opacity: 1; animation: none; }

/* PCのトップも、DELIVER〜Our Mission〜フッターを最初の画面に収める */
@media screen and (min-width: 768px) {
	body:has(.p-container[data-barba-namespace="home"]) { display: flex; flex-direction: column; min-height: 100vh; }
	.admin-bar:has(.p-container[data-barba-namespace="home"]) { min-height: calc(100vh - 32px); }
	body:has(.p-container[data-barba-namespace="home"]) .p-layout,
	body:has(.p-container[data-barba-namespace="home"]) .p-main,
	body:has(.p-container[data-barba-namespace="home"]) .p-container { display: flex; flex: 1 0 auto; flex-direction: column; }
	body:has(.p-container[data-barba-namespace="home"]) .p-layout { flex-direction: row; }
	body:has(.p-container[data-barba-namespace="home"]) .p-hero { flex: 1 1 auto; min-height: 0 !important; padding: 8px 0 clamp(24px, 4vh, 48px); }
	body:has(.p-container[data-barba-namespace="home"]) .p-hero__title { font-size: min((100vw - 2 * clamp(32px, 6vw, 56px) - 160px) / 4.77, 34vh); }
	body:has(.p-container[data-barba-namespace="home"]) .p-row { padding-bottom: clamp(24px, 4vh, 48px); }
	body:has(.p-container[data-barba-namespace="home"]) .p-mission__text { margin-top: 16px; line-height: 2; }
	body:has(.p-container[data-barba-namespace="home"]) .u-mt40 { margin-top: 24px; }
	body:has(.p-container[data-barba-namespace="home"]) .c-btn { min-height: 56px; }
	body:has(.p-container[data-barba-namespace="home"]) .p-footer { margin-top: 0; padding-top: 16px; padding-bottom: 24px; }
}

/* Recruit の募集職種も、PCで折りたたみ（「Jobs」と文字の頭・高さをそろえる） */
@media screen and (min-width: 768px) {
	.p-jobs { gap: 0; }
	.p-jobs__item { border-bottom: 1px solid var(--ink); }
	.p-jobs__title { line-height: 1.6; }
	.p-jobs__item .p-goals__toggle { padding: 0 48px 24px 0; }
	.p-jobs__item .p-goals__toggle::before, .p-jobs__item .p-goals__toggle::after { top: .8em; }
	.p-jobs__item .p-jobs__panel { display: none; padding-bottom: 32px; }
	.p-jobs__item.is-open .p-jobs__panel { display: block; }
	.p-jobs__lead { margin-top: 0; }
}

/* フッターのロゴは、マーク＋DELIVER（回るアニメーションはなし） */
.p-footer__logo .c-logo--full { width: 130px; animation: none !important; }
.c-logo--full polygon { animation: none !important; }

/* 中身が少ないページでも、フッターを画面の下につける */
body { display: flex; flex-direction: column; min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px)); }
.p-layout { flex: 1 0 auto; }

/* PC：News・Contact も、ほかのページと右端をそろえる */
@media screen and (min-width: 1024px) {
	.p-news, .p-contact, .p-article { max-width: 880px; } /* お知らせ・お問い合わせは広げすぎず固定幅 */
	.p-form__label { flex-basis: clamp(200px, 16vw, 260px); }
	.c-newslist time { flex-basis: clamp(90px, 9vw, 140px); }
}

/* 「大切にしている4つのこと」：見出しとカードの文字の頭を、ほかのセクション（Our Vision など）とそろえる */
@media screen and (min-width: 768px) {
	.p-values { --v-left: calc(clamp(32px, 6vw, 56px) + 160px); --v-label: 200px; --v-body: calc(var(--v-left) + var(--v-label) + 64px);
		display: grid; grid-template-columns: var(--v-left) var(--v-label) 64px minmax(0, 1fr); }
	.p-values__label { grid-column: 2; grid-row: 1; padding: 0; }
	.p-values__heading { grid-column: 4; grid-row: 1; margin-top: 0; padding: 0 clamp(32px, 6vw, 56px) 0 0; text-align: left; }
	.p-values__list { grid-column: 1 / -1; grid-row: 2; }
	.p-values__item:nth-child(odd) { padding-left: var(--v-body); }
	.p-values__item:nth-child(even) { padding-left: calc(var(--v-body) - clamp(16px, 6vw, 96px)); }
}
@media screen and (min-width: 1024px) {
	.p-values { --v-label: clamp(180px, 16vw, 260px); }
}

/* PC：メニューとコンテンツの間、コンテンツの始まりをゆったり */
@media screen and (min-width:1024px){.p-layout{column-gap:clamp(40px,4.5vw,120px)}body:not(:has(.p-container[data-barba-namespace=home])) .p-main{padding-top:clamp(16px,2.2vw,48px)}}
/* フッターは右揃え */
.p-footer, .p-footer__links { justify-content: flex-end; }
.p-footer__links { text-align: right; }
/* トップの DELIVERIZATION!! は、流れる間ずっと合成レイヤーで動かす（引っかかり防止） */
.p-hero__word { will-change: transform; }
/* コンテンツ幅が中身（大きな DELIVER の文字）に押し広げられないように */
.p-main { flex: 1 1 0%; min-width: 0; max-width: 100%; }
.p-container, .p-hero { min-width: 0; max-width: 100%; }
.p-hero { contain: inline-size; }
/* つくって、終わりにしない。の下の線：スマホは専用の大きな絵で、線は点までつなげて描く */
.c-flight__svg--sp { display: none; }
.c-flight__trail { stroke-width: 1px; vector-effect: non-scaling-stroke; } /* 画面の大きさにかかわらず線は1px */
@media screen and (max-width: 767px) {
	.c-flight__svg:not(.c-flight__svg--sp) { display: none; }
	.c-flight__svg--sp { display: block; }
}
/* スマホ：「大切にしている4つのこと」のカードの左右をゆったり */
@media screen and (max-width: 767px) {
	.p-values__item:nth-child(odd), .p-values__item:nth-child(even) { padding-left: 32px; padding-right: 48px; }
}
/* 線の先は紙飛行機（進む向きに合わせて向きが変わる） */
.c-flight__wing { fill: var(--ink); stroke: var(--ink); stroke-width: 1px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.c-flight__wing--fold { fill: var(--bg); }
/* 「大切にしている4つのこと」がページの最後のときは、フッターまでの余白をつめる */
.p-container > .p-values:last-child { margin-bottom: 0; }
/* どのページも、最後のかたまりのあとは余白をつめて、すぐフッターへ */
.p-container > :not(dialog):not(:has(~ :not(dialog))) { margin-bottom: 0 !important; }
.p-container > :not(dialog):not(.p-row--box):not(.p-values):not(.p-process):not(:has(~ :not(dialog))) { padding-bottom: 0 !important; }
/* 黄色の帯（Process・4つのこと）で終わるページは、帯のすぐ下にフッター */
body:has(.p-container > section:is(.p-process, .p-values):last-of-type) .p-footer { margin-top: 0 !important; padding-top: 32px; }
/* トップ：Our Mission を少し上げて、フッターとの間をあける */
body:has(.p-container[data-barba-namespace="home"]) .p-container[data-barba-namespace="home"] > .p-row { margin-bottom: clamp(64px, 12vh, 140px) !important; }
@media screen and (max-width: 767px) {
	body:has(.p-container[data-barba-namespace="home"]) .p-container[data-barba-namespace="home"] > .p-row { margin-bottom: clamp(32px, 6vh, 56px) !important; }
}
/* Google 翻訳：上に出るバーや吹き出し、訳した文字のハイライトは出さない */
iframe.skiptranslate, .goog-te-banner-frame, .VIpgJd-ZVi9od-ORHb-OEVmcd, #goog-gt-tt, .goog-te-balloon-frame, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf { display: none !important; }
html.is-translated body { top: 0 !important; position: static; }
.goog-text-highlight, font[style] { background: none !important; box-shadow: none !important; }
/* 日本語は文節の途中で折り返さない（対応ブラウザ）。行末に1〜2文字だけ残るのも避ける */
html:lang(ja) body { word-break: auto-phrase; }
html:lang(ja) :is(p, li, dd, h2, h3) { text-wrap-style: pretty; }
/* フォーカスの黒枠：マウスやタップのときは出さず、キーボード（Tab）で操作しているときだけ細く出す */
html:not(.is-keyboard) :focus, html:not(.is-keyboard) :focus-visible { outline: none !important; }
html.is-keyboard :focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
main:focus, main:focus-visible, [tabindex="-1"]:focus, dialog:focus, dialog:focus-visible { outline: none !important; }
/* 多言語のURL：訳し終わるまで隠して、日本語が一瞬見えないように */
html.is-gt-pending body { opacity: 0; animation: gt-reveal .3s 5s forwards; } /* 万一スクリプトが動かなくても5秒で表示 */
@keyframes gt-reveal { to { opacity: 1; } }
html.is-gt-ready body { transition: opacity .3s ease; }
/* 左上のロゴマークの左端を、左メニューの文字（Top など）の頭とそろえる */
@media screen and (min-width: 768px) {
	.p-header__logo { margin-left: 15px; }
}
/* トップの DELIVER は、画面に合わせた大きさが決まってから表示する */
[data-hero-type]:not(.is-fitted) { visibility: hidden; }
/* ダークモード：「大切にしている4つのこと」は、カードを線だけにする */
[data-theme="dark"] .p-values { background: var(--bg); color: var(--ink); }
[data-theme="dark"] .p-values__item { background: transparent; border-color: var(--ink); color: var(--ink); }