/**
 * 共通スタイル定義
 * 合同会社SFR ウェブサイト
 * 
 * このファイルには、全ページで共通して使用される
 * 変数、基本設定、タイポグラフィのスタイルが含まれます。
 */

/* ============================================
   CSS変数定義
   ============================================ */
:root {
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================
   基本設定
   ============================================ */
body {
    background-color: #F3F2EE;
    color: #1A1A1A;
    font-family: "Manrope", "Zen Old Mincho", sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* テキスト選択時の背景色と文字色 */
.selection\:bg-accent::selection {
    background-color: #CC5500;
    color: #ffffff;
}

.selection\:text-white::selection {
    color: #ffffff;
}

/* ============================================
   ノイズテクスチャオーバーレイ
   背景にノイズパターンを適用して、テクスチャ感を演出
   ============================================ */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--tw-bg-noise);
    opacity: 0.03;
    pointer-events: none;
    z-index: 50;
    background-repeat: repeat;
}

/* ============================================
   タイポグラフィ
   レスポンシブなフォントサイズを定義
   ============================================ */

/* 大きな見出し（H1相当）用のレスポンシブフォント */
.text-fluid-h1 {
    font-size: clamp(2.2rem, 5vw, 4.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* 中程度の見出し（H2相当）用のレスポンシブフォント */
.text-fluid-h2 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.2;
}

/* より小さな見出し用（ページによって異なるサイズ） */
.text-fluid-h2-sm {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    line-height: 1.2;
}

.text-fluid-h1-sm {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    line-height: 1.3;
    letter-spacing: -0.02em;
}

/* ============================================
   兵庫県対応エリアマップスタイル
   OpenStreetMapマップのカスタマイズ
   ============================================ */

/* マップコンテナの基本スタイル */
#hyogo-area-map {
    width: 100%;
    height: 400px;
    background-color: #F3F2EE;
    border-radius: 2px;
}

/* Leafletコントロールのスタイルを最小化 */
#hyogo-area-map .leaflet-control-container {
    font-family: "Manrope", sans-serif;
}

/* ズームコントロールのスタイル調整 */
#hyogo-area-map .leaflet-control-zoom {
    border: 1px solid rgba(26, 26, 26, 0.2);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#hyogo-area-map .leaflet-control-zoom a {
    background-color: #ffffff;
    color: #1A1A1A;
    border-bottom: 1px solid rgba(26, 26, 26, 0.1);
    transition: background-color 0.2s ease;
}

#hyogo-area-map .leaflet-control-zoom a:hover {
    background-color: #F3F2EE;
    color: #CC5500;
}

#hyogo-area-map .leaflet-control-zoom a:last-child {
    border-bottom: none;
}

/* アトリビューション表示のスタイル調整 */
#hyogo-area-map .leaflet-control-attribution {
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(26, 26, 26, 0.1);
    border-radius: 2px;
    font-size: 10px;
    padding: 4px 8px;
    color: #595955;
}

#hyogo-area-map .leaflet-control-attribution a {
    color: #CC5500;
    text-decoration: none;
}

#hyogo-area-map .leaflet-control-attribution a:hover {
    text-decoration: underline;
}

/* ポップアップのスタイル調整（既存のデザインシステムに統合） */
#hyogo-area-map .leaflet-popup-content-wrapper {
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font-family: "Manrope", sans-serif;
}

#hyogo-area-map .leaflet-popup-content {
    margin: 12px;
    font-size: 13px;
    line-height: 1.5;
}

#hyogo-area-map .leaflet-popup-tip {
    background-color: #ffffff;
}

#hyogo-area-map .leaflet-popup-close-button {
    color: #1A1A1A;
    font-size: 18px;
    padding: 4px 8px;
    transition: color 0.2s ease;
}

#hyogo-area-map .leaflet-popup-close-button:hover {
    color: #CC5500;
}

/* ============================================
   電話番号リンクのPC/スマホ制御
   PCではクリック不能、スマホではクリック可能
   ============================================ */
/* デスクトップ（ホバー可能なデバイス）ではクリック不能 */
@media (hover: hover) and (pointer: fine) {
    a[href^="tel:"] {
        pointer-events: none;
        cursor: default;
    }
}

/* タッチデバイス（スマホ・タブレット）ではクリック可能 */
@media (hover: none) and (pointer: coarse) {
    a[href^="tel:"] {
        pointer-events: auto;
        cursor: pointer;
    }
}

/* ============================================
   会社情報ページのマップスタイル
   OpenStreetMapマップのカスタマイズ
   ============================================ */

/* マップコンテナの基本スタイル */
#company-map {
    background-color: #1A1A1A;
}

/* Leafletコントロールのスタイルを調整 */
#company-map .leaflet-control-container {
    font-family: "Manrope", sans-serif;
}

/* ズームコントロールのスタイル調整（ダークテーマ） */
#company-map .leaflet-control-zoom {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

#company-map .leaflet-control-zoom a {
    background-color: rgba(255, 255, 255, 0.9);
    color: #1A1A1A;
    border-bottom: 1px solid rgba(26, 26, 26, 0.1);
    transition: background-color 0.2s ease;
}

#company-map .leaflet-control-zoom a:hover {
    background-color: #F3F2EE;
    color: #CC5500;
}

#company-map .leaflet-control-zoom a:last-child {
    border-bottom: none;
}

/* アトリビューション表示のスタイル調整（ダークテーマ） */
#company-map .leaflet-control-attribution {
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(26, 26, 26, 0.1);
    border-radius: 2px;
    font-size: 10px;
    padding: 4px 8px;
    color: #595955;
}

#company-map .leaflet-control-attribution a {
    color: #CC5500;
    text-decoration: none;
}

#company-map .leaflet-control-attribution a:hover {
    text-decoration: underline;
}

/* ポップアップのスタイル調整 */
#company-map .leaflet-popup-content-wrapper {
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font-family: "Manrope", sans-serif;
}

#company-map .leaflet-popup-content {
    margin: 12px;
    font-size: 13px;
    line-height: 1.5;
}

#company-map .leaflet-popup-tip {
    background-color: #ffffff;
}

#company-map .leaflet-popup-close-button {
    color: #1A1A1A;
    font-size: 18px;
    padding: 4px 8px;
    transition: color 0.2s ease;
}

#company-map .leaflet-popup-close-button:hover {
    color: #CC5500;
}