/*
Theme Name: monster-deri
Theme URI: https://monster-deri.com/
Description: モンスターデリのカスタム子テーマ
Author: administrator
Author URI: https://monster-deri.com/
Template: solaris_tcd088
Version: 1.0.0
Text Domain: monster-deri
Domain Path: /languages
*/

/* 親テーマのスタイルを読み込む */
@import url('../solaris_tcd088/style.css');

/* ここからカスタムCSSを追加 */

body #header_logo a {
	background-color: transparent;
}

body#body {
	background-color: #000;
}

h1, h2, h3, h4, h5, p, span {
	color: #fff;
	font-family: "Noto Sans JP", sans-serif !important;
    font-weight: 900 !important;
} 

h1, h2, h3, {
    font-size: clamp(2.5rem, 8vw, 5rem);
    line-height: 1.5;
}

/* ------------------------------
   カラー設定
------------------------------ */

.cb_service_list {
	background-color: #000 !important;
}

.design_button.type1 a {
	color: #e57302;
}

.item.slick-slide a,
.news_list .title a,
#bread_crumb li a,
#bread_crumb li:after,
#bread_crumb li.home a:before,
.post_content,
body.hide_header_image #header_search_button:before,
#header.active #header_search_button:before, body.header_fix #header_search_button:before {
	color: #fff;
}

body#body.hide_header_image #global_menu_button span, body#body.no_index_header_content #global_menu_button span {
	background: #fff;
}

.sns_button_list li.insta a,
.sns_button_list li a {
    width: 25px;
    color: #fff;
}

.category_list_widget li a .cat-name {
	color:#000;
}

#return_top2 a {
	background-color: #ddd;
}

.post_content .wp-block-table td, .post_content .wp-block-table th {
	background:transparent;
}

/* ------------------------------
   1) 固定ヘッダーの白背景を黒にする
------------------------------ */
.pc body.use_header_fix #header:after,
.pc body.use_header_fix #header:hover:after,
.mobile #header:after,
.mobile #header:hover:after,
.mobile body.home.no_index_header_content #header {
  background: rgba(0,0,0,1) !important;
}

#header.active #global_menu > ul > li > a, body.header_fix #global_menu > ul > li > a, body.single #global_menu > ul > li > a {
	color:#fff;
}

/* ------------------------------
   2) サブメニュー全体を黒背景・白文字に統一
------------------------------ */
#global_menu > ul > li.menu-item-has-children > ul.sub-menu,
#global_menu > ul > li.menu-item-has-children > ul.sub-menu li,
#global_menu > ul > li.menu-item-has-children > ul.sub-menu li a,
#global_menu > ul > li.menu-item-has-children > ul.sub-menu li a span {
  background: #000 !important;
  color: #fff !important;
}

/* ------------------------------
   3) サブメニュー hover 時はオレンジ
------------------------------ */
#global_menu > ul > li.menu-item-has-children > ul.sub-menu li:hover > a,
#global_menu > ul > li.menu-item-has-children > ul.sub-menu li:hover > a span,
#global_menu > ul > li.menu-item-has-children > ul.sub-menu li a:hover,
#global_menu > ul > li.menu-item-has-children > ul.sub-menu li a:hover span {
  background: #e57302 !important;
  color: #fff !important;
}

/* ------------------------------
   4) 親メニュー hover 時の文字色もオレンジに
------------------------------ */
#global_menu > ul > li:hover > a,
#global_menu > ul > li:hover > a span {
  color: #e57302 !important;
}

/* ------------------------------
   5) サブメニュー上部の三角も黒
------------------------------ */
#global_menu > ul ul > li:first-of-type > a:after {
  border-color: transparent transparent #000 transparent !important;
}

/* ------------------------------
   6) テーマ側の白背景対策の保険
------------------------------ */
#global_menu ul ul,
#global_menu ul ul:before,
#global_menu ul ul:after {
  background: #000 !important;
}

/* ------------------------------
   トップページ
------------------------------ */
/*トップビュー*/
#header_slider .item1 .catch {
    text-align: justify;
    margin: 0 200px;
}

#header_slider .desc p {
    text-align: justify;
    margin: 0 210px;
}

