@charset "utf-8";

/*####################################################


PC向け：全体のレイアウト設定
max-width: 767px
width: 100%;
max-width:1120px

####################################################*/


/*=============================================

おすすめTOPICS

=============================================*/

/*全体*/

.osusume_topics {
	position: relative;
	padding-top: 100px;
	padding-bottom: 0px;
	background-color: #f4f2ec;
}

.osusume_topics article {
  max-width: 1118px;
  width: 100%;
  margin: auto;
  padding: 50px 0 120px 0;
}

.osusume_topics {
	margin-bottom: 30px;
}

.osusume_topics article:first-child {
	padding-bottom: 0px;
}

.osusume_topics::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 74px;
	background: url(../img/osusume_topics/w_mask.png) top center repeat-x;
	background-size: 1000px;
}

.osusume_topics::before {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 74px;
	background: url(../img/osusume_topics/kv_mask.png) bottom center repeat-x;
	background-size: 1000px;
}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*タイトルとテキスト*/

.osusume_topics .title {
  display: block;
  overflow: hidden;
  margin: 0 auto 0 auto;
  padding-top: 80px;
  height: 0 !important;
  line-height: 250%;
  width: 600px;
  background: url(../img/osusume_topics/topics_title.svg) top center no-repeat;
  background-size: 100%;
}

.osusume_topics .text {
  text-align: center;
  font-weight: bold;
  margin: 0 0 50px 0;
  padding: 0 30px 0 30px;
}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*ハッシュタグのセレクトタブ*/

.osusume_topics #hashtag {
  position: relative;
  margin: 0 0 10px 0;
  padding: 0;
  height: 40px;
  width: 100%;
  overflow: visible;
}

.osusume_topics #hashtag::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background-color: #00633d;
}

.osusume_topics #hashtag .inner {
  position: relative;
  margin: 0;
  padding: 0;
  height: 40px;
  overflow: hidden;
}

.hashtag_left {
  z-index: 1;
  position: absolute;
  top: 0;
  left: -20px;
  display: block;
  overflow: hidden;
  margin: 0;
  padding-top: 35px;
  height: 0 !important;
  line-height: 250%;
  width: 40px;
  border-radius: 50%;
  border: 2px solid #00633d;
  background-color: #f4f2ec;
}

.hashtag_left.this::after {
	content: "";
	display: block;
	position: absolute;
	top: 10px;
	left: 14px;
	width: 12px;
	height: 12px;
	border-top: 2px solid #00633d;
	border-left: 2px solid #00633d;
	transform: rotate(-45deg);
}

.hashtag_right {
	z-index: 1;
	position: absolute;
	top: 0;
	right: -20px;
	display: block;
	overflow: hidden;
	margin: 0;
	padding-top: 35px;
	height: 0 !important;
	line-height: 250%;
	width: 40px;
	border-radius: 50%;
	border: 2px solid #00633d;
	background-color: #f4f2ec;
}

.hashtag_right.this::after {
	content: "";
	display: block;
	position: absolute;
	top: 10px;
	right: 14px;
	width: 12px;
	height: 12px;
	border-top: 2px solid #00633d;
	border-right: 2px solid #00633d;
	transform: rotate(45deg);
}

.hashtag_left.off, .hashtag_right.off {
	border: 2px solid #bfd1ce;
}

.hashtag_left.off::after {
	content: "";
	display: block;
	position: absolute;
	top: 10px;
	left: 14px;
	width: 12px;
	height: 12px;
	border-top: 2px solid #bfd1ce;
	border-left: 2px solid #bfd1ce;
	transform: rotate(-45deg);
}

.hashtag_right.off::after {
	content: "";
	display: block;
	position: absolute;
	top: 10px;
	right: 14px;
	width: 12px;
	height: 12px;
	border-top: 2px solid #bfd1ce;
	border-right: 2px solid #bfd1ce;
	transform: rotate(45deg);
}




/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*ハッシュタグのリストのul設定*/

.osusume_topics #hashtag ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  position: absolute;
  bottom: 0;
  left: 30px;
  margin: 0;
  padding: 0;
  font-size: 140%;
}

.osusume_topics #hashtag li {
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.osusume_topics #hashtag li a {
  z-index: 1;
  position: relative;
  display: block;
  margin: 0;
  padding: 10px 20px 10px 20px;
  color: #00633d;
  border-left: 1px solid #00633d;
}

.osusume_topics #hashtag li:last-of-type a {
  border-right: 1px solid #00633d;
}

.osusume_topics #hashtag li a.link {
  position: relative;
  display: block;
  margin: 0;
  padding: 10px 20px 10px 20px;
  border-left: 1px solid #00633d;
  border-top: 1px solid #00633d;
}

