@charset "UTF-8";
@import url("grid.css");

a {
    color: #000000;
    text-decoration-line: none;
}


/*ヘッダー
-------------------------------------*/
.header {
	display: flex;
    flex-direction: row;
}
.header-box {
	margin-left: auto;
	margin-top: 7px;
	margin-bottom: -5px;
}
.contact {
  display: inline-block;
  color: #fff;
  background: linear-gradient(#2766B3, #184172);
  padding: 2px 15px 11px 15px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 21px;
  line-height:20px;
  position: relative;
　border-bottom: 0px ;
}
nav ul {
	display: flex;
    flex-direction: row;
    justify-content: space-around;
    list-style: none;
	margin: -10px 0 -10px 0;
	transition:0.5s;
}
nav li {
	flex: 1 0 auto;
	border-bottom:1.5px solid #DDDDDD;
	transition:0.5s;
}
nav li:hover {
	border-bottom:1.5px solid #3379CD;
}
nav li a {
	display: block;
    text-decoration: none;
    text-align: center;
    width: 100%;
	padding:0.2rem;
	font-size: 115%;
	font-weight: 500;
}
nav li a:hover {
    text-decoration: none;
    text-align: center;
    width: 100%;
    text-shadow: 1px 2px 0px #cedcea;
	background: linear-gradient(#fff, #e0f0ff);
	transition:0.3s;
}
nav a {

}

@media screen and (min-width: 768px){
/* PC時はMENUボタンを非表示 */
#open,#close {
    display: none !important;
}

#navi {
    display: block !important;
}
}

@media screen and (max-width: 768px){
.header {
	flex-direction: column;
    margin-bottom: 10px;
}
.header #open,#close  {
    position: absolute;
    top: 20px;
    right: 12px;
}
nav ul {
	flex-direction: column;
}
.header li {
	padding-top: 0;
}
/* スマホ時はMENUボタンを表示 */
#open {
    display: block;
    background: url(../img/button.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 45px;
    height: 45px;
    border: none;
    position: absolute;
    top: 6px;
    right: 15px;
}
#close  {
    display: block;
    background: url(../img/button2.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 45px;
    height: 45px;
    border: none;
    position: absolute;
    top: 6px;
    right: 15px;
}
/* スマホ時はメニューを非表示 */
#navi {
    display: none;
}
}

/*バナー画像
-------------------------------------*/
.banner{
	display: flex;
    align-items: center;
}
.banner img {
    width: 420px;
	height: 60px
}
@media screen and (max-width:520px){
  .banner img {
	transform-origin:left;
    transform: scale(0.7, 0.7);
	float: left;
    display:block;
}	
}


/*メイン画像
-------------------------------------*/
.mainimg img {
    max-width: 100%;
	margin-top: 0.5rem;
}
@media screen and (min-width:500px){
  .mainimg img {
	width: 1200px;
    margin:0 auto;
    display:block;
}
}


/*メインコンテンツ
-------------------------------------*/

main {
    margin: 5rem 0 0 0;
}
section {
	margin: 6rem 0;
	padding: 1rem 0;
}
.gray-back {
	border: 0.1rem solid #D1D1D1;
	margin: 2rem;
	background-color: #F0F0F0;
}

