@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&family=Noto+Sans+JP:wght@400;700;900&display=swap');

/* ========================================
   Variables (変数定義)
======================================== */
:root {
    /* Colors */
    --primary-orange: #F79A63;
    --primary-orange-hover: #e68850;
    --secondary-orange: #FDE7D9;
    --bg-base: #FAF9F6;
    --bg-white: #FFFFFF;
    --text-main: #0f172a; /* slate-900 */
    --text-muted: #64748b; /* slate-500 */
    --border-color: #f1f5f9; /* slate-100 */

    
    /* Spacing (Section Padding) */
    --section-py-sp: 6rem;
    --section-py-pc: 8rem;
    
    /* Spacing (Hero Padding) */
    --hero-pt-sp: 8rem;
    --hero-pt-pc: 12rem;
    --hero-pb-sp: 5rem;
    --hero-pb-pc: 8rem;
	
	/* Alert / Accent Colors (警告・強調用の濃いオレンジ) */
    --dark-orange: #ea580c;        /* Tailwind: orange-600 */
    --bg-orange-light: #fff7ed;    /* Tailwind: orange-50 */
    --border-orange-light: #ffedd5;/* Tailwind: orange-100 */
}

/* ========================================
   Utility Colors (追記・修正分)
======================================== */

/* テキストカラー */
.primary-orange {
    color: var(--primary-orange);
}
.text-white{ color:#FFFFFF; }

/* 背景カラー（念のため定義） */
.bg-primary-orange {
    background-color: var(--primary-orange);
}

/* ボーダーカラー（念のため定義） */

.border-brand-orange {
    border-left-color: var(--primary-orange) !important;
    border-color: var(--primary-orange) !important; /* 念のため全体も指定 */
}

.text-sub {
    color: #475569; /* Tailwindの text-slate-600 の色 */
}

/* 超極太フォント（画像のような黒々とした太さ） */
.fw-black {
    font-weight: 900 !important;
}
/* 中くらいの太さ */
.fw-medium {
    font-weight: 500 !important;
}

/* ========================================
   Base Styles
======================================== */
body {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    background-color: var(--bg-base);
    color: var(--text-main);
    line-height: 1.6;
}

html {
    scroll-behavior: smooth;
}

::selection {
    background-color: var(--secondary-orange);
}

a {
    text-decoration: none;
    color: inherit;
}

/* Utility */
.text-orange { color: var(--primary-orange) !important; }
.bg-orange { background-color: var(--primary-orange); }
.section-padding { padding: var(--section-py-sp) 0; }

@media (min-width: 768px) {
    .section-padding { padding: var(--section-py-pc) 0; }
}

/* スクロールバー非表示（業種別セクションなど） */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.bg-solutions-light {
    background-color: rgba(247, 154, 99, 0.15) !important; /* 薄いベージュ（薄いオレンジ） */
}

/* ========================================
   Components
======================================== */
/* Buttons */
.btn-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 0.75rem;
    font-weight: 700;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-primary-orange {
    background-color: var(--primary-orange);
    color: var(--bg-white);
    box-shadow: 0 10px 15px -3px rgba(247, 154, 99, 0.4);
}
.btn-primary-orange:hover {
    filter: brightness(1.1);
    color: var(--bg-white);
}

.btn-outline-dark {
    background-color: var(--bg-white);
    color: var(--text-main);
    border: 2px solid var(--text-main);
}
.btn-outline-dark:hover {
    background-color: var(--text-main);
    color: var(--bg-white);
}

.btn-dark {
    background-color: var(--text-main);
    color: var(--bg-white);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.btn-dark:hover {
    background-color: #1e293b;
    color: var(--bg-white);
}

/* ========================================
   Buttons & Group Hover (追記・修正分)
======================================== */

/* ベースとなるメインボタン (btn-main) */
.btn-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.25rem 2.5rem; /* Tailwindの px-10 py-5 相当 */
    border-radius: 0.75rem;  /* rounded-xl */
    font-weight: 700;
    font-size: 1.125rem;     /* text-lg */
    transition: all 0.3s ease;
    text-decoration: none;
    cursor: pointer;
    border: none;
}

/* オレンジ色のモディファイア (btn-orange) */
.btn-orange {
    background-color: var(--primary-orange);
    color: var(--bg-white);
    box-shadow: 0 20px 25px -5px rgba(247, 154, 99, 0.4);
}
.btn-orange:hover {
    filter: brightness(1.1);
    color: var(--bg-white);
}

/* Tailwindの group クラスの代替 */
/* 親要素（.group）にホバーした時、子要素（.icon-arrow）を動かす */
.group .icon-arrow {
    transition: transform 0.3s ease;
}
.group:hover .icon-arrow {
    transform: translateX(0.25rem); /* hover:translate-x-1 の再現（右に4px移動） */
}

/* Hover Icons for Buttons */
.btn-custom .icon-arrow { transition: transform 0.3s ease; }
.btn-custom:hover .icon-arrow { transform: translateX(4px); }

/* Common Cards */
.card-item {
    background-color: var(--bg-white);
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    height: 100%;
}
.card-item:hover {
    box-shadow: 10px 11px 10px 5px rgba(0, 0, 0, 0.05);
}


/*　スマホの時だけ改行させるクラス　*/
.br-sp {
     display: block;
}

@media (min-width: 576px){
    .br-sp {
		 display: none;
    }
}
/*　992px以下の時だけ改行させるクラス　*/
.br-pc1 {
     display: block;
}

@media (min-width: 991px){
    .br-pc1 {
		 display: none;
    }
}
/* ========================================
   Section Padding (追記・修正分)
======================================== */

/* スマホ用の上下余白（デフォルト） */
.section-py {
    padding-top: var(--section-py-sp);
    padding-bottom: var(--section-py-sp);
}

/* PC用の上下余白（768px以上） */
@media (min-width: 768px) {
    .section-py {
        padding-top: var(--section-py-pc);
        padding-bottom: var(--section-py-pc);
    }
}

/* ========================================
   Additional Components (追記分)
======================================== */

/* Navbar Button */
.btn-nav-orange {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-orange);
    color: var(--bg-white);
    border-radius: 50rem; /* 丸みのあるピル型 */
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 10px 15px -3px rgba(247, 154, 99, 0.4);
    border: none;
    white-space: nowrap;
}
.btn-nav-orange:hover {
    filter: brightness(1.1);
    color: var(--bg-white);
}