/* ---------- 0. Webフォント (太字の和文に差し替え) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700;900&family=Inter:wght@700;900&display=swap');

/* ---------- 1. 色変数 ---------- */
:root{
  --pm-bg:        #0a0a0a;
  --pm-bg-soft:   #141212;
  --pm-card:      #1b1411;
  --pm-card-2:    #221814;
  --pm-line:      rgba(255,107,26,.20);
  --pm-line-2:    rgba(255,107,26,.45);
  --pm-orange:    #FF6B1A;
  --pm-orange-2:  #FF8A3D;
  --pm-text:      #ffffff;
  --pm-muted:     rgba(255,255,255,.72);
  --pm-dim:       rgba(255,255,255,.55);
}

/* ---------- 2. ベースを黒×白に統一 ---------- */
html,body{
  background:var(--pm-bg) !important;
  color:var(--pm-text) !important;
  font-family:"Noto Sans JP","Inter",system-ui,sans-serif !important;
  font-feature-settings:"palt" !important;
}
body, body * { letter-spacing:.01em }
#wrapper, #container, #content, .l-wrapper, .l-main,
.entry, .entry-content, .single, .page, .home, .archive,
section, main, article{
  background:transparent !important;
  color:var(--pm-text) !important;
}

hr{border-color:rgba(255,255,255,.08) !important}

/* ---------- 3. リンク ---------- */
a{ color:#ffffff !important; transition:.15s }
a:hover{ color:var(--pm-orange) !important }
a.button, .btn, .more, .more_btn, .link_btn{ text-decoration:none !important }

/* ---------- 4. ヘッダー / ロゴ / グロナビ ---------- */
#header, .header, .l-header, #header_top, #header_bottom, #header_in{
  background:rgba(8,6,5,.92) !important;
  border-bottom:1px solid rgba(255,255,255,.05) !important;
  box-shadow:none !important;
}
#header *, .header *{ color:#fff !important }

header#header.active #global_menu_button span {background:#fff !important}

/* ロゴ画像が黒地で読みにくい時はフィルタで反転（任意・必要なら有効化） */
/* #logo img, .header_logo img, #header_logo img{ filter:brightness(0) invert(1) } */

/* グローバルナビ */
#global_nav, .gnav, #gnav, .global_nav, .header_nav, .menu-primary,
#header .menu, #header nav ul{
  background:transparent !important;
}
#global_nav a, .gnav a, #gnav a, .global_nav a, .header_nav a,
.menu-primary a, #header nav a{
  color:#eee !important;
  font-weight:700 !important;
  letter-spacing:.05em !important;
  font-size:14.5px !important;
}
#global_nav a:hover, .gnav a:hover, .global_nav a:hover,
.menu-primary a:hover, #header nav a:hover{
  color:var(--pm-orange) !important;
}
/* サブメニュー */
.sub-menu, .children, #global_nav ul ul, .gnav ul ul{
  background:#120e0b !important;
  border:1px solid var(--pm-line) !important;
}

/* ハンバーガー (モバイル) */
.menu_btn, #menu_btn, .hamburger, .drawer-menu *,
.menu_button span, .nav_button span{
  background-color:#fff !important;
}
.drawer-overlay, .drawer-menu, .mobile_menu{
  background:#0a0604 !important;
}

/* ---------- 5. メインビジュアル (ヒーロー) ---------- */
#main_visual, .main_visual, .mainvisual, .l-mv, .top_slider,
.swiper-container, .top-key{
  background:#0a0604 !important;
  position:relative;
}
#main_visual::after, .main_visual::after, .mainvisual::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.35) 100%);
}

/* リード文 */
#main_visual p, .main_visual p, .mainvisual p, .mv_sub, .top_lead{
  font-size:clamp(14px, 1.1vw, 16px) !important;
  line-height:2 !important;
  color:rgba(255,255,255,.85) !important;
  font-weight:500 !important;
}

/* セカンダリ (ghost) — 必要に応じてクラス名を実サイトに合わせてください */
.btn-ghost, .button.is-outline, .secondary_btn{
  background:transparent !important;
  color:#fff !important;
  border-color:#fff !important;
}
.btn-ghost:hover, .button.is-outline:hover, .secondary_btn:hover{
  background:#fff !important; color:#000 !important;
}

