@charset "UTF-8";

html { scroll-behavior: smooth;}



a, a:hover {
	text-decoration: none ;
}



header {
	position: fixed;
	left: 0;
	background-color: rgba(0,64,150,0.95);
  width: 100%;
  color: #fff;
	/*height: 70px ;*/
	border-bottom: 1px solid #EEE ;
	z-index: 100 ;
	/*padding-top: 10px ;
	padding-bottom: 10px ;*/
}

img.header-logo {
	max-width: 180px ;
	margin-right: 20px ;
}

img.ban-line {
	width: 260px !important ;
	margin-right: 15px ;
}

img.ban-tel {
	width: 400px !important ;
}

.navbar-nav li:first-child {
	border-left: 1px solid #FFF ;
}

.navbar-nav li a {
	padding: 2px 15px !important;
	border-right: 1px solid #FFF ;
}

.navbar-nav a {
	color: #FFF ;
	font-size: 0.9rem ;
	display: block ;
}

.navbar-nav a:hover {
	color: #FF0 ;
}

/* toggle menu */
.navbar-toggler {
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid #FFF;
    border-radius: 0.25rem;
}

.navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

span.badge {
	font-size: 0.2rem ;
}

span.badge {
	animation: flash 1.5s linear infinite;
}

@keyframes flash {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}
}

@media only screen and (max-width: 1199px) {
	.navbar-nav li:first-child {
	border-left: none ;
}

.navbar-nav li a {
	padding: 10px 15px !important;
	border-bottom: 1px solid #FFF ;
	border-right: none ;
}
	
	img.ban-line {
	margin-bottom: 15px ;
}
	
	.navbar-nav {
		margin-bottom: 15px ;
	}
}

@media only screen and (max-width: 768px) {
	img.header-logo {
	max-width: 150px ;
	margin-right: 0 ;
}
	
	img.ban-line {
	max-width: 100% ;
	margin-bottom: 15px ;
}

img.ban-tel {
	max-width: 100% ;
}

}


.main-img {
	padding: 0 ;
	text-align: right ;
}

.main-img img {
	max-width: 100% ;
	padding: 0 ;
}

.title-col {
	scroll-margin-top: 80px;
	padding: 50px 0 ;
	background: url("../images/title-mark.png") left 50px center #014099 no-repeat  ;
}

.title-col h2,
.title-col-red h2 {
	font-weight: bold ;
	color: #FFF ;
	text-align: center ;
	font-size: 4rem ;
	letter-spacing: 0.5rem ;
	text-shadow: 2px 2px 3px rgba(0,0,0,0.5) ;
}

.title-col h2 span {
	font-size: 4.8rem ;
}

.lp-img {
	max-width: 100% ;
	padding: 50px 0 ;
}

.lp-img2 {
	max-width: 100% ;
	padding: 50px 15px ;
}

@media only screen and (max-width: 768px) {
	.main-img img {
	padding-top: 75px ;
}
	
	.title-col {
	padding: 30px 0 ;
	background: url("../images/title-mark.png") left 30px center #014099 no-repeat  ;
	background-size:  auto 60%;
	}
	
	.title-col h2 {
		font-size: 2rem ;
		letter-spacing: 0.1rem ;
	}
	
	.title-col h2 span {
	font-size: 3rem ;
}
}

.bg-02 {
	background: url("../webp/02-bg.webp") center center / cover no-repeat fixed;
}

.bg-03 {
	background: url("../webp/09-bg.webp") center center / cover no-repeat fixed;
}

.bg-04 {
	background-image: url("../webp/pb-logo-bg.png") ;
	background-repeat: no-repeat ;
	background-position: right top ;
	background-attachment: fixed ;
}

.kintone-col {
	text-align: center ;
	padding-bottom: 0 ;
}

.kintone-col h3 {
	font-size: 2.5rem ;
	margin-bottom: 30px ;
	margin-top: 30px ;
	font-weight: bold ;
}

