@charset "utf-8";

/* ******************************************************************
remedy.css
****************************************************************** */
/* このプロジェクトは工事中です。まだリリースの準備はできていません。 2019年2月11日現在。 */
 
 
* { box-sizing: border-box; } /* box-sizingをborder-boxに切り替える。 */
 
/* ユーザーがスマホを「視差効果を減らす」に設定（prefers-reduced-motion）している場合は、アニメーションの終わりまですぐにジャンプさせます。 */
/* これは意図しない結果につながる可能性があります。必要に応じて削除し、prefers-reduced-motionのために適切なスタイルを定義してください。 */
@​media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}
 
body {
  margin: 0; /* ページの端の周りの小さなスペースを削除。 */
}
 
/* タイポグラフィにrem単位を使用するよう切り替えます。見出しのline-heightを修正。 */
h1 {
  font-size: 2rem; /* すべてのH1は大きくし、入れ子でサイズが縮小されるのを削除。 */
  margin: 0.67em 0;
}
h2 {
  font-size: 1.5rem;
}
h3 {
  font-size: 1.17rem;
}
h4 {
  font-size: 1.00rem;
}
h5 {
  font-size: 0.83rem;
}
h6 {
  font-size: 0.67rem;
}
 
h2, h3, h4, h5, h6{
  line-height: 1;
}
 
/* line-heightを広げ、リーダビリティを向上させる。 */
p {
  line-height: 1.5; 
}
 
 
pre { 
  white-space: pre-wrap; /* デフォルトのoverflowは好ましくありません。 */
}
 
 
/* 各ブラウザは、現在のリストのmargin, paddingと一致していますか？
  See: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation  */
nav ul {
  list-style: none;
}
 
 
img {
  border-style: none; /* IE10以前のリンク画像の枠線を削除。 */
  vertical-align: bottom;  /* ディセンダにより生じる画像の隙間を修正。 */
  display: block; /* ブロックに切り替えます。通常の画像に必要な操作です。 */
  max-width: 100%; /* デフォルトで画像をフレキシブルに。 */
  height: auto; /* max-widthが有効になっても、画像のアスペクト比を維持。 */
}
 
 
/* 英語では、q要素のスタイルを定義するときに、直線引用符ではなく、波引用符を使用してください。 */
 
/* このコードは、quotes.cssファイルに記述されています。 */
 
 
/* まだ広くサポートされていない最新のプロパティもサポートします。
   初期値が最良ではないため、適した値を定義します。
*/
 
/* 一貫した行間隔を定義。 */
:root {
  line-sizing: normal;
}
 
/* CJK言語（中国語、日本語、韓国語）での句読点の間隔を変更。 */
:root {
  text-spacing: trim-start allow-end trim-adjacent ideograph-alpha ideograph-numeric;
}


/* ******************************************************************
Primary Styles
****************************************************************** */
html,
body {
  position: relative;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background-color: #0F4C81;
  color: #fff;
  font-family: "Hiragino Kaku Gothic Pro",HiraKakuPro-W3,"ヒラギノ角ゴ Pro W3","メイリオ", Meiryo,"MS P ゴシック",verdana,sans-serif;
  font-size: 17px;
  line-height: 1.75em;
  font-weight: normal;
}

body.TEST {
	background: #0F4C81 url(../img/test.png) 0 0 repeat-y;
}

#wrapper {
  background-color: #F0EDE5;
  color: #363838;
  padding: 0 0 30px 0;
  margin: 0;
}

h2 {
  font-size: 2.4em;
  font-weight: bolder;
}

h3 {
  font-size: 1.6em;
  font-weight: bold;
}

a {
  color: #F5B895;
}
a:hover {
  color: #F26B5B;
  text-decoration: underline;
}

.must {
  color: #F26B5B;
}

.error-custom {
  display: none;
}
.error-custom.is-invalid {
  display: block;
}