/* ---------- 8. カード / ボックス類 ---------- */
.card, .box, .cts_box, .content_box, .block, .item_box,
.item, .panel, .news_box, .post_box, .archive_box,
article.post, article.page, article.recipe, article.project,
.wp-block-group, .wp-block-column{
  background:linear-gradient(180deg,#1b110a 0%,#0c0805 100%) !important;
  border:1px solid var(--pm-line) !important;
  border-radius:10px !important;
  color:#fff !important;
  box-shadow:none !important;
  transition:.2s;
  overflow:hidden;
}
.card:hover, .box:hover, .cts_box:hover, .item_box:hover,
.news_box:hover, .post_box:hover, article.post:hover{
  border-color:var(--pm-line-2) !important;
  transform:translateY(-2px);
}
/* カード内テキスト */
.card *, .box *, .cts_box *, .item_box *, .news_box *,
article.post *, .wp-block-group *{ color:#fff !important }
.card p, .box p, .item_box p, .news_box p,
.card .excerpt, .post_excerpt{
  color:var(--pm-muted) !important;
  font-weight:500 !important;
  line-height:1.85 !important;
}
.card h3, .card h4, .item_box h3, .news_box h3,
.post_box .title, .archive_box .title{
  font-weight:900 !important;
  color:#fff !important;
  margin-bottom:12px !important;
}

/* ---------- 9. 日付 / カテゴリラベル ---------- */
.date, .post_date, .entry_date, time, .meta_date{
  color:var(--pm-dim) !important;
}
.category, .cat, .post_cat, .news_cat,
.cat-links a, .term-link, .tag-link{
  background: transparent !important;
    color: var(--pm-orange) !important;
    border: 1px solid var(--pm-line-2) !important;
    border-radius: 999px !important;
}

/* ---------- 10. セクション背景の差し色 ---------- */
.section, .content_block, .home_section, .top_section,
.l-section, .index-section{
  background:#000 !important;
  padding:80px 0 !important;
}
/* 2セクション目だけブラウン寄りにしたい場合は :nth-of-type で */
.section:nth-of-type(even), .home_section:nth-of-type(even){
  background:linear-gradient(180deg,#0a0604 0%,#150c08 100%) !important;
}

/* ---------- 11. アイキャッチ画像の枠 ---------- */
.thumb, .thumbnail, .post_thumb, .eye_catch, .featured_image,
.wp-post-image, .attachment-post-thumbnail{
  border-radius:8px !important;
  overflow:hidden;
}
/* 画像のオーバーレイ濃度 (PDF風に少し暗く) */
.thumb::after, .post_thumb::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.45) 100%);
  pointer-events:none;
}

/* ---------- 12. 商品/レシピ一覧 (TCD project系) ---------- */
.project_list .item, .recipe_list .item, .product_list .item,
.project_box, .recipe_box, .product_box{
  background:linear-gradient(180deg,#1a110a 0%,#0d0805 100%) !important;
  border:1px solid var(--pm-line) !important;
  border-radius:10px !important;
  overflow:hidden;
  margin:0;
  width: calc(50% - 13px);
}
.project_list .ttl, .recipe_list .ttl, .product_list .ttl,
.project_box .title, .recipe_box .title{
  color:#fff !important;
  font-weight:900 !important;
  padding:18px 22px 6px !important;
}

/* ---------- 13. テーブル / 引用 ---------- */
table{
  width:100%;
  border-collapse:collapse;
  background:#120c08 !important;
  border:1px solid var(--pm-line) !important;
}
th{
  background:#1d130c !important;
  color:var(--pm-orange) !important;
  border-bottom:1px solid var(--pm-line-2) !important;
  padding:14px 16px !important;
  text-align:left;
}
td{
  border-bottom:1px solid rgba(255,255,255,.06) !important;
  padding:14px 16px !important;
  color:#fff !important;
}
blockquote{
  border-left:3px solid var(--pm-orange) !important;
  background:#15100c !important;
  padding:18px 24px !important;
  margin:24px 0 !important;
  color:#fff !important;
  border-radius:0 8px 8px 0 !important;
}

/* ---------- 14. フォーム ---------- */
input[type=text], input[type=email], input[type=tel],
input[type=number], input[type=search], input[type=password],
input[type=url], textarea, select{
  background:#15100c !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:#fff !important;
  border-radius:6px !important;
  padding:12px 14px !important;
  width:100%;
  font:inherit;
}
input:focus, textarea:focus, select:focus{
  outline:none !important;
  border-color:var(--pm-orange) !important;
  box-shadow:0 0 0 3px rgba(255,107,26,.18) !important;
}
label{ color:#fff !important; font-weight:700 !important }
::placeholder{ color:rgba(255,255,255,.4) !important }

/* ---------- 15. パンくず / ページネーション ---------- */
.breadcrumb, .pankuzu, .breadcrumbs, #breadcrumb{
  background:#0d0806 !important;
  color:var(--pm-dim) !important;
  font-size:12px !important;
  padding:14px 0 !important;
  border-bottom:1px solid rgba(255,255,255,.04) !important;
}
.breadcrumb a, .pankuzu a{ color:#cfcfcf !important }
.breadcrumb a:hover, .pankuzu a:hover{ color:var(--pm-orange) !important }
.pagination a, .page-numbers, .wp-pagenavi a, .wp-pagenavi span{
  background:#15100c !important;
  border:1px solid rgba(255,255,255,.1) !important;
  color:#fff !important;
  padding:8px 14px !important;
  border-radius:4px !important;
  margin:0 3px !important;
  font-weight:700;
}
.page-numbers.current, .wp-pagenavi .current{
  background:var(--pm-orange) !important;
  color:#000 !important;
  border-color:var(--pm-orange) !important;
}

/* ---------- 16. フッター ---------- */
#footer, .footer, .l-footer, #footer_top, #footer_bottom{
  background:#050302 !important;
  color:#fff !important;
  border-top:1px solid rgba(255,255,255,.06) !important;
  padding:80px 0 32px !important;
}
#footer *, .footer *{ color:#fff !important }
#footer a, .footer a{ color:#cfcfcf !important }
#footer a:hover, .footer a:hover{ color:var(--pm-orange) !important }
.footer_logo img, #footer_logo img{ filter:brightness(0) invert(1) }
.copyright, .copy, #copyright{
  color:var(--pm-dim) !important;
  font-size:12px !important;
  letter-spacing:.06em !important;
  font-family:"Inter",sans-serif !important;
  text-align:center;
  padding-top:24px !important;
  margin-top:48px !important;
  border-top:1px solid rgba(255,255,255,.06) !important;
}