/* ----- Carusel -----*/

#slider {
	padding: 50px 0 ; 
}

.swiper-container{
  text-align: center;
	width: 80% ;
}
.swiper-container .swiper-slide img{
  max-width: 100%;
  width: 100%;
  height: auto;
}
.swiper-container .swiper-slide {
  position: relative;
  width: 100%;
}
.swiper-container .swiper-slide:before {
  content:"";
  display: block;
  padding-top: 56.25%;
}
.swiper-container .swiper-slide iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media only screen and (max-width: 768px) {
	.swiper-container{
	width: 100% ;
}
	.kintone-col h3 {
	font-size: 1.8rem ;
}
}


#profile {
	padding-top: 50px ;
	padding-bottom: 50px ;
	border-top: 1px solid #EEE ;
	font-size: 0.9rem ;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W3",  "メイリオ", "Meiryo", "ＭＳ　Ｐゴシック";
	background: #193f94 ;
	overflow: hidden ;
}

#profile p {
	font-size: 1.1rem ;
	font-weight: bold ;
	margin-bottom: 20px ;
	color: #d9e3ef ;
}

#profile a {
	color: #FFF ;
}

.profile-logo-col {
	padding-right: 40px ;
}

.footer-logo img {
	margin-bottom: 30px ;
}

.to_zenkoku {
	text-align: center ;
}

.to_zenkoku img {
	max-width: 300px ;
	text-align: center ;
}

.table th,
.table td {
	border-top: none ;
}

.profile-col .table tr th,
.profile-col .table tr td {
	padding: 5px ;
	color :#d9e3ef ;
	border-bottom: 1px dotted #668cc0 ;
}

.copy{
	background: #00204b ;
	padding: 10px 0 0 ;
	border-top: 1px solid #00132d ;
	line-height: 1 ;
	text-align: center ;
}

.copy p {
	color: #d9e3ef ;
	
}

.inq-col .card {
	border: none ;
	
}

.inq-col .card-body a.btn-white {
	border: 3px solid #193f94 ;
	border-radius: 7px ;
	color: #193f94 ;
	box-shadow: 4px 4px 6px rgba(0,0,0,0.5)
}

.inq-col .card-body a.btn-white:hover {
	background: #193f94 ;
	color: #FFF ;
}

.inq-col .card-body a.btn-blue {
	border: 3px solid #FFF ;
	border-radius: 7px ;
	background: #193f94 ;
	color: #FFF ;
	box-shadow: 4px 4px 6px rgba(0,0,0,0.5)
}

.inq-col .card-body a.btn-blue:hover {
	background: #FFF ;
	color: #193f94 ;
}

.inq-col .card-body a {
	display: block ;
	font-size: 1.5rem ;
	font-weight: bold ;
	letter-spacing: 0 ;
	
}

.inq-col .card-body a span {
	font-size: 1.2rem ;
	font-weight: normal ;
}

.func-col {
	padding-bottom: 70px ;
}

.func-col .card-col {
		margin-bottom: 30px !important ;
}

.func-col .card {
	box-shadow: 3px 3px 5px rgba(0,0,0,0.5) ;
	border: none ;
	transition: 0.5s ;
}

.func-col .card:hover {
	background: #afc5dd ;
}

.func-col .card-body .card-title {
	text-align: center ;
	font-weight: bold ;
	color: #193f94 ;
}

.btn-func {
	background: #FFF ;
	color: #193f94 ;
	border: 1px solid #193f94 ;
	padding: 5px 10px ;
	font-size: 0.8rem ;
}

.btn-func:hover {
	background: #193f94 ;
	color: #FFF ;
}

.func-col .card-body a {
	display: inline-block;
	margin-left: auto;
    margin-right: auto;
}

.func-col .modal-title {
	font-weight: bold ;
	color: #193f94 ;
	font-size: 1.5rem ;
}

.mb-50 {
	margin-bottom: 50px ;
}