@charset "UTF-8";

.main-image{ width: 100%; height: auto; background: #FAF8ED url(../images/fade_bg.png) repeat-x; padding-top: 30px; padding-bottom: 30px; position: relative;}

.slider{ width: 90%; margin: 0 auto 80px;}
.slick-slide img { width: 100%; height: auto;}
.slide-pattern{ width: 100%;}
.slide-pattern .slick-slide{ margin: 5px;}
.slide-pattern .slick-slide:not(.slick-center) {
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
  background-color: #FFF;
  opacity: 0.4;
}
/*.arrows{ margin: 0 auto; position: relative;}*/
.slick-prev,.slick-next{
	width:55px; /* 画像幅 */
	height:54px; /* 画像高さ */
}
.slick-prev:before,.slick-next:before{
	content:"";
}
button.slick-prev,button.slick-next{
	z-index:2;
}
.slick-prev{ left:20px; /* 任意の値 */}
.slick-next{ right:20px; /* 任意の値 */}

/* Dots */
  .slick-dots li {
    height: 13px;
    width: 14px; }
    .slick-dots li button {
      background: url(../fade/dot-off.png) no-repeat center top;
      height: 13px;
      width: 14px; }
      .slick-dots li button:before {
        content:"";
        width: 14px;
        height: 13px;
        line-height: 1; }
    .slick-dots li.slick-active button:before {
      opacity: 1;
      background: url(../fade/dot-on.png) no-repeat center center;}

.info-area{ width: 490px; padding-top: 40px; float: left;}
/*.info-area{ background: #F1F1DE url(../images/info_bg.png) repeat-x; width: 100%; height: 530px; padding-top: 50px; font-size: 0; float: right;}*/
.info-area .info-list-information,
.info-area .info-list-warning{ width: 490px; margin-top: 10px; margin-right: 0px; background: #FFFFFC; vertical-align: top;}
/*.info-area .info-list-warning{ margin-right: 0;}*/
/*.info-area .info-list-left iframe,*/
.info-area .info-list-warning iframe{ padding: 15px 10px 10px 15px; width: 100%; height: 164px;}
/*.info-area .info-list-warning iframe{ padding: 15px 10px 10px 15px; height: 164px;}*/
.info-area .info-list-information iframe{ padding: 15px 10px 10px 15px; width: 100%; height: 600px;}

.info-area .info-list-information .info-heading{ height: 48px; padding-top: 8px; padding-left: 15px; background: #F7A200;}
.info-area .info-list-warning .info-heading{ height: 48px; padding-top: 8px; padding-left: 15px; background: #F68947;}
.info-area .info-heading{ font-size: 2.0rem; color: #FFF; font-weight: bold; text-align: left; border: 1px solid #DDD;}
.info-area .info-heading .bt-more{ font-size: 1.3rem; float: right; margin-top: 8px; margin-right: 20px;}
.info-area .info-heading .bt-more a:link,.info-area .info-heading .bt-more a:visited{ color: #FFF;}
.info-area .info-heading .bt-more a:hover,.info-area .info-heading .bt-more a:active{ color: #F60;}
.info-area .scroll-list-warning{ height: 164px; background: #FFF; overflow-y: auto; margin-bottom: 20px; -webkit-overflow-scrolling: touch;}
.info-area .scroll-list-information{ height: 590px; background: #FFF; overflow-y: auto; margin-bottom: 0; -webkit-overflow-scrolling: touch;}
.info-area .scroll-item{ padding-top: 15px; padding-bottom: 8px; border-bottom: 1px solid #CCC; width: 440px; margin: 0 auto; text-align: left; font-size: 1.3rem;}

.contents-area1{ width: 490px; background: #FFFFFC; font-size: 0; padding-top: 48px; padding-bottom: 0; text-align: left; float: right;}
.contents-area1 .item{ width: 235px; display: inline-block; margin-right: 20px; padding-top: 30px; vertical-align: top;}
.contents-area1 .item:nth-of-type(2n){ margin-right: 0;}
.contents-area1 .item a:hover{ filter:Alpha(opacity=75); opacity:0.75;}
.contents-area1 .link-area{ text-align: left; margin-top: 10px;}
.contents-area1 .text-link{ font-size: 1.3rem; line-height: 1.8; list-style-image: url(../images/triangle.png); margin-left: 20px;}
.contents-area1 .text-link2{ font-size: 1.3rem; line-height: 1.8; list-style-image: none; margin-left: 20px;}

.contents-area2{ background: #FFFFFC; font-size: 0; padding-top: 20px; padding-bottom: 0px; text-align: left;}
.contents-area2 .item{ width: 235px; display: inline-block; margin-right: 20px; padding-top: 30px; vertical-align: top;}
.contents-area2 .item:nth-of-type(4n){ margin-right: 0;}
.contents-area2 .item a:hover{ filter:Alpha(opacity=75); opacity:0.75;}
.contents-area2 .link-area{ text-align: left; margin-top: 10px;}
.contents-area2 .link-area2{ text-align: center; margin-top: 10px;}
.contents-area2 .text-link{ font-size: 1.3rem; line-height: 1.8; list-style-image: url(../images/triangle.png); margin-left: 20px;}
.contents-area2 .text-link2{ font-size: 1.3rem; line-height: 1.8; list-style-image: none; margin-left: 20px;}
.contents-area2 .text-link3{ color: #333; font-size: 1.1rem; line-height: 1.6; list-style-image: none; margin-left: 20px;}

.contents-area3{ background: #FFFFFC; padding: 40px 0;}
.contents-area3 .contents-list .contents-item{ display: inline-block; margin-right: 8px;}
.contents-area3 .contents-list .contents-item:nth-of-type(4n){ margin-right: 0;}
.contents-area3 .contents-list .contents-item:hover img{ filter:Alpha(opacity=75); opacity:0.75;}


@media screen and (min-width: 768px) {

}
@media screen and (max-width: 767px) {

.main-image{ width: 100%; height: auto; padding-bottom: 5px;}
.slider{ width: 100%; margin: 60px auto 90px;}
.arrows{ width: 100%; height: auto; position: absolute; top: 70%; left: 0; margin: 0 auto;}
.slide-pattern .slick-slide:not(.slick-center) {
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
  background-color: transparent;
  opacity: 1;
}
.arrows{ display: none;}
.slick-dots { bottom: -15px;}

.info-area{ width: 100%; height: auto; padding-top: 20px; padding-bottom: 30px; float: none;}
.info-area .info-list-warning,
.info-area .info-list-information{ width: 100%; margin-right: 0;}
.info-area .scroll-list-warning,
.info-area .scroll-list-information{ max-height: 330px; height: auto;}
.info-area .scroll-item{ width: 90%;}

.contents-area1{ width: 100%; padding-top: 0; padding-bottom: 0; float: none;}
.contents-area1 .item{ width: 48%; display: inline-block; margin-right: 2%; padding-top: 30px;}
.contents-area1 .item:nth-of-type(2n){ margin-right: 0;}
.contents-area1 .item .lower-half{ padding-top: 30px;}

.contents-area2{ padding-top: 0; padding-bottom: 0; float: none;}
.contents-area2 .item{ width: 48%; display: inline-block; margin-right: 2%; padding-top: 30px;}
.contents-area2 .item:nth-of-type(2n){ margin-right: 0;}

.contents-area3{ padding: 30px 0 20px;}
.contents-area3 .contents-list .contents-item{ width: 47%; margin-right: 2%; padding: 10px 0;}
.contents-area3 .contents-list .contents-item:nth-of-type(2n){ margin-right: 0;}

}