/* ---------- 17. PAGE TOP ボタン ---------- */
#page_top, .page_top, .pagetop, .to_top{
  background:var(--pm-orange) !important;
  color:#000 !important;
  border-radius:50% !important;
  width:48px !important;
  height:48px !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 16px rgba(255,107,26,.4) !important;
}
#page_top:hover, .page_top:hover{
  background:var(--pm-orange-2) !important;
}

/* ---------- 18. NEWS / マガジン一覧 (TCD でよく出る .news_list / .blog_list) ---------- */
.news_list li, .blog_list li, .magazine_list li, .info_list li{
  margin-bottom: 10px !important;
    list-style: none !important;
    transition: .15s;
}
.news_list li:hover, .blog_list li:hover{
  border-color:var(--pm-line-2) !important;
  transform:translateX(4px);
}

/* ---------- 19. SNS / ソーシャルアイコン ---------- */
.sns, .social, .social_list, .sns_list{ display:flex; gap:10px }
.sns a, .social a, .sns_list a{
  width:40px !important; height:40px !important;
  border-radius:50% !important;
  background:#15100c !important;
  border:1px solid var(--pm-line) !important;
  color:#fff !important;
  display:flex !important;
  align-items:center; justify-content:center;
}
.sns a:hover, .social a:hover{
  background:var(--pm-orange) !important;
  border-color:var(--pm-orange) !important;
  color:#000 !important;
}

/* ---------- 20. WP Adminバー (フロント表示時) は触らない ---------- */
#wpadminbar, #wpadminbar *{ all:revert }

/* ---------- 21. 黒地で読みにくい白以外のテキストを救済 ---------- */
.entry-content p, .entry-content li, .post p, .post li{
  color:#ffffff !important;
  line-height:2 !important;
  font-size:15.5px !important;
}
.entry-content b, .entry-content strong{
  color:var(--pm-orange) !important;
  font-weight:900 !important;
}

/* ---------- 22. 「ハイライトキーワード」マーク (オレンジ強調用) ---------- */
mark, .marker, .highlight{
  background:linear-gradient(transparent 60%, rgba(255,107,26,.45) 60%) !important;
  color:#fff !important;
  padding:0 2px;
}

