@charset "utf-8";
/* CSS Document */


.jumbotron-container {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

/*市商祭みだしリボン*/

.ribbon9 {
  display: inline-block;
  position: relative;
  height: 45px;
  text-align: center;
  box-sizing: border-box;
}
.ribbon9:before {/*左側のリボン端*/
  content: '';
  position: absolute;
  width: 10px;
  bottom: -10px;
  left: -35px;
  z-index: -2;
  border: 20px solid #56adf3;
  border-left-color: transparent;/*山形に切り抜き*/
}

.ribbon9:after {/*右側のリボン端*/
  content: '';
  position: absolute;
  width: 10px;
  bottom: -10px;
  right: -35px;
  z-index: -2;
  border: 20px solid #56adf3;
  border-right-color: transparent;/*山形に切り抜き*/
}

.ribbon9 h3 {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0 20px;
  line-height: 45px;
  font-size: 18px;
  color: #FFF;
  background: #2196F3;/*真ん中の背景色*/
}
.ribbon9 h3:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-right: solid 15px #397eb5;/*左の折り返し部分*/
}
.ribbon9 h3:after {
  position: absolute;
  content: '';
  top: 100%;
  right: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-left: solid 15px #397eb5;/*右の折り返し部分*/
}

/* CSSアニメーションの指定*/
.Headline{
  animation: SlideIn 2s;
}

/* アンカーリンクをずらす*/
.anchor {
    display: block;
    padding-top: 100px;
    margin-top: -100px;
}

@keyframes SlideIn {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(64px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
} */

/* サイドメニュー固定 */
.sticked{
    position: sticky;
}

.sidebar_fixed {
  position: sticky;
  top: 100px;
}
.sidebar_content {
  margin-bottom: 100px;
}


/*IE対応用　img-fluid用にブラウザに合わせてリサイズするように*/
.img-fluid {
  width: 100%;
}
	
.bg-syougyou {
  background-color: #7f0000 !important;
}

/*トップページ　Newsのカード見出し背景色(薄い黄色/くちなし色）*/
.bg-syougyou-sub {
  background-color: #FAD26A !important;
}
/*トップページ　ヘッダーのサイトマップのリンク文字色*/
a.no-color-change {
  color: white;
}

/*トップページ　アイコンボタンのリンク文字色*/
a.no-color-change2 {
  color: #212529;
}


/*トップページ　ナビゲーションの文字色*/
.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 1);
}

/*トップページ　市商ニュースの見出しデザイン（ポストイット風）*/

.head_design {
 margin:  0;                 /* デフォルトCSS打ち消し */
font-size:  24px;           /* 文字サイズ指定 */
position:  relative;        /* 位置調整 */
font-weight:  normal;       /* 文字の太さ調整 */
display:  inline-block;     /* インラインブロックにする */
background-color: #feeaac;  /* 背景色指定 */
padding:  10px;             /* 余白指定 */
margin-bottom: 15px;        /* 周りの余白指定 */
border-radius:  2px;        /* 角丸指定 */
}

.head_design:before {
 content:  '';               /* 空白の要素を作る */
 background-color: #b3b3b3;  /* 背景色指定 */
 display:  block;            /* ブロック要素にする */
 position:  absolute;        /* 位置調整 */
 left: 50%;                  /* 位置調整 */
 height: 60%;                /* 高さ指定 */
 top: 26%;                   /* 位置調整 */
 z-index:  -1;               /* 重なり調整 */
 width: 46%;                 /* 幅指定 */
 box-shadow: 0 0 8px 8px #b3b3b3;/* 影指定 */
 transform: rotate(3deg);    /* 回転 */
}

/* トップページに戻る */
#page-top {
  position: fixed;
  width: 100px;
  height: 60px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #FAD26A;
  opacity: 0.7;
  border-radius: 15px;
  z-index:10;
}
 
#page-top a {
  position: relative;
  display: block;
  width: 100px;
  height: 60px;
  text-decoration: none;
}

/* 見出しデザイン　手書き風アンダーライン　黄色 */
.head_design2 {
margin:  0;             /* デフォルトCSS打ち消し */
font-size:  24px;       /* 文字サイズ指定 */
position:  relative;    /* 位置調整 */
font-weight:  normal;   /* 文字の太さ調整 */
margin-bottom: 15px;    /* 周りの余白指定 */
border-bottom: solid 4px rgba(221, 169, 42, 0.6);        /* 線指定 */
border-radius: 0px 0px 160px 180px/0px 0px 20px 4px;    /* 角丸指定 */
}

.p {
margin:  0;         /* デフォルトCSS打ち消し */
line-height: 2;     /* 行間調整 */
}

#page-top a:hover {
  background: #F9C645;
    border-radius: 15px;
    text-decoration: none;
}

#page-top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -25px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page-top a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 30px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

/* マスキングテープ風見出しデザイン 青*/
.maste-box {
  position: relative;
  background-color: #fff;
  background: repeating-linear-gradient(-45deg, #edf5f4, #edf5f4 10px, #f6faf9 0, #f6faf9 20px);
  padding: 1em;
}
.maste-tape{
  position: absolute;
  top: -0.75em;
  background-color: rgba(100,100,100,.3);
  border-left:4px solid #8BC6CA;
  padding: 0.25em 2em;
  color: #454545;
  transform: rotate(-3deg);
}
.maste-box p {
  color: #454545;
  padding: 15px 10px 10px 10px;
}

/* マスキングテープ風見出しデザイン ピンク*/
.maste-box2 {
  position: relative;
  background-color: #fff;
  background: repeating-linear-gradient(-45deg, #f4f1ed, #f4f1ed 10px, #f9f7f9 0, #f9f7f9 20px);
  padding: 1em;
}
.maste-tape2{
  position: absolute;
  top: -0.75em;
  background-color: rgba(100,100,100,.3);
  border-left:4px solid #C98E8B;
  padding: 0.25em 2em;
  color: #454545;
  transform: rotate(-3deg);
}
.maste-box2 p {
  color: #454545;
  padding: 15px 10px 10px 10px;
}

/* サイトマップ　アコーディオン  */
.panel-heading {
    cursor: pointer;
}
/* サイトマップ　アコーディオン 　下矢印 */
.panel-heading a[aria-expanded="false"]:after {
    font-family: 'FontAwesome';
    content:"\f107";
    float: right;
    color: inherit;
}

/* サイトマップ　アコーディオン 　上矢印 */
.panel-heading a[aria-expanded="true"]:after {
    font-family: 'FontAwesome';
    content:"\f106";
    float: right;
    color: inherit;
}

/* サイトマップ　アコーディオン 　右矢印 */
.sitemap-single:after {
    font-family: 'FontAwesome';
    content:"\f105";
    float: right;
    color: #fff;
}
 
/* サイトマップ　アコーディオン 　外部リンク */
.external-link:after {
    font-family: 'FontAwesome';
    content:"\f08e";
    float: right;
    color: #FFF;
}

/* 学校紹介　見出し　サイドラインデザイン */ 
.main_content h4 {
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	padding: 0.25em 1em;/*上下 左右の余白*/
	color: #494949;/*文字色*/
	background: transparent;/*背景透明に*/
	border-left: solid 5px #007F7F;/*左線*/
}

.juutenkeikaku {
	margin: 20px;
	border: solid 5px #fec34c;
	padding: 20px;
}