@import url('https://fonts.googleapis.com/css2?family=Barlow&display=swap');

/* company: 共通ヘッダー/フッターを使う固定ページ。
   本文は標準ブロック（見出し・段落・画像・カラム・テーブル）で編集するため、CSSは
   Gutenbergの標準マークアップに「追加CSSクラス」で付与したクラス名を組み合わせて対象を絞る。 */
.entry-content > .wp-block-group,
main .wp-block-group.co-greeting,
main .wp-block-group.co-movie,
main .wp-block-group.co-map,
main .wp-block-group.co-info {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}
.co-greeting > *, .co-movie > *, .co-map > *, .co-info > * {
  max-width: 1040px; margin-left: auto; margin-right: auto;
}

.article h2.co-heading { margin-top: 0; margin-bottom: 32px; padding: 0; border: none; background: none; font-family: "Shippori Mincho B1", serif; font-size: 40px; font-weight: 400; line-height: 1.4; letter-spacing: .2em; color: #333; text-align: left; }
.article .co-greeting p { font-family: "Noto Serif JP", serif; font-size: 18px; font-weight: 500; line-height: 1.6; color: #333; }
.article :is(.co-greeting, .co-movie, .co-map, .co-info) > p { margin-left: auto; margin-right: auto; }
.co-movie h2.co-heading, .co-map h2.co-heading { font-size: 55px; font-weight: 500; letter-spacing: .1em; }


/* ===== 代表挨拶 ===== */
.co-greeting { padding: 60px 24px; }
.body .co-greeting-row { gap: 24px; align-items: center; }
.co-greeting-row > .wp-block-column:first-child { flex: 0 1 561px; }
.co-greeting-row > .wp-block-column:last-child { flex: 0 1 455px; }
.co-greeting-row p { line-height: 2; margin: 0 0 20px; }
.co-greeting-row img { width: 100%; height: auto; border-radius: 4px; }

/* ===== Movie / Map =====
   CocoonはコンテンツHTML内のyoutube.com/vimeo等のiframeを問答無用で
   .video-container > .video で自動ラップする(lib/medias.php wrap_iframe_in_div)。
   このラッパーは幅640pxに固定されるため、iframeをposition:absoluteでラッパーごと
   ぶち抜いて親要素のサイズに追従させる（front-page.cssの.tg-movie-frameと同じ手法）。 */
.co-movie, .co-map { padding: 60px 24px; background: #f6f6f6; }
.article .entry-content > .co-movie { margin-bottom: 0; }
.co-movie-embed, .co-map-embed { position: relative; margin: 0 auto; }
.co-movie-embed { width: 75%; max-width: 780px; aspect-ratio: 16 / 9; }
.co-map-embed { width: 100%; max-width: 979px; height: 443px; }
/* .video-container/.videoはposition:relative・max-width:640pxを持つため、
   このスコープ内では無効化してco-movie-embed/co-map-embedを直接の位置基準にする */
.co-movie-embed .video-container, .co-map-embed .video-container,
.co-movie-embed .video, .co-map-embed .video {
  position: static; max-width: none; width: 100%; height: 100%; padding-bottom: 0; margin: 0;
}
.co-movie-embed iframe, .co-map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.co-map-sub { display: inline-block; margin-left: 24px; font-size: 20px; letter-spacing: 0; color: #333; }

/* ===== 会社概要テーブル ===== */
.co-info { padding-top: 80px; padding-bottom: 80px; }
.article h2.co-info-title { margin: 0; padding: 0; border: none; background: none; font-family: "Noto Sans JP", sans-serif; font-size: 34px; font-weight: 700; line-height: 1.4; color: #333; text-align: center; }
.article .co-info-en { margin-bottom: 48px; font-family: "Barlow", sans-serif; font-size: 20px; line-height: 1.4; color: #fe2c55; text-align: center; }
.main .co-info figure.co-info-table { max-width: 800px; margin: 0 auto; padding: 0; }
.article .co-info-table table { width: 100%; margin: 0; border: none; border-collapse: collapse; background: none; }
.article .co-info-table tr { border-bottom: 1px solid #d7d7d7; background: none; }
.article .co-info-table td { padding: 27px 16px; border: none; background: none; font-family: "Noto Sans JP", sans-serif; font-size: 16px; line-height: 1.7; letter-spacing: .03em; color: #171717; vertical-align: middle; }
.article .co-info-table td:first-child { width: 240px; color: #7a7a7a; }

@media screen and (max-width: 834px) {
  .body .co-greeting-row { flex-direction: column-reverse; }
  .co-greeting-row > .wp-block-column { flex-basis: auto; width: 100%; }
  .main .co-info figure.co-info-table { max-width: none; width: 88vw; margin: 0 calc(50% - 44vw); }
  .article .co-info-table :is(tr, td) { display: block; }
  .article .co-info-table td { padding: 10px 16px; font-size: 14px; line-height: 2; }
  .article .co-info-table td:first-child { width: auto; }
}

@media screen and (max-width: 540px) {
  .co-info { padding-top: 36px; padding-bottom: 36px; }
  .article h2.co-info-title { font-size: 24px; }
  .article .co-info-table td { font-size: 13px; }
  .article .co-info-table td:last-child { padding-top: 26px; }
}