@charset "UTF-8";

/*==================================================
スライダーのためのcss
===================================*/
.about-slider01 {
  position:relative;
	z-index: 1;
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
  width: 100vw;
	height: calc(100vw * 0.66);/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
}

@media screen and (min-width: 1025px) {
  .about-slider01 {
    width: 60vw;
  	height: calc(60vw * 0.66);/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  }
}

/*　背景画像設定　*/

.slider-item01 {
  background:url(../img/about02.jpg);
}

.slider-item02 {
  background:url(../img/about03.jpg);
}

.slider-item03 {
  background:url(../img/about04.jpg);
}

.slider-item {
  width: 100vw;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
  height: calc(100vw * 0.66);/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  background-repeat: no-repeat;/*背景画像をリピートしない*/
  background-position: center;/*背景画像の位置を中央に*/
  background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}

@media screen and (min-width: 1025px) {
  .slider-item {
    width: 60vw;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height: calc(60vw * 0.66);/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  }
}

/*矢印の設定*/

.slick-prev,
.slick-next {
  position: absolute;
	z-index: 3;
  top: 42%;
  cursor: pointer;/*マウスカーソルを指マークに*/
  outline: none;/*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #fff;/*矢印の色*/
  border-right: 2px solid #fff;/*矢印の色*/
  height: 25px;
  width: 25px;
}

.slick-prev {/*戻る矢印の位置と形状*/
  left:2.5%;
  transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
  right:2.5%;
  transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
	position: relative;
	z-index: 3;
  text-align:center;
	margin:-50px 0 0 0;/*ドットの位置*/
}

.slick-dots li {
  display:inline-block;
	margin:0 5px;
}

.slick-dots button {
  color: transparent;
  outline: none;
  width:8px;/*ドットボタンのサイズ*/
  height:8px;/*ドットボタンのサイズ*/
  display:block;
  border-radius:50%;
  background:#fff;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
  background:#333;/*ドットボタンの現在地表示の色*/
}

/*==================================================
スライダーのためのcss
===================================*/
.about-slider02 {
  width: 100vw;
}

.about-slider02 img {
  width:60vw;/*スライダー内の画像を横幅100%に*/
  height: calc(60vw * 0.66);
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .5);
}

@media screen and (min-width: 600px) {
  .about-slider02 img {
    width:45vw;/*スライダー内の画像を横幅100%に*/
    height: calc(45vw * 0.66);
  }
}

@media screen and (min-width: 1025px) {
  .about-slider02 img {
    width:30vw;/*スライダー内の画像を横幅100%に*/
    height: calc(30vw * 0.66);
  }
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.about-slider02 .slick-slide {
    margin:0 1vw;/*スライド左右の余白調整*/
}

@media screen and (min-width: 600px) {
  .about-slider02 .slick-slide {
      margin:0 15vw;/*スライド左右の余白調整*/
  }
}

/* address */
.address-subtitle {
  font-size: 3.5vw;
  color: #8CC63F;
  text-align: left;
  margin: 1vh 0;
}

@media screen and (min-width: 1025px) {
  .address-subtitle {
    font-size: 2.5vw;
  }
}

table, td, th {
	border: none;
  font-size: 3vw;
}

@media screen and (min-width: 1025px) {
  table, td, th {
    font-size: 2vw;
  }
}

table {
  margin-bottom: 3vh;
}

td {
	padding: 1vh 0;
	height: 3vh;
}

.table-title {
  width: 20vw;
}

@media screen and (min-width: 1025px) {
  .table-title {
    width: 30vw;
  }
}

.table-item {
  width: 50vw;
}

.map {
  width: 90vw;
  height: calc(90vw * 0.66);
  margin-bottom: 2vh;
}

@media screen and (min-width: 1025px) {
  .map {
    width: 50vw;
    height: calc(50vw * 0.66);
  }
}