@charset "utf-8";

/*
============================ LOVE CSS ============================
*/


/* 1.ラブライブ！
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ▽ */

.travel .wrap {
  width: 820px;
}
.travel .wrap2 {
  width: 820px;
  margin: 0 auto 40px;
}
.travel .wrap2:after { /* clearfix */ clear: both; content: " "; display: block; height: 0; visibility: hidden; }

.travel .kv {
  width: 820px;
  margin: 0 auto 60px;
}
.travel .read {
  margin: 0 0 80px;
  font-size: 2.2rem;
  line-height: 2.2;
}
.travel .leftBox {
  width: 388px;
  float: left;
  margin: 0 0 0 20px;
}
.travel .rightBox {
  width: 338px;
  float: right;
  margin: 0;
  position: relative;
}
.travel .flug {
  width: 100px;
  margin: 60px auto 40px;
}
.travel h2 {
  display: block;
  width: 100%;
  text-align: center;
  margin: 0 0 40px;
  line-height: 1;
  padding: 20px 0;
  border-radius: 10px;
  font-size: 2.4rem;
  font-weight: 600;
  color: #fff;
}
.travel #anchor01 h2 {
  background: #25aae2;
}
.travel #anchor02 h2 {
  background: #f2706c;
}
.travel #anchor03 h2 {
  background: #44b97b;
}
.travel #anchor04 h2 {
  background: #f89548;
}
.travel #anchor06 h2 {
  background: #d45bd5;
}
.travel h2 img {
  width: 820px;
}
.travel #anchor05 h2 {
  padding: 0;
}
.travel #anchor05 h2 img {
  width: 100%;
}
.travel .spotImg {
  margin: 0 0 5px;
}
.travel .placeName {
  color: #3076A7;
  font-size: 1.6rem;
  text-align: center;
  margin: 0 0 5px;
}
.travel .placeName span {
  display: block;
  font-size: 1.2rem;
}
.travel .time {
  display: table-cell;
  color: #FD7FA6;
  border-top: dotted 2px #FD7FA6;
  border-bottom: dotted 2px #FD7FA6;
  padding: 5px 0 5px 40px;
  height: 54px;
  line-height: 1.8;
  font-size: 1.1rem;
  background: url("../img/icon_car.png") 0 7px no-repeat;
  background-size: 35px 35px;
  vertical-align: middle;
}
.travel .time span {
  font-size: 1.5rem;
  margin: 0 0 0 10px;
}
.travel .clumnBox {
  background: url("../img/line.png") 0 bottom no-repeat;
  margin: 0 0 30px;
}
.travel .clumn {
  margin: 0 0 40px;
}
.travel #anchor01 {
  padding: 60px 0 10px;
  /*background: #d0e9ef;*/
	background: #d0e9ef;
}
.travel #anchor02 {
  padding: 60px 0 10px;
  /*background: #f9e4e4;*/
background: #f9e4e3;	
}
.travel #anchor03 {
  padding: 60px 0 10px;
  /*background: #daeac7;*/
	background: #d9e9c6;
}
.travel #anchor04 {
  padding: 60px 0 20px;
  /*background: #fbe2cc;*/
	background: #f2e4c4;
}
.travel #anchor06 {
  padding: 60px 0 20px;
  /*background: #fbe2cc;*/
	background: #f9e8f9;
}


.travel #anchor01 .clumnBox:last-child,
.travel #anchor02 .clumnBox:last-child,
.travel #anchor03 .clumnBox:last-child,
.travel #anchor04 .clumnBox:last-child,
.travel #anchor06 .clumnBox:last-child {
  background: none;
  margin: 0 0 40px;
}

