@charset "utf-8";

img {max-width:100%}
/* --- 全体の背景・テキスト --- */
body {
background: #e1e1e1;/* ページの背景 */
}
/* ---ナビゲーションバー--- */
nav.nav-custom{
background-color: #0d6efd;
color: #ffffff;
}
nav.nav-custom a{
color: #ffffff;
}
nav.nav-custom a:visited{
color: #ffffff;
}
nav.nav-custom a:hover{
color: #ff7043;
}
footer {
    display: flex; /* Flexboxを使用 */
    align-items: center; /* 縦方向の中央揃え */
    justify-content: center; /* 横方向の中央揃え */
    height: 50px; /* フッターの高さを指定 */
    background-color: #0d6efd; /* フッターの背景色を指定 */
    color: white; /* フッターの文字色を指定 */
    padding: 0; /* 上下のパディングを削除 */
}
/* --- 背景色 --- */
.lightyellow {
background-color: #ffffe0;
}

.lavender{
background-color: #ff1493;

}

/* --- リンクのアンダーライン消去 --- */
.link-under{
text-decoration: none;
}
/* --- 配色関係 --- */

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

.bg-skyblue {
  background-color: #00bfff !important;
}

a.bg-skyblue:hover, a.bg-skyblue:focus {
  background-color: #0d6efd !important;
}

/* --- 見出し --- */
.heading-h1 {
  position: relative;
  padding: 0.3rem 1rem;
  color:#0d6efd;
  border-bottom: 3px solid #0d6efd;
  border-left: 3px solid #0d6efd;
  border-radius: 0 0 0 20px;
  margin-bottom: 2rem
}

.heading-h1:before {
  position: absolute;
  right: 50px;
  bottom: -21px;
  width: 0;
  height: 0;
  content: '';
  border-width: 21px 21px 0 0;
  border-style: solid;
  border-color: #0d6efd transparent transparent transparent;
}

.heading-h1:after {
  position: absolute;
  right: 54px;
  bottom: -14px;
  width: 0;
  height: 0;
  content: '';
  border-width: 14px 14px 0 0;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

.heading-h2{
  color: #0d6efd;/*文字色*/
  /*線の種類（点線）2px 線色*/
  border-bottom: dashed 2px #0d6efd;
}

.heading-h3 {
  position: relative;
  display: inline-block;
  padding: 0.3rem 1rem 0.3rem 0.7rem;/*見出し内のパディング*/
  color: #fff;/*文字色*/
  font-size:1.2em;
  border-radius: 0vh 60vh 60vh 0vh;/*背景の角を丸める*/
  background: #0d6efd;/*背景色*/
}

.headingline {
  color: #0d6efd;/*文字色*/
  padding: 0.2em 0;/*上下の余白*/
  border-top: solid 3px #0d6efd;/*上線*/
  border-bottom: solid 3px #0d6efd;/*下線*/
}

/* --- 表示関係 --- */
/* web表示時に非表示にする要素 */
.oli-yes-print {
  display: none; /* すべての要素を非表示にする */
}
/* --- コンテンツ量が少ない場合でもフッターを最下部に表示 --- */
.oli-wrap{
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
  min-height: 100vh;
}

/* --- 文字関係 --- */
.gyoukan{
line-height: 1.8;
}

/* --- マージン関係 --- */
.margin-top20 {
  margin-top:20px;
}
.margin-bottom20 {
  margin-bottom:20px;
}
/* --- ふわっと表示させるcss --- */
#main1, #main2 {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

#main1.show, #main2.show {
  opacity: 1;
}