@charset "utf-8";

/*******************************************
メイン index.asp
*******************************************/
/* レスポンシブ対応 PC時表示 */
.only_pc{
  display: block;
}

/* レスポンシブ対応 PC時非表示 */
.only_sp{
  display: none;
}

/* メイン画像 */
.main_img{
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 25px;
}

h3 {
  margin-bottom: 15px;
}

.area_wrapper {
  width: 100%;
  height: auto;
  margin-bottom: 30px;
}

.area_wrapper a {
  width: 31%;
  height: 40px;
  margin: 5px 1%;
  margin: 5px calc(7% / 6);
  line-height: 38px;
  text-decoration: none;
  text-align: center;
  font-size: 15px;
  color: #999999;
  border: 1px solid #cccccc;
  display: block;
  float: left;
}

.area_wrapper a:hover {
  background-color: #000055;
  color: #fff;
  opacity: 1.0;
  transition: 0.4s;
}

.area_wrapper a.thisarea {
  background-color: #000055;
  color: #fff;
  opacity: 1.0;
  transition: 0.4s;
}

.area_wrapper a.thisarea span {
  font-weight: bold;
  color: #fff;
}
/*
.area_wrapper a {
	-webkit-perspective: 1000px;
	perspective: 1000px;
	-webkit-perspective-origin: 50% 50%;
	perspective-origin: 50% 50%;
	vertical-align: bottom;
	overflow: hidden;
}

.area_wrapper a:hover{
  opacity: 1.0;
  filter: alpha(opacity=100);
  border: none;
}

.area_wrapper a span {
  width: 100%;
	display: inline-block;
	position: relative;
	padding: 0 .3em;
	transition: .4s;
	-webkit-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.area_wrapper a span:after {
  width: 100%;
	display: inline-block;
	position: absolute;
	left: 0;
	top: 0;
	content: attr(data-text);
	padding: 0 .3em;
	color: #1f1f1f;
  background-color: #000055;
	-webkit-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
	-webkit-transform: translate3d(0, 105%, 0) rotateX(-90deg);
	transform: translate3d(0, 105%, 0) rotateX(-90deg);
  color: #fff;
}

.area_wrapper a:hover span {
  font-size: 15px;
  color: #fff;
  background-color: #000055;
	-webkit-transform: translate3d(0, 0, -30px) rotateX(90deg);
	transform: translate3d(0, 0, -30px) rotateX(90deg);
}
*/
/* スポットリスト枠 */
.list_wrapper{
  width: 100%;
  height: auto;
}

.list_wrapper a{
  display: block;
}

.spot_box{
  width: 48%;
  height: auto;
  margin: 8px 1%;
  float: left;
  border: 1px solid #dddddd;
}

.spot_box img{
  width: 100%;
  display: block;
}

.list_info{
  width: 100%;
  height: auto;
  padding: 7px 7px 15px 7px;
  text-decoration: none;
  color: #888888;
  font-size: 12px;
}

.list_info .only_sp:first-child {
  font-weight: bold;
  color: #000055;
}

.bottom_label{
  width: 100%;
  padding: 7px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  background-color: #000055;
}

/*******************************************
画面横幅1050px以下に適用 index.asp
*******************************************/
@media screen and (max-width: 1050px){

  .area_wrapper a {
    width: 48%;
    margin: 5px 1%;
  }
}


/*******************************************
画面横幅768px以下に適用 index.asp
*******************************************/
@media screen and (max-width: 768px){
  /* レスポンシブ対応 スマホ時表示 */
  .only_sp{
    display: block;
  }
  
  /* レスポンシブ対応 スマホ時非表示 */
  .only_pc{
    display: none;
  }
  
  .spot_box{
    width: 98%;
    height: auto;
    margin: 2px 1%;
    float: none;
    border: none;
    border-bottom: 1px solid #cccccc;
  }
  
  .spot_box:after{
    display: block;
    content: "";
    clear: both;
  }
  
  .spot_box img{
    width: 24%;
    margin: 5px 0 5px 1%;
    display: block;
    float: left;
  }
  
  .list_info{
    width: 75%;
    height: auto;
    padding: 5px;
    float: left;
  }
  
  .list_info .only_sp{
    font-size: 14px;
    color: #222222;
  }

  .area_wrapper a {
    font-size: 13px;
  }
}