/* 576px以上で適用されるCSS */
@media (min-width: 576px) {
  /* ヘッダー の大きさと画像*/
  .header{
    height: 65vh;
    background:#FFF url(../image/background01.png) no-repeat 50% 30%;
  }
  /* フォント */
  .main-font{
    font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
    color: #062b55;
    font-weight:700;
    line-height: 30px;
    font-size: 1.0em;
  }
  .main-font-bold{
    font-weight:700;
    font-size: 1.3em;
    letter-spacing: 0px;
  }
  .main-font-title{
    font-weight:700;
    font-size: 1.4em;
    letter-spacing: 4px;
  }
  .main-font-title-compact{
    font-weight:700;
    font-size: 1.2em;
    letter-spacing: 0px;
  }
  /* liの空行 */
  .list-empty{
    height: 30px;
    width: 100%;
  }
}

/* 576px未満で適用されるCSS */
@media (max-width: 575.98px) {
  /* ヘッダー の大きさと画像*/
  .header{
    height: 60vh;
    background:#FFF url(../image/background01.png) no-repeat 50% 40%/99%;
  }
  /* フォント */
  .main-font{
    font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
    color: #062b55;
    font-weight:700;
    line-height: 20px;
    font-size: 0.9em;
  }
  .main-font-bold{
    font-weight:700;
    font-size: 1.2em;
    letter-spacing: 0px;
  }
  .main-font-title{
    font-weight:700;
    font-size: 1.3em;
    letter-spacing: 5px;
  }
  .main-font-title-compact{
    font-weight:700;
    font-size: 1.1em;
    letter-spacing: 0px;
  }
  /* liの空行 */
  .list-empty{
    height: 20px;
    width: 100%;
  }
}

/* モーダルのフォント */
.modal-font{
  color: #000000;
  font-weight:500;
  font-size: 0.9em;
  letter-spacing: 0px;
  line-height: 1.2em;
}

/* ヘッダーのフォントカラー */
.nav-font{
  color: #ffffff; 
  font-family: "Arial", "メイリオ";
  font-size: 0.9em;
  font-weight:300;
  line-height: 20px;
}

/* ヘッダーのメニューボタン*/
.nav-button:focus{
  outline: none; 
  box-shadow: none;
}

.nav-button:hover{
  outline: none; 
  box-shadow: none;
  color: #ffffff; 
}

.nav-button:active{
  outline: none; 
  box-shadow: none;
  color: #2a2a2a; 
}

/* ヘッダーのメニューの大きさの制御 */
.nav-list a{
  height: 18px;
  padding: 0px 10px 0px 10px;
}

/* ページのコマ区切り*/
.content-flame {
  position: relative;
  border: solid 1.5px #082f5b;
  background-color: #fff;
}

.content-flame::before,
.content-flame::after {
  position: absolute;
  content: "";
  display: block;
  background-color: #fff;
}

.content-flame::before {
  top: -1.5px;
  bottom: -1.5px;
  left: 12px;
  right: 12px;
}

.content-flame::after {
  top: 12px;
  bottom: 12px;
  left: -1.5px;
  right: -1.5px;
}

.content-flame .content-inner {
  position: relative;
  z-index: 1;
}

/* 記事内の小見出し */
.sub-title {
  line-height: 30px;
  padding-left:10px;
  border-left: 4px solid #f6a95c;
}
.sub-title-color {
  color: rgb(0, 168, 204, 1.0);
}

/* フッター */
footer ul.nav {
  font-size: 0.9rem;
}
footer a.nav-link {
  padding: 0;
  color: white;
}

/* */
.modal-cel{
  height: 40px;
}

/************
 *** 汎用 *** 
 ************/

/* リストにセパレータをつける */
.list-separate li + li {
  border-left: 1px solid #FFF;
}

/* センタリングする */
.centering{
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 青いボタン */
.btn-blue{
  color: #fff;
  background-color: #52afcf;
  border-color: #52afcf;
  width: 140px;
}

.btn-blue:hover{
  color: #fff;
  background-color: #386bb8;
  border-color: #386bb8;
}

/* 灰色のボタン */
.btn-gray{
  color: #fff;
  background-color: #a4a4a4;
  border-color: #a4a4a4;
  width: 140px;
}

.btn-gray:hover{
  color: #fff;
  background-color: #545454;
  border-color: #545454;
}

/* 強調リスト */
.strong-list {
  list-style: none;
  padding-left: 0;
  padding-bottom: 1rem;
}
.strong-list li {
  position: relative;
  padding-left: 20px;
  padding-bottom: 10px;
  color: red;
  font-weight: normal;
}
.strong-list li:before {
  position: absolute;
  left: 0;
  content: '＊';
  font-size: 1.0rem;
  font-weight: bold;
}

/**************
 *** 背景色 *** 
 **************/

.bg-diagonal-blue{
  background: repeating-linear-gradient(-45deg, #d8e8f5, #d8e8f5 , white 2px, white 5px);
}

.bg-diagonal-orange{
  background: repeating-linear-gradient(-45deg, #fdedd6, #fdedd6 , white 2px, white 5px);
}

.bg-light-blue{
  background-color:#52afcf;
  color: #ffffff; 
}

.bg-deep-blue{
  background-color:#08305a;
  color: #ffffff; 
}

.bg-white{
  background-color:#FFFFFF;
}

.bg-gray{
  background-color:#F0F0F0;
}


/**********
 *** 色 *** 
 **********/

.color-orange{
  color: #f6a95c;
}

.border-blue{
  border:1px #d7eaf7 solid;
}

.border-orange{
  border:1px #fbf1d5 solid;
}

.color-red{
  color: #D93D1A;
}