@charset "utf-8";

:root {
  --cs-textcolor: #000000;
  --cs-textcolor-a: #0d6efd;
  --cs-textcolor-hover: #6610f2;
  --cs-bordercolor: #ccc; /* ボーダーのデフォルト色 */
  --cs-blue: #0066CC;
  --cs-blue-light: #4682B4;
  --cs-blue-dark: #233B6C;
  --cs-navy: #000033;
  --cs-purple: #7e67a2;
  --cs-pink: #FF6699;
  --cs-pink-light: #e6c2bf;	
  --cs-red: #b92125;
  --cs-red-light: #ffe3e5;
  --cs-red-dark: #440000;
  --cs-orange: #F7931E;
  --cs-yellow: #f4d668;
  --cs-green: #668863;
  --cs-green-light: #b6c0a8;	
  --cs-brown: #534741;
  --cs-brown-light: #d8d2c2;	
  --cs-brown-dark: #403134;
  --cs-black: #000;
  --cs-white: #fff;
  --cs-gray: rgba(153, 153, 153, 1);
  --cs-gray-light: rgba(230, 230, 230, 1);
  --cs-gray-dark:  rgba(77, 77, 77, 1);
  --cs-color01: #0050a2;
  --cs-color02: #00a15e;
  --cs-color03: #F2F2F2;
  --cs-color04: #fff;
  --cs-color05: #fff;
  --cs-color06: #fff;
  --cs-color07: #fff;
  --cs-color08: #fff;
  --cs-color09: #fff;
  --cs-color10: #fff;
  --cs-shadowcolor01: 149,157,112,; /* shadowに使用するRGB */
  --cs-shadowcolor02: 0,0,0,; /* shadowに使用するRGB */
  --cs-shadowcolor03: 255,255,255,; /* shadowに使用するRGB */
  /*--cs-basefont: "游ゴシック Medium",YuGothic-M, YuGothic,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;*/
  --cs-basefont: "ヒラギノ明朝 ProN W3", Hiragino Mincho ProN , Times New Roman , "游明朝", YuMincho, "MSP明朝","MS PMincho","MS 明朝",serif;
  --cs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --header-bgcolor:  rgba(255,255,255,0.7); /* ヘッダー背景色 */
  --header-textcolor: #000;                 /* ヘッダーテキスト色 */
  --headermenu-bgcolor: rgba(255,255,255,1); /* ヘッダーメニュー背景色 */
  --headermenu-bgcolor-shadow: rgba(0,0,0,0.2); /* PCグランドメニューboxshadow色 */
  --headermenu-bgcolor-shadow-sp: rgba(0,0,0,0.3); /* スマホグランドメニューboxshadow色 */
  --headermenu-bgcolor-drop: #f2f2f2; /* ヘッダーメニュー背景色（ドロップダウン） */
  --headermenu-bgcolor-drop-hover: rgba(0,0,0,0.2); /* ヘッダーメニュー背景色（ドロップダウンhover） */
  --headermenu-textcolor: rgba(0,0,0,1);             /* ヘッダーメニューテキスト色 */
  --headermenu-textcolor-hover: var(--cs-color02);    /* ヘッダーメニューテキスト色（hover） */
  --header-hbgcolor: #000;                  /* ハンバーガー棒の色 */
  --header-hbgcolor-close: #fff;            /* ハンバーガー棒の色（close） */
  --hbgmenu-bgcolor: rgba(0,0,0,0.9);       /* ハンバーガーメニュー背景色 */
  --hbgmenu-textcolor: #fff;                /* ハンバーガーメニューテキスト色 */
  --hbgmenu-bordercolor: #ccc;              /* ハンバーガーメニューボーダー色 */
  --pagetitle-bgcolor: #e8e8e8;             /* ページタイトル背景 */
  --pagetitle-bgcolor-s: #f2f2f2;             /* ページタイトル背景（ストライプにした時の色） */
  --pagetitle-textcolor: #fff;              /* ページタイトルテキスト色 */
  --pagetitle-bgtextcolor: rgba(255,255,255,0); /* ページタイトルテキストの背景色 */
  --footer-bgcolor: #fff;               /* フッター背景色 */
  --footer-textcolor: #000;              /* フッターテキスト色 */
  --copyright-bgcolor: var(--cs-color01);             /* コピーライト背景色 */
  --copyright-textcolor: #fff;              /* フッターテキスト色 */
  --slick-dots: #595757;                /* スリックスライダードットの色 */
  --slick-active: #000;                 /* スリックスライダードットのアクティブ色 */
  --sns-bgcolor: #fff;               /* SNS丸ボタンの背景色 */
  --sns-iconcolor: #333;             /* SNS丸ボタンのアイコン色（ロールオーバも同じ色） */
  --sns-bordercolor: #fff;           /* SNS丸ボタンのボーダー色 */
  --sns-bordercolor-hover: #333;     /* SNS丸ボタンのロールオーバ時のボーダー色 */
  --fnav-iconcolor-pc: var(--cs-color01);         /* PCの時のページトップアイコンの色 */
  --fnav-iconcolor-pc-hover: var(--cs-color02);   /* PCの時のページトップアイコンロールオーバ時の色 */
  --fnav-iconcolor-pc-shadow: rgba(255,255,255,0.7);  /* PCの時のページトップアイコンシャドウの色 */
  --fnav-bgcolor-sp: var(--cs-color01);           /* スマホの時のフッターアイコンの背景色 */
  --fnav-iconcolor-sp: #fff;         /* スマホの時のフッターアイコンの色 */
  --sec-bgimg-maskcolor: rgba(0,0,0,0);     /*コンテンツの背景に画像を配置した時の背景マスクの色*/
  --img-maru-s--size: 260px;         /* 画像を円形にトリミング（画像サイズが480px以下）画像の縦幅サイズを指定 */
}