/* ---------- 23. レスポンシブの微調整 ---------- */
@media (max-width:768px){
  #main_visual h1, .main_visual h1, .mainvisual .catch{
    font-size:36px !important;
  }
  .headline, .section_title{ font-size:28px !important }
  .section{ padding:56px 0 !important }
  .btn, .button, .more_btn{
    padding:12px 22px !important;
    font-size:14px !important;
  }
}

@media screen and (max-width: 950px) {
	#header_logo .logo_image.mobile {
        width: 230px;
        height: auto;
    }
	
        #header_slider_wrap #header_slider .caption {
            width: 200%;
        }
	
	#cb_content_1 .tab_content_top {
            height: 500px;
        }
	.tab_content_bottom .title,
	.tab_content_bottom .catch,
	.tab_content_bottom .desc {
		padding: 0 20px;
	}
	
	#bread_crumb ul.clearfix {
		width:100% !important;
	}
	
    }

/*タブコンテンツ*/
.cb_tab_content.num1 .tab_content_bottom .title {
	margin-bottom:10px;
}

.cb_project_list .inview {
	margin: 0 auto;
    gap: 21px;
}

.tab_content_bottom .content {
    padding-top: 30px;
}

.design_button a {
	margin-top: 30px;
}

# body .design_button.type1 a:hover {
	color:#e57302 !important;
}

.cb_project_list .design_button {
    margin-top: 70px !important;
}

.cb_blog_list,
.cb_news_list {
	border-left: none !important;
    border-right: none !important;
}

/* ------------------------------
   LPページ
------------------------------ */

.company-template-default #header,
.company-template-default #bread_crumb,
.company-template-default #post_title2 {
 display:none;	
}

/* ------------------------------
   フッター
------------------------------ */
#footer_menu .footer_menu li:first-of-type {
        margin: 0 0 13px 0;
    line-height: 1.5;
    font-size: 14px;
}


/* ------------------------------
   トップ - レシピ
------------------------------ */
/* このセクション内で使う変数 */
.pm-nutri{
  --pm-bg:#0a0a0a;
  --pm-orange:#FF6B1A;
  --pm-line:rgba(255,107,26,.20);
  --pm-line-2:rgba(255,107,26,.45);
  --pm-text:#ffffff;
  --pm-muted:rgba(255,255,255,.72);
  --pm-dim:rgba(255,255,255,.55);

  background:linear-gradient(180deg,#0a0604 0%, #150c08 100%);
  color:var(--pm-text);
  padding:120px 0;
  font-family:"Noto Sans JP","Inter",system-ui,sans-serif;
  font-feature-settings:"palt";
}
.pm-nutri *{ box-sizing:border-box }

.pm-nutri .pm-container{ max-width:1280px; margin:0 auto; padding:0 56px }

/* 見出し */
.pm-nutri .pm-head{ text-align:center; margin-bottom:64px }
.pm-nutri .pm-eyebrow{
  display:inline-block;
  font-family:"Inter",sans-serif;
  font-size:12px; font-weight:700;
  letter-spacing:.4em;
  color:var(--pm-orange);
  margin-bottom:14px;
  text-transform:uppercase;
}
.pm-nutri .pm-title{
  font-weight:900;
  font-size:56px;
  margin:0;
  letter-spacing:.01em;
  line-height:1.15;
  color:#fff;
}
.pm-nutri .pm-title .pm-o{ color:var(--pm-orange) }
.pm-nutri .pm-sub{
  font-size:16px;
  color:var(--pm-muted);
  margin-top:18px;
  font-weight:500;
}

/* 2カラム */
.pm-nutri .pm-nutri-grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:64px;
  align-items:center;
}

/* 画像 */
.pm-nutri .pm-nutri-photo{
  margin:0;
  aspect-ratio:4/3;
  border-radius:10px;
  overflow:hidden;
  background:#1a120c;
  border:1px solid var(--pm-line);
}
.pm-nutri .pm-nutri-photo img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* リスト */
.pm-nutri .pm-nutri-list{
  list-style:none;
  padding:0; margin:0;
  display:flex;
  flex-direction:column;
  gap:32px;
}
.pm-nutri .pm-nutri-item{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:18px;
  align-items:start;
}
.pm-nutri .pm-nutri-ico{
  width:48px; height:48px;
  border:1.5px solid var(--pm-orange);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--pm-orange);
}
.pm-nutri .pm-nutri-ico svg{ width:22px; height:22px }
.pm-nutri .pm-nutri-item h3{
  margin:0 0 8px;
  font-size:20px;
  font-weight:900;
  color:#fff;
  letter-spacing:.01em;
}
.pm-nutri .pm-nutri-item p{
  margin:0;
  color:var(--pm-muted);
  font-size:14.5px;
  line-height:1.85;
  font-weight:500;
}