.osusume_topics #hashtag li a.link::after {
	content: "";
	display: block;
	position: absolute;
	bottom: -10px;
	left: -1px;
	width: 100%;
	height: 10px;
	border-left: 1px solid #00633d;
	border-right: 1px solid #00633d;
	background-color: #f4f2ec;
}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*トピックスのサムネ*/

.topics_thumb_list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  min-height: 330px;
  opacity: 0;
}

.topics_thumb_open {
  -webkit-animation: topics_thumb_open_animname forwards .5s;
  animation: topics_thumb_open_animname forwards .5s;
}

@keyframes topics_thumb_open_animname {
	100% { opacity: 1; }
}

.topics_thumb_list li {
	margin-right: 5px;
	margin-bottom: 5px;
	-ms-flex-preferred-size: calc((100% - (5px * 2)) / 3);
	flex-basis: calc((100% - (5px * 2)) / 3);
	background-color: #949494;
	height: 300px;
}

.topics_thumb_list li:nth-of-type(3n) {
	margin-right: 0;
}

.topics_thumb_list1 li:nth-of-type(4n) {
	margin-right: 0;
	-ms-flex-preferred-size: 100%;
	flex-basis: 100%;
}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*トピックスサムネの中身要素*/

.topics_thumb_box {
	position: relative;
	z-index: 0;
	height: 100%;
}

.topics_thumb_box::after {
	z-index: -1;
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40%;
	background: rgb(253, 253, 253);
	background: linear-gradient(180deg, rgba(253, 253, 253, 0) 0%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0.7) 100%);
}

.topics_thumb_box a {
	display: block;
	height: 100%;
}

.topics_thumb_box a::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 12px;
  height: 12px;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  transform: rotate(45deg);
}

.topics_thumb_box a:hover {
  background: rgba(255, 255, 255, 0.5);
}

.topics_thumb_box h3 {
  box-sizing: border-box;
  display: block;
  position: absolute;
  bottom: 0;
  color: #ffffff;
  text-align: left;
  font-weight: bold;
  margin: 0;
  padding: 10px;
  width: 100%;
  font-size: 1.7rem;
  line-height: 1.7;
}

.topics_thumb_box i {
  display: none;
}








/*=============================================

トピックス　詳細

=============================================*/

/*背景レイヤー*/
#topics_detail_bg {
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  opacity: 0.8;
}

#topics_detail {
  position: fixed;
  z-index: 200;
  left: 50%;
  top: 100px;
  margin: 0 0 0 -450px;
  width: 900px;
  height: calc(100% - 120px);
  background-color: #ffffff;
  -webkit-animation: topics_detail_animname forwards .5s;
  animation: topics_detail_animname forwards .5s;
}

@keyframes topics_detail_animname {
  100% {
    transform: translate(0px, -40px);
  }
}


#topics_detail::after {
  content: "";
  display: block;
  position: absolute;
  top: -15px;
  left: 0;
  width: 100%;
  height: 15px;
  background: url(../img/osusume_topics/topics_detail_bg_note.png) center center repeat-x;
  background-size: 15px auto;
}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*閉じるボタン*/

#topics_detail .close {
  position: fixed;
  z-index: 200;
  left: 50%;
  bottom: 25px;
  display: block;
  overflow: hidden;
  margin: 0 0 0 420px;
  padding-top: 47px;
  height: 0 !important;
  line-height: 250%;
  width: 50px;
  border-radius: 50%;
  border: 2px solid #00633d;
  background-color: #ffffff;
}

#topics_detail .close::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 2px);
  left: 20%;
  width: 60%;
  height: 4px;
  background-color: #00633d;
  transform: rotate(45deg);
}

#topics_detail .close::after {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 2px);
  left: 20%;
  width: 60%;
  height: 4px;
  background-color: #00633d;
  transform: rotate(-45deg);
}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*中身要素*/

#topics_detail .inner {
  position: relative;
  margin: 20px;
  padding: 0;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  overflow: auto;
}

#topics_detail .inner .c-grid {
  margin: 0 auto;
  width: 100%;
}

#topics_detail .inner h2 {
  margin: 0 0 20px 0;
  padding: 5px 10px;
  background-color: #e8f1ee;
  font-size: 200%;
  line-height: 150%;
  font-weight: bold;
}

#topics_detail .inner .feature {
  margin: 0 0 20px 0;
  padding: 4px 0;
}

.line_space {
  margin: 0;
  padding: 20px 0 20px 0;
  width: 100%;
  background: url(../img/osusume_topics/line_space.png) center center repeat-x;
  background-size: 7px;
}

.sub_photo {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 15px 0 15px;
  padding: 0;
}

.sub_photo li {
  margin-right: 5px;
  margin-bottom: 5px;
  -ms-flex-preferred-size: calc((100% - (5px * 4)) / 5);
  flex-basis: calc((100% - (5px * 4)) / 5);
}

.sub_photo li:nth-of-type(5n) {
  margin-right: 0 !important;
}

.sub_photo img {
  height: 150px;
  width: 100%;
  object-fit: cover;
}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*車と送迎アイコン*/

#topics_detail .feature .car {
  margin: 0 0 0 20px;
  padding: 10px 20px 10px 30px;
  background: url(../img/osusume_topics/topics_detail_image_car.svg) center left no-repeat;
  background-size: 25px;
  color: #00633d;
}

#topics_detail .feature .transfer {
  margin: 0;
  padding: 10px 30px;
  background: url(../img/osusume_topics/topics_detail_image_transfer.svg) center center no-repeat;
  background-size: 70px;
}



/*=============================================

スマホ調整

=============================================*/

@media print,
screen and (max-width: 768px) {


  /*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
  /*TOPICS*/

  .osusume_topics {
    padding-top: 40px;
  }

  .osusume_topics::after {
    height: 40px;
    background-size: 500px;
  }

  .osusume_topics::before {
    height: 40px;
    background-size: 500px;
  }

  .osusume_topics .title {
    padding-top: 25%;
    width: 70%;
    background: url(../img/osusume_topics/topics_title_sp.svg) top center no-repeat;
    background-size: 100%;
  }

  .osusume_topics #hashtag {
    height: 35px;
  }

  .osusume_topics #hashtag .inner {
    height: 35px;
  }

  .hashtag_left {
    top: 10px;
    left: 0;
		transform: scale(.8, .9);
  }

  .hashtag_right {
    top: 10px;
    right: 0;
    transform: scale(.8, .9);
  }

  /*ハッシュタグのリストのul設定*/
  .osusume_topics #hashtag ul {
    font-size: 120%;
  }

  .osusume_topics #hashtag li a,
  .osusume_topics #hashtag li a.link {
    padding: 6px 10px 6px 10px;
  }

  /*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

  .topics_thumb_list {
    margin: 0 10px 0 10px;
    padding: 0;
  }

  .topics_thumb_list li {
    -ms-flex-preferred-size: calc((100% - (5px * 1)) / 2);
    flex-basis: calc((100% - (5px * 1)) / 2);
    height: 150px;
  }

  .topics_thumb_list li.w100 {
    margin-right: 0;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    height: 200px;
  }

  .topics_thumb_list1 li:nth-of-type(2n) {
    margin-right: 5px;
    border-top: 4px solid #ff3300;
  }

  .topics_thumb_list1 li:nth-of-type(3n) {
    margin-right: 0;
  }

  .topics_thumb_list1 li:nth-of-type(1) {
    margin-right: 0;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    height: 200px;
  }

  .topics_thumb_list1 li:nth-of-type(4n) {
    margin-right: 0;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    height: 200px;
    border-top: 4px solid #3a9f22;
  }

  /*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

  .topics_thumb_box a::after {
    display: none;
  }

  .topics_thumb_box h3 {
    font-size: 1.2rem;
    line-height: 140%;
  }

  /*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

  .over_page article.transfer {
    width: 100%;
  }

  .transfer h3 span {
    padding-top: 24%;
    width: 80%;
    background: url(../img/osusume_topics/topics_yoyaku_title_sp.svg) center center no-repeat;
    background-size: 100%;
  }

  .transfer h3::after {
    display: none;
  }

  .transfer .table_box {
    margin: 0 10px;
    border-bottom: 1px solid #858a8e;
    overflow-x: scroll;
  }

  .transfer td,
  .transfer th {
    white-space: nowrap;
  }

  /*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

  .hotel_info h1 {
    padding-top: 15%;
    width: 95%;
    background: url(../img/osusume_topics/hotel_info_winter.svg) top center no-repeat;
    background-size: 100%;
    background-color: #ffffff;
  }

  .hotel_info article {
    width: auto;
    margin: 0 10px;
  }

  .hotel_info h2.title1,
  .hotel_info h2.title2 {
    padding-top: 40px;
    width: 230px;
  }

  /*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
  /*詳細*/

  #topics_detail {
    position: fixed;
    z-index: 200;
    left: 20px;
    top: 100px;
    margin: 0;
    width: calc(100% - 40px);
  }

  #topics_detail .close {
    right: 0;
    left: auto;
    bottom: -15px;
    margin: 0;
    transform: scale(.8);
  }

  #topics_detail .inner {
    margin: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
  }

  .sub_photo li {
    margin-right: 5px;
    margin-bottom: 5px;
    -ms-flex-preferred-size: calc((100% - (5px * 2)) / 3);
    flex-basis: calc((100% - (5px * 2)) / 3);
  }

  .sub_photo li:nth-of-type(5n) {
    margin-right: 5px;
  }

  .sub_photo li:nth-of-type(3n) {
    margin-right: 0 !important;
  }
}/*スマホ向け設定　ここまで*/



/**/