.tpl_table {  }

@media screen and (max-width:480px) { /* 480px以下 */
	.tpl_table th, .tpl_table td { display : block; width: 100%;}
}

/* ==========================================
   1. 全体レイアウト・共通設定
   ========================================== */

/* 本文の横幅を制限するコンテナ */
div.section {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 0;
    box-sizing: border-box;
}
div.section-f {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 0;
    box-sizing: border-box;
}

/* メインビジュアル外枠 共通設定 */
div.mv-pc{
    width: 100%;
    display: flex;
    flex-direction: column;
    /* 上寄せにする */
    justify-content: flex-start; 
    align-items: flex-start;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    padding-left: 8%;
    padding-right: 8%;
    
    /* 上部に大きな余白を空けて、コンテンツを押し下げる */
    /* 画像の「顔」の位置に合わせて数値を調整してください */
    
}
 div.mv-sp .zpcontainer-fluid{ 
    width: 100%;
    display: flex;
    flex-direction: column;
    /* 上寄せにする */
    justify-content: flex-start; 
    align-items: flex-start;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    padding-inline-start: 0px!important;
    padding-inline-end: 0px!important;
    }
/* 表示・非表示の切り替え制御 */
@media screen and (min-width: 791px) {
    div.mv-sp { display: none !important; } /* PCではスマホ用を隠す */
}

@media screen and (max-width: 790px) {
    div.mv-pc { display: none !important; } /* スマホではPC用を隠す */
    div.mv-sp { 
        min-height: 85vh; /* 780x1300比率を考慮した高さ */
       
    }
    div.mv-sp {
         /* 画面全体の4割ほど空ける設定 */
    }
}

/* ==========================================
   2. 通常の見出しスタイル (本文用)
   ========================================== */

h1 {
    font-size: 32px;
    color: #333;
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
    margin: 60px 0 30px;
    line-height: 1.4;
    font-weight: bold;
}

.section-f h1 {
    border-bottom: 2px solid #fff!important;
}

h2 {
    font-size: 28px;
    color: #333;
    margin: 40px 0 20px;
    line-height: 1.4;
    border: none;
}

h3 {
    font-size: 22px;
    color: #333;
    margin: 30px 0 15px;
    border: none;
}

h4 {
    font-size: 18px;
    font-weight: bold;
    margin: 25px 0 10px;
}

/* ==========================================
   3. メインビジュアル内の見出しスタイル (.mv-h)
   ========================================== */

/* 通常見出しの装飾を打ち消し */
.mv-h h1, 
.mv-h h2, 
.mv-h h3 {
    color: #fff;
    text-align: left;
    line-height: 1.2;
    margin: 0 0 0.4em 0;
    font-weight: bold;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.6);
    border: none !important;
    padding-bottom: 0;
}

/* --- PC・タブレットサイズ (791px以上) --- */
@media screen and (min-width: 791px) {
    div.mv-pc { min-height: 700px; } /* 1920x700用 */
    
    /* 1401px以上のフォント調整 */
    @media (min-width: 1401px) {
        .mv-h h1 { font-size: 50px; }
        .mv-h h2 { font-size: 40px; }
        .mv-h h3 { font-size: 24px; }
    }
    /* 791px〜1400pxのフォント調整 */
    @media (max-width: 1400px) {
        div.mv-pc { min-height: 500px; }
        .mv-h h1 { font-size: 40px; }
        .mv-h h2 { font-size: 30px; }
        .mv-h h3 { font-size: 20px; }
    }
}

/* --- スマホサイズ (790px以下) --- */
@media screen and (max-width: 790px) {
    .mv-h h1 { font-size: 32px; }
    .mv-h h2 { font-size: 20px; }
    .mv-h h3 { font-size: 17px; }
}

/* ==========================================
   4. 本文テキスト・リスト・テーブル
   ========================================== */

div,p, ul, ol, li, table, th, td {
    font-size: 16px !important;
    line-height: 1.8;
}

p, ul, ol, table {
    margin-bottom: 24px;
}

li {
    margin-bottom: 10px;
}

table { width: 100%; border-collapse: collapse; margin-bottom: 0px; }
th, td { border: 1px solid #ddd;}
th { background-color: #f8f8f8; width: 30%; font-weight: bold; }

/* スマホ時の本文サイズ微調整 */
@media screen and (max-width: 600px) {
    div.section { padding: 40px 20px; }
    h1 { font-size: 22px; }
    h2 { font-size: 20px; }
    p, ul, ol, li, table, th, td { font-size: 15px !important; }
}

/* ==========================================
   .cta 内の h2 専用スタイル
   ========================================== */
.cta h2 {
    /* サイズやマージンは既存のh2を継承するため、変更点のみ記述 */
    background-color: #fff;  /* 背景色：白 */
    text-align: center;      /* 文字：センター揃え */
    width: 100%;             /* 横幅：100% */
    
    /* 背景を白にする場合、上下に少し余白（内側の隙間）があると綺麗に見えます */
    padding: 20px 0;         
    
    /* もし既存のh2にある余白をリセットして背景を密着させたい場合はここを調整 */
    margin: 40px 0 20px; 
    
    /* 枠線が必要な場合はここに追加してください（例: border: 1px solid #ddd;） */
    box-sizing: border-box;  /* パディングを含めた幅計算にする */
}

/* ==========================================
   ボタンの上書き設定（Zohoデフォルト対策）
   ========================================== */

/* .cta内の全てのリンク・ボタン要素を対象に強制上書き */
.cta a, 
.cta .zpbutton.zpbutton-type-primary {
    display: inline-block !important;
    background-color: #333 !important; /* ボタンの色 */
    color: #fff !important;           /* 文字の色 */
    padding: 20px 40px !important;    /* サイズ調整 */
    text-decoration: none !important;
    font-size: 18px !important;       /* 14pxを18pxに上書き */
    font-weight: bold !important;     /* normalをboldに上書き */
    border-radius: 5px !important;
    border: none !important;
    line-height: 1.2 !important;      /* 1.42...を1.2に上書き */
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: inherit !important;  /* 既存フォントを継承 */
    box-shadow: none !important;
    width: auto;
    -webkit-appearance: none;
}

.cta a:hover {
    opacity: 0.8 !important;
}

/* スマホ表示の強制上書き */
@media screen and (max-width: 600px) {
    .cta a, 
    .cta .zpbutton.zpbutton-type-primary {
        display: block !important;
        width: 100% !important;
        padding: 15px 20px !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
    }
}
/* PC・タブレットサイズ (791px以上) の設定 */
@media screen and (min-width: 791px) {
    /* クラス名「.col-50」がついた要素を強制的に横並びにする */
    .col-50 {
        display: inline-block; /* 横に並ぶ性質を持たせる */
        vertical-align: top;   /* 上揃え */
        width: 50%;            /* 半分の幅 */
        box-sizing: border-box; 
        font-size:16px !important;
        margin-right: -4px;    /* インラインブロック特有の隙間を打ち消す */
        padding: 0 20px;       /* 左右の余白（カラム間の隙間として機能） */
    }

    /* 画像の場合の微調整 */
    .col-50 img {
        height: auto;
        max-width: 50%; /* 画像自体が50%幅になるように */
    }
}

@media (max-width: 767px) {
 [data-element-id="elm_4UpyvNvG937I4JkoZNOM5Q"].zpsection {
padding-block-start: 39px!important;
padding-block-end: 60px;
}
}