.travel .cenLeft {
  text-align: center;
margin:0 0 60px 0;
}
.travel ul.society {
  display: -moz-box;/*--- Android旧ブラウザ用 ---*/
  display: -webkit-box;/*--- Android旧ブラウザ用 ---*/
  display: -ms-flexbox;/*--- IE10 ---*/
  display: -webkit-flex;/*--- safari(PC)用 ---*/
  -js-display: flex;
  display: flex;
  -moz-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
  flex-wrap: wrap;
  flex-direction: row;
  padding: 0;
  margin: 0 auto;
  /* justify-content: center;  左右中央 */
  align-items: stretch;
  /*align-items: center;　上下中央*/
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.travel ul.society li {  /* 2カラム */
  width: calc(50% - 10px);
  margin: 0px 0 20px;
  position: relative;
  background: #9D9D9D;
  padding: 0;
  line-height: 1;
  text-align: center;
}
.travel ul.society li a {
  width: 100%;
  padding: 30px 0;
  color: #fff;
  font-size: 1.6rem;
}
.clumn:after { /* clearfix */ clear: both; content: " "; display: block; height: 0; visibility: hidden; }

area {
  border: none;
  outline: none;
}
#Area {
  position: relative;
  margin: 0 0 80px;
  width: 820px;
}
#Area map {
  z-index: 100;
}
#Area ul {
  position: absolute;
  width: 250px;
  bottom: 40px;
  left: 50px;
} 
#Area ul li {
  margin: 0 0 10px;
}
.stit {
  margin: 0 auto 20px;
  width: 240px;
}
.read {
  line-height: 1.6 !important;
  margin: 0 0 40px !important;
}
.btnOnsen {
  margin: 0 auto 80px;
  width: 350px;
}
#map {
  display: block;
}
#mapSp {
  display: none;
}

@media only screen and (max-width: 768px) {
  .travel .wrap {
    width: 100%;
    padding: 0 4%;
  }
  .travel .wrap2 {
    width: 100%;
    padding: 0;
    margin: 0;
  }
  .travel .kv {
    width: 100%;
    margin: 0 0 40px;
  }
  .travel .read {
    margin: 0 0 40px;
    font-size: 2.0rem;
    line-height: 1.8;
  }
  .travel .leftBox {
    width: 100%;
    float: none;
    margin: 0 0 20px;
    padding: 0 4%;
  }
  .travel .rightBox {
    width: 100%;
    float: none;
    margin: 0;
    background: #BDE3E8;
    padding: 0 0 20px;
  }
  .travel .flug {
    width: 60px;
    margin: 0 auto 20px;
  }
	
  .travel .cenLeft {
    text-align: left;
		margin:0 0 30px 0;
  }
	
  .travel #map {
    width: 100%;
    margin: 0 auto 20px;
  }
  .travel #societyBtn {
    margin: 0 4%;
    width: 92%;
  }
  .travel h2 img {
    width: 100%;
  }
  .travel ul.society li {
    width: 100%;
  }
  .travel ul.society li a {
    padding: 20px 0;
  }
  .travel .clumnBox {
    background: none;
    margin: 0;
  }
  .travel .clumn {
    background: url("../img/line.png") 0 bottom no-repeat;
    margin: 0 0 30px;
    padding: 0 0 40px;
  }
  .travel .time {
    display: block;
    padding: 20px 0 20px 60px;
    height: auto;
    line-height: 1;
    font-size: 1.4rem;
    background: url("../img/icon_car.png") 10px 10px no-repeat;
    background-size: 40px 40px;
  }
  .travel .time span {
    font-size: 2.0rem;
  }
  #map {
    display: none;
  }
  #mapSp {
    display: block;
  }
  #Area {
    margin: 0 0 40px;
    width: 100%;
  }
  #Area ul {
    width: 22%;
    bottom: 15px;
    left: 15px;
  } 
  .stit {
    margin: 0 auto 20px;
    width: 50%;
  }
  .read {
    font-size: 1.4rem;
    line-height: 1.6 !important;
    margin: 0 20px 40px !important;
  }
  .btnOnsen {
    margin: 0 auto 80px;
    text-align: center;
    width: 90%;
  }
  .btnOnsen img {
    width: 100%;
  }
}