/*/////////////////////////////////////////////////////////////////////////////////////////

★★ ヘッダ固定の時のアンカー位置調整したい場合 ★★
common.jsを修正します。
PCの場合：150行目の　 headerHeight = headerHeight + 50; //ヘッダの高さ
　　　　　　　　　　　　　　　　　　　　　　　　　　↑ この数値を50から変更してください。

/////////////////////////////////////////////////////////////////////////////////////////*/

/*追記*/

/* コンテンツの背景に画像を配置した時のposition 
===================================================== */
.sec-bgimg {
      background-position: center bottom !important;
}


/* 2columnの隙間をなくす 
===================================================== */
.col-between-2__50p_100p {
      gap: 0px;
      }
      .col-between-2__50p_100p > * {
        width: 100%;
        }	
@media print, screen and (min-width: 768px) {
    .col-between-2__50p_100p {
      gap: 0px;
      }
      .col-between-2__50p_100p > * {
        width: 50%;
        }
}


/* メールフォームプロ
===================================================== */
/* 確認画面 */
div#mfp_phase_confirm h4 {
  padding-top: 0;
  margin-bottom: 30px;
}
table#mfp_confirm_table tr th,table#mfp_confirm_table tr td {
  font-size: inherit;
}
@media screen and (max-width: 800px) {
  table#mfp_confirm_table tr td {
    border-top: none !important;
  }
}

.mfp_buttons {
  padding: 0 !important;
  }
/* 送信ボタン、キャンセルボタン */
  button#mfp_button_send, button#mfp_button_cancel {
    text-decoration: none;
    border: 2px solid var(--cs-bordercolor);
    font-weight: bold;
    letter-spacing: 0.5px;
    line-height: 1.4;
    padding: 10px 15px;
    margin: 0 auto;
    display: -webkit-flex;
    display: flex;
    gap: 10px;
    position: relative;
    width: 40%;
    padding-block: 20px;
    justify-content: center;
  }
@media (max-width: 767px) {
  button#mfp_button_send, button#mfp_button_cancel {
    width: 100%;
    }
}
  button#mfp_button_send {
    background-color: var(--cs-color02);
    border-color: var(--cs-color02);
    color: var(--cs-white) !important;
    }
    button#mfp_button_send:hover {
      background-color: var(--cs-white);
      color: var(--cs-color02) !important;
      }
  button#mfp_button_cancel {
    border-color: var(--cs-gray);
    background-color: var(--cs-gray);
    color: var(--cs-white) !important;
    }
    button#mfp_button_cancel:hover {
      background-color: var(--cs-white);
      color: var(--cs-gray) !important;
      }


/* information
===================================================== */
@media screen and (min-width: 768px) {
  .c-info {
    --dt-w: 170px;
  }
  .c-info > dl > dt {
    width: var(--dt-w);
  }
  .c-info > dl > dd {
    width: -webkit-calc( 100% - var(--dt-w) );
    width: -moz-calc( 100% - var(--dt-w) ); 
    width: calc( 100% - var(--dt-w) );
  }
}