@charset "utf-8";

/*
 * "Fredericka" is lisenced under the SIL Open Font License 1.1
 * http://fonts.googleapis.com
 * https://www.google.com/fonts/attribution
 * http://scripts.sil.org/OFL
 */

/* *****共通設定***** */

html {
  scroll-behavior: smooth;
}

:root {
  --bs-body-font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

a {
  color: #696969;
}

a:hover {
  color: #a9a9a9;
}

.bg-primary,
.btn-primary {
  background-color: #00008b !important;
}

.border-primary {
  border-color: #00008b !important;
}

.bg-maincolor {
  background-color: #f0f8ff !important;
}

.btn-warning:hover {
  color: #212529;
  background-color: #ffa500;
  border-color: #ffa500;
}

.bg-yl-color {
  background-color: #fffaf0 !important;
}

.btn-danger:before{
	color:peachpuff;
	content:'\f055';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  
  margin-right:5px;
}

.bg-senkou-color {
  background-color: #e6ffe6 !important;
}
.bg-mz-color {
  background-image: 
    linear-gradient(rgba(255, 250, 240, 0.8), rgba(255, 250, 240, 0.6)), 
	  url("../img/bg_sq.png");
  background-size: cover;
  background-position: center; /* 画像を中央に寄せる */
 color: #5d4037; 
  padding: 60px 20px;       /* 上下に余裕を持たせる */
  text-align: center;       /* 文字を真ん中に寄せる */
  min-height: 300px;        /* 最低限の高さを確保する */
  display: flex;            /* 中の文字を上下中央にするなら */
  flex-direction: column;
  justify-content: center;
}

.anime01/*bg-gradient-color*/ {
    background: linear-gradient(-225deg, #ccefff 0%, #fffaf0 56%, #ffe6e9 100%);
}

.bg-gradient-color{
    background: linear-gradient(-225deg, #ccefff 0%, #fffaf0 56%, #ffe6e9 100%);
}

.bg-white-color {
  background-color: #ffffff !important;
}

.text-shadow {
  text-shadow: 1px 1px 3px #000;
}

.font-patrick {
  font-family: 'Fredericka the Great', cursive;
}

/* ヘッダー(navbar) */
#nav01 {
  border-bottom: 3px solid #00008b;
}

#nav02 .nav-fill {
  width: 100%;
}

#nav02 .nav-item {
  border-left: 1px solid #dee2e6;
}

#nav02 .last-list-md {
  border-right: 1px solid #dee2e6;
}

/* フッター */
#footer-sns img {
  height: 58px;
  max-width: 100%;
  width: auto;
  margin-right: 25px;
}

#footer-index ul ul {
  padding-left: 0.75rem;
  border-left: 1px solid #6c757d;
}

/* *****トップページ***** */
.jumbotron {
/*元データ background-image: url("../img/top-image.jpg");*/
  background-image: url("../img/saiyo_top.gif");
  background-repeat: no-repeat;
  background-size: cover;
}

/* *****下層ページ***** */
.breadcrumb-item + .breadcrumb-item:before {
  content: "\f054";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: small;
  color: #fff;
}

#page .jumbotron {
  background: #f1efff url("../img/subpage-headding.jpg") no-repeat center center;
  background-size: cover;
  border-radius: initial;
}