/* Badges (タグ・ラベル用) */
.badge-custom {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-block;
}
.badge-orange {
    background-color: var(--secondary-orange);
    color: var(--primary-orange);
}
.badge-green {
    background-color: #f0fdf4;
    color: #15803d;
}

/* Article Cards (記事セクション用) */
.article-card {
    display: block;
    cursor: pointer;
}
.article-title-link {
    color: var(--text-main);
    transition: color 0.3s ease;
}
.article-card:hover .article-title-link {
    color: var(--primary-orange);
}

/* ========================================
   Specific Sections
======================================== */
/* Header / Navbar */
.navbar-custom {
    padding: 1.25rem 0;
    transition: all 0.3s ease;
    background-color: transparent;
}
.navbar-custom.navbar-scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    padding: 0.75rem 0;
}
.nav-link-custom {
    font-size: 14px;
    font-weight: 700;
    color: #334155;
    transition: color 0.3s ease;
    white-space: nowrap;
}
.nav-link-custom:hover { color: var(--primary-orange); }

.mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--bg-white);
    border-top: 1px solid var(--border-color);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}
.mobile-menu.is-open {
    max-height: 100vh;
    opacity: 1;
}

/* Hero Section */
.hero-section {
    position: relative;
    background-color: var(--bg-white);
    padding-top: var(--hero-pt-sp);
    padding-bottom: var(--hero-pb-sp);
    overflow: hidden;
}
@media (min-width: 768px) {
    .hero-section {
        padding-top: var(--hero-pt-pc);
        padding-bottom: var(--hero-pb-pc);
    }
}
.hero-blob {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(25%, -25%);
    width: 24rem;
    height: 24rem;
    background-color: rgba(253, 231, 217, 0.5);
    border-radius: 50%;
    filter: blur(60px);
}
.hero-title {
    /* font-size: 2.25rem; */
	font-size: clamp(1.8rem,4.3vw, 4.5rem) ;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 2rem;
}
/* @media (min-width: 768px) {
    .hero-title { font-size: 4.5rem; } 
	 .hero-title {font-size: clamp(2.25rem,4.3vw, 4.5rem) };
}*/
/* ========================================
   Typography / Headings (追記分)
======================================== */

