@charset "UTF-8";
/*////////////////////////////////////
main_area
///////////////////////////////////*/
#main_area{
  width: 100%;
  height: 60vh;
  background-image: url("../images/togo/main_img.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
}
#main_area::after {
  content: '';
  background-color: rgba(0,0,0,.4);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
}

/* main_txt */
.caption_box{
  width: 40%;
  margin: 0 auto;
  position: relative;
  bottom: -150px;
  padding:0.25em 1em;
  color: #fff;
  z-index: 3;
}
.caption_box:before,.caption_box:after{ 
  content:'';
  width: 20px;
  height: 30px;
  position: absolute;
  display: inline-block;
}
.caption_box:before{
  border-left: solid 1px #fff;
  border-top: solid 1px #fff;
  top:0;
  left: 0;
}
.caption_box:after{
  border-right: solid 1px #fff;
  border-bottom: solid 1px #fff;
  bottom:0;
  right: 0;
}
.caption_box h2{
  font-size: 4em;
  text-align: center;
  padding-bottom: 20px;
}
.caption_box p {
  text-align: center;
  font-size: 1em;
  margin: 0; 
  padding: 0;
}
@media screen and (max-width:900px) { 
  .caption_box{
    width: 70%;
    bottom: -120px;
  }

}
/* end_main */

/*////////////////////////////////////
contents
///////////////////////////////////*/
#contents_area{
  padding: 5%;
}


/*////////////////////////////////////
slick
///////////////////////////////////*/
.bon_slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
  width:94%;
   margin:0 auto;
   padding-bottom: 40px;
}

.bon_slider img {
   width:100%;/*スライダー内の画像を横幅100%に*/
   height:auto;
}

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

.bon_slider .slick-slide {
   margin:0 10px;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
   position: absolute;/*絶対配置にする*/
   top: 42%;
   cursor: pointer;/*マウスカーソルを指マークに*/
   outline: none;/*クリックをしたら出てくる枠線を消す*/
   border-top: 2px solid #666;/*矢印の色*/
   border-right: 2px solid #666;/*矢印の色*/
   height: 15px;
   width: 15px;
}

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

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

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

.slick-dots {
   text-align:center;
 margin:20px 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:#ccc;/*ドットボタンの色*/
}

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