*{
  margin: 0;
  padding:0;
  box-sizing: border-box;
  outline: none;
}

html {
  font-size: 100%; /* 100% = 16px */
}

body {
  padding-top: 56px;
  Font-family: 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, "Hiragino Sans", "Meiryo", sans-serif;
  /* font-family: "Hiragino Sans","Montserrat","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Meiryo",sans-serif; */
}

.only-pc { 
  display: block; /* デスクトップでは表示 */ 
}

.only-sm {
  display: none;
}

.bb{
  font-weight: bold;
}

/* Djangoメッセージ用のコンテナスタイル */
#message-container {
    position: fixed; /* 画面に固定 */
    top: 80px; /* 上からの位置。ナビゲーションバーの高さに応じて調整してください */
    left: 50%;
    transform: translateX(-50%); /* 水平方向に中央揃え */
    width: 80vw; /* 画面幅のxx% */
    max-width: 600px; /* 大画面での最大幅を指定 */
    z-index: 2000; /* 他のどの要素よりも手前に表示 */
}

/* 複数のメッセージが表示された際の余白を調整 */
#message-container .alert {
    margin-bottom: 1rem;
}

/* color Oceanic Harmony */
/* https://colordrop.io/palette/52904 */
/* https://www.schemecolor.com/tools/create-gradient/29dbd8-141a6b */
/* https://www.schemecolor.com/harmony-of-blue.php */
.co0{
  color: #a7c6ed;
}
.co1{
  color: #9BE8F0;
}
.co2{
  color: #74CEF7;
}
.co3{
  color: #0180CC;
}
.co4{
  color: #0357AF;
}
.co5{
  color: #141A6B;
}
.co6{
  color: #111f2c;
}
.ca1{
  color: #f5b7b1;
}
.ca2{
  color: #E4815A;
}
.ca3{
  color: #e74c3c;
}

.bo0{
  background-color: #a7c6ed;
}
.bo1{
  background-color: #9BE8F0;
}
.bo2{
  background-color: #74CEF7;
}
.bo3{
  background-color: #0180CC;
}
.bo4{
  background-color: #0357AF;
}
.bo5{
  background-color: #141A6B;
}
.bo6{
  background-color: #111f2c;
}
.ba1{
  background-color: #f5b7b1;
}
.ba2{
  background-color: #E4815A;
}
.ba3{
  background-color: #e74c3c;
}

@media screen and (max-width: 768px){
  .only-pc { 
    display: none; /* デフォルトでは非表示 */ 
    }
  .only-sm {
    display: block;
  }
}