@charset "utf-8";
/*****************************************
  original.css
  企業固有のスタイルを指定
******************************************/

/**************************************
★カラー設定
(1) ページ背景色 #fff
(2) テキストカラー #000
---
(3) テーマ・メインボタン（4段階）#17a1ba  → ※濃いめの色推奨
(3-1) テーマ：50%  #8AD0DC
(3-2) テーマ：30%  #B9E3EA
(3-3) テーマ：10% #E7F5F8
---
(4) リンク・サブ（4段階）#888888 → ※地味色だと目立たない
(4-1) リンク：50%  #C3C3C3
(4-2) リンク：30%  #DBDBDB
(4-3) リンク：10%  #F3F3F3
(5) GPS・フッター #555555;
---
★その他設定
ボタン等の角丸：10px、30px（class .r1 /.r2）
ロゴの画像サイズ（幅）：200px
**************************************/
:root {
  /* 背景色 */
	--color_page_bg: #fff;
  /* テキスト */
	--color_text: #000;
  --color_text_rgb: 0, 0, 0; /* color_text の RGB値 */
  /* テーマ・メインボタン */
  --color_theme: #FF5810;
	--color_themeL1: #FFAB87;
	--color_themeL2: #FFCCB6;
	--color_themeL3: #FFEEE6;
  /* リンク・サブ */
	--color_sub: #324EB3;
	--color_subL1: #98A6D9;
	--color_subL2: #C1C9E8;
	--color_subL3: #EAEDF7;
  /* GPS・フッター */
  --color_gps_footer: #324EB3;
 
  /* ロゴ画像の幅（PCの表示サイズ） */
  --width_logo: 200px;

  /* 第２階層以降 */
	--color_A: #FF5810;
  --color_B: #324EB3;
  --color_Btext: #fff;
  --color_C: #324EB3;
  --color_D: #C1C9E8;
  --color_E: #EAEDF7;
  --color_btnText: #fff;
  --color_btnText_on: #FF5810;
  --color_btnBg: #FF5810;
  --color_btnBg_on: #fff;

  /* ↓ 以下は修正不要 */
  /* （仮）白 */
  --color_white: #fff;
  /* グレー */
  --color_grayDk: #909090;
  --color_grayLt: #ccc;
  /* 角丸 */
  --size_r1: 10px;
  --size_r2: 30px;
  /* バーガーメニュー用 */
  --scrollbarwidth: calc(100vw - 100%);
  --innerwidth: calc(100vw - (100vw - 100%));
}
/* ★設定　ここまで */


/*******************************
 general
*******************************/
body#pagetop {
  -webkit-text-size-adjust: 100%;
  background-color: var(--color_page_bg) !important;
  font-size: 16px;
  font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  color: var(--color_text);
}
#header {                                      
  font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}
@font-face {
  font-family: recop-iconfonts;
  font-display: swap;
  src: url("option/font/recop-iconfont.eot") format("eot"),
       url("option/font/recop-iconfont.woff") format("woff"),
       url("option/font/recop-iconfont.ttf") format("truetype");
}

a:link, a:active,
a:visited, a:hover {
  color: var(--color_sub) !important;
}

#header, #footer,
#header *, #footer * { box-sizing: border-box; }

#header img,
#footer img { width: 100%; }
img { height: auto; }

/***** switch display *****/
@media (min-width: 768px) {
  .sp { display: none; }
}
@media (max-width: 767px) {
  .pc { display: none; }
}

/*******************************
 regular contents reset
 *******************************/
/* ▼common.css で固定幅(780px)指定あり */
#container,
#header, #header .content, #header .content .free,
#main, #main .content, #main .content .free,
#footer .content, #footer .content .free { width: auto; }
/***** #container *****/
div#container { width: 100%; }

/*******************************
 ベーシックプラン 調整
*******************************/
#main .content .free {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

/*** 最小画面幅でSNSボタン起因の横スクロール防止 ***/
#bottomContent #social {
  overflow: hidden;
}

/*******************************
 ヘッダー
*******************************/
/* ベーシックプラン */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 60px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 10px;
}
header img.logo {
  max-width: var(--width_logo);
}
header h1 {
  font-size: 15px;
  font-weight: bold;
  font-style: normal;
  text-align: right;
  width: calc(100% - var(--width_logo) - 20px); /* logo - margin10x2 */
  padding: 0 10px;
}
header h1 span {
  display: inline-block;
}
@media only screen and (max-width: 767px){
  header {
    flex-direction: column;
    height: auto;
  }
  header h1 {
    width: 100%;
    font-size: 15px;
    text-align: center;
    padding: 0 0 20px;
  }
  /* header h1 span {
    display: block;
  } */
  header img.logo {
    max-width: var(--width_logo);
    margin: 10px auto;
  }
}

/*******************************
 フッター
*******************************/
#footer {
  height: 100px;
}
#footer .content .free {
  width : 100%;
}
#footer .free footer {
  background-color: var(--color_gps_footer);
}
footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100px;
}
footer p {
  color: #fff;
  font-size: 12px;
  text-align: center;
  line-height: 1.4;
  padding-bottom: 0.3em;
}
footer a:link,
footer a:active,
footer a:visited,
footer a:hover {
  color: #fff !important;
}
@media only screen and (max-width: 767px){
  #footer { position: absolute; bottom: 0; }
  footer { height: 100px; text-align: center; }
}
/***** #bottomContent *****/
#main .space {
  padding-bottom: 150px; /* 174px ズレ4px */
  }
@media only screen and (max-width: 767px){
  #main .space {
    padding-bottom: 100px; /* 104px */
  }
}


/*******************************
 404エラー画面
*******************************/
#errorContent {
  max-width: 1000px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 10px;
}
@media only screen and (max-width: 767px){
  #errorContent { padding: 0 15px; }
}

/**/