.color00 { color: #0F4C81; }
.color01 { color: #658DC6; }
.color02 { color: #B5C7D3; }
.color03 { color: #84898C; }
.color04 { color: #A58D7F; }
.color05 { color: #F5B895; }
.color06 { color: #F2D6AE; }

.color07 { color: #F26B5B; }
.color08 { color: #C0D725; }
.color09 { color: #7EC845; }
.color10 { color: #DBCBBD; }
.color11 { color: #F0EDE5; }
.color12 { color: #363838; }

.colorW10 { color: rgba(255,255,255,0.1); }
.colorW20 { color: rgba(255,255,255,0.2); }
.colorW30 { color: rgba(255,255,255,0.3); }
.colorW40 { color: rgba(255,255,255,0.4); }
.colorW50 { color: rgba(255,255,255,0.5); }
.colorW60 { color: rgba(255,255,255,0.6); }
.colorW70 { color: rgba(255,255,255,0.7); }
.colorW80 { color: rgba(255,255,255,0.8); }
.colorW90 { color: rgba(255,255,255,0.9); }
.colorW { color: #fff; }

.colorB10 { color: rgba(0,0,0,0.1); }
.colorB20 { color: rgba(0,0,0,0.2); }
.colorB30 { color: rgba(0,0,0,0.3); }
.colorB40 { color: rgba(0,0,0,0.4); }
.colorB50 { color: rgba(0,0,0,0.5); }
.colorB60 { color: rgba(0,0,0,0.6); }
.colorB70 { color: rgba(0,0,0,0.7); }
.colorB80 { color: rgba(0,0,0,0.8); }
.colorB90 { color: rgba(0,0,0,0.9); }
.colorB { color: #000; }

.bg-color00 { background-color: #0F4C81; }
.bg-color01 { background-color: #658DC6; }
.bg-color02 { background-color: #B5C7D3; }
.bg-color03 { background-color: #84898C; }
.bg-color04 { background-color: #A58D7F; }
.bg-color05 { background-color: #F5B895; }
.bg-color06 { background-color: #F2D6AE; }

.bg-color07 { background-color: #F26B5B; }
.bg-color08 { background-color: #C0D725; }
.bg-color09 { background-color: #7EC845; }
.bg-color10 { background-color: #DBCBBD; }
.bg-color11 { background-color: #F0EDE5; }
.bg-color12 { background-color: #363838; }
.bg-colorW { background-color: #fff; }
.bg-colorB05 { background-color: rgba(0,0,0,0.05); }

.no-button {
  border: none;
  background: none;
  padding: 0 6px;
}

/* ******************************************************************
bootstrap4 上書き
****************************************************************** */
.invalid-feedback {
  color: #F26B5B;
}

.progress {
  background-color: #B5C7D3;
}
.progress-bar {
  background-color: #7EC845;
}


/* ******************************************************************
js:particles.js用（背景にパーティクル表示）
****************************************************************** */
.background {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  z-index: 0;
}

/* ******************************************************************
header
****************************************************************** */
.nav-link span {
  font-size: 0.9em;
}

#title_img {
  max-width: 320px;
}

/* ******************************************************************
footer
****************************************************************** */
footer {
  color: #658DC6;
}

/* ******************************************************************
index
****************************************************************** */
#video-list img {
  width: 320px;
}

.card {
  background-color: #fff;
  color: #363838;
  border: none;
}
.card-body p {
  margin-block-end: 0;
}

.card-header {
  padding: 0.5rem 1.25rem 0.4rem ;
}

.card01 .card-header, 
.card04 .card-header, 
.card05 .card-header {
  background-color: #F0EDE5;
}
.card03 .card-header {
  background-color: #F2D6AE;
}
.card02 .card-header {
  background-color: #F5B895;
  font-weight: bold;
}

.admin-option {
  color: #0F4C81;
  text-decoration: none;
}

.nav-add {
  display: block;
  padding: 0.5rem 1rem;
  color: #F2D6AE;
}
a.nav-add:hover {
  text-decoration: none;
}

.hwa-pagination a {
  display: inline-block;
  padding: 4px 11px;
  margin: 0 3px;
  border: 1px solid #658DC6;
  color: #fff;
}
  .hwa-pagination a:hover {
    text-decoration: none;
    background: #658DC6;
    color: #fff;
    -webkit-transition: all .3s;
    transition: all .3s;
  }

.hwa-pagination a.currentpage {
  background: #658DC6;
  color: #fff;
}

/* ******************************************************************
Date Time
****************************************************************** */
.btn-outline-secondary {
  color: #B5C7D3;
  border-color: #B5C7D3;
}

.datepicker {
  color: #363838;
  width: 320px;
}

.datepicker table {
  width: 100%;
  margin-bottom: 10px;
}

.gj-picker.timepicker [role=header] {
  font-size: 48px;
}

/* ******************************************************************
mailform
****************************************************************** */
i.must {
  color: #F26B5B;
}

textarea#Memo {
  height: 20em;
}

/* ******************************************************************
user
****************************************************************** */
a.act0 {
  color: #F0EDE5;
}
.rb-input {
  display: none;
}
.rb-input + label {
  margin-top: 7px;
  padding-left: 30px;
  position:relative;
  margin-right: 20px;
}
.rb-input + label::before {
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: 0;
  width: 25px;
  height: 25px;
  border: 1px solid #F0EDE5;
  border-radius: 50%;
}
.rb-input:checked + label {
  color: #F2D6AE;
}
.rb-input:checked + label::after {
  content: "";
  display: block;
  position: absolute;
  top: 10px;
  left: 5px;
  width: 15px;
  height: 15px;
  background: #F2D6AE;
  border-radius: 50%;
}

.cb-input {
  display: none;
}
.cb-input + label {
  margin-top: 8px;
  padding-left: 40px;
  position:relative;
  margin-right: 30px;
  margin-bottom: 10px;
}
.cb-input + label::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border: 1px solid #aaa;
  border-radius: 4px;
}
.cb-input:checked + label {
  color: #F2D6AE;
  font-weight: bold;
}
.conf-line .cb-input:checked + label {
  color: #fff;
}
#reservation-form.confirm .conf-line label {
  color: #fff;
}
.cb-input:checked + label::after {
  display: block;
  position: absolute;
  top: 0px;
  left: 8px;
  content: '✔';
}

.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
  color: #F2D6AE;
}