/* ================================================== */
/* 千葉土建とは */
/* ================================================== */

/* 見出し */
.page-title { margin-bottom:24px; }

/* リード文 */
.entry-content { background-color:#fff0cd; padding:10px 16px; }

@container(min-width:960px) {

/* 見出し */
.page-title { margin-bottom:40px; }

/* リード文 */
.entry-content { padding:24px; }

}

/* ================================================== */
/* 千葉土建Youtube */
/* ================================================== */

/* ベース */
.introduction-movie { display:flex; flex-direction:column; gap:16px; margin:56px auto; }

/* 動画 */
.movie { aspect-ratio:16/9; margin:auto; height:auto; max-width:calc( 100% - 20px ); }
.movie iframe { height:100%; width:100%; }

@container(min-width:960px) {

/* ベース */
.introduction-movie { margin:80px auto; }

/* 動画 */
.movie { max-width:574px; width:100%; }

/* チャンネルを見るボタン */
.more-button a { width:242px; }

}

/* ================================================== */
/* ショートヒストリー */
/* ================================================== */

/* ベース */
.history-content { margin:auto; margin-bottom:56px; max-width:calc( 100% - 40px ); }

/* 見出し */
.history-content h2 { margin-bottom:10px; }
.history-content .sub-title { font-size:16px; font-weight:400; text-align:center; line-height:28px; margin-bottom:24px; }

/* 年表 */
.history-list { --dot:8px; --lh:28px; --line-w:2px; --row-gap:24px; --year-w:3.5em; display:grid; font-size:16px; gap:var(--row-gap) 8px; grid-template-columns:var(--year-w) 1fr; line-height:var(--lh); position:relative; }

/* 縦線 */
.history-list::before { background-color:var(--gray); content:""; position:absolute; left:calc( var(--year-w) - var(--dot) / 2 ); top:calc( var(--lh) / 2 ); bottom:0; translate:calc( var(--line-w) / -2 ); width:var(--line-w); }

/* 年 */
.history-list dt { --size:var(--dot); align-items:flex-start; color:var(--bl); display:flex; justify-content:space-between; }

/* 円 */
.history-list dt::after { background-color:currentcolor; border-radius:50%; content:""; flex-shrink:0; margin-block-start:calc( ( var(--lh) - var(--size) ) / 2 ); margin-inline-end:calc( ( var(--dot) - var(--size) ) / 2 ); position:relative; height:var(--size); width:var(--size); }
.history-list dt:first-of-type { --size:17px; }

/* 内容 */
.history-list dd { font-weight:400; text-align:justify; }

/* 画像 */
.history-list dd img { border-radius:8px; display:block; margin-block-start:12px; width:100%; }

/* pc改行 */
.pc-br { display:none; }

@container(min-width:960px) {

/* ベース */
.history-content { max-width:890px; }

/* 見出し */
.history-content h2 { margin-bottom:8px; }
.history-content .sub-title { font-size:18px; font-weight:800; line-height:29px; margin-bottom:40px; }

/* 年表 */
.history-list { --dot:11px; --lh:29px; --row-gap:32px; font-size:18px; gap:var(--row-gap) 12px; }

/* 画像 */
.history-list dd img { margin-block-start:16px; max-width:480px; }

/* pc改行 */
.pc-br { display:inline; }

}

/* ================================================== */
/* 活動内容 */
/* ================================================== */

/* 色設定 */
.color-or-1 { color:#ea3a04; font-weight:700; }
.color-or { color:var(--or); }

/* ベース */
.activities-content { gap:24px; margin:auto; margin-bottom:56px; max-width:calc( 100% - 40px ); }

@container( min-width:960px ) {

/* ベース */
.activities-content { padding:40px 0; max-width:890px; }

/* テキスト */
.activities-content p { font-size:18px; }

}

/* ================================================== */
/* 綱領と規約 */
/* ================================================== */

/* ベース */
.p-a-b { background-color:var(--ye); gap:16px; justify-content:center; padding:40px 0; margin-bottom:56px; width:100%; }

/* リスト項目 */
.p-a-b a { align-items:last baseline; color:var(--wh); font-size:14px; gap:10px; justify-content:space-between; padding:16px 24px; }
.p-a-b li:first-child a { background-color:var(--gr); }
.p-a-b li:last-child a { background-color:var(--or); }
.p-a-b a .big-text { font-size:16px; font-weight:700; }

@container( min-width:960px ) {

/* ベース */
.p-a-b { padding:40px 0; margin:auto; margin-bottom:80px; max-width:890px; }

/* リスト項目 */
.p-a-b a { font-size:18px; font-weight:800; gap:16px; }
.p-a-b a .big-text { font-size:24px; font-weight:900; }

}

/* ================================================== */
/* アクセス */
/* ================================================== */

/* ベース */
.access-content { margin:auto; margin-bottom:56px; max-width:calc( 100% - 40px ); }

/* 見出し */
.access-content h2 { margin-bottom:24px; }
.access-info h3 { color:var(--bl); font-size:16px; line-height:1; margin-bottom:5px; }
.access-sub-title { display:block; font-size:12px; font-weight:600; line-height:22px; }

/* flex */
.access-block { gap:16px; }
.a-box { display:flex; flex-direction:column; gap:16px; }

/* マップ画像 */
.map-img { margin:auto; max-width:100%; }

/* 本部会館部分 */
.place, .address-box .tel, .address-box .fax, .address-box .color-or { font-size:16px; font-weight:400; line-height:28px; }
.place { align-items:last baseline; gap:8px; }
.map-link { align-items:center; background-color:var(--bl); border-radius:40px; color:var(--wh); display:flex; font-size:14px; font-weight:400; gap:4px; justify-content:center; transition:.3s; line-height:18px; height:22px; width:80px; }
.map-link:hover { opacity:0.7; transition:.3s; }

/* PDFリンク */
.address-frame .pdf-link { align-items:center; background-color:var(--or); color:var(--wh); display:flex; font-size:12px; font-weight:700; gap:8px; justify-content:center; line-height:14px; transition:.3s; margin-top:6px; height:40px; width:110px; }
.address-frame .pdf-link:hover { opacity:.7; transition:.3s; }

/* アクセスリスト */
.access-info-list { font-size:16px; font-weight:400; line-height:28px; }
.access-info-list li { display:grid; gap:0 .25em; grid-template-columns:auto 1fr; }
.access-info-list li::before { content:"●"; color:var(--bl); font-size:.75em; }

@container( min-width:960px ) {

/* ベース */
.access-content { padding:40px 0; margin-bottom:80px; max-width:890px; }

/* 見出し */
.access-info h3 { font-size:18px; margin-bottom:10px; }
.access-sub-title { font-size:14px; line-height:22px; }

/* flex */
.access-block.flex.flex-col { flex-direction:row; gap:30px; justify-content:center }
.a-box { flex:1; }

/* 本部会館部分 */
.place, .address-box .tel, .address-box .fax, .address-box .color-or { font-size:18px; line-height:29px; }
.map-link { font-size:14px; line-height:22px; }

/* PDFリンク */
.address-frame .pdf-link { font-size:16px; line-height:16px; letter-spacing:3.2px; }

}

/* ================================================== */
/* 採用情報はこちら＆ピーケンくん紹介リスト */
/* ================================================== */

/* リスト */
.button-list { gap:15px; justify-content:center; margin:auto; margin-bottom:56px; max-width:calc( 100% - 40px ); }
.button-list li a img { box-shadow:8px 8px 0 0 rgba(0, 0, 0, 0.25); display:block; transition:.3s; }
.button-list li a:hover img { box-shadow:0 0 0 0 transparent; transform:translate(8px,8px); transition:.3s; }

@container( min-width:960px ) {

/* リスト */
.button-list { gap:40px; margin-bottom:130px; max-width:890px; }
.button-list li a img { max-width:360px; width:100%; }

}