/* セクション用メイン見出し（Tailwind: text-3xl md:text-4xl font-black text-slate-900） */
.heading-section {
    font-size: 1.875rem; /* スマホサイズ: 30px */
    font-weight: 900;    /* 極太（font-black） */
    color: var(--text-main); /* スレートグレー（#0f172a） */
    line-height: 1.25;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .heading-section {
        font-size: 2.2rem; /* PCサイズ: 36px */
    }
}

.caption{
	/* font-size: 3rem;  */
	font-size: clamp(1.5rem, 3.2vw, 3rem);
	font-weight: 900;
}

/* Problem Section */
.problem-result-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--dark-orange, #ea580c);
}

@media (min-width: 768px) {
    .problem-result-badge { 
        font-size: 1.875rem; 
    }
}

/* ACTSITE Section */
.actsite-section { background-color: var(--bg-white); overflow: hidden; }
.actsite-badge {
    display: inline-block;
    padding: 0.25rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 700;
    background-color: var(--secondary-orange);
    color: var(--primary-orange);
    margin-bottom: 1.5rem;
}
.actsite-step-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #334155;
    background-color: #f8fafc;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    transition: all 0.3s;
}
.actsite-step-box:hover {
    background-color: var(--bg-white);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}
.actsite-step-number {
    width: 2rem;
    height: 2rem;
    background-color: var(--primary-orange);
    color: var(--bg-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
}

/* Graphic Area */
.actsite-graphic-wrapper { position: relative; }
.actsite-graphic-bg {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 3rem;
    transform: rotate(3deg);
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.1;
    background-color: var(--primary-orange);
}
.actsite-graphic-content {
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 3rem;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

/* Solution Finder */
.solution-card {
    background-color: #f8fafc;
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    text-align: center;
    height: 100%;
}
.solution-card:hover {
    background-color: var(--primary-orange);
}
.solution-card .icon-wrapper {
    color: var(--primary-orange);
    margin-bottom: 1rem;
    transition: color 0.3s;
}
.solution-card h3 {
    font-size: 0.875rem;
    font-weight: 700;
    color: #1e293b;
    transition: color 0.3s;
}
@media (min-width: 768px) {
    .solution-card h3 { font-size: 1rem; }
}
.solution-card:hover .icon-wrapper,
.solution-card:hover h3 {
    color: var(--bg-white);
}

/* Industry Strategy */
.industry-section {
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
.industry-bg-shape {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: rgba(249, 115, 22, 0.05);
    transform: skewX(-12deg) translateX(-20%);
}
.industry-scroll-container {
    display: flex;
    overflow-x: auto;
    padding-bottom: 2rem;
    gap: 1.5rem;
}
.industry-card {
    /* min-width: 280px; */
    background-color: var(--bg-white);
    padding: 2rem;
    border-radius: 1.5rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    transition: all 0.3s;
}
.industry-card:hover { border-color: var(--primary-orange); }

/* Content Section */
.article-card-img {
    background-color: #f8fafc;
    border-radius: 1.5rem;
    aspect-ratio: 16/9;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
}
.article-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.article-card:hover .article-card-img img {
    transform: scale(1.1);
}

/* CTA Section */
.cta-section {
    position: relative;
    background-color: var(--primary-orange);
    color: var(--bg-white);
    overflow: hidden;
}
.cta-bg-shape {
    position: absolute;
    top: -50%;
    left: -20%;
    width: 80%;
    height: 200%;
    background-color: rgba(255, 255, 255, 0.1);
    transform: rotate(12deg);
}
.btn-cta {
    background-color: var(--bg-white);
    color: var(--primary-orange);
    padding: 1.5rem 3rem;
    border-radius: 1rem;
    font-size: 1.25rem;
    font-weight: 900;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.btn-cta:hover { background-color: #f8fafc; }

/* Footer */
.footer-custom {
    background-color: var(--bg-white);
    padding: 4rem 0;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
}
.footer-heading {
    color: var(--text-main);
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--primary-orange);
    padding-bottom: 0.5rem;
    display: inline-block;
    font-weight: 700;
}


/* ========================================
   Hover Effects (追加・修正分)
======================================== */

/* ホバーで枠線がオレンジになる汎用クラス */
.hover-border-orange {
    transition: all 0.3s ease;
    cursor: pointer; 
}
.hover-border-orange:hover {
    border-color: var(--primary-orange) !important;
}

/* ホバーで色が反転する汎用クラス (Tailwind: .solution-card の再現) */
/* 親要素（.hover-flip-orange）にホバーした時、子要素の色も変える */
.hover-flip-orange {
    transition: all 0.3s ease;
    cursor: pointer;
    background-color: var(--bg-white); /* 初期背景は白 */
    border: 1px solid var(--border-color); /* 初期枠線 */
    color: var(--text-main); /* 初期文字色 */
}

/* ホバー時の親要素の動き */
.hover-flip-orange:hover {
    background-color: var(--primary-orange) !important; /* 背景がオレンジに */
    border-color: var(--primary-orange) !important; /* 枠線もオレンジに */
}

/* ホバー時の子要素（アイコン、見出し、テキスト）の動き */
.hover-flip-orange:hover h3,
.hover-flip-orange:hover h4,
.hover-flip-orange:hover p,
.hover-flip-orange:hover i,
.hover-flip-orange:hover .icon-wrapper {
    color: var(--bg-white) !important; /* 文字・アイコンが白に反転 */
}

/* ホバー時のアイコン背景色の反転 */
/* トップページ共通の .bg-orange.text-white の組み合わせを特定 */
.hover-flip-orange:hover .bg-orange.text-white {
    background-color: var(--bg-white) !important; /* 背景が白に */
    color: var(--primary-orange) !important; /* 文字・アイコンがオレンジに */
}

/* ホバー時の子要素（アイコン、見出し、テキスト）の動き */
.hover-flip-orange:hover h3,
.hover-flip-orange:hover h4,
.hover-flip-orange:hover p,
.hover-flip-orange:hover i,
.hover-flip-orange:hover .icon-wrapper {
    color: var(--bg-white) !important; /* 文字・アイコンが白に反転 */
}

/* 3. ホバーで浮き上がる汎用クラス (actsite-step-box風) */
.hover-shadow-up {
    transition: all 0.3s ease;
    cursor: pointer;
}
.hover-shadow-up:hover {
    background-color: var(--bg-white) !important; /* 背景を白に明るくする */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important; /* ふんわりとした影をつける */
    transform: translateY(-3px); /* 物理的に少しだけ上に浮かす */
}

/* ========================================
   "Why Results Happen" Page Specific (追加分)
======================================== */

/* 文字間隔を広げるユーティリティ */
.tracking-widest {
    letter-spacing: 0.1em;
}

/* セクション間などのオレンジの短い仕切り線 */
.divider-orange {
    width: 5rem;
    height: 0.25rem;
    background-color: var(--primary-orange);
}

/* ダーク背景用：オレンジのアウトラインボタン */
.btn-outline-orange {
    background-color: transparent;
    color: var(--primary-orange);
    border: 2px solid var(--primary-orange);
}
.btn-outline-orange:hover {
    background-color: var(--primary-orange);
    color: var(--bg-white);
}

/* 下部が太いオレンジボーダーになるカード */
.card-border-bottom {
    border-bottom: 8px solid var(--primary-orange) !important;
}

/* ========================================
   Solutions Page Specific (追加分)
======================================== */

/* 検索入力欄のアイコン用 */
.search-input-wrapper {
    position: relative;
}
.search-input-wrapper .icon-search {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}
.search-input {
    width: 100%;
    background-color: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 50rem;
    padding: 1rem 1.5rem 1rem 3rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-main);
    transition: all 0.3s ease;
    outline: none;
}
.search-input:focus {
    border-color: var(--primary-orange);
    background-color: var(--bg-white);
    box-shadow: 0 0 0 4px rgba(247, 154, 99, 0.1);
}

/* 選択されたカテゴリカードのスタイル (.active) */
.problem-card.active,
.category-button.active {
    border-color: var(--primary-orange) !important;
    background-color: var(--bg-orange-light) !important;
}

/* ホバーでカード全体が濃いオレンジになる */
.problem-card:hover {
    background-color: var(--primary-orange) !important; /* 背景がオレンジに */
    border-color: var(--primary-orange) !important;
}
.problem-card:hover h3,
.problem-card:hover p,
.problem-card:hover .problem-arrow,
/* リンク内の矢印（arrow-right）も白に */
.problem-card:hover .problem-arrow i[data-lucide="arrow-right"] {
    color: var(--bg-white) !important; /* 文字・説明文・リンク・矢印を白に */
}

.problem-card:hover .icon-wrapper {
    background-color: var(--bg-white) !important; /* 画像に合わせて、白背景にする */
}

/* アイコン自体が白くならず、確実にオレンジ色を保つようにする */
.problem-card:hover .icon-wrapper i {
    color: var(--primary-orange) !important;
}

/* サービス項目の小カード */
.service-card {
    background-color: var(--bg-white);
    padding: 1.25rem;
    border-radius: 1rem;
    border: 1px solid var(--border-color); /* slate-100 */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-card:hover {
    background-color: var(--bg-white) !important; /* 背景色は白のまま */
    border-color: var(--primary-orange) !important; 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important; 
    transform: translateY(-5px); 
}

.problem-arrow {
    color: var(--primary-orange);
    transition: color 0.3s ease;
}

/* ========================================
   Web戦略ページ 業界詳細カード用 (追加分)
======================================== */

/* カード全体の浮き上がりとオレンジの影 */
.industry-detail-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.industry-detail-card:hover {
    transform: translateY(-8px) !important;
    /* 黒い影ではなく、ほんのりオレンジがかったリッチな影を落とす */
    box-shadow: 0 25px 50px -12px rgba(247, 154, 99, 0.25) !important; 
    border-color: var(--primary-orange) !important; /* 枠線もオレンジに */
}

/* 左側のタイトルエリアの装飾 */
.industry-left-pane {
    background-color: var(--bg-orange-light) !important; /* 薄いオレンジ背景 */
    position: relative;
}
.industry-left-pane::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 8px; /* 左端の太いオレンジ線 */
    height: 100%;
    background-color: var(--primary-orange); 
}

/* ========================================
   Contact Page Specific (追加分)
======================================== */
.pt-8{
	padding-top:8rem;
}

.pb-8{
	padding-bottom:8rem;
}


/* 入力フォームのカスタムスタイル */
.form-control-custom {
    background-color: #f8fafc; /* bg-slate-50 */
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 1rem 1.5rem;
    font-weight: 500;
    color: var(--text-main);
    transition: all 0.3s ease;
    width: 100%;
}
.form-control-custom::placeholder {
    color: #cbd5e1; /* slate-300 */
    font-weight: 700;
}
.form-control-custom:focus {
    background-color: var(--bg-white);
    border-color: var(--primary-orange);
    box-shadow: 0 0 0 4px rgba(247, 154, 99, 0.1);
    outline: none;
}
textarea.form-control-custom {
    resize: none;
}

/* ボタン内のアイコン用アニメーション（送信・上向き） */
.icon-send { transition: transform 0.3s ease; }
.group:hover .icon-send { transform: translate(4px, -4px); }

.icon-arrow-up { transition: transform 0.3s ease; }
.group:hover .icon-arrow-up { transform: translateY(-4px); }

/* 固定ヘッダーの高さ分、スクロール位置を調整する魔法のクラス */
.section-anchor {
    scroll-margin-top: 100px; /* 実際のヘッダーの高さに合わせて 80px〜120px など調整してください */
}