/* 推奨摂取量 */
.pm-nutri .pm-intake{
  margin-top:80px;
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(255,107,26,.16), transparent 70%),
    linear-gradient(180deg,#1a0e08 0%,#0a0604 100%);
  border:1px solid var(--pm-line);
  border-radius:12px;
  padding:60px;
  text-align:center;
}
.pm-nutri .pm-intake-title{
  margin:0 0 48px;
  font-size:28px;
  font-weight:900;
  letter-spacing:.02em;
  color:#fff;
}
.pm-nutri .pm-intake-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.pm-nutri .pm-intake-v{
  font-family:"Inter",sans-serif;
  font-weight:900;
  font-size:54px;
  color:var(--pm-orange);
  letter-spacing:.01em;
  line-height:1;
}
.pm-nutri .pm-intake-l{
  font-size:15px;
  font-weight:900;
  margin-top:12px;
  letter-spacing:.04em;
  color:#fff;
}
.pm-nutri .pm-intake-u{
  font-size:12px;
  color:var(--pm-dim);
  margin-top:6px;
  letter-spacing:.06em;
}

/* レスポンシブ */
@media (max-width:900px){
  .pm-nutri{ padding:80px 0 }
  .pm-nutri .pm-container{ padding:0 24px }
  .pm-nutri .pm-title{ font-size:36px }
  .pm-nutri .pm-nutri-grid{ grid-template-columns:1fr; gap:40px }
  .pm-nutri .pm-intake{ padding:40px 24px }
  .pm-nutri .pm-intake-row{ grid-template-columns:1fr; gap:32px }
  .pm-nutri .pm-intake-v{ font-size:44px }
}
@media (max-width:560px){
  .pm-nutri .pm-title{ font-size:30px }
  .pm-nutri .pm-nutri-item h3{ font-size:18px }
}

/* ------------------------------
   トップ - プロテインモンスター
------------------------------ */