.blue-back1 {
	margin: 0 0 0.5rem;
	padding: 0 0 .3rem 0;
	background: linear-gradient(#2766B3, #184172);
	color: #ffffff;
}
.blue-back2 {
	margin: 0 0 1.2rem;
	padding: 0 0 .3rem 0;
	background: linear-gradient(#2766B3, #184172);
	color: #ffffff;
}

.catch {
    text-align: center;
	margin:0;
}
.catch h2 {
    padding-bottom: 1rem;
}
.under {
    background: linear-gradient(transparent 50%, #8BBFFF 150%);
    padding:0 10rem 0.5rem 10rem;
	margin-left: 2rem;
	margin-right: 2rem;
}
@media (max-width: 630px) {
.under {
 background: linear-gradient(transparent 50%, #8BBFFF 150%);
 padding:0 5rem 0.5rem 5rem;
 }
}
@media (max-width: 440px) {
.under {
 background: linear-gradient(transparent 50%, #8BBFFF 150%);
 padding:0 2.5rem 0.5rem 2.5rem;
 }
}

.under2 {
  padding: 0.1rem 1rem 0.4rem;/*上下 左右の余白*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #7db4e6;/*左線*/
  line-height: 25px;
  margin: 0;
}

.under3 {
  position: relative;
  display: inline-block;
  padding: 0 65px;
}
.under3:before, .under3:after {
  content: '';
  position: absolute;
  top: 47%;
  display: inline-block;
  width: 50px;
  height: 5px;
  border-top: solid 1.5px #3a89c9;
  border-bottom: solid 1.5px #3a89c9;
　margin-bottom: 5px;
}
.under3:before {
  left:0;
}
.under3:after {
  right: 0;
}

.center {
	text-align: center;
	margin-bottom: 2rem;
}

.link {
	color: #2F96FF;
}
.link:hover {
	color: #FFA544;
}

.flexbox {
     display: flex;
	 align-items: flex-start;
 }
.box1 {
     width: 70%;
	 height: 230px;
     margin: auto 3rem;
 }
.box2 {
     width: 40%;
	 height: 230px;
     margin: auto 3rem;
 }
.flexbox2 {
     display: flex;
     padding: 0rem 1rem;/*上下 左右の余白*/
     background: transparent;/*背景透明に*/
     border-left: solid 5px #7db4e6;/*左線*/
     line-height: 25px;
     margin: -0.5rem 0 -0.5rem 0;
 }
.box3 { 
     width: 30%;
     height: auto;
     margin: 1rem auto 1rem;
 }
.box4 {
     width: 70%;
     height: auto;
     margin: 0.5rem 0 1rem 0;
}
.flexbox3{
    display: flex;
}
.box5 {
     width: 50%;
     height: auto;
     margin: 2rem auto 0rem;
     padding: 0 1rem;
}
.box6 {
     width: 50%;
     height: auto;
     margin: 2rem auto 0rem;
     padding: 0 1rem;
}
.noscrollbar{
	-ms-overflow-style: none;
	scrollbar-width: none;
	margin-left:.1rem;
}
@media screen and (max-width: 1000px) {
     .flexbox2 .box3 {
         width: 40%;
     }
     .flexbox2 .box4 {
         width: 60%;
     }
}
@media screen and (max-width: 751px) {
     .flexbox {
         display: block;
     }
     .flexbox .box1 {
         width: 100%;
		 height: 250px;
         margin: 0 auto;
     }
     .flexbox .box2 {
         width: 60%;
		 height: 100px;
         margin: -2rem auto 0;
     }
     .flexbox2 {
         display: block;
         margin: -0.7rem 0 -2.5rem 0;
     }
     .flexbox2 .box3 {
         width: 60%;
         height: auto;
         margin: 1rem auto 2rem;
         padding-bottom: 1rem;
     }
     .flexbox2 .box4 {
         width: 100%;
     }
    .box5 {
         margin: 1rem auto 0rem;
     }
    .box6 {
         margin: 1rem auto 0rem;
     }
 }

/*テーブル
---------------------------------------------------------------------------*/
/*ta1テーブルブロック設定*/
.ta1 {
	table-layout: fixed;
	width: 100%;
	max-width: 1120px;
	margin: 1rem 0rem;
}
.ta1, .ta1 td, .ta1 th {
	word-break: break-all;
	border: 1px solid #999;	/*テーブルの枠線の幅、線種、色*/
	font-size: 1.8rem;
}
@media (max-width: 630px) {
	.ta1, .ta1 td, .ta1 th {
	font-size: 1.4rem;
	margin-top: -1rem;
	margin-bottom: 1rem;
	}
}
/*テーブルの左側ボックス*/
.ta1 th {
	text-align: center;	/*センタリング*/
	width: 30%;			/*幅*/
}
.ta1 td {
	width: 60%;			/*幅*/
}


/*フッター
-------------------------------------*/
footer {
  position: absolute;
  bottom: 0;
  padding: 1.2rem 0 5rem 0;
  left: 0;
  width: 100%;
  height: 0;
  background: linear-gradient(#2766B3, #184172);
  text-align: center;
  color: #fff;
}

/*お問い合わせ
-------------------------------------*/
.contact-box {
	text-align: center;
	padding: 2rem 0;
}
.table {
	margin: 1rem 0;
}
.table th {
	width: 250px;
}

/*コピーライト
-------------------------------------*/
.copyright {
    text-align: center;
    padding: 2.1rem 0;
    background-color: #1E4F8A;
}
.copyright a {
    color: #fff;
    text-decoration: none;
	display: inline;
}

/*ページトップへ戻るボタン
-------------------------------------*/
#pagetop {
    position: fixed;
    bottom: 20px;
    right: 20px;
	border-radius: 5%;
}
#pagetop a {
    display: block;
    background: #1E4F8A;
    color: #fff;
    width: 45px;
    padding: 8px 5px;
    text-align: center;
	border-radius: 5%;
	transition: 0.5s;
	opacity: 0.9;
	box-shadow: 2px 2px 2px rgba(50,50,50, 0.5);
}
#pagetop a:hover {
    background: #0D3363;
	opacity: 1;
	box-shadow: none;
}

/* 幅768px以下の表示
-------------------------------------*/
@media screen and (max-width: 768px){
	
/*ヘッダー
-------------------------------------*/
.header-box {
	display: none;
}	
/*お問い合わせ
-------------------------------------*/
.table th {
	width: 100%;
	display: block;
}	
.table td {
	display: block;
}
}

/***** チェックを入れるとクリック可能になるボタン *****/
.div-ha-button{
margin:15px auto -25px;
text-align:center;
}
.ha-button {
  display: inline-block;
  height: 40px;
  width: 150px;
  padding: 0 20px 3px;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 500;
  line-height: 0px;
  letter-spacing: .1rem;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  background-color: #1E4F8A;
  cursor: pointer;
  box-sizing: border-box;
  border-radius : 5px;
  transition: 0.5s;
  box-shadow: 2px 2px 2px #666666;
}
.ha-button:hover {
  color: #FFFFFF;
  background-color: #1E4F8A;
  box-shadow: none;
  outline: 0;
  opacity: 0.8;
}
.ha-button:disabled {
  color: #fff;
  background-color: #D6D6D6;
  pointer-events:none;
}
.ha-check-button{
margin-bottom:15px;
margin-top:15px;
display:block;
text-align:center;
}
.ha-check-text{
text-align: left;
display: inline-block;
}
.ha-mini-text{
font-size:0.8em;
}

@media (max-width: 550px) {
 .ha-check-button{
font-size:0.85em;
}
 .ha-mini-text{
font-size:0.85em;
}	
}


/***** トップ画像スライダー *****/
@-webkit-keyframes zoomdown {
0% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}

@keyframes zoomdown {
0% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}

.swiper-container{
    position: relative;
    margin:0 auto -4rem;
    display:block;
	max-width: 1200px;
}

.swiper-slide-active .swiper-img,
.swiper-slide-duplicate-active .swiper-img,
.swiper-slide-prev .swiper-img {
-webkit-animation: zoomdown 18s linear 0s;
animation: zoomdown 18s linear 0s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.swiper-slide {
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.swiper-img {
background-size: cover;
background-position: center;
width: 100%;
height: 100px;
padding-top: 21%;
}
.swiper-pagination{
	position: relative !important;
	padding: 1.5rem;
}
.swiper-pagination-bullet {
	border-radius: inherit;
	margin: 0 6px!important;
	width: 25px !important;
	height: 5px !important;
	opacity: 0.15;
}
.swiper-pagination-bullet-active {
  background: #2766B3;
  opacity: 1;
}
.swiper-button-prev, .swiper-button-next {
	color: #3A8FC3;
	opacity: 0.7;
	mix-blend-mode: multiply;
}
.swiper-container [class^="swiper-button-"]::after{
    font-size: min(3.3vmax,40px);
    font-weight: 700;
}

/* テキストのスタイル */
.swiper-text  {
  color: #fff;
  font-size: min(2.3vmax,37px);
  font-weight: 500;
  position: absolute;
  text-shadow: 2px 2px 3px #333;
  bottom: 0%;
  width: 100%;
  padding: 0.2rem 0 0.7rem 2rem;
  background: linear-gradient(to bottom, transparent 0%, #2766B3 120%);
}
/* 表示されているスライドのテキスト */
.swiper-slide-active .swiper-text {
  animation-delay: 0.3s;
  animation-duration: 3s;
  animation-fill-mode: both;
  animation-name: fadeIn;
}
/* アニメーション */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/* Google Map */
.map {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 65%; /* 比率を4:3に固定 */
}

/* Google Mapのiframe */
.map iframe {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 0 2rem 0 2rem;
}


/* 電話リンク */
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}

@media (max-width: 751px) {
a[href*="tel:"] {
pointer-events: auto;
text-decoration: underline;
color:#2F96FF;
}
}

/* アコーディオン */
.accordion-wrap{
    border-bottom: 1px solid #7db4e6;
	margin: 0 2rem -1.5rem;
}

.accordion-item{
  width: 100%;
  margin: 30px auto 0 ;
  cursor: pointer; 
}
.accordion-item:hover{
  color: #2766B3;
}

.accordion-header{
  transition: ease-in-out 300ms;
}

.accordion-text{
  width: 100%;
  margin: -0.5rem 0 -1.5rem 0;
  display: none;
  padding-top: 6px;
  padding-bottom: 20px;
 }

 .fa{
  transition: ease-in-out 300ms;
 }

.fa-angle-down{
  margin-top: 1rem;
}

 .rotate-fa{
  transform: rotate(180deg);
  color: #2766B3;
 }

 .accordion-header .fa{
  float: right;
  line-height: 10px;
 }

 .accordion-blue{
  color: #2766B3;
 }

 .accordion-no-bar{
  border-bottom: 0;
}

/***** 小画像スライダー *****/
/* 全体設定 */
.css-carousel-slider {
    width: 100%;
    max-width: 300px; /* サイズ設定をする場合はここ */
    object-fit: cover;
    overflow: hidden;
    position: relative;
    text-align:right; 
}
.css-carousel-slider img {
    width: 100%;
}

/* スライド設定 */
.css-carousel-slider .slide-wrap {
    width: 200%; /* 画像の合計数*100%を設定 */
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    z-index: 0;
    animation: css-carousel-slider 8s infinite; /* スライダーアニメーション全体の時間(*1) */
    animation-delay: 3s; /* スライダーが始まるまでの時間(*2) */
}
.css-carousel-slider .slide-wrap-main {
    width: 100%;
    z-index: 1;
    animation: css-carousel-slider-main 8s infinite; /* (*1)と同じ内容を設定 */
    animation-delay: 3s; /* (*2)と同じ内容を設定 */
}
.css-carousel-slider .slide {
    width: 100%;
}

/* スライダーアニメーションの設定 */
@keyframes css-carousel-slider {
    0% { transform: translateX(0); }
    
    35% { transform: translateX(calc(1 / 2 * -100%)); }
    50% { transform: translateX(calc(1 / 2 * -100%)); }

    85% { transform: translateX(calc(2 / 2 * -100%)); }
    100% { transform: translateX(calc(2 / 2 * -100%)); }
}

@keyframes css-carousel-slider-main {
    0% { transform: translateX(100%); }
    50% { transform: translateX(100%); }
    85% { transform: translateX(0%);}
}


/***** 虫眼鏡 *****/
.plus_cursor {
cursor: url("../img/plus_cursor.png") 15 15, pointer;
}
.minus_cusor {
cursor: url("../img/minus_cursor.png") 15 15, pointer;   
}


/***** リンクボタン *****/
.link_button {
  background: #1E90FF;
  color: #fff;
  width: 77vw;
  max-width: 600px;
  height: 5.5vw;
  max-height: 49px;
  font-size: min(2.6vw,20px);
  border-radius: 5px;
  font-weight: 600;
  position: relative;
  margin: 1rem auto 2rem;
  padding-bottom: 0.3rem;
}

.link_button:hover {
  background: #3BB9FF;
  cursor: pointer;
  animation:bounce 1.2s ease-out;
  animation-iteration-count:infinite;
}
@keyframes bounce {
    0%    { transform:translate(0, 0); }
    16.6% { transform:translate(0, 0); }
    33.3% { transform:translate(0, -4px); animation-timing-function:ease-in; }
    49.8% { transform:translate(0, 0);animation-timing-function:ease-in; }
    66.4% { transform:translate(0, -2px); animation-timing-function:ease-in; }
    83%   { transform:translate(0, 0); }
    100%  { transform:translate(0, 0); }
}