h2  {
	font-family:"ヒラギノ丸ゴ ProN",  "メイリオ","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",  Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1rem;
	color:   #666A6D /*#0066CC*/;
	text-align: center;
	display: block;
	font-weight: normal;
	padding:10px;
	margin-bottom: 24px;
	/*background-color:   #F6F8FA   ;*/
	background: repeating-linear-gradient(-45deg, #ffffff, #ffffff 3px, #f1f1f1 0, #f1f1f1 6px);
	border-radius: 13px;
	
}

h3 {
	font-family: "ヒラギノ角ゴ Pro W6","メイリオ", "Hiragino Kaku Gothic Pro",  Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:1.5em;
	background-color:#eeeeee;
	margin-left: 0px;
	color: #333333;/*rgb(0,51,153);*/
	display: block;
	margin-bottom: 10px;
	text-align: center;
	padding: 13px 3px 13px 3px;
	border-bottom-width: 0px;
	border-bottom-style: solid;
	border-bottom-color: #0099ff;
	border-top-width: 0px;
	border-top-style: solid;
	border-top-color: #0099ff;
	border-right-width: 0px;
	border-left-width: 13px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #0099ff;
	border-left-color: #0099ff;
	background-repeat: repeat-x;
	font-weight:100;
	border-radius: 0 10px 10px 0;
	
}

h4 {
    font-family: "ヒラギノ角ゴ Pro W6","メイリオ", "Hiragino Kaku Gothic Pro",  Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:2em;
	color: #333333;/*rgb(0,51,153);*/
	display: block;
	margin-bottom: 10px;
	text-align: center;
	padding: 11px 3px 11px 3px;
	border-bottom-width: 4px;
	border-bottom-style: solid;
	border-bottom-color: #0099ff;
	border-top-width: 0px;
	border-top-style: solid;
	border-top-color: #0099ff;
	border-right-width: 0px;
	border-left-width: 0px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #0099ff;
	border-left-color: #0099ff;
	background-repeat: repeat-x;
	font-weight:200;
}

h8 {
  background: #28a745; /*背景色*/
  padding: 1.2em 2.5em;/*文字周りの余白*/
  color: white;/*文字を白に*/
  font-weight: 900;
  font-size:1.2rem;
  border-radius: 0.5em;/*角の丸み*/
  margin:200;
}

h9 {
  background: #c82333; /*背景色*/
  padding: 1.2em 2.5em;/*文字周りの余白*/
  color: white;/*文字を白に*/
  font-weight: 900;
  font-size:1.2rem;
  border-radius: 0.5em;/*角の丸み*/
  margin:200;
}

#pageTopBtn{
 position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 999;

  /* 初期は非表示（チラつき防止） */
  opacity: 0;
  pointer-events: none;

  /* アニメーション */
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

  /* 控えめホバー */
  #pageTopBtn:hover {
    background: rgba(0,0,0,0.8);
    transform: translateY(-2px);
  }

/* --------------------------------------------------

　anim

--------------------------------------------------　*/
 /*fade in*/
.anim-box.fadein.is-animated {
  animation: fadeIn 1.4s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
 
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

 /*slide in*/
.anim-box.slidein.is-animated {
  animation: slideIn 1.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
 
@keyframes slideIn {
  0% {
    transform: translateX(180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}
	
/*zoom in*/ 
.anim-box.zoomin.is-animated {
  animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
 
@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
 
/*跳ねる*/ 
.anim-box.poyoyon.is-animated {
  animation: poyoyon 0.5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
}
 
@keyframes poyoyon {
  0% {
    transform: translateX(140px);
    opacity: 0;
  }
  50% {
    transform: translateX(0);
  }
  65% {
    transform: translateX(30px);
  }
  100% {
    transform: translateX(0);
  }
  20%,100% {
    opacity: 1;
  }
}

/*揺れる*/
.anim-box.poyoyon2.is-animated {
  animation: poyoyon2 1s ease-in-out forwards;
}
 
@keyframes poyoyon2 {
  0%  {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  15% {
    transform: scale(0.98, 0.9) translate(0, 5px);
  }
  30% {
    transform: scale(1.02, 1.0) translate(0, 8px);
  }
  50% {transform: scale(0.98, 1.05) translate(0, -8px);
  }
  70% {
    transform: scale(1.0, 0.9) translate(0, 5px);
  }
  100% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
}
 
/*文字を下から表示*/
.matrix .bg-wrap,
.matrix .bg-wrap .inn {
  display: block;
}
 
.matrix .bg-wrap {
  overflow: hidden;
  opacity: 0;
}
 
.matrix .bg-wrap + .bg-wrap {
  margin-top: 10px;
}
 
.matrix .bg-wrap .inn.large {
  font-size: 36px;
  font-weight: bold;
}
.matrix .bg-wrap .inn.small {
  font-size: 15px;
}
 
.matrix .bg-wrap .inn {
  opacity: 0;
  transform: matrix(1, 0, 0, 1, 0, 100);
  transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
 
.matrix.is-animated .bg-wrap {
  opacity: 1;
}
 
.matrix.is-animated .bg-wrap .inn {
  opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, 0);
}

/* --------------------------------------------------

 レスポンシブ

--------------------------------------------------　*/

@media (max-width: 991.98px) {
  /* md タブレット・スマートフォン向け */

  #nav02 .nav-item {
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #dee2e6;
    letter-spacing: 0.25rem;
  }

  @media (max-width: 575.98px) {
    /* xs スマートフォン向け */

    /* フッター */
    #footer-sns img {
      height: 29px;
      margin-right: 15px;
    }