.pm-about{
  --pm-orange:#FF6B1A;
  --pm-line:rgba(255,107,26,.20);
  --pm-line-2:rgba(255,107,26,.45);
  --pm-text:#ffffff;
  --pm-muted:rgba(255,255,255,.72);

  background:linear-gradient(180deg,#0a0604 0%, #150c08 100%);
  color:var(--pm-text);
  padding:120px 0;
  font-family:"Noto Sans JP","Inter",system-ui,sans-serif;
  font-feature-settings:"palt";
}
.pm-about *{ box-sizing:border-box }

.pm-about .pm-container{ max-width:1280px; margin:0 auto; padding:0 56px }

/* 見出し */
.pm-about .pm-head{ text-align:center; margin-bottom:64px }
.pm-about .pm-eyebrow{
  display:inline-block;
  font-family:"Inter",sans-serif;
  font-size:12px; font-weight:700;
  letter-spacing:.4em;
  color:var(--pm-orange);
  margin-bottom:14px;
  text-transform:uppercase;
}
.pm-about .pm-title{
  font-weight:900;
  font-size:56px;
  margin:0;
  letter-spacing:.01em;
  line-height:1.15;
  color:#fff;
}
.pm-about .pm-title .pm-o,
.pm-about .pm-o{ color:var(--pm-orange) }
.pm-about .pm-sub{
  font-size:16px;
  color:var(--pm-muted);
  margin-top:18px;
  font-weight:500;
}

/* 2カラム (テキスト + 画像) */
.pm-about .pm-about-split{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:64px;
  align-items:center;
}
.pm-about .pm-about-body h3.pm-about-h{
  font-weight:900;
  font-size:42px;
  margin:0 0 28px;
  letter-spacing:.01em;
  line-height:1.3;
  color:#fff;
}
.pm-about .pm-about-body p{
  margin:0 0 18px;
  color:var(--pm-muted);
  font-size:15px;
  line-height:2;
  font-weight:500;
}
.pm-about .pm-about-body p b{ color:#fff }

.pm-about .pm-about-photo{
  margin:0;
  aspect-ratio:5/4;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--pm-line);
  background:#1a120c;
}
.pm-about .pm-about-photo img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* 3カード */
.pm-about .pm-about-cards{
  margin-top:64px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.pm-about .pm-about-card{
  background:linear-gradient(180deg,#1c130c 0%,#0c0705 100%);
  border:1px solid var(--pm-line);
  border-radius:10px;
  padding:38px 32px;
  text-align:center;
  transition:.2s;
}
.pm-about .pm-about-card:hover{
  border-color:var(--pm-line-2);
  transform:translateY(-2px);
}
.pm-about .pm-about-ico{
  width:46px; height:46px;
  margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  color:var(--pm-orange);
}
.pm-about .pm-about-ico svg{ width:34px; height:34px }
.pm-about .pm-about-card h4{
  margin:0 0 16px;
  font-size:20px;
  font-weight:900;
  letter-spacing:.01em;
  color:#fff;
  line-height:1.4;
}
.pm-about .pm-about-card p{
  margin:0;
  color:var(--pm-muted);
  font-size:14px;
  line-height:1.85;
  font-weight:500;
}

/* レスポンシブ */
@media (max-width:900px){
  .pm-about{ padding:80px 0 }
  .pm-about .pm-container{ padding:0 24px }
  .pm-about .pm-title{ font-size:36px }
  .pm-about .pm-about-split{ grid-template-columns:1fr; gap:40px }
  .pm-about .pm-about-body h3.pm-about-h{ font-size:32px }
  .pm-about .pm-about-cards{ grid-template-columns:1fr; gap:14px }
  .pm-about .pm-about-card{ padding:28px 24px }
}
@media (max-width:560px){
  .pm-about .pm-title{ font-size:30px }
  .pm-about .pm-about-body h3.pm-about-h{ font-size:26px }
}

/* ------------------------------
   トップ - CTA
------------------------------ */
.pm-cta{
  --pm-orange:#FF6B1A;
  --pm-orange-2:#FF8A3D;
  --pm-text:#ffffff;

  background:#000;
  color:var(--pm-text);
  padding:80px 0 120px;
  font-family:"Noto Sans JP","Inter",system-ui,sans-serif;
  font-feature-settings:"palt";
}
.pm-cta *{ box-sizing:border-box }

.pm-cta .pm-container{ max-width:1280px; margin:0 auto; padding:0 56px }

.pm-cta .pm-cta-card{
  border:2px solid var(--pm-orange);
  border-radius:14px;
  padding:80px 40px;
  text-align:center;
  background:
    radial-gradient(70% 100% at 50% 0%, rgba(255,107,26,.22), transparent 70%),
    linear-gradient(180deg,#1a0e08 0%, #0a0604 100%);
}
.pm-cta .pm-cta-h{
  margin:0 0 22px;
  font-size:42px;
  font-weight:900;
  letter-spacing:.01em;
  line-height:1.3;
  color:#fff;
}
.pm-cta .pm-cta-p{
  margin:0 0 36px;
  color:rgba(255,255,255,.85);
  font-size:16px;
  line-height:1.9;
  font-weight:500;
}

/* ボタン */
.pm-cta .pm-cta-btns{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
}
.pm-cta .pm-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 32px;
  border-radius:6px;
  font-weight:900;
  font-size:15px;
  letter-spacing:.08em;
  border:2px solid transparent;
  text-decoration:none;
  transition:.15s;
  cursor:pointer;
}
.pm-cta .pm-btn-primary{
  background:var(--pm-orange);
  color:#0a0604;
}
.pm-cta .pm-btn-primary:hover{
  background:var(--pm-orange-2);
  color:#000;
}
.pm-cta .pm-btn-ghost{
  background:transparent;
  color:#fff;
  border-color:#fff;
}
.pm-cta .pm-btn-ghost:hover{
  background:#fff;
  color:#000;
}

/* レスポンシブ */
@media (max-width:900px){
  .pm-cta{ padding:60px 0 80px }
  .pm-cta .pm-container{ padding:0 24px }
  .pm-cta .pm-cta-card{ padding:56px 24px }
  .pm-cta .pm-cta-h{ font-size:28px }
  .pm-cta .pm-btn{ padding:14px 24px; font-size:14px }
}
@media (max-width:560px){
  .pm-cta .pm-cta-h{ font-size:22px }
  .pm-cta .pm-cta-p br{ display:none }
  .pm-cta .pm-btn{ width:100%; justify-content:center }
}