@charset "UTF-8";

/***************************************
* カスタムプロパティ
***************************************/
:root {
  --base-font-size: 62.5%; /* 基本文字サイズ 10px相当 */
  --base-font-family: "Zen Kaku Gothic New", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, "メイリオ", Meiryo, sans-serif; /* 基本フォント */
  --alphabetic-font-family: "Josefin Sans", sans-serif; /* 英文字フォント */
  --base-font-color: #3b2414; /* ベース文字色 */
  --form-privacy-font-color: #3b2414; /* フォームのプライバシーポリシー内文字色 */
  --base-background-color: #ffffff;
  --extra-color: #eeeeee;
  --accent-1-background-color: #FCBE61; /* アクセント背景色1 */
  --accent-2-background-color: #FFF0E0; /* アクセント背景色2 */
  --accent-3-background-color: #B96D40; /* アクセント背景色3 */
  --accent-4-background-color: #FFCF9C; /* アクセント背景色4 */
  --warning-color: #e74141;
  --ok-status-color: #0056a6; /* OK色 */
  --warning-status-color: #fd4a26; /* 警告色 */
  --primary-background-color: #fcbe61;
  --form-control-bg: #eeeeee;
  --form-control-readonly-bg: #b96d40;
  --average-font-size: 3.733vw; /* (28px / 750px * 100vw) */
  --base-bg: var(--base-background-color);
}

@media all and (min-width: 768px) {
  :root {
    --average-font-size: 1.4rem;
  }
}


/***************************************
* フォームリセット
***************************************/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid transparent;
  -webkit-text-fill-color: var(--base-font-color);
  -webkit-box-shadow: 0 0 0px 1000px var(--base-background-color) inset;
  box-shadow: 0 0 0px 1000px var(--base-background-color) inset;
  transition: background-color 5000s ease-in-out 0s;
}

input:-webkit-autofill:read-only,
textarea:-webkit-autofill:read-only,
select:-webkit-autofill:read-only,
input[type="text"]:not(#acceptance):read-only,
input[type="tel"]:not(#acceptance):read-only,
input[type="email"]:not(#acceptance):read-only,
textarea:not(.privacy-textarea):read-only {
  border-color: var(--form-control-readonly-bg);
  -webkit-text-fill-color: var(--base-background-color);
  -webkit-box-shadow: 0 0 0px 1000px var(--form-control-readonly-bg) inset;
  box-shadow: 0 0 0px 1000px var(--form-control-readonly-bg) inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* //MEMO
    特定の入力フォームのデザインを変更する場合は、以下のCSSを使用してフォームの入力部分をカスタマイズします。
.c-form-control__input,
.c-form-control__textarea {
  color: var(--base-font-color) !important;
  background: var(--base-background-color) !important;
}
*/


/**************************************************************
* 背景画像の指定
**************************************************************/

/** 共通
************************************************************ */
.free-btn-icn {
  background-image: url("../images/common/tel_icn.svg");
}

/* sns */
.c-icon-twitter {
  background-image: url(../images/common/twitter.svg);
}
.c-icon-instagram {
  background-image: url(../images/common/instagram.svg);
}
.c-icon-facebook {
  background-image: url(../images/common/facebook.svg);
}

@media all and (max-width: 1200px) {
  .menu-trigger {
    background: url(./../images/common/menu_icon.png) no-repeat center / contain;
  }
  .active .menu-trigger {
    background-image: url(./../images/common/close_icon.png);
  }
}

/** owner
************************************************************ */
.owner .c-heading::after {
  background: url(./../images/owner/owner.jpg) no-repeat top -70px center/cover;
}

/** faq
************************************************************ */
.faq_bg {
  background: url(../images/faq/faq_bg.jpg) no-repeat center;
}

@media all and (max-width: 767px) {
  .faq_bg {
    background-image: url(../images/faq/faq_bg.jpg);
  }
}