/*** 変数設定  start ***/
:root{
  --color1: teal;
  --color2: #3F5E89;
  --color3: #DDDDDD;
  --color4: #CEF9DC;
  --color5: #04BE04;
}
/*** 変数設定  end   ***/

/*** html関連 start ***/
html{
  font-size: 18px;
}
/*** html関連 end ***/


/*** header関連  start  ***/
header{
  color: white;
  background-color: var(--color1);
  width: 100%;
  height: 8vmax;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}

.header-container{
  padding-top: 1vmax;
  padding-left: 3rem;
}

.header-main{
  font-size: calc(1vmax*3);
  margin-bottom: -0.5rem;
  text-decoration: none;
  color: #FFFFFF;
}

.header-sub{
  font-size: calc(1vmax*1.5);
}


/*** header関連  end    ***/

/*** main関連  start  ***/
main{
  color: darkslategray;
  padding-top: 8vmax;
  background-color: var(--color3);
  padding-bottom: 200px;
}
/*** main関連  end    ***/

/*** footer関連  start  ***/
.footer-container{
  color: white;
  background-color: var(--color1);
  padding-top: 1.5rem;
  padding-bottom: 0.5rem;
  padding-left: 3rem;
  line-height: 40%;
  font-size: 0.9rem;
}

/*** footer関連  end    ***/



/*** 色設定関連  start ***/
.bg-teal {
  color: #FFFFFF;
  background-color: #008080;;
}

.link-text{
  color: #FFFFFF;
}

.link-text:hover{
  color: teal;
}

.nav-link:hover{
  background-color: var(--color2);
}

/*** 色設定関連  end   ***/

/*** ボタン関連  start ***/
.btn-teal {
  color: #FFFFFF;
  background-color: var(--color1);
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
  transition: all 0.3s ease-in-out;
}

.btn-teal:hover{
  transform: scale(1.1);
  opacity: 0.8;
}

/*** ボタン関連  end   ***/



/*** 点滅 start ***/
  .blink{
    animation: flash 2s linear infinite;/*繰り替えしはループ*/
  }

  .blink2{
    animation: flash 1s linear;
    animation-iteration-count: 3;/*繰り返し回数*/
  }

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

    50% {
      opacity: 0;
    }
  }
/*** 点滅 end   ***/




/*** カルーセル関連  start ***/
.carousel-item img{
  width: 100%;
}

.carousel-text{
  text-align: center;
  font-size: calc(1vmax*2.5);
  color: #FFFFFF;
}
/*** カルーセル関連  end   ***/



/*** レイアウト関連  start ***/

.banner{
  color: white;
  background-color: var(--color1);
  text-align: center;
  padding: 10px 20px;
  font-weight: bold;
  font-size: x-large;
}

.imgbanner{
  height: 10vmax;
  width: 100%;
  background-color: #FFFFFF;
  position: relative;
}

.imgbanner img {
  height: 100%;
  width: 100%;
  position: absolute;
}

.imgbanner p {
  color: white;
  text-shadow: 5px -5px 3px #444444;
  padding-top: calc(1vmax*3);
  font-size: calc(1vmax*3.5);
  font-weight: 800;
  text-align: center;
  animation-name: fadeinText;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeinText {
  from {
    opacity: 0;
    transform: translateX(calc(1vmax*-30));
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}


.flexdiv{
  display: flex;
  flex-wrap:  nowrap;
  width: 100%;
  margin-top: calc(1vmax*2);
  margin-bottom: calc(1vmax*1);
  padding-left: calc(1vmax*2);
  padding-right: calc(1vmax*2);
  justify-content: center;
}

.flexdiv2{
  display: flex;
  width: 100%;
  padding-left: calc(1vmax*2);
  padding-right: calc(1vmax*2);
  justify-content: center;
}

.blockdiv {
  display: block;
  width: 100%;
  margin-top: 50px;
  margin-bottom: 50px;
  padding-left: 20vw;
  padding-right: 20vw;
}

.textdiv {
  text-align: start;
  width: 60vw;
  padding-top: calc(1vmax*3);
  padding-bottom: calc(1vmax*3);
}

.textdiv2{
  text-align: center;
  width: 60vw;
  padding-top: calc(1vmax*3);
  padding-bottom: calc(1vmax*3);
}

.topImage {
  height: 30vmax;
  box-shadow: 5px 5px 20px rgba(0,0,0,0.6);
  margin-top: 3vmax;;
}

.topImage img {
  height: 100%;
}

.menudiv {
  padding: 1vmax;
  margin-top: 0.5vmax;
}


.menu_img {
  transition: all 0.3s ease-in-out;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

.menu_img:hover {
  opacity: 0.6;
  cursor: pointer;
  transform: scale(1.1);
}

.menu_img img {
  width: 100%;
}

.menu_text {
  color: white;
  background-color: var(--color1);
  font-weight: bold;
  text-align: center;
}




/***  アコーディオン関連  start  ***/
.accordion-button {
  color: #FFFFFF;
  background-color: var(--color1);
}

.accordion-button:hover{
  background-color: cadetblue;
}

/***  アコーディオン関連  end    ***/


/*** モバイル対応 start ***/
@media screen and (max-width:768px) {
  html{
    font-size: 16px;
  }

  .blockdiv {
    display: block;
    width: 100%;
    margin-top: 50px;
    margin-bottom: 50px;
    padding-left: 10vw;
    padding-right: 10vw;
  }
  

  
}
/*** モバイル対応 end ***/

/*** レイアウト関連  end   ***/


/*-----------------------------
その場でフェードイン 
 ----------------------------*/
.fadein {
  animation-name: fadeinAnime;
  animation-fill-mode: forwards;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-direction: normal;
}

@keyframes fadeinAnime{
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}

/*----------------------------
scroll_left ｜左から出現
----------------------------*/
.scroll_left {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_left.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

/*----------------------------
scroll_right ｜右から出現
----------------------------*/
.scroll_right {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_right.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}


/*---------------------------
table関連
---------------------------*/
.inquiry-table {
  width: 100%;

}

.inquiry-th,.inquiry-td {
  padding: 10px;
  border: 1px solid #FFFFFF;
}

.inquiry-th {
  text-align: center;
  width: 30%;
  color: #FFFFFF;
  background-color: var(--color1);
}

.inquiry-td {
  width: 70%;
}

/*-----------------------------
 ページトップへ戻るボタン
 -----------------------------*/
 /*リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	background:#008080;
  opacity: 0.7;
	border-radius: 50px;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
	width: 60px;
	height: 60px;
	color: #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:0.6rem;
	transition:all 0.3s;
}

#page-top a:hover{
	background: #777;
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}