@charset "utf-8";
/* CSS Document */
.nosp{
  display: none;
}
main *{
  box-sizing: border-box;
}
.main-title{
  width: 100%;
  text-align: center;
}
.mv img {
    width: 100%;
    height: auto;
}
.mv {
    background-image: url(/tohoku/sp/web/image/bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
}
.readcopy{
  background:#FFF;
  padding: calc(15vw / (750 / 100));
  margin: auto;
}
.area-nav{
  background: #F36;
}
.area-list{
  margin: auto;
  display: flex;
  justify-content: space-evenly;
}
.area-list li{
  width: calc(100% / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #FFF;
  padding: 10px 5px;
}

.shikoku li{
  width: calc(100% / 5);
  
}

.area-list li:first-child{
  border-left: 1px solid #FFF;
}
.area-list li a{
  display: block;
  font-size: 20px;
  font-weight:bold;
  color: #FFF;
  text-align: center;
  line-height: 1.2;
  padding-bottom: 15px;
  position: relative;
  text-decoration:none;
}
.area-list li a::after{
  content: "";
  background: url("/tohoku/sp/web/image/arrow.png") no-repeat;
  background-size: contain;
  width: 16px;
  height: 11px;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto
}

.area-list .link:hover {
 background-color:#d7b077;
  transition: 0.3s;
}

.area-list .link a::after{

  background: url("/tohoku/sp/web/image/arrow02.png") no-repeat;
  background-size: contain;
  width: 10px;
  height: 16px;
  left: 100%;

 
}
.area-list .link a {
  padding-bottom:0;
  padding-right:10px;
}


section{
  padding: calc(40vw / (750 / 100)) 0;
}
.innerbox{
  width: 94vw;
  margin: auto;
}
.heading-sub{
  margin:  calc(100vw / (750 / 100)) auto  calc(20vw / (750 / 100));
  text-align: center;
}
.heading {
    margin-bottom: 20px;
    text-align: center;
	font-size: 34px;
	color: #333;
	border-bottom: 4px solid #F36;
	padding-top:25px
}
.heading img {
  width:100%;
  
}

.heading.no-title{
  display: none
}
.no_web{
  text-align: center;
  font-size: 30px;
  color: #777777;
  padding: 0px;
  border: 2px dashed #ffffff;
  margin-bottom: 20px;
}
/***** 絞り込み検索 *****/
#selectbox{
  width: 100%;
  margin-top:20px;
}
#select{
  width: 94vw;
  margin: 0 auto calc(40vw / (750 / 100));
  border: 1px solid #d60500;
  padding: calc(20vw / (750 / 100));
}
.select-list{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.select-list .select-name{
  width: 10em;
  flex-shrink: 0;
  font-size: calc(26vw / (750 / 100));
  color: #d60500;
}
.select-list .select-item{
  flex: 1;
  font-size: calc(26vw / (750 / 100));
}
input[type=checkbox] {
  display: none;
}
.checkmark {
  display: inline-block;
  cursor: pointer;
  padding: 0 calc(20vw / (750 / 100)) 0 calc(40vw / (750 / 100));
  margin-bottom: calc(10vw / (750 / 100));
  font-weight: bold;
  position: relative;
  width: auto;
}
.checkmark::before {
  background: #fff;
  border: 1px solid #b4b4b4;
  border-radius: 2px;
  content: '';
  display: block;
  width: calc(30vw / (750 / 100));
  height: calc(30vw / (750 / 100));
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.checkmark::after {
  border-right: 3px solid #3298cb;
  border-bottom: 3px solid #3298cb;
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  margin-top: -7px;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 5px;
  transform: rotate(45deg);
}
.checkmark.selected::after {
  opacity: 1;
}
.select-all{
  margin: calc(20vw / (750 / 100)) 0;
  text-align: center;
}
.select-all input{
  width: 90%;
  text-align: center;
  padding: calc(10vw / (750 / 100));
}

#result [class*="hidden-"] {display: none;}

.hotel-couponbox{
  border: 1px solid #3298cb;
  padding: calc(10vw / (750 / 100));
  margin-bottom: calc(40vw / (750 / 100));
}
.hotel-coupon__title{
  text-align: center;
  font-size: calc(40vw / (750 / 100));
  font-weight: bold
}
.hotel-coupon__title>span{
  font-size: 140%;
  color: #F50A0A;
  display: block
}
.hotel-coupon__note{
  font-size: calc(24vw / (750 / 100));
  text-align: center;
  line-height: 1.8
}
.hotel-coupon__note>span{
  display: inline-block;
  color: #FFF;
  text-align: center;
  padding: calc(5vw / (750 / 100));
  margin-right: calc(5vw / (750 / 100));
  background: #F50A0A;
}
.hotel-coupon__code{
  width: 90%;
  margin: calc(20vw / (750 / 100))  auto
}
.hotel-coupon__code a{
  display: block;
  border-radius: 10px;
  border-bottom: 3px solid rgba(0,0,0,.15);
  font-size: calc(30vw / (750 / 100));
  font-weight: bold;
  color: #FFF;
  text-align: center;
  background: #3298cb;
  text-decoration: none;
  padding:  calc(10vw / (750 / 100));
  position: relative;
  transition: background .3s;
}
.hotel-coupon__code a::after{
  content: "";
  background: url(/cmn/icon/icon_launch_white.svg) no-repeat center center / cover;
  width: calc(40vw / (750 / 100));
  height: calc(40vw / (750 / 100));
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

.stay-area{
  display: block;
  width: 100%;
  padding:  calc(8vw / (750 / 100)) calc(5vw / (750 / 100)) calc(5vw / (750 / 100));
  position: absolute;
  bottom: 0;
  left: 0;
  font-size:  calc(24vw / (750 / 100));
  color: #FFF;
  background: #062d91;
}
.tour-card li{
  box-shadow: 3px 4px 0px 0px #ccc;
}
.card-product{
  display: flex;
  justify-content: space-between;
}
.card-photo.card-photo__type4{
  width: calc(260vw / (750 / 100));
  flex-shrink: 0;
  height: calc(200vw / (750 / 100));
}
    
.card-item{
  flex: 1;
  padding:  calc(10vw / (750 / 100))
}
.card-title{
  font-size: calc(28vw / (750 / 100))
}
.card-price,
.card-dap{
  text-align: right;
}
.tour-card li .icon{
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  line-height: 2.0
} 

.tour-card li .icon span{
  margin-bottom:5px;
} 

.tour-card li .icon span::after{
  padding: 0 calc(5vw / (750 / 100));
  font-size: calc(24vw / (750 / 100));
  color: #FFF;
  text-align: center;
}
.tour-card li.iihotel .icon .iihotel::after{
  content: "いいホテル";
  background: #ce0845;
 
  display: block;
  margin-right: 3px
}
.tour-card li.family .icon .family::after{
  content: "家族";
  background: #F50A0A;
  display: block;
  margin-right: 3px
}
.tour-card li.bf .icon .bf::after{
  content: "朝食付";
  background: #0e7fb7;
  display: block;
  margin-right: calc(5vw / (750 / 100))
}
.tour-card li.dn .icon .dn::after{
  content: "夕食付";
  background: #2bbec0;
  display: block;
  margin-right: calc(5vw / (750 / 100))
}
.tour-card li.onsen .icon .onsen::after{
  content: "温泉";
  background: #be8349;
  display: block;
  margin-right: calc(5vw / (750 / 100))
}
.tour-card li.business .icon .business::after{
  content: "ビジネス";
  background: #555;
  display: block;
  margin-right: calc(5vw / (750 / 100))
}
.tour-card li.couple .icon .couple::after{
  content: "カップル";
  background: #ff4f00;
  display: block;
  margin-right: calc(5vw / (750 / 100))
}
.tour-card li.woman .icon .woman::after{
  content: "女子旅";
  background: #be4976;
  display: block;
  margin-right: calc(5vw / (750 / 100))
}
.other-link {
  width: 90vw;
  margin: calc(40vw / (750 / 100)) auto calc(60vw / (750 / 100));
 padding-bottom: 20px;
}
.other-link a {
  display: block;
  margin: 0 auto;
  padding: calc(20vw / (750 / 100));
  font-size: calc(26vw / (750 / 100));
  font-weight: 500;
  color: #FFF;
  background: #FF6600;
  text-align: center;
  text-decoration:none;
  border-radius: 6px;
  transition: 0.3s;
  position: relative;
}

.kenmin a {

  background: #49a8d7;
 
}


.other-link a:hover {
  opacity: 0.7
}
.other-link a::after {
  content: "";
  background: url("../images/arrow02.png") no-repeat;
  background-size: contain;
  width: calc(16vw / (750 / 100));
  height: calc(22vw / (750 / 100));
  position: absolute;
  top: 0;
  right: 3%;
  bottom: 0;
  margin: auto;
}
.tour-cardbox {
  margin: 10px auto;
  padding: 0.5em;
}
.tour-card * {
  box-sizing: border-box;
}

/* 縦積み*/
.tour-card {
  margin: 0 auto;
  padding: 0;
}
.tour-card>li {
  background: #FFF;
  position: relative;
  margin-bottom: 10px;
}
.tour-card.grid-line>li{
border: 1px solid #0366D6
}

/*スクロール*/
.tour-card.tour-card__side {
  margin: 0 auto;
  padding: 0;
  display: flex;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
.tour-card.tour-card__side>li {
  flex: 0 0 85%;
  margin-right: 0.5em;
}
.tour-card>li:after {
  content: "";
  border: 6px solid transparent;
  border-bottom: 6px solid #0366D6;
  border-right: 6px solid #0366D6;
  position: absolute;
  bottom: 0;
  right: 0;
}

.tour-card>li:hover {
  background: #DBEBFE;
  transition: 0.3s;
}
.tour-card>li a {
  display: block;
  text-decoration:none;
}
.card-dst__name {
  background: #009;
  text-align: center;
  color: #FFF;
  padding: 0.3em;
  font-size: 2.8vw;
}
.card-photo {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.card-photo>img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width:100%;
}
.port {
  display: block;
  width: 100%;
  padding: 0.3em;
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 2.8vw;
  color: #FFF;
  background: #009;
}
.card-photo::before {
  display: inline-block;
  background: #e62c36;
  font-size: 2.8vw;
  line-height: 1;
  font-weight: bold;
  color: #fff;
  padding: 6px 8px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.tour-card>li.OL .card-photo::before {
  content: "オンライン予約限定";
}
.tour-card>li.OLCC .card-photo::before {
  content: "オンライン・コールセンター予約限定";
}
.card-item {
  padding: 0.3em;
  /*border:1px solid #0366D6;*/
}
.card-icon {
  line-height: 1.3;
}
.card-title {
  margin-top: 5px;
  font-size: 4.2vw;
  font-weight: bold;
  line-height: 1.2em;
  color: #1A0DAB;
}
.card-point {
  font-size: 2.8vw;
  margin-top: 5px;
  padding-left: 1.0em;
  position: relative;
  color:#000;
}
.card-point:before {
  content: "◆";
  position: absolute;
  top: 0;
  left: 0;
}
.card-price .air_tour_code {
  display: block;
  font-size: 4.8vw;
  color: #C00;
  font-weight: bold;
}
.card-price .card-price__detail {
  display: block;
  color: #333;
  font-size: 2.8vw;
  font-weight: normal;
}
.card-price .card-price__detail:before {
  content: "（";
}
.card-price .card-price__detail:after {
  content: "）";
}
/* .card-price:not(.no-goto)::before {
  content: "GoToトラベル表示価格より最大半額補助";
  background-color: #C00;
  font-size: calc(22vw / 750 * 100);
  color: #FFF;
  padding: 0.3em;
  display: inline-block;
  margin: 3px auto;
} */
.card-dap {
  color: #333;
  font-size: 2.8vw;
}

.card-date {
  color: #333;
  font-size: 2.8vw;
}
.card-date:after {
  content: "出発";
}

#js-goTop{
	position:fixed;
	right:12px;
	bottom:12px;
	z-index:500;
}
.sp #js-goTop img{
	width: 50px;
}

.main-title img {
  width:100%;
}

#seachBox {
	margin:0 auto;
	border:3px solid #005baf;
}

#seachBox .formInner dt {
  font-weight:bold;
}

.grid-col5.campaign{
    width:50%;
